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
Related
I am trying to make a website responsive with WORDPRESS, so when checking the website with different devices and using different browsers, every where the same css is used.
So I decided to use the following format to divide my website into 3 different section for normal pc, tablets and smart phones:
#media (min-width:767px){}
#media (max-width:766px) and (min-width:400px) {}
#media only screen and (max-width: 399px) {}
then for different browsers I am doing:
/*edge*/
#supports (-ms-ime-align:auto) and (max-width:400px) {}
/*chrome*/
#media (-webkit-min-device-pixel-ratio:0) and (max-width: 766px) and (min-width: 400px) {}
the problem is I cant make the same for opera and firefox, I mean I made this for firefox:
/*firefox
#supports (-moz-appearance:none) and (max-width: 399px){
#pg-4-0{
height: 1400px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
/*
#supports (-moz-appearance:none) and (max-width: 399px) {
#pg-4-0{
height: 1150px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
but it wasnt working correctly and I had to remove it. Is this correct way of implementing the responsiveness?
is there a better way to do this?
how can I do this for firefox and opera? (I made the website using wordpress: https://www.haagsehof.nl/)
Is this correct way of implementing the responsiveness?
is there a better way to do this?
Can't say if this is the best way to go about it but here's my advice: don't do browser detection. It's a cat-and-mouse game, you'll never see the end of it.
Back in the days when IE was a popular browser (eww), we had to do browser detection to apply custom "hacks" to make sure sites looked & behaved mostly the same on all major browsers - including Internet Explorer itself.
However, nowadays most major browsers follow the same web standards and so most CSS rules / properties behave pretty much the same way in every one of them so browser detection isn't really necessary anymore. What we do now is feature detection: check if the browser supports a given feature (eg. multiple background images), and if it doesn't then provide a suitable fallback.
Also, to make sure every HTML element behaves & looks the same way in most modern browsers (since each browser often has their own set of default CSS rules) independently of what screen resolution is being used you can use CSS resets which -as the name implies- resets the styling of all HTML elements to a consistent baseline. Personally, I prefer using normalize.css as it isn't as aggresive as CSS resets are and also includes a few useful rules.
Finally, here's a nice article from Google on Responsive Web Design that should help get you on the right track: Responsive Web Design Basics.
EDITED Aug 26th, 2015
Ok, this question might be a bit rough because this project is still in Dev stages so legally I am not allowed to share it yet to show my problem in real time.
The problem I am having is that I am building a site for a client and when we began the testing phases I passed every test except for iPad 4th gen. We then began to discover that all my code really looks monstrously large when viewed in ANY retina display (4th/5th gen, iPad air).
The problem isn't that the vh/vw properties aren't working, the problem is that suddenly 20vh (20% of the viewport height) is massive. I am using the padding of an inner container object to vertically center all content within its parent container by using padding-top: 20vh; padding-bottom: 20vh;.
I have been trying solutions here that involve targeting ONLY retina displays and none have worked at all. Heres what I have tried to target retina with...
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) { /* STYLES GO HERE */}
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0">
Problem is that doing all these techniques also targets iPad 1/2/3 as well for some reason and it is messing up my previously written code.
vh units are a newer css3 unit of measure so that older browsers are going to ignore them. So normally you are going to use a fallback with vh units. Something like:
.container {
height: 1024px;
height: 100vh;
}
Browsers that don't understand vh will skip it and use pixels.
However, Can I Use mentions that vh units are not fully supported until iOS 8. And it mentions, there is some "buggy behavior" in prior versions of Safari for iOS. It then provides as a work around to the issue, which may be useful.
So maybe this so called buggy behavior is what you are running in to.
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.
Which browsers already support some of these attributes?
http://dev.w3.org/csswg/mediaqueries4/
This one f.e. does not work on iOS7, iPhone 4S
#media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
#media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
#media (luminosity: washed) {
body {
background: #ffffff;
}
}
Here, on CanIUse, you can find updated and current support for many CSS properties. In this specific case, some of Level 4 Media are already supported even if in not standard way, such as:
"API for finding out whether or not a media query applies to the document"
"Method of accessing external device data (such as a webcam video stream)"
UPDATE 2022 JULY:
Chrome started supporting this feature from chrome version 104 but still Chrome for android and Safari for both iPhone and mac lacks the support.(No need to worry about IE since it support ended by Microsoft)
Now it's working at least on Firefox.
so now you can write media queries like following:
#media (width <= 30em) { ... }
no i think you cant because of the common unsupportable browsers such as firefox and opra as well as IE*!
this is some resources about it
Feature: Media Queries: interaction media features
PPK is generating some media queries support tables and has tests you can use yourself too.
The spec is still a draft, maybe try mobile Firefox as that has support for some luminocity via javascript.
MDN has per feature support tables for media queries. That seems to be the best option for this information.
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