CSS продължава да се развива с забележително темпо, въвеждайки функции, които решават проблеми, за които някога се нуждаехме от сложни заобиколни решения с JavaScript. Нека разгледаме техниките, които оформят съвременната уеб разработка.
Container Queries
Container queries фундаментално промениха адаптивния дизайн. Вместо да разчитат само на размерите на viewport, компонентите вече могат да се адаптират въз основа на размера на своя родителски контейнер. Това прави истински многократно използваемите компоненти възможни — компонент на карта, който реагира на пространството, което заема, а не на ширината на екрана.
Селекторът :has()
Често наричан “родителски селектор”, :has() позволява стилове, които зависят от състоянието на наследници или братя и сестри. Трябва да стилизирате група формуляр различно, когато съдържа невалиден вход? :has() прави това тривиално без намеса на JavaScript.
Каскадни слоеве
Декларациите @layer дават на разработчиците изричен контрол върху каскадата, решавайки войните за специфичност, които са мъчили стиловите листи в продължение на десетилетия. Организирайте своите стилове в слоеве за нулиране, база, компоненти и помощни класове, за да поддържате предвидими резултати от стилизиране независимо от реда на източника.
View Transitions
View Transitions API носи естествени анимации за преход между страници в многостранични приложения. В комбинация с интеграцията на view transitions в Astro, създаването на гладки, подобни на приложения навигационни изживява изисква минимален код и предлага изтънчено усещане.
Вграждане
Естественото CSS вграждане елиминира нуждата от препроцесори в много проекти. Пишете стилове, които отразяват вашата HTML структура, без да прибягвате до Sass или Less, поддържайки вашия инструментариум по-лек.