CSS Best practices - Need advice
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi there! I need some advice on best CSS practices as the available information is very contradictory.

Requirements: support all current browsers from IE 9 and up.

  • Question 1) Should media queries contain "@media only screen (min-width..." or just "@media (min-width"?

The question is if to include the words "only screen" or not.

I have read that there is reduced or amplified browser support (especially on IE) regarding specifying or not the render device, due to old standards.
That some browsers actually ignore the media queries if the words "only screen" are used - or the opposite. What is the best practice to get the most browser support - to include "only screen" or not?

  • Question 2) Should media queries contain "min-width" and "max-width. E.g: (min-width : 768px) and (max-width : 991px) ..(min-width : 992px) and (max-width : 1336px)? Or just min-width be used like the following example?

@media screen and (min-width: 1366px) {
}
@media screen and (min-width: 1440px) {
}
@media screen and (min-width: 1600px) {
}

I have read that if min-width and max-width are used, with current modern phones that use pixel abstraction (many pixels equal one pixel), there can be a gap between 991px and 992px for example, since because of this abstraction 991.4 pixels could occur and so there could be a particular screen size without any media queries. Is this true? What is the current best practice?

  • **Question 3) "Mobile first". What is the recommended way to get the best support up to IE 9? Should I use approach A or approach B?

Approach A:

.myClass {
//Mobile stuff
}
@media (max-width : 320px) {
//Mobile stuff
}
@media (min-width : 321px) and (max-width : 480px) {
//Bigger Mobile
}
... bigger screens

Approach B:

.myClass {
//Desktop stuff
}
@media (max-width : 320px) {
//Mobile stuff
}
@media (min-width : 321px) and (max-width : 480px) {
//Bigger Mobile
}
...bigger screens

Even most sites recommend approach A, others say that approach B should be used to support IE 9. Or that if approach A is used, then certain polyfills should be added to support IE 9. What is the best recommended way given this restriction and which implementation do you recommend today in 2018? There is so much contradictory information.

  • **Question 4) What are the current standard polyfills recommended and how would the HEAD look like with any scripted conditionals for current best practices?

Thank you!

Tags
css

Crowdsource coding tasks.

2 Solutions


  1. Those queries mean different things. Specify "screen" if you don't want those styles to be applied when the page is being printed or rendered on something other than a screen. https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries
  2. If you want your styles to be applied in a specific screen size range, then use both min-width and max-width. If you want styles to only be applied above/below a certain breakpoints, then use one or the other. There's nothing wrong with either method, they're just features of the language and they're useful in different places. Here's an article describing the issue with fractional pixel values you talked about: http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem. This is only a problem if you have media queries that are directly on either side of a break-point and are supposed to be mutually exclusive. If that's the case, then you can use a number that's very close to the breakpoint you want, like 500px and 499.99999px, or structure your CSS rules so the media queries don't need to be mutually exclusive.
  3. Neither. Start with styles that work on every device without media queries, make sure text, navigation and form elements wrap correctly, then start adding media queries that improve the layout of the site on larger devices. Ideally, you shouldn't need any breakpoints at all. Most designs don't.
  4. What poly-fills you use depends on the functionality that your site requires to run. autoprefixer is good for increasing the range of browsers that your CSS will support. I use html5shiv pretty often for issues with older IE browsers. Also, moving certain client-side JS tasks (like code syntax highlighting) into a server-side build step can help make sites work better when JS isn't enabled.
