Revert mobile-first media queries and remove respond.js

[paulirish]

IE6-8 require respond.js to act as a polyfill because H5BP uses mobile-first media queries.

I'm not convinced mobile-first media queries are best.

1. Clearly they have this extra cost for IE baked in.
2. Secondly, it's a little awkward, as a developer, to write your styles mobile first.

What mobile browsers (in use, currently) do not support media queries? Moreover, of the ones who don't, are there browsers that don't scale the content to somehow adapt to the small screen size?

I don't know enough of the Blackberry/Nokia product line to know what's up on this front. But I have a feeling the mobile-first MQ setup is a lot of work. And the payoff is not worth the effort.

[mathiasbynens]

Here’s why mobile first is awesome: http://www.mediawiki.org/wiki/Athena

[wjcrowcroft]

Don't suppose... was there any consensus on this?

I guess it's not something with a one-size-fits-all solution, and I should probably write some CSS instead of procrasturbating over the NVP vs. WVP issue, but would love to hear if there'd been any updates.

Great thread though!

[data-enhanced]

Great discussion.

Regarding the idea of including an ie.css, thereby removing the need for respond.js --- I understand and appreciate the goal of having only one stylesheet for all browsers. I've tried the mobile-first respond.js approach. But as we're weighing the options here, I'm liking the idea of dropping respond.js and simply providing legacy IE with desktop styles within a conditional comment.

Let me make sure I have the picture right --

1. Instead of linking respond.js at the end if the document within a conditional comment for IE 6-8 not mobile ...
2. Provide the IE 6-8 stylesheet in a conditional comment following the main stylesheet. This stylesheet will provide the desktop styles from the main stylesheet, which IE6-8 would have missed because they were tucked away under the main stylesheet's media queries.

If I understand correctly, this approach has these pros and cons:

