CODEWITHSUNDEEP
cssmedia-queries
WangHongjian
WangHongjian

Reputation: 383

-webkit-min-device-pixel-ratio gives a CSS validation error

I have following CSS definition:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .iconAnnotationGuideH {
        background-position: -456px -24px;
        background-size: auto 96px;
    }
}

When I submit it to http://jigsaw.w3.org/css-validator/ to validate, it will give me some errors.

Feature -webkit-min-device-pixel-ratio doesn't exist for media null ), (min-resolution: 2dppx), (min-resolution: 192dpi) { .iconAnnotationGuideH { background-position: -456px -24px; background-size: auto 96px; } }"

What should I do?

Upvotes: 0

Views: 1979

Answers (1)

misterManSam
misterManSam

Reputation: 24692

What should I do?

Absolutely nothing! The -webkit-min-device-pixel-ratio is not standard and will not validate. This is OK! Use the validator as a guide only.

-webkit-min-device-pixel-ratio will only be used by older, webkit based browsers. If you are not worried about old browsers then you can remove it, though it seems that Safari needs it. See browser support for min-resolution here. Look out for:

2 - Supported using the non-standard min/max-device-pixel-ratio

So it's ok to use this?

Yes, for legacy browsers and Safari.

From the MDN:

-moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

Note: This media feature is also implemented by Webkit as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

Tell me a story!

Here is the story from the w3c blog:

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.)

They all lived happily ever after.

The End

Upvotes: 3

Related Questions