Какие новые фишки CSS нужно выучить прямо сейчас

Спросили специалистов уровня middle и senior, что нужно выучить в CSS прямо сейчас, чтобы быть крутыми специалистами через пару лет и не отстать от трендов и новинок в CSS.

Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики.

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.

Милана Петрук

Web-разработчик arcsinus

Каждый год в каскадных таблицах стилей CSS появляются какие-то новшества. Лучше не хвататься за самое новое, а подождать немного, пока это не станет поддерживаться большинством популярных браузеров.

Что же необходимо изучить из того, что уже закрепилось в CSS и используется повсеместно?

• Двумерная сетка грид (grid layout) и модуль гибкого контейнера флекс (flex).
• Препроцессоры (например, Sass, tLess). Они сильно упрощают жизнь при написании кода.
• Фреймворки (для начинающих подойдут Bootstrap, Bulma и Materialize).
• Анимация (animation).
• Адаптивность / responsive – правильное отображение сайта на разных устройствах.
• БЭМ (Блок Элемент Модификатор) – компонентный подход к веб-разработке, который стал популярен в последние годы. Он затрагивает написание css (убирается каскадность) и принципы именования классов элементов.

15 основных новинок CSS за 2022 и 2023 года:

1. Контейнерные запросы (@container) вместо медиа запросов. Поддержка tбраузерами – 87.42%.
2. Новые псевдоклассы-функции :where(), :has(). У :has() поддержка – 87.43%.
3. Использование математических операторов в медиа-запросах. Поддержка браузерами 70%.
4. Использование of в псевдоклассах :nth. Поддержка – 85.72%
5. Свойство accent-color для основного цвета сайта на формах или по всему сайту. Уже поддерживается во всех современных браузерах.
6. Сбалансированный tперенос текста с помощью text-wrap: balance; Поддержка – 37.71%
7. Новые динамические единицы измерения: svh, svw, lvh, lvw, dvh, dvw. Поддержка – 87.99%
8. Каскадные слои. Поддержка – 90.58%
9. Вложенность стилей друг в друга, как в Sass. Поддержка – 63.74%
10. Плавная прокрутка скроллбара свойством scroll-behavior: smooth; Поддерживается браузерами.
11. Стилизация сайта по пользовательским предпочтением операционной системы (prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, inverted-colors и другие).
12. Адаптивность к форм-фактору, т.е. учет складных и гибких экранов при создании сайтов. Пока не получила большого распространения.
13. Псевдокласс t:focus-visible. Поддерживается всеми браузерами.
14. Индивидуальные свойства трансформации. Поддержка – 91.19%
15. color-mix(): и color-contrast(). Поддерживается не всеми браузерами. Стоит изучить, но пока не использовать.

На мой взгляд стоит изучить те новинки, которые хотя бы на 70% поддерживаются браузерами.

Евгений Некрасов

Ведущий разработчик RDN Group

В настоящее время особой необходимости в изучении новых фич CSS для повседневной работы нет, так как многие из них пока не поддерживаются на всех браузерах. Однако, следить за этими тенденциями и быть готовым к использованию в будущем может быть полезным.

Рекомендую сконцентрироваться на освоении основ, таких как display: grid (хотя его применение может быть ограничено в старых версиях браузеров) и flexbox, transitions и animations (для создания плавных и креативных анимаций), backdrop-filter (эффекты размытия фона, полезные для создания стилизованных элементов интерфейса), variables и calc (использование переменных и вычислений может значительно улучшить поддерживаемость и гибкость кода).

Для новичков важно освоить SCSS, включая использование миксинов и функций, изучив примеры в крупных библиотеках, например, Bootstrap, чтобы расширить свои навыки и избежать избыточного изобретения.

Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики.

Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.