This is driving me nuts - who has a css3 media query that actually validates as css3? I've tried several, including Chris Coyier's, with no luck, and I'm validating here:
http://jigsaw.w3.org/css-validator/validator
I've made sure I'm validating under css3, too. What am I missing?
Edited to add:
Here's the code I'm putting in the validator, verbatim from Chris' site:
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
Here's the error the validator gives:
Feature -webkit-min-device-pixel-ratio doesn't exist for media null ), (min-resolution: 192dpi) { /* Retina-specific stuff here */ }
You're using a vendor prefix in the Media feature: -webkit-min-device-pixel-ratio. CSS properties with prefixes validate in the CSS validator (there is a setting to make them errors or warnings), but media features don't. This is probably a bug in the validator.
Related
Client has the following display settings on Windows Surface. He is seeing a website quite differently that to what I am seeing. What CSS media query can I use to be able to make adjustments to allow for these specific settings
I would start with:
#media only screen and (min-width: 2736px) and (min-height: 1824px) and (orientation: landscape) {
...
}
You can also detect it via JS.
Read this: How to check if device is Windows Surface Tablet and browser is chrome or IE
And if it's a Surface, add some CSS class dynamically to the appropiate elements.
I am using Bootstrap 4 but I need a more specific style for mobile so I created #media and it doesn't work in Firefox. Why?
#media only screen and
(max-width:768px) and
(-webkit-min-device-pixel-ratio:0) and
(orientation : portrait) {
}
Its located in mobile.css.
Going to hazard a guess it's because you're using -webkit-min-device-pixel-ratio:0 in your #media rule - Chrome and Safari are both Webkit based browsers, whereas Firefox and Edge are not, so they'll err on the side of caution and just not apply the rule.
I'd remove that test entirely from your media query to be honest, MDN advises against using it (https://developer.mozilla.org/en-US/docs/Web/CSS/#media/-webkit-device-pixel-ratio) and there is no equivilent for Firefox (https://developer.mozilla.org/en-US/docs/Web/CSS/#media/-moz-device-pixel-ratio)
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?
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
I recently asked a question about how to use media queries while supporting fallback for older browsers that don't support them. The only answer (while it works) was to use javascript such as adapt.js to determine which stylesheet to load.
I have been tinkering around and realized an unbelieveably simple solution that worked for me in IE7 anyways, was the following:
.wrapper{width:1024px;}
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 1024px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 900px){
.wrapper{width:900px;}
}
The above is just a really simple example. When I fiddling around I noticed if I specified a default value for .wrapper IE7 rendered it and ignored the media queries. In Chrome/FF/Safari it used the media queries css. This leads me to think this can be a compatible workaround to javaascript but I'm not sure of any ramifications whether browser compatibility or SEO.
Is this a bad way to implement and will it have any compatibility issues? I like the idea of having all css in one file.
Any thoughts would be appreciated, thanks!
Your ordering of max-width media queries means that by the cascade, this rule becomes totally unnecessary; you can remove it unless you intend the styles in this rule to be different than your first rule which doesn't sit in its own #media block:
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
Besides that, I don't see any ramifications or compatibility issues. It's pretty much how media queries with #media rules are meant to be used.
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark