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.
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.
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'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
Is anyone aware of a method of feeding the Kindle Fire (ebooks) a separate style-sheet? One that would not be read by iBooks (iPad)?
I am aware of the method (below) that allows you to target the old Kindle
<style type="text/css" media="amzn-mobi">
p.firstline {margin-top:20px;text-indent:-40px}
p.line {text-indent:-40px}
</style>
But I'm looking for a way of targeting Kindle Fire only.
cheers
According to the George Benthien you can use #media amzn-kf8 for Kindle Fire. Hope this helps.
Those media queries apply only to eBooks, it doesn't work for HTML.
I was looking for web solution, and resorted to device sniffing via JS.
This is what I have done with jQuery:
if( /Silk/i.test(navigator.userAgent) ) {
$('html').addClass('kindle');
}
And then in CSS:
html {font-size:143.75%; }
html.kindle{font-size:112.5%}
From what I've read Kindle/Fire uses a webkit browser so it is pretty standard compliant ( a list of supported HTML and CSS for Kindle can be found here: kindleformatting.com/book/files/KindleHTMLtags.pdf)
You could do the reverse and target Safari Mobile and make certain elements display differently in Safari Moble. (iPad)
#content { float : left; }
[if SafMob]#content { float : none; }
More information on conditional css can be found here. But I think you're out of luck on targeting the Kindle specifically, unfortunately.
Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css #media styles?
#screen
{
div { background-color:red; }
}
#handheld
{
div { background-color:lime; }
}
<div style="width:100px;height:100px"></div>
Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.
Could this be what you're looking for?
Web Developer extension for Chrome
The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:
#import url("handhelds.css") screen;
Ilya on Stackoverflow wrote this answer, I found it easy and useful:
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
That's all!