We load a lot of CSS for IE in development mode
In Island , a modular structure is used in the development of the site. Logic elements consist of markup, styles and javascript files.
After the transition to such a structure, a couple of months everything was fine. Then, in IE, styles from different blocks began to disappear, and we realized that we were faced with the problem of all major projects - in IE9 and younger, no more than the 31st css file is loaded at once.
Changing the backend so that he would stick together the static on the fly and derive another logic specifically for IE was disproportionately labor-intensive. And I started writing a script that solves this problem.
The meaning of the solution is well known and successfully applied. For example, in Yandex on the backend, css files are imported in blocks of 31 pieces each.
')
At first I decided to optimize and load the next 30 css files in the first file with imports. But in this case, the first style took precedence over the rest. It periodically broke the layout.
The working algorithm was:
Demo .
For six months we have all debugged, and the script is ready to see the light. Just don’t use it on production - it’s great to slow down the rendering of an old woman in IE.
It is necessary to connect the javascript file to the page.
And after all the css files, write code that will be visible only in IE:
This script will increase the number of possible css'ok to 961. I hope that's enough for everyone.
After the transition to such a structure, a couple of months everything was fine. Then, in IE, styles from different blocks began to disappear, and we realized that we were faced with the problem of all major projects - in IE9 and younger, no more than the 31st css file is loaded at once.
Changing the backend so that he would stick together the static on the fly and derive another logic specifically for IE was disproportionately labor-intensive. And I started writing a script that solves this problem.
The meaning of the solution is well known and successfully applied. For example, in Yandex on the backend, css files are imported in blocks of 31 pieces each.
')
At first I decided to optimize and load the next 30 css files in the first file with imports. But in this case, the first style took precedence over the rest. It periodically broke the layout.
The working algorithm was:
- Remove all style files from document
- Generate style tags with 31 import.
Demo .
For six months we have all debugged, and the script is ready to see the light. Just don’t use it on production - it’s great to slow down the rendering of an old woman in IE.
How to use
It is necessary to connect the javascript file to the page.
And after all the css files, write code that will be visible only in IE:
<!--[if IE]> <script> fixIESheets(); </script> <![endif]--> This script will increase the number of possible css'ok to 961. I hope that's enough for everyone.
Source: https://habr.com/ru/post/171519/
All Articles