Комментарии 11
Из современных веб-технологий, CSS - наверное, самая активно развиваемая. За условные 10 лет прогресс просто фантастический (даже по сравнению с предыдущим десятилетием)...
Это, безусловно, радует))
Обратная сторона - порог вхождения, разумеется, остался очень низким ("не ЯП"), но вот полноценное освоение - задача далеко не тривиальная... Ещё и не для каждого ума подойдёт со своими абстракциями. Не даром же появились всякие CSS-in-JS...
Кое-что, конечно, выглядит как "поход на поводу" - нестинг, слои вот мне кажутся несколько надуманными (и куда же без костылей с !important)... Но интерфейсы усложняются - очень сложно порой бывает навести порядок в огромном количестве стилей. Так что пущай будет))
View Transitions API уже доступен в Safari TP, исправьте поддержку на soon =)
Понравилось ваше структурирование информации!
Начиная с уточнения года прямо в названии! (а то часто находишь в сети такую "современную" заметку, а потом оказывается что ей уже 10 лет).
И то, как информация разложена по полочкам.
Что хотелось бы улучшить:
- на тач-экране пример с "Resize Me" не ресайзится, а в примере CONTAINER QUERIES разделитель перемещается коряво, имхо мобильный интернет сейчас популярен и хочется чтобы примеры это учитывали;
- в примере VIEW TRANSITIONS кнопки "+", "-" маленькие и расположены так что в режиме 1х их не видно даже при скролинге;
- в примере SUBGRID потерялась картинка.
А в остальном статья порадовала - спасибо!
А ещё примеры хорошо бы разделить по зонам ответственности. А то, например, для демонстрации новых цветовых моделей, которые поддерживаются (с оговорками: например, в градиентах интерполяция в цветовом пространстве в принципе не поддерживается) в Firefox 115.11.0esr (последняя поддерживаемая версия Firefox для windows 7, то есть, обновиться дальше нет возможности), используется возможность @scope, которая в указанном Firefox как раз и не поддерживается. В результате кажется, что не поддерживается цветовая модель.
Если какие-то свойства не поддерживаются всеми популярными браузерами, этот не современный CSS, это CSS будущего.
Столько интересных и полезных "вкусностей" добавилось, большое спасибо за то, что разложили все в удобном виде и отельное спасибо за примеры на Codepen!
Очень желанным было Container Queries, часто хотелось иметь возможность опираться от размера контейнера, а не всего окна. Также слои показались очень удобными, позволяющими избавиться от "грязной" стилизации, в попытке побороть стилизацию сторонних плагинов.
И вроде мелочь, но довольная приятная, это вложенность в написании правил, очень этого не хватало в чистом CSS, отчасти из-за этого все ближе момент, когда всяческие Sass, Stylus и подобное, будет просто не нужным.
На самом деле каждая описанная функциональность довольно приятна!
Кажется, CSS уже начинает прогибаться под своей тяжестью.
Поймите правильно: я очень люблю CSS и это один из самых частоиспользуемых мною языков, но когда я читаю:
1cqw — это 1% от ширины контейнера (хотя я бы рекомендовал использовать вместо них cqi
…у меня начинается лёгкая истерика. Ещё лет десять назад было предложено расширение с 1%%, но, конечно, это слишком очевидно, давайте лучше сделаем 1cqw (при этом будем рекомендовать использовать 1cqi).
Container Units... радость то какая, радость!!! Дожили.
И поддержка вложенности блоков в css это тоже круто, но уже и не помню когда я чистый css использовал.
Читаешь и умиляешься, вспоминая как резал картиночки чтобы в ie кругленькие бордеры сделать. Эх.
Всё, что не с полной поддержкой браузерами на мой взгляд в этой статье лишнее.
Что нужно знать о современном CSS (весна 2024 года)