Рейтинг: 9.8902  
На голосовании
Предложил Турчин Денис 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" - в другой и т.д.
Разумеется, наличие данного атрибута не должно быть обязательным, чтобы сохранить обратную совместимость. Просто хотелось бы получить инструмент для оптимизации стилей разрабатываемых сайтов.
Рейтинг: 4.4552  
Новая
Предложил Голубев Владислав 21.10.2016 14:29:13

Дайте возможность указать где подключать CSS шаблонов компонентов

Google PageSpped ругается на все сайты на Битриксе в контексте того, что в шапке сайта подключается огромная объединённая и сжатая CSS. Согласно рекомендациям в шапке сайта нужно подключать только те CSS, которые нужны на первом экране. Но в Битриксе же все все css всех шаблонов компонентов подключаются исключительно в шапке. Нужно дать возможность в шаблоне компонента голосовать за место расположения CSS - Header/Footer. По аналогии с голосованием за композит. На выходе получим то, что требует Google - в шапке будут подключаться только те CSS, которые нужны для первого экрана, остальные соответственно будут подключаться в подвале сайта.