$box-sizing warning despite no support configured for legacy IE browsers

[sidneygijzen]

hi!

I'm currently working with zen grids 2.0.0-beta3 by using the Drupal Zen theme 7.x-6.x-dev branch. I'm a bit confused on how to properly configure to drop support for IE 7 and below.

I set the $critical-usage-threshold: 0.2;; since IE7 usage is 0.08 according to caniuse.com. When I generate my CSS however, I get the following warning:

WARNING: Setting $box-sizing to border-box will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.
         on line 171 of /usr/lib/ruby/gems/1.8/gems/zen-grids-2.0.0.beta.3/stylesheets/zen-grids/_grids.scss, in `zen-grid-item-base'
         from line 51 of /vagrant/public/<sitename>/www/sites/all/themes/<themename>/sass/layouts/_responsive.scss
         from line 17 of /vagrant/public/<sitename>/www/sites/all/themes/<themename>/sass/styles.scss

I also experimented with setting the $browser-minimum-versions to: 'ie': '8' to enforce a minimum version, but that doesn't make a difference...

Used config:

• Compass: 1.0.1
• SASS: 3.4.9

Can you point me in the right direction? Thanks!

[nikolaosinlight]

I am having the same issue and have had it for quite some time. Did you ever find a solution for this. It's extremely annoying.

[sidneygijzen]

I unfortunately didn't find any solution for this yet.

[nikolaosinlight]

Thanks for replying. I get the desire to abstract the critical usage threshold but I don't really get how it works in the real world such as say if I just wanted to support IE8 up and most other modern browsers?

The docs are totally obscure as to how to go about setting things up to accomplish that which I think is a very practical thing to want to be able to do. Saying I want to support more than 0.08 browsers make little sense unless I am missing something.

In the end, I guess I could live with the setting if it didn't spew every time the SASS files were modified.

I searched and didn't find much help other than you having the same issue. Doesn't anybody have a clue on how to solve this?

[chriskinch]

The solution that worked for me was to apply this:

 $zen-box-sizing: "universal-border-box";

Found this from the Zen-Grid docs and it described my setup:

If border-box is applied to all elements with a ruleset similar to * { box-sizing: border-box; } (don’t forget the vendor prefixes!), you can prevent Zen Grids from outputting redundant box-sizing rules by setting $zen-box-sizing to universal-border-box.

Ref link: http://next.zengrids.com/reference/grids/#zen-box-sizing

I think it's something to do with Zen-Grid applying redundant box-sizing rules for older IE browsers that in turn presumes that you want support for those versions. Hope it helps!

[sidneygijzen]

Thanks for commenting!

That would indeed work. However, it also assumes then that you're explicitly applying * {box-sizing: border-box; } somewhere else in your SCSS.

The warning originates from this function, which should be skipped (?) when setting the minimum browser version to at least IE8.

[mustanggb]

As it says in the docs:

//
// Border-box support for IE 6/7
//
// IE6-7 don't support box-sizing: border-box. We can fix this in 1 of 3 ways:
// - Drop support for IE 6/7. :-) Set $critical-usage-threshold to a value high
//   enough to drop IE7 users.
// - Install the box-sizing polyfill and set the variable below to
//   the absolute path URL to the boxsizing.htc file.
//   @see https://github.com/Schepp/box-sizing-polyfill
//   $box-sizing-polyfill-path: '/path/to/boxsizing.htc';
// - Use the same CSS unit for grid and gutter width in resonsive-sidebars.scss
//   (use px for both or use % for both) and set:
//   $box-sizing: content-box;
//

Personally I prefer the first option of just dropping IE 6/7, increasing $critical-usage-threshold to .3 seems like enough to achieve this.

$critical-usage-threshold: .3 !default;

[JohnAlbin]

We've removed the Compass support module which was still adding IE 7 support by default. The new optional support-for() module will output IE6-7 rules only when you ask for it, and not by default.