Respond.js has some issues:

If we look at how we handle IE in the for non-layout CSS, you'll see that the $legacy-support-for-ie* variables will just inline a CSS hack. While that means that all browsers will download the IE hacks (a slight performance hit), it has the following benefits for authors:

  • Specificity is unchanged (if the hack is on the property, rather then on the selector)
  • IE bugs are abstracted away. If a Compass plugin's mixin knows about an IE bug, we don't have to know about it.
  • IE bugs are handled in context of the rest of our styles. Moving them to a separate file removes the context and makes it harder to maintain.
  • It's dead simple to use. As opposed to collecting all the IE bugs into a separate, IE-only CSS file.

What if we left respond.js in Zen, but defaulted it to being off? How do we handle media queries for IE8 and lower? We could leverage our existing $legacy-support-for-ie* variables and handle the IE problem next to the media query.

@media all and (min-width: 60em) {
  /* Desktop-sized layout */
}
.lt-ie9 {
  /* Repeated desktop-sized layout */
}

Once [#] lands after Sass 3.2, we could even make the solution more DRY.

@include respond-to(desktop) {
  // Desktop-layout
}

which could automatically output the CSS for both the desktop-sized media query andthe IE8 and lower desktop styles.

I'm really on the fence on this one. Opinions?

Comments

Well John.
First time using Zen for a little while, and the 7.5 branch is better than ever.

As much as I hate to admit it, IE8 and 7 need something better than respond.js.
I feel that conditional classes are best used to manage small individual 'hacks' rather that layout.
That said, I made use of them in a base them I built for fun.

http://drupalcode.org/project/thor.git/blob/refs/heads/7.x:/sass/layout....

But this method means that all browsers download a lot of CSS they don't need.

So i'm back to thinking that media queries should be used to load the layout stylesheets,
for the browsers that support them,
and IE8 and 7 would load the 'desktop' layout via a conditional comment.

+1 for turning off respond.js by default, i really like the method pointed out in the blog post, however I'm not sure whether or not we should load a conditional stylesheet, or use the inline conditional classes to do it. I guess it would be dependent on the actual amount of compiled CSS.

I made a suggestion in #1777912: Exclude ie8 media query that may lead to a solution. Here it is for brevity:

1. Disable respond.js
2.

$ie-layout: true !default;
$ie-layout-breakpoint: 980px;
// This is a standard media query mixin,
// with the option to add a layout for ie8 or lower
// It will bring in all min-width styles without a max constraint
// As well as any styles that meet the 980 threshold.
@mixin respond-to($min-width, $max-width: false) {
  @media screen and (min-width: $min-width) {
     @if $max-width {
       @media (max-width: $max-width) {
          @content
        }
     } @else {
       @content;
     }
   }
  @if $ie-layout and $min-width <= $ie-layout-breakpoint and (not $max-width or $max-width and $max-width >= $ie-layout-breakpoint) {
    .lt-ie9 & {
      @content;
    }
  }
}
// Here is sample code with the respond-to mixin in place,
// it will add standard mq styles, as well as a lt-ie9 class
// containing the same styles outside of the mq
#main {
  @include zen-grid-container();
  @include respond-to(980px) {
    $zen-column-count: 5;
    .content {
      @include zen-grid-item(3, 2);
    }
    .first-sidebar {
      @include zen-grid-item(1, 1);
    }
    .second-sidebar {
      @include zen-grid-item(1, 5);
    }
  }
}
// This would be ignored and no ie classes would be created.
  @include respond-to(480px, 979px) {
    $zen-column-count: 2;
    .content {
      @include zen-grid-item(2, 1);
    }
    .first-sidebar {
      @include zen-clear(); // Clear left-floated elements (#content)
      @include zen-grid-item(1, 1);
    }
    .second-sidebar {
      @include zen-grid-item(1, 2);
    }
  }
}

This is based off of the example in https://github.com/nex3/sass/issues/408#issuecomment-6086901 and is not fully tested. Sass 3.2 or later required.

The problem with this solution however is that there is a bug in the '&' selector that does not allow it to be set on base selectors, in order for it to work you need to nest the respond-to mixins inside another selector. (which is why it works here). But it's not a deal breaker.. writing:

#main {
  @include respond-to(980px) {
    margin-left: 2%;
  };
}

Gives the same output as writing this:

@media screen and (min-width: 960px) {
  #main {
    margin-left: 2%;
  }
}

Bug reference: https://github.com/nex3/sass/issues/286

Looks like breakpoint (discussed in #1524542: Add breakpoint mixins after release of Sass 3.2) has put a no-mqs option in the mixin.

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: true;
#foo {
  background: red;
  @include breakpoint(567px, $no-query: '.no-mqs') {
    background: green;
  }
}

And susy has a similar method, which adds the .lt-ie9 class https://github.com/ericam/susy/blob/master/sass/susy/_media.scss

$breakpoint-media-output  : false;
$breakpoint-ie-output     : false;
$breakpoint-raw-output: true;
#page {
  @include at-breakpoint(48em 12 ie8) {
    @include set-container-width;
  }
}

This tip/code cured all my IE/ response.js problems real quick:

.lt-ie9 {
  /* Repeated desktop-sized layout */
}

I recommend anyone using Zen to understand what that little bit of code is all about (see this and then look at the source of Zen to see how Zen implements). Imo, this technique is wayyyy more effective than messing with response.js and/or conditional stylesheets.

Version:7.x-5.x-dev» 7.x-6.x-dev

Moving off to 7.x-6.x.

Issue summary:View changes

Added an issue.

What about adding Breakpoint (which has a lot of cool features… ;)) as a requirement and using its built in No Query Fallback tool? https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks