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!
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.
Say for example I had this:
#media screen and (min-width: 480px) {
.example {
background-color: red;
}
}
What if I view this page in Internet Explorer 8? Will it still color .example red even though the width is over 480px, or will it just ignore the stuff in the media query? (I can't test it because I don't have IE8 :P)
I've just tried it out in IE7/IE8 browser/document modes (IE10), and it completely ignores all CSS inside Media queries for me as I assumed it would do. .example turns out with a red background only in IE9+.
The only section in the specification I can find which is (probably) relevant to what actually happens here is the Error handling section.
I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:
#media screen and (max-width:768px){
/* CSS */
}
All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.
After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.
Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.
I had a similar problem with an external css file in ie10.
I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).
It doesn't solve all my problems, but it may be enough for yours.
#media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.
$(document).ready(function() {
var w = window.outerWidth;
var h = window.outerHeight;
window.resizeTo(w, h);
});
I had similar issue while using external css with media query. solved by loading css after html code.
You can target IE9 only with this fix:
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue;
}
}
I have a web page that is using media queries to target print media.
Like this:
#media print {
#user_profile h1 {
font-size: 16px;
margin-top: 10px;
}
}
When I try to print the page from the iPad, via AirPrint, the print styles are not applied.
Is #media print not supported by mobile safari?
If the other styles are without media query for screen, I think it will apply to print also.
Try adding to normal css a media query for screen,
Try to place all print css at the bottom to overwrite normal css.
#media print is supported since iOS 1.0.
However, Mobile Safari does aggressive caching of assets and it's possible that your modified style sheet is not fetched from the server. You may append a query string (e.g. styles.css?v=1) to make sure the file is reloaded.
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