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

[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.