Slang, thanks for the reply! Regarding (1) I already know that it is used to differentiate print from screen, etc. And I already visited that url. My exact concern is about this: "The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present." which is present on the link you provided. I saw that before. I couldn't confirm if that's true or to what browsers it applies, as the comment is from 2011.
georgefountain 3 months ago
If I were to hide style sheets from older user agents, then I would have to use the "desktop first" approach, instead of the "mobile first" approach - else on older user agents the latest queries (desktop) would be ignored as they would be inside media queries. Else I should use "mobile" first but avoid the "only" word on the queries.. or just avoid the "screen" all together. You see my point? So what is actually recommended? Not sure all this applies to IE 9.. If not I guess that commend could be disregarded. That is part of the question..
georgefountain 3 months ago
Regarding 2: I also already read that conversation from stackoverflow. This is how my question arised. Media queries are always mutually exclusive, you don't want the same properties on tablet than mobile, etc. There are three ways of doing it: a) min only b) max only c) combine max and min. I have read that combining max and min is best for performance since if not the browser has to process many css queries. But the 0.x pixel issue seems like a bigger issue to me. This is why I asked. Have you actually seen pages that use the 499.9999px solution? Is that really the new standard?
georgefountain 3 months ago
Regarding 3: our design is really complex. We do need many breakpoints. Of course we start the css with shared css across all resolutions, but then we must add breakpoints were graphically needed. You are not really answering the question...
georgefountain 3 months ago
"Media queries are always mutually exclusive" - that's not true. Multiple media queries can be applied at the same time, depending on how you set them up.
slang800 3 months ago
"our design is really complex. We do need many breakpoints" - Post your design. I can probably give you better advice if I know what problem you're trying to solve.
slang800 3 months ago

1) Should media queries contain "@media only screen (min-width..." or just "@media (min-width"?

In my opinion you should always provide universal css, so you need a media without "only screen", that CSS will work in any device.

Then you can differentiate CSS for screen (PC, Laptop, mobile, tv, etc..) with a particular "@media only screen" and CSS for print "@media only print" or for speech, or etc..

A good advice is to use "px" to indicate size for screens, and "pt" for print. The use of relatives sizes like "%", "em", "ex", "vh" is always better because it works in any type of device.

**2) Should media queries contain "min-width" and "max-width. E.g: (min-width : 768px) and (max-width : 91px) ..(min-width : 992px) and (max-width : 1336px)? Or just min-width be used like the following example **
I never hard that pixel abstraction can cause problems with media queries, but in any case use only min-width, or only max width, there is no reason to worry for specific range, CSS are cascading, the next rule will overwrite the previous if both match.

*Question 3) "Mobile first". What is the recommended way to get the best support up to IE 9? Should I use approach A or approach B? **

I can't well understand your correlation with IE9, but as I know there are 2 patterns: mobile first and desktop first.

Your examples are correct but they don't follow none of both patterns.

You can use this approach to start mobile first (with only min-width):

.myClass {
    //Mobile stuff
 }
@media (min-width : 320px) {
    //Mobile stuff
}
@media (min-width : 480px) {
      //Bigger Mobile
}
... bigger screens

or this approach to start desktop first (with only max-width)

  .myClass {
     //Desktop stuff
  }
 @media (max-width : 480px) {
    //Bigger Mobile
 }
 @media (max-width : 320px)  {
  //Mobile stuff
}
...smaller screens

Question 4) What are the current standard polyfills recommended and how would the HEAD look like with any scripted conditionals for current best practices?*

I don't like to call a polyfill a standard, it's an hack to use mordern standards on device that doesn't support it

Check there: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Personally I don't like hacks, I prefer to give always the proper CSS, scripts etc, supported by browser.
To provide always the best supported content for the browser I parse the user agent server side.
I use a library called UA-Parser https://www.uaparser.org/

Now I am working on an open source project called Yuaa https://github.com/nielsbasjes/yauaa, that is an awesome Java library to parse the User agent, and I am going to release a .NET Version.

This is my approach, there are different techniques, no one can be called best or standard.

Why I prefer parsing user agent?

I used for many years CSS hacks and polyfills, but doesn't matter how the code is good, you will always find a device where your code dosen't work and then you have to deal with your customer.

The most hard part then is identify the device without any info, sometimes if are lucky you get a screenshot from customer, then after having wasted many hours to fix the issue, you end up you can do nothing.

then polyfills cause trouble with HTML/CSS validation, with particular browsers or tools for Ease of access, to blinded users, etc...

If you parse the user agent you can always give a perfect HTML/CSS to end users. To modern device you give modern HTML/CSS with latest features. To old devices you give an fallback. To too old devices you invite to update the browser or use another devices. To unsupported or unrecognized devices you warn the end user that the site has not been tested with that device. You can log the info, and in case you want support it you know what to do.

Since I started using this approach, no customer has ever complained with me.

5) This is a my advice

