IE 11 not recognising variables?

[starchild]

I'm checking a build in IE 11 (face palm) and can see things like var(--color-primary-lighter) and auto-sized-grid not working.

I notice in auto-sized-grid the fallback is 3 - which I'm guessing will explain why the grids are showing at 33% width.

Is IE11 really that incompatible? Or is something else at play here?

[sebastiano-guerriero]

The main color variables work in all browsers (it requires the posct-css-variables plugin). The Color Themes are not supported in older browsers (data-theme="themeName").

https://codyhouse.co/ds/docs/framework#css-variables

The auto-sized grid is based entirely on CSS Grid, therefore it's not possible to create the same effect in older browsers (without using JS). You can use the fallback (3 cols) to set a custom grid in older browsers.

[starchild]

OK, I'm upgrading to v2 and after installing the above plugin (using npm install postcss-css-variables --save-dev) , I get:

npm ERR! code 128 npm ERR! Command failed: git clone --mirror -q https://github.com/CodyHouse/postcss-css-variables.git /root/.npm/_cacache/tmp/git-clone-1483010b/.git npm ERR! fatal: could not create leading directories of '/root/.npm/_cacache/tmp/git-clone-1483010b/.git' npm ERR!

npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2019-09-12T02_34_21_608Z-debug.log [r

[starchild]

** to get around this, I just loaded the files manually via ftp, and gulp watch seems to work ok now.

[starchild]

ok, well - that post-css things fails miserably when it comes to IE11 and basic layouts. I'm building a somewhat dynamic fallback for basic elements and will share my idea when I'm done.

As much as I'd like to ignore IE and pretend it doesn't exist, for some clients it can equate to 9% of their traffic, which can be a hell of a lot of money if ignored.

: sigh :

[claudia-romano]

Hi there, the post-css-variables plugin provides a fallback for CSS variables and works properly on IE11. If you are having issues with colors, then it could mean the plugin was not properly configured.

If you are using our gulp config file, please make sure you are serving the style-fallback.css to older browsers. You can read more about that here: https://codyhouse.co/ds/docs/framework#progressive-enhancement

About layout, CSS Grid is not fully supported in IE11. We do provide an accessible version of our components for older browsers as well (for example the auto-sized-grid component has a fallback included).

[starchild]

Hi,

Yes I'm using the fallback css but the grid still doesn't work. Even codyhouse.co doesn't render as it should in ie11, and I'm guessing it should as I can see a fallback css in your code.

Am I missing something?

[sebastiano-guerriero]

Hi 👋

We don't use a fallback on codyhouse.co because, given our target, we have almost no visitors using IE (yeah!). If you're referring to the component (auto-sized grid), we provide a fallback to have 3 columns on IE. For example, this is IE9:

https://www.dropbox.com/s/gi2ya5v0y2jepl4/Screenshot%202019-09-14%2012.21.37.png?dl=0

Unfortunately, it's not possible to create the same auto-sized effect in IE because Grid is not support, but you can edit the fallback at different breakpoints if you prefer.

I'm closing this issue because it's not specifically related to the framework.

Cheers

[starchild]

Hi,

Thanks for the reply. I hear you about the lack of a need for IE fallback in your industry , but I'm going to continue this thread for other professionals out there that want to use this framework in live production scenario and still require better IE fallback.

In our case, if we didn't find a fallback for the grid/column system, our clients would be losing nearly $1 million a year based on IE usage % and turnover.

As far as the auto-sized-grid yes we have already set fixed % width based on the different breakpoints and that will do just fine.

The basic column widths though definitely require a custom fix to make them work, and these are actually fairly minimal - I'll share what I've done once I'm finished, so that anyone else who needs some extra IE fallback can also use it.

Please don't get me wrong Sebastiano - I'm your biggest fan. It's just that as I said, if we are going to use this in production in our own system, across all clients, then we can't just ignore IE.

These are ecommerce sites and it would be like trowing 10% of everyone's income in the bin.

Thanks again and keep up the great work.

[sebastiano-guerriero]

Hi!

I understand it's constructive feedback, but please let me clarify an important point: I never intended there's a lack of need for IE support in general, and we did put a lot of effort to make sure our framework and components supported older browsers.

The Auto-Sized Grid is not the grid system of the framework. The grid system of the framework can be found here:

https://codyhouse.co/ds/docs/framework/grid-layout

If you use the .grid and .col classes, you create a grid that behaves identically in new and older browsers (IE9 included).

The Auto-Sized Grid is just a component based on a specific CSS Grid property (minmax function). In these cases, you can only provide a fallback for older browsers. If you're trying to create a similar experience for all browsers, you should use the framework grid system.

This is the only reason why I closed this thread: all feedback is welcome (and always helpful), but we're referring to a component, not the grid system of the framework.

I'd kindly invite to open a new issue if there's a bug related to the framework grid system. Given that the object ('IE 11 not recognising variables?') is not correct and could be misleading for other users.

Thanks :)

[claudia-romano]

@xcartmods comment deleted for inappropriate content.

[ghost]

apologies