За вас изучили Web Almanac за 2021 год и отобрали наиболее интересные тренды! Сегодня гвоздь программы — CSS.
CSS — это один из трех столпов, на которых стоят все без исключения веб-сайты. Еще два (их мы коснемся чуть позже) — HTML, язык разметки, определяющий структуру страницы, и JavaScript, мощный язык программирования, позволяющий делать сайты интерактивными. Казалось бы, какие здесь могут быть новости! Тем не менее, CSS непрестанно развивается и, вероятно, все еще может удивить.
Итак, поехали!
1. По сравнению с 2020 годом доля Sass возросла на 3% (с 34% до 37%), а Less напротив теряет популярность.
При этом доля классических .css файлов остается на прежнем уровне, порядка 45% веб-мастеров предпочитают именно их.
2. Невероятно, но факт: в 2021 году антирекорд по наибольшему количеству подключенных css-файлов составляет 2,368 против 1,379 в 2020 году.
Не будем афишировать, какой именно сайт умудрился так сильно проштрафиться, но заклинаем вас: ни в коем случае не допускайте на своих ресурсах чрезмерного количества запросов к файлам. Объединение и минификация CSS не только поможет ускорить загрузку страниц, но и позволит вам гораздо эффективнее использовать потенциал сервера!
3. Как видно, WordPress по-прежнему не сдает свои позиции, а Bootstrap проникает все глубже и потихоньку становится стандартным фреймворком для верстки веб-страниц: перед вами список самых популярных CSS-селекторов за 2021 год.
Мы с радостью отметили тэг sr-only-focusable, это функция обеспечения доступности, внедренная в Bootstrap. Тэг заставляет элемент располагаться вне экрана, но при этом он остается доступным для слабовидящих пользователей при озвучивании текста на странице.
4. Ничего удивительного: чаще всего веб-мастера задают цвета элементов через классический формат #RRGGBB.
Несмотря на большое количество форматов цветовых значений, синтаксис #RRGGBB, который используется со времен Netscape 1.1, по-прежнему используется в половине всех цветовых деклараций. Новинка CSS, сокращение #RGB, заняла лишь второе место.
Отрадно, что вместо «нулевого» альфа-канала разработчики прибегают к значению transparent. А кто-то до сих пор пользуется классическим namedColor. Возможно, для сайтов без претензии на проработанный дизайн это всё еще допустимый подход.
5. Использование цветового пространства display-p3 остается таким же ничтожно малым, как и в 2020 году.
Возможно, потому что на данный момент оно поддерживается только в Safari (как настольном, так и мобильном). Его использование для настольных компьютеров и мобильных устройств увеличилось примерно в три раза, до 90 и 105 страниц, соответственно. В тех случаях, когда использовалась функция color(display-p3), на то были веские причины: 79% цветов, выраженных с помощью display-p3 на мобильных устройствах, были цветами, которые не могут быть представлены в цветовом пространстве sRGB. Пока функция color() не станет более широко поддерживаться браузерами, веб останется в sRGB, которое позволяет отображать только две трети всех цветов, которые на самом деле могут отображать экраны.
6. На одном из сайтов CSS-файл для десктопов загрузил 6 088 PNG-изображений.
Мобильная версия сайта добавила сверху еще одну картинку, доведя общее количество PNG до 6 089. Мы надеемся, что все они были маленькими и цветоиндексированными, что могло бы спасти эффективность сайта (но, скорее всего, разработчик чересчур увлекся и забыл о здравом смысле).
Какие выводы можно сделать?
CSS стабилен, но при этом продолжает планомерно развиваться. По сравнению с прошлым годом изменения не слишком-то кардинальные. Но это вовсе не плохо.
Стабильность — не признак застоя в CSS. Новые методы верстки набирают силу. Внедряются технологии, пришедшие в CSS из препроцессоров. Важно понимать: все изменения должны быть постепенными, а не внезапными. Дополняющими, а не разрушительными. Ведь именно этого мы ожидаем от любой зрелой технологии, не так ли?
Пока что слишком рано подводить итоги развития CSS за 2022 год. Но уверены, в свежем отчете удастся найти немало интересного.
А какие из этих трендов понравились вам? Расскажите в комментариях!
