Новинки веба 2022

Что было?

1. Container Queries
   • Демо
   • Спецификация
   • CSS container queries are finally here
   • Container Queries are going to change how we make layouts (видео)
   • Container queries - Designing in the Browser (видео)
2. has()
   • Демо
   • Спецификация
   • :has, Дока
   • The CSS :has Selector (and 4+ Examples), CSS Tricks
   • :has(): the family selector, Chrome Developers
   • I never thought this would be possible with CSS (видео)
   • :has в CSS — псевдокласс из будущего на примере карточки новости (видео)
3. accent-color
   • Демо
   • Спецификация
   • accent-color, Дока
   • Styling forms just got easier with accent-color (видео)
   • Simplifying Form Styles With accent-color, Smashing Magazine
4. Популяризация логических свойств в CSS
   • Демо
   • Спецификация
   • CSS Logical Properties and Values, CSS Tricks
   • Новые логические свойства в CSS!
5. outline по форме элемента
   • Демо
6. Новые единицы измерения вьюпорта
   • Спецификация
   • It's viewports all the way down (видео)
7. aspect-ratio
   • Демо
   • Спецификация
   • aspect-ratio, CSS Tricks
8. inert
   • Демо
   • Introducing inert, Chrome Developers
   • Inert (видео), The CSS Podcast
9. Mozzila переписала accessibility engine в Firefox Nightly
   • Significant Improvements for Screen Readers Now in Nightly Firefox
10. Тестерская инициатива по доступности — ARIA-AT
    • ARIA-AT
11. WCAG 2.2 получил статус кандидата в рекомендации
    • Call for Implementations: WCAG 2.2 Candidate Recommendation
    • Web Content Accessibility Guidelines (WCAG) 2.2
12. Примечания к черновику Accessibility Maturity Model
    • For Review: Accessibility Maturity Model - Group Draft Note
    • Accessibility Maturity Model
13. Теперь можно немного анимировать grid-template
14. Поддержка низкоуровневых API для работы с video и audio. WebCodecs

Не совсем про веб, но около

• Истёк крайний срок внедрения в странах ЕС Европейского закона о доступности (European Accessibility Act, EAA). Подробнее в What is the European Accessibility Act?

• Законопроект Закон о доступности сайтов и программного обеспечения (Websites and Software Applications Accessibility Act). Подробнее в The Websites and Software Applications Accessibility Act

• Многие инструменты переписывают на Rust, посмотрите например на turbopack или на Apollo Router

За чем следить?

1. @when - @else директивы (пока нигде не поддерживаются, но CSS Conditional Rules Module Level 5)
2. Вложенные правила в CSS и директива @nest (CSS Nesting Module)
3. Новый синтаксис диапазоны медиазапросов (>, <, ≥, ≤) (Media Queries Level 5)
4. grid-template-rows: masonry; (CSS Grid Layout Module Level 3)
5. Развитие atomic css и проектов на его основе. Например, Tailwind CSS
6. Разработчики пытаются переосмыслить свой подход к приватности и безопасности. Подробности
7. Remix – фреймворк для создания веб-приложений становится все популяренее

Интересные факты

1. Браузеры изо всех сил стараются сделать процесс рендеринга эффективнее. Посмотрите, например, как все это устроено в Chromium