Поддержка атрибута "media" для CSS-файлов, подключенных через API

Рейтинг: 9.0000  
На голосовании
Предложил Турчин Денис 23.01.2019 11:52:35

Поддержка атрибута "media" для CSS-файлов, подключенных через API

Google в своих рекомендациях по оптимизации сайтов советует разделять CSS-файлы, с помощью атрибута "media", например так:
<li nk href="style.css" rel="stylesheet">
<li nk href="print.css" rel="stylesheet" media="print">
<li nk href="other.css" rel="stylesheet" media="(min-width: 40em)">
Иными словами все медиазапросы из общих файлов стилей рекомендуется переносить в отдельные файлы и подключать отложено при определенных условиях.

Однако, у метода Asset::getInstance()->addCss() нет возможности задать атрибут "media" - все CSS-ки по умолчанию складываются в одну кучу, что приводит к необходимости грузить достаточно объемный итоговый файл стилей.

Идея в следующем:
  1. Внедрить в метод Asset::getInstance()->addCss() возможность указывать специфичный атрибут "media"
  2. Аналогичным образом доработать метод addExternalCss() для вызова в шаблонах компонентов.
  3. При объединении CSS-файлов группировать их по значениям данных атрибутов: все файлы, например, со значением media="print" объединяются в один файл, все файлы со значением media="blabla" - в другой и т.д.
Разумеется, наличие данного атрибута не должно быть обязательным, чтобы сохранить обратную совместимость. Просто хотелось бы получить инструмент для оптимизации стилей разрабатываемых сайтов.

Рейтинг: 0  
AndreyChursin 29.01.2019 16:37:03
Согласен, это было бы крайне удобно!
Рейтинг: -2  
Озерский Игорь 12.04.2019 16:07:04
Это можно решить как подключения ключевого css, назовем его
all.css

в нем прописываем media и директивы import.
@import url(red.css) (min-width:400px);
@import url(green.css) (min-width:600px);
@import url(blue.css) (min-width:800px);


На уровне битрикса это не нужно делать.