Ако треба да ги поделам еволуциите на CSS во категории, отидовме многу подалеку од деновите кога едноставно баравме граничен радиус да се чувствуваме како да живееме во иднината. Во моментов живееме во момент кога платформата ни дава алатки кои не само што го менуваат визуелниот слој, туку фундаментално го редефинираат како ги архитектираме интерфејсите. Мислев дека бројот на функции објавени во 2024 година не може да се надмине. Никогаш не сум згрешил толку среќно.
„CSS Wrapped 2025“ на тимот на Chrome не е само список на функции; тоа е манифест за динамична, родна мрежа. Како некој кој поминал неколку години документирање на овие еволуции - од дефинирање на епохите на „CSS5“ до сложеноста на модерните алатки за распоред - се наоѓам себеси како гледам на овогодинешниот завршеток со огромно чувство на возбуда. Гледаме промена кон „оптимизирана ергономија“ и „интеракции од следната генерација“ кои ни овозможуваат да престанеме да се бориме со кодот и да почнеме да ги вајаме интерфејсите во нивната природна состојба.
Во оваа статија, можете да најдете сеопфатен поглед на истакнатите карактеристики од извештајот на Chrome, прегледани низ објективот на моите неодамнешни експерименти и надежи за иднината на платформата.
Револуција на компонентите: Конечно, оригинален приспособлив избор
Со години, се потпиравме на тешки библиотеки JavaScript за паѓачки стилови, „децениски проблем“ што платформата конечно го реши. Како што детализирав во моето длабоко нурнување во историјата на приспособливиот избор (и сродните написи), ова беше долг пат кој вклучува Open UI, префрлање велосипеди со имиња како
Фантастичниот додаток за овозможување богата содржина во опциите, како што се слики или знамиња, е многу забавен. Можеме да создадеме секакви избрани во денешно време:
Демо: Создадов демо за поке-авантура што покажува како новиот елемент
Видете го пенкалото Избор што може да се приспособи со слики внатре во опциите и избраната содржина [искршена] од utilitybend.
Демо: Сеопфатен поглед на стилизирање на избраните само со псевдоелементи.
Видете го Пенкалото Избор што може да се приспособи со само псевдоелементи [закопани] од utilitybend.
Демо: Или можете да го подигнете со ова демо за избор на мени користејќи оптгрупи.
Видете го пенкалото Вистинско изборно мени со оптимални групи [заглавени] од utilitybend. Оваа функција сама по себе сигнализира огромна промена во тоа како ќе градиме форми, намалувајќи ги зависностите и техничкиот долг. Маркери за лизгање и смртта на рингишпилот на JavaScript Создавањето вртелешки историски беше точка на триење меѓу програмерите и клиентите. Клиентите ги сакаат, програмерите се плашат од JavaScript што е потребен за да бидат достапни и перформанси. Пристигнувањето на ::scroll-marker и ::scroll-button() псевдоелементите целосно ја менува оваа динамика. Овие карактеристики ни овозможуваат да создаваме точки за навигација и копчиња за лизгање чисто со CSS, поврзани природно со контејнерот за лизгање. Како што напишав на мојот блог, ова беше слајд Љубов на прв. Способноста да се создаде целосно функционален, пристапен лизгач без ниту една линија JavaScript не е само погодна; тоа е триумф за настап. Има некои проблеми за пристапноста околу оваа функција, и иако тие се валидни, можеби постои начин ние програмерите да ја направиме да функционира. Добрата работа е што сите овие промени во интерфејсот го прават многу полесно отколку прилагодената манипулација со DOM и влечење околу ознаките на ариите, но јас се оддалечувам… Сега можеме автоматски да ги групираме маркерите со помош на групата за скролување-маркери и да ги стилизираме копчињата користејќи позиционирање на сидро за да ги поставиме точно каде што сакаме.
.рингишпил { претекување-x: автоматско; скрол-маркер-група: по; /* Создава контејнер за точки */
/* Креирај ги копчињата */ &:: копче за скролување (на линија-крај),&::scroll-button(inline-start) { содржина: " "; позиција: апсолутна; /* Користете позиционирање на сидро за да ги центрирате */ позиција-сидро: --рингишпил; врвот: сидро (центар); }
/* Направете ги маркерите на децата */ див { &:: маркер за лизгање { содржина: " "; ширина: 24 px; граница-радиус: 50%; курсорот: покажувач; } /* Означете го активниот маркер */ &::scroll-marker:target-current { позадина: бела; } } }
Демо: Мојот експеримент создавајќи рингишпил чисто од HTML и CSS, користејќи позиционирање на сидро за да ги поставите копчињата.
Видете го Pen Carousel Pure HTML и CSS [чаталено] од utilitybend.
Демо: римејк на мазен лизгач на Webshop со помош на attr() за динамично повлекување на сликите во позадина во маркерите.
Видете го римејкот на лизгачот за маснотии на Pen Webshop во CSS [forked] од utilitybend. Прашања за состојбата: Заглавена леплива работа? Снимана работа? Долго време, ни недостигаше способноста да знаеме дали е „заглавена леплива работа“ или дали е „откината леплива ставка“ без да се потпираме на хакирањето на IntersectionObserver. Chrome 133 воведе барања за состојба на лизгање, овозможувајќи ни да ги бараме овие состојби декларативно. Со поставување на тип на контејнер: состојба на лизгање, сега можеме да ги стилизираме децата врз основа на тоа дали се заглавени, скинати или преполни. Ова е огромно подобрување на „квалитетот на животот“ што со нетрпение го чекав од денот на CSS 2023 година. Дури еволуираше многу бидејќи можеме да ја видиме и насоката на свитокот, прекрасна! На едноставен пример: конечно можеме да примениме сенка на заглавие само кога таа всушност се држи до горниот дел од приказот: .header-container { контејнер-тип: лизгање-состојба; позиција: леплива; врвот: 0;
заглавие { транзиција: кутија-сенка 0,5s олеснување; /* Барањето ја проверува состојбата на контејнерот */ @container scroll-state(заглавен: врвот) { кутија-сенка: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Демо: Лепливо заглавие кое применува сенка само кога е навистина заглавено.
Видете ги заглавијата на Pen Sticky со барање за состојба на лизгање, проверувајќи дали лепливиот елемент е заглавен [заглавен] од utilitybend.
Демо: Список на тема Покемон што користи барања за состојба на лизгање во комбинација со позиционирање на сидро за да ја премести рамката над моментално откинатиот знак.
Погледнете го барањето за состојба на лизгање со пенкало за да проверите која ставка е скршена со CSS, верзијата на Покемон [закопчана] од utilitybend. Оптимизирана ергономија: логика во CSS Делот „Оптимизирана ергономија“ на CSS Wrapped ги истакнува карактеристиките што ги прават нашите работни процеси поинтуитивни. Три карактеристики се издвојуваат како трансформативни за тоа како ја пишуваме логиката:
if() Изјави Конечно добиваме условувања во CSS. Функцијата if() делува како троен оператор за листови со стилови, овозможувајќи ни да примениме вредности засновани на барања за медиуми, поддршка или стилови внатре. Ова ја намалува потребата за опширни @media блокови за единечни промени на својствата. @function functionsКонечно можеме да преместиме некоја логика на друго место, што ќе резултира со некои почисти датотеки, вистинска карактеристика на квалитетот на животот. sibling-index() и sibling-count()Овие функции за броење дрвја го решаваат проблемот со неверојатни анимации или ставки за стилизирање врз основа на големината на списокот. Како што истражував во Стајлирањето на браќа и сестри со CSS никогаш не било полесно, ова ја елиминира потребата за хард-кодирање сопствени својства (како --index: 1) во нашиот HTML.
Пример: Пресметување распореди Сега можеме да пишуваме концизни математички формули. На пример, запрепастувањето на анимација за картички што влегуваат на екранот станува тривијално: .card-container > * { анимација: откривање на 0,6 s ease-out напред; /* Нема повеќе рачни --индекс променливи! */ анимација-одложување: калк(брат-индекс() * 0,1с); }
Дури и експериментирав со користење на овие функции заедно со тригонометрија за да ги поставам ставките во совршен круг без никаков JavaScript.
Демо: динамично неверојатни анимации на картички.
Видете ги картичките со Pen Stagger користејќи брат-индекс() [forked] од utilitybend.
Демо: ставање ставки во совршен круг користејќи индекс на браќа и сестри, број на браќа и сестри и новата функција CSS @function.
Видете го пенкалото Кругот кој користи индекс на браќа и сестри, броење на браќа и сестри и функции [заглавени] од utilitybend. Мојата листа на задачи CSS: карактеристики што едвај чекам да ги пробам Додека бев зафатен со скулптурата на селекциите и транзициите, извештајот „CSS Wrapped 2025“ е преполн со други добрини што сè уште не сум имал шанса да ги активирам во CodePen. Овие се високо на мојата листа за моите следни експерименти: Прашања за закотвени контејнери Го користев CSS Anchor Positioning за копчињата во моето демо рингишпил, но „CSS Wrapped“ нагласуваеволуција на ова: Прашања за закотвени контејнери. Ова го решава проблемот што сите го имавме со советите за алатки: ако прелистувачот го превртува советот за алатка од горе до долу поради ограничувања на просторот, „стрелката“ често останува да покажува на погрешен начин. Со прашања за закотвени контејнер (@container anchored(fallback: flip-block)), можеме да го стилизираме елементот врз основа на која резервна позиција прелистувачот всушност ја избрал. Групи за транзиција со вгнезден приказ Погледни Транзициите беа револуција, но тие дојдоа со специфичен компромис: тие го израмнија дрвото на елементите, кое често ги кршеше 3D трансформациите или прелевањето: клип. Отсекогаш имав чувство дека нешто недостасува, и ова можеби е само одговорот. Со користење на преглед-транзиција-група: најблиску, конечно можеме да ги вгнездиме преодните групи една во друга. Ова ни овозможува да одржуваме ефекти на клипинг или 3D ротации за време на транзицијата - нешто што претходно беше невозможно бидејќи елементите беа подигнати до највисокото ниво. .card img { поглед-транзиција-име: фотографија; поглед-транзиција-група: најблиска; /* Чувајте го вгнездено! */ }
Типографија и форми Конечно, ергономот во мене се чеша да го проба Text Box Trim, кој ветува дека ќе го отстрани досадниот дополнителен празен простор над и под содржината на текстот (главниот) за конечно да постигне совршено вертикално порамнување. А за креативната страна, формата на аголот и функцијата shape() отвораат неправоаголни распореди, овозможувајќи „квадрици“ и сложени патеки кои одговараат на CSS променливите. Како што е кажано, едвај чекам да имам дизајн полн со верверички! Надежна иднина Сведоци сме на свет во кој CSS станува способен да се справува со логика, состојба и сложени интеракции кои претходно му припаѓале на JavaScript. Функциите како moveBefore (зачувување на состојбата на DOM за iframes/видеа) и attr() (користење типови надвор од низите за бои и мрежи) дополнително ја зацврстуваат оваа реалност. Иако некои од овие функции се моментално експериментални или специфични за Chrome, моментумот е непобитен. Мора да се надеваме на континуирана поддршка во сите прелистувачи преку иницијативи како Interop за да се осигураме дека овие способности ќе станат основна линија. Како што е кажано, имањето мотори на прелистувачи е исто толку важно како и сите овие прекрасни карактеристики во „Хром прво“. Овие нови функции треба да се дискутираат, да се преработат и да се тестираат пред да се појават во прелистувачите. Тоа е фантастичен момент да се влезе во CSS. Ние веќе не сме само стилизирање документи; изработуваме динамични, ергономски и робусни апликации со природен комплет алатки што е помоќен од кога било. Ајде да продолжиме со оваа нова ера и да го рашириме зборот. Ова е завиткано со CSS!