• It adds one http request for IE 6-8 browsers only, while saving these browsers the javascript overhead of respond.js
• It lets the basic styles (normalize, typography, etc.) cascade from the main stylesheet, then brings in the desktop styles after
• It allows me the flexibility to adjust the IE conditional comment and the IE stylesheet to support whichever versions of IE 6-8 I desire. (If I don't support IE 6, I can write the conditional comment for only IE 7-8, and IE 6 would receive only the basic styles from the main stylesheet.)

Am I on target with this?

[data-enhanced]

Wait. I just followed the link provided in the above discussion to Jeremy Keith's post http://adactio.com/journal/4494/

His solution, which addresses what I just laid out above, but more elegantly, is to have two files:

• global.css to provide base styles for all devices, including mobile-first styles
• layout.css to provide layout for WVP browsers

Then he uses a media query and a conditional comment to provide layout.css only as needed:

• a media query for modern WVP browsers
• a conditional comment for IE 6-8

His code snippet with my comments:

<!-- Base styles for all browsers -->
    <link rel="stylesheet" href="/css/global.css" media="all">
<!-- Layout for wide browsers -->
    <link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!-- SAME layout file for IE 6-8 -->
    <!--[if (lt IE 9)&(!IEMobile)]>
        <link rel="stylesheet" href="/css/layout.css" media="all">
    <![endif]-->

The advantages here seem significant, as this approach:

1. provides base styles to all browsers
2. keeps the more weighty CSS layout file from being requested by NVP browsers at all
3. requires just one layout.css file (no copying and pasting into a separate file)

In addition, this approach still allows me to adjust the conditional comment to support only the versions of IE I choose to support with layout. For instance, if I do not wish to provide layout for IE 6:

<!-- layout file for only IE 7-8, excluding IE 6 -->
    <!--[if (gt IE 6)&(lt IE 9)&(!IEMobile)]>
        <link rel="stylesheet" href="/css/layout.css" media="all">
    <![endif]-->

Moreover, if I want more precise media queries for mid-width devices (like tablets) and ultra-wide monitors, I can easily take and adjust this approach to cover such cases. The easiest way may be to include tablet-width layout within a media query inside global.css and then address mongo-width layout within a media query inside the layout.css file.

[scottkellum]

Maybe you mean small screen first? Setting up media queries before designing is a bad idea IMO. Also, designs should work without media queries first, usually on a fluid page that works well on small screen. second media queries can be bundled in at design breakpoints, not device breakpoints. Mobile first doesn’t really matter at this point, but optimization should always be considered.

[necolas]

@scottkellum

Maybe you mean small screen first?

Already gone over that in one of the first comments: https://github.com/h5bp/html5-boilerplate/issues/816#issuecomment-2443277

Setting up media queries before designing is a bad idea IMO

That hasn't been suggested. H5BP only includes placeholder MQs that we say should be customised to the needs of the design.

designs should work without media queries first

This is already how H5BP works.

second media queries can be bundled in at design breakpoints, not device breakpoints

We already recommend this and it has been discussed in various issues, including by Paul above: https://github.com/h5bp/html5-boilerplate/issues/816#issuecomment-2513066

[matteolc]

@davidcochran Following Jeremy Keith's post http://adactio.com/journal/4494/ and your explanation, you guys say that "global.css is to provide base styles for all devices, including mobile-first styles", while layout.css is "to provide layout for WVP" and is used by media query non-compliant browsers, so if I understand correctly no media queries written there.

Questions: Why should a media query non-compliant browser download a stylesheet with media queries? Wouldn't it be more clean/elegant to specify media queries only in the css files that gets downloaded by browsers which understand media queries (layout.css)? Wouldn't it be cleaner to patch IE's inability to understand media queries in a specific IE stylesheet? This way the day we'll ditch support for IE LT9 (I still consider IE8, but older? nah..), we'll just remove the css and the conditional statements around it.

I personally find @necolas (http://nicolasgallagher.com/mobile-first-css-sass-and-ie/) suggested method more clean & easy to deal with -but it assumes one uses SASS, and I wouldn't know the performance hit of all those @import.

core.css Normalization, typography, and grid (or gridless or frameless whichever one prefers) styles. No media queries.

layout.css @media (min-width:320px) { @import "320-up"; } @media (min-width:480px) { @import "480-up"; } @media (min-width:780px) { @import "780-up"; } @media (min-width:960px) { @import "960-up"; } @media (min-width:1100px) { @import "1100-up"; }

ie.css @import "320-up"; @import "480-up"; @import "780-up"; @import "960-up";

What do you guys think? Hopefully I haven't got anything awfully wrong!

[data-enhanced]

@matteolc

@necolas's SASS solution is a nice one, and there are folks working on analogous procedures for users of LESS.

But H5BP can't yet depend on everyone using those technologies -- and probably can't until CSS is remade to work like SASS or LESS. (Which would be great!)

Meanwhile, for non-SASS/LESS users ... the two-CSS-file solution is just really straightforward -- 1. global styles for all browsers (with everything needed by NVP browsers) and 2. desktop styles which address anything needed for IE6-8.

Because legacy IE simply ignores what's behind media queries, I can use those same two files to address browsers that do understand media queries. I can tuck layout for tablets behind a media query in global.css, and layout for extra large screens behind a media query in layout.css. IE6-8 will never know these were there.

Of course ensuring that nothing essential for IE6-8 is hidden behind a media query takes planning, but that's par for the course.

This strikes me as relatively elegant in these ways:

• does not require developers to be using SASS or LESS
• only requires maintenance of two files
• provides all styles needed by IE6-8 in a very normal way, without the extra burden of respond.js
• nothing's stopping me from including the media queries I need for modern browsers

Everybody's needs are met, and I've burdened IE6-8 as little as possible, leaving them free to live or die at their own pace.

[data-enhanced]

@matteolc

But then again -- reading you more closely now I think -- if one were to take your method and combine it with the new H5BP build script, which will inline all of the imported CSS files prior to production ...

That'd be pretty darn elegant. Except you can reduce HTTP requests by importing core.css along with your media queried styles in each case.

Which would give us something like:

modern.css -- everything needed for modern browsers

• import core.css
• import all media queried styles

legacy.css -- everything needed for IE6-8

• import core.css
• import all styles through 960

Advantages

• would be easy to do with the help of the build script
• we're not having to create separate special CSS files. We just import them differently.
• it saves us from burdening IE6-8 with respond.js
• it provides exactly one stylesheet to modern browsers, and exactly one stylesheet to legacy IE browsers (one HTTP request in each case)

[matteolc]

@davidcochran Ah, you highlighted the advantages better than me! :)

• We just import them differently. Elegant, isn't it..?
• It saves us from burdening IE6-8 with respond.js. Yes yes yes. I am personally against the usage of additional js just to cope with non compliant browsers.

And yes, if production files can be built by inlining imports, I couldn't ask for more..

So that would be, hamly speaking:

-# Layouts for MQ-capable browsers = stylesheet_link_tag "modern", :media => "(min-width: 320px)"
-# Serve a stylesheet without @media declarations for the oldies, and skip serving it to IE mobile /[if (lt IE 9)&(!IEMobile)] = stylesheet_link_tag "legacy"

with:

modern.sass

@import "core" @media (min-width:320px) { @import "320-up"; } @media (min-width:480px) { @import "480-up"; } @media (min-width:780px) { @import "780-up"; } @media (min-width:960px) { @import "960-up"; } @media (min-width:1100px) { @import "1100-up"; }

legacy.sass

@import "core"; @import "320-up"; @import "480-up"; @import "780-up"; @import "960-up";

Am I on track?

With the @imports you suggested and by inlining in production we are saving 1 further request compared to my original suggestion.

[matteolc]

Actually, I think I am going back to:

/ Core layout (no media queries) = stylesheet_link_tag "core" / Layouts for all viewports (with media queries) = stylesheet_link_tag "responsive", :media => "(device-width: 320px)"
/ Serve a stylesheet without @media declarations for the oldies, / skip serving it to IE mobile /[if (lt IE 9)&(!IEMobile)] = stylesheet_link_tag "static"

That's because IE8 will download responsive.css, thus if i place the same @import there as there is in static.css, there's duplication. In fact, the :media => "(device-width: 320px)" might not be that necessary after all..

[data-enhanced]

Having just ready Juriy Zaytsev's examination of the performance hit caused by unused CSS selectors, such as selectors included for legacy IE (see note 13, and then the summary) ...

I wonder if this doesn't reinforce the two-stylesheet approach, whereby styles for legacy browsers that don't understand media queries are provided in a separate stylesheet -- typically provided to IE 6-8 with a conditional comment. Whether you call the second stylesheet ie.css, legacy.css, desktop.css, or what have you ...

If we can work up good ways to use a tool such as SASS or even the ANT build script to make a two-stylesheet approach more easily maintainable, we now have clear evidence of further benefits: besides saving the need for respond.js, it leaves us with trimmer stylesheets and promises snappier web apps.

[necolas]

I'd like to propose this solution...which is to provide no default solution (because there is none):

1. Remove respond.js from the Modernizr package in H5BP.
2. Create a Wiki page to document some of the more popular ways to approach "mobile first" development (and which ones cater for legacy versions of IE). People can refer to this when deciding which solution best fits their project requirements.
3. Optionally, remove the placeholder MQs from the default CSS.

[nimbupani]

Agreed with your solution @necolas +1 last item on the list too.

[bradfrost]

@necolas I think that a wiki page would be a great way to articulate these many shades of gray. As for the last point, I think including device-specific dimensions is definitely dangerous, but it's still beneficial to include examples to assist syntax and spread awareness of a great technique. Perhaps changing the dimensions to something less device-specific and possibly em-based (perhaps min-width: 35em?) would move things in the right direction.

[necolas]

@bradfrost We mention in the comments that they are placeholders which should be modified as the content requires (although I thought those comments were more obvious than they actually are).

However, I'm not sure using em units would make much difference. I see a lot of sites that use style.css (untouched) as their base css, leaving the empty MQs in there doing nothing, even if they go on to use MQs elsewhere in their code. I thought it would be better to move away from including "dummy" or "placeholder" code where possible, and in this particular case, significant code that isn't going to work cross-browser out of the box.

[bradfrost]

@necolas Yeah if you're seeing enough people just leaving them in there without touching them then perhaps it is better to remove them altogether. If they do stay, I'd still recommend changing the 480px and 768px to dimensions that are a bit more ambiguous in order to break the device-specific mental model.

[sturobson]

@necolas I totally agree with @bradfrost about changing the px based MQs to em based. My reasoning for this became a blithering paragraph of idiocy which really just repeated Brad's last sentence regarding ambiguity and device-specific breakpoints. As for the wiki, a great idea :D

[tchalvak]

I think that default media queries in the css are a great tool. If people are just using the boilerplate css without modification (and then making their modifications in a separate block of css), then that's a good reason to comment out the media query blocks due to the potential added overhead of unused media query blocks, but removing them altogether and relying on an external document to convey them as defaults is a pretty major step down.

P.S. I think that taking away solutions that work (as much as anything in this crazy browser ecology we live in) -before- the alternative exists is putting the cart before the horse, so let's start the wiki page first (assuming it doesn't yet exist) and get that solid before removing compatibility tools, right?

[necolas]

I've tried to strike a balance between all the concerns that have arisen here. Thanks to everyone who helped and took the time to post opinions and ideas on this issue! I hope you'll all continue to help out in the future with suggestions and info.

[nimbupani]

:beer:

[Jaujon]

As of 2013-04-12, distributed version of HTML5BP Responsive is broken: media queries doesn't work on ie7 - ie8 while it does work for the online demo version!!!

[kevva]

@Jaujon, there is no media query support in IE7 and IE8. Check out https://github.com/scottjehl/Respond.

[danielhusar]

What about something like this?

<!--[if (gte IE 9)|!(IE)|(!IEMobile)]><!-->
  <link rel="stylesheet" href="responsive.css">
<!--<![endif]-->
<!--[if (lt IE 9)]>
  <link rel="stylesheet" href="all.css">
<![endif]-->

responsive.css and all.css are same, all.css just don't have media queries

Or something like this: sass:

@import "_small";
@media only screen and (min-width: 768px) {
  @import "_medium";
}

.lt-ie9{
  @import "_medium";
}