Use a CSS compiler like .less or SASS, can help a lot to write better CSS. If you don't worry too much on standards and cross browser compability start from a framework like bootsrap.

Thanks! I didn't understand your advice for question 3. Could you clarify? You said "none of the above", but still your option a (mobile first) looks the same like what I did. How is it different? Thanks!
georgefountain 3 months ago
@georgefountain if you check better to start with mobile first I haven't used max-widh. In any case as I said in question 2 , never use both max and min in same query to avoid problems with px abstractions. If you start with desktop first you use the opposite (only max width)
Stefano Balzarotti 3 months ago
In any case I can't well understand what is the correlation between the two models and IE9. If you are adaption a desktop site to mobile you use desktop first. If you are starting from scratch usually mobile first is simpler but all depends on type and purpose of application.
Stefano Balzarotti 3 months ago
There's no such thing as "px abstractions", you're just getting your math wrong. There's nothing wrong with using both min width and max width. User agent parsing is a terrible and error-prone way to determine browser capability. LESS and SASS don't make your CSS better, they just make it easier to write. Use autoprefixer and careful testing to deal with targeting different browsers.
slang800 3 months ago
@slang800 px abstraction exist, I am sure about that, then I am not sure if is an issue, because I think browser round with media queries, to be honest this is the first time that I heard that can exist a gap in px, and I probably I god fooled by theory of @georgefountain. Yes I think you are right yiu can use bith min and max, but in any case use both min and max is never necessary, there 2 patterns as I know: mobile first using min, and desktop first with max, if you use both you aren't using none of both patterns. In my opinion that is not a best practice because its only confusing. User agent parsing, is not so terrible, I my opinion better than use CSS hacks, but that is only my idea, web is not perfect, full of on standard, you can chose what you want ti deal with that,
Stefano Balzarotti 3 months ago
you always deal with errors. LESS and SASS doesn't make the resulting css better, but makes the code really more understandable for the programmer, you avoid a lot of repeating code, you avoid syntax errors since will be compiled. In the end I think it's a best practice. This is my opinion.
Stefano Balzarotti 3 months ago
The only issue that I know of pixel abstraction, because I experimented, is with canvas and svg, if you resize elements rounding the values, on devices with high dpi, you'll lose the proportion. So In that case keep decimals is important. At the question:" could occur and so there could be a particular screen size without any media queries. Is this true" I answer: I doubt this case can occur, never heard that. But at the question "What is the current best practice?" I think my answer is still valid.
Stefano Balzarotti 3 months ago
Thanks @stefanoBalzarotti! Yes pixel abstraction exists. Maybe not with that name, but it occurs and it can be verified by searching for this issue. Not sure what is the best way to handle this issue. Some pages recommend using min AND max to make the browser ignore parsing unneeded queries and maximize speed. Not sure how many ms would be gained by this - most likely insignificant? On the other hand, just using min, or just using max would prevent the px gap issue. ...so this is why I asked for a recommendation- on what is today's best practice. Thanks
georgefountain 3 months ago
You don't need to worry about speed, the time spent for parsing rendering is not significant compared to the time used to download the css, or in any case ti complete the http request, minify the css can help. Maybe only some old and very cheap android phone can have some issue with parsing speed. There are many other best practices to improve page speed that I don't explain here.
Stefano Balzarotti 3 months ago
Yes, I am familiar with page optimization practices (I already minify css and gzip it, etc). So I guess we could consider the recommendation of using min / max combined a bad approach for nowadays devices...
georgefountain 3 months ago
Any idea about this advice from 2011 on stackoverflow, which is related to question 1?: ""The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present. As there is no such media type as "only", the style sheet should be ignored by older browsers." - https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries. 2018, given we want support just for IE 9 and upwards (no IE 8) is this advice still valid? Or do you still recommend not using any device and just going with @media (min<...)?
georgefountain 3 months ago
IE9 supports media queries, so the use of only is useless to hide queries from IE9. IE6-8 don't follow the specification correctly so that tricks don't work. It is useful only to hide queries from chrome <21, Firefox < 3.5, safari < 4 and Opera < 9.
Stefano Balzarotti 3 months ago
Thank you, Stefano! You really made everything much more clear :)
georgefountain 3 months ago
View Timeline