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.
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.
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I recently got started with LessCSS, and I've been having quite a bit of success in regards to how clean and readable my CSS has become. However, I don't think I'm using Less to its fullest advantage.
I'm now in the process of coding up my first fully-responsive site using Less, and I'm concerned with performance and speed. One thing to note is that I don't stick to a "breakpoint" methodology - I scale things up and down until they break, then I write CSS to fix them; which usually results in anywhere from 20 - 100 media queries.
I'd like to start using Less to nest the media queries inside my elements, such as the example below:
.class-one {
//styles here
#media (max-width: 768px) {
//styles for this width
}
}
.class-two {
//styles here
#media (max-width: 768px) {
//styles for this width
}
}
Through my initial testing, I have found that when reviewing the compiled CSS output - this methodology results in multiple (many!) instances of #media (max-width: ___px). I have scoured the internet, and haven't found anything that explicitly explains the performance implications of nesting/bubbling media queries.
Update 1: I realize that more CSS information results in a larger CSS file to download - but I'm not as worried about site load time as a sole metric. I'm more interested in the browser's handling of memory and performance after the DOM is ready.
Update 2 & Semi-Solution: I found this article which discusses the four main categories of CSS selectors and their efficiencies. I highly recommend the read which helped me sort out how best to tackle my over-media-query'd CSS.
So my question is this: after the DOM is ready, will having this many media queries in my compiled stylesheet affect load times & performance?
Its almost impossible to give you a totally accurate answer.
When asking about performance the typical answer is to profile it and see what you get. Fix the slowest part first, then repeat.
You can profile CSS selectors in the Chrome Developer tools:
Ultimately I don't think the media queries will have anywhere near as much impact on performance compared to even a slightly complicated selector.
You can see more information about writing efficient CSS here:
https://developers.google.com/speed/docs/best-practices/rendering
Also with regards to file size and repeated CSS, gzip almost completely nullifies this as the gzip algorithm works best with repeated data.
> also u can write like this :-
// breakpoints
#mobile: ~"(max-width: 767px)";
#tablet: ~"only screen and (min-width: 768px) and (max-width: 991px)";
#desktop: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
#desktop-xl: ~"only screen and (min-width: 1200px) and (max-width: 1350px)";
body{
background:black;
#media #mobile {
background:red;
}
}
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
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).