Калі б я падзяліў эвалюцыю CSS на катэгорыі, мы прасунуліся далёка за межы тых часоў, калі мы проста прасілі радыус мяжы, каб адчуваць, што мы жывём у будучыні. У цяперашні час мы жывем у той момант, калі платформа дае нам інструменты, якія не проста наладжваюць візуальны ўзровень, але фундаментальна пераасэнсоўваюць тое, як мы распрацоўваем інтэрфейсы. Я думаў, што колькасць функцый, анансаваных у 2024 годзе, немагчыма перавысіць. Я ніколі так шчасліва не памыляўся.
"CSS Wrapped 2025" каманды Chrome - гэта не проста спіс функцый; гэта маніфест для дынамічнага, роднага Інтэрнэту. Як чалавек, які патраціў пару гадоў на дакументаванне гэтых змяненняў — ад вызначэння эпох «CSS5» да тонкасцей сучасных утыліт для вёрсткі — я гляджу на вынікі гэтага года з вялікім хваляваннем. Мы бачым зрух у бок «аптымізаванай эрганомікі» і «ўзаемадзеянняў наступнага пакалення», якія дазваляюць нам спыніць барацьбу з кодам і пачаць фармаваць інтэрфейсы ў іх натуральным стане.
У гэтым артыкуле вы можаце знайсці поўны агляд выдатных функцый са справаздачы Chrome, прагледжаных праз прызму маіх апошніх эксперыментаў і надзей на будучыню платформы.
Рэвалюцыя кампанентаў: нарэшце родны наладжвальны выбар
На працягу многіх гадоў мы абапіраліся на цяжкія бібліятэкі JavaScript для афармлення выпадаючых меню, «праблема дзесяцігоддзяў», якую платформа нарэшце вырашыла. Як я падрабязна апісваў у сваім глыбокім паглыбленні ў гісторыю наладжвальнага выбару (і звязаных з ім артыкулаў), гэта быў доўгі шлях, звязаны з адкрытым карыстальніцкім інтэрфейсам, імёнамі bikeshedding, такімі як
Фантастычнае дапаўненне да багатага кантэнту ўнутры опцый, такіх як выявы або сцягі, вельмі весела. У цяперашні час мы можам ствараць самыя розныя выбары:
Дэманстрацыя: я стварыў дэманстрацыю Poké-adventure, якая паказвае, як новы элемент
Глядзіце ручку, наладжвальны выбар з выявамі ўнутры опцый і абраным змесцівам [раздвоеным] з дапамогай utilitybend.
Дэманстрацыя: поўны погляд на стылізацыю выбраных толькі з псеўдаэлементамі.
Глядзіце наладжвальны выбар Pen A толькі з псеўдаэлементамі [раздвоены] у utilitybend.
Дэманстрацыя: ці вы можаце падняць гэта на прыступку вышэй з гэтай дэманстрацыяй выбару меню з дапамогай optgroups.
Глядзіце ручку. Фактычнае меню выбару з групамі опцый [разгалінаванымі] ад utilitybend. Адна гэтая асаблівасць сігналізуе аб масавых зрухах у тым, як мы будзем ствараць формы, памяншаючы залежнасці і тэхнічную запазычанасць. Маркеры пракруткі і смерць каруселі JavaScript Стварэнне каруселяў гістарычна было кропкай трэння паміж распрацоўшчыкамі і кліентамі. Кліенты любяць іх, распрацоўшчыкі баяцца JavaScript, неабходнага для таго, каб зрабіць іх даступнымі і эфектыўнымі. З'яўленне псеўдаэлементаў ::scroll-marker і ::scroll-button() цалкам змяняе гэтую дынаміку. Гэтыя функцыі дазваляюць нам ствараць кропкі навігацыі і кнопкі пракруткі выключна з дапамогай CSS, унутрана звязаныя з кантэйнерам пракруткі. Як я пісаў у сваім блогу, гэта быў слайд "Любоў з першага разу". Магчымасць стварыць цалкам функцыянальны, даступны паўзунок без адзінага радка JavaScript не проста зручная; гэта трыумф прадукцыйнасці. Ёсць некаторыя праблемы з даступнасцю гэтай функцыі, і нават калі яны слушныя, у распрацоўшчыкаў можа быць спосаб прымусіць яе працаваць. Добра тое, што ўсе гэтыя змены карыстальніцкага інтэрфейсу робяць гэта нашмат прасцей, чым карыстальніцкія маніпуляцыі DOM і перацягванне тэгаў арыі, але я адцягнуўся... Цяпер мы можам групаваць маркеры аўтаматычна з дапамогай scroll-marker-group і стылізаваць кнопкі з дапамогай прывязкі, каб размясціць іх менавіта там, дзе мы хочам.
.carousel { перапаўненне-x: аўта; scroll-marker-group: пасля; /* Стварае кантэйнер для кропак */
/* Стварыце кнопкі */ &::кнопка пракруткі (убудаваны канец),&::scroll-button(inline-start) { змест: " "; пазіцыя: абсалютная; /* Выкарыстанне якарнага пазіцыянавання, каб адцэнтраваць іх */ пазіцыя-якар: --карусель; зверху: якар (цэнтр); }
/* Стварыце маркеры на даччыных элементах */ div { &::маркер пракруткі { змест: " "; шырыня: 24 пікселяў; радыус мяжы: 50%; курсор: паказальнік; } /* Вылучыць актыўны маркер */ &::scroll-marker:target-current { фон: белы; } } }
Дэманстрацыя: мой эксперымент па стварэнні каруселі выключна з HTML і CSS з выкарыстаннем якарнага пазіцыянавання для размяшчэння кнопак.
Глядзіце Pen Carousel Pure HTML і CSS [forked] ад utilitybend.
Дэманстрацыя: рымейк гладкага паўзунка вэб-крамы з выкарыстаннем attr() для дынамічнага ўцягвання фонавых малюнкаў у маркеры.
Глядзіце рымейк гладкага паўзунка Pen Webshop у CSS [forked] ад utilitybend. Запыты стану: Sticky Thing Stuck? Snappy Thing Snapped? На працягу доўгага часу нам не хапала магчымасці даведацца, «затрымалася ліпкая рэч» або «зашчапіўся імгненны элемент», не спадзяючыся на хакі IntersectionObserver. Chrome 133 прадставіў запыты стану пракруткі, што дазваляе нам запытваць гэтыя станы дэкларатыўна. Усталяваўшы container-type: scroll-state, мы цяпер можам стылізаваць даччыныя элементы ў залежнасці ад таго, затрымаліся яны, зашчоўкнуты або перапоўнены. Гэта вялікае паляпшэнне «якасці жыцця», якога я з нецярпеннем чакаў з Дня CSS 2023. Яно нават значна змянілася, бо мы таксама можам бачыць кірунак прагорткі, цудоўна! Для простага прыкладу: мы можам нарэшце прымяніць цень да загалоўка толькі тады, калі ён насамрэч прыліпае да верхняй частцы акна прагляду: .header-container { тып кантэйнера: стан пракруткі; становішча: ліпкі; зверху: 0;
загаловак { пераход: поле-цень 0,5 с паслабленне; /* Запыт правярае стан кантэйнера */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Дэманстрацыя: ліпкі загаловак, які накладвае цень, толькі калі ён фактычна затрымаўся.
Глядзіце загалоўкі Pen Sticky з запытам стану пракруткі, правяраючы, ці затрымаўся [разгалінаваны] ліпкі элемент з дапамогай utilitybend.
Дэманстрацыя: спіс на тэму Pokémon, які выкарыстоўвае запыты стану пракруткі ў спалучэнні з прывязкай для перамяшчэння кадра над сімвалам, які зараз замацаваны.
Глядзіце запыт Pen Scroll-state, каб праверыць, які элемент замацаваны з дапамогай CSS, Pokemon version [forked] by utilitybend. Аптымізаваная эрганоміка: логіка ў CSS У раздзеле «Аптымізаваная эрганоміка» CSS Wrapped вылучаюцца функцыі, якія робяць нашы працоўныя працэсы больш інтуітыўна зразумелымі. Тры асаблівасці вылучаюцца як трансфарматыўныя для таго, як мы пішам логіку:
Аператары if() Мы нарэшце атрымалі ўмоўныя выказванні ў CSS. Функцыя if() дзейнічае як трайны аператар для табліц стыляў, дазваляючы нам прымяняць значэнні на аснове ўбудаваных запытаў медыя, падтрымкі або стыляў. Гэта памяншае патрэбу ў падрабязных блоках @media для змены асобных уласцівасцей. Функцыі @function. Нарэшце мы можам перанесці частку логікі ў іншае месца, што прывядзе да больш чыстых файлаў, сапраўднай якасці жыцця. sibling-index() і sibling-count()Гэтыя функцыі падліку дрэва вырашаюць праблему ашаламляльнай анімацыі або стылізацыі элементаў у залежнасці ад памеру спіса. Як я даследаваў у артыкуле Стылізаваць братоў і сясцёр з дапамогай CSS ніколі не было прасцей, гэта пазбаўляе ад неабходнасці жорстка кадзіраваць карыстальніцкія ўласцівасці (напрыклад, --index: 1) у нашым HTML.
Прыклад: разлік макетаў Цяпер мы можам пісаць сціслыя матэматычныя формулы. Напрыклад, шахматная анімацыя для карт, якія ўваходзяць на экран, становіцца трывіяльнай: .card-container > * { анімацыя: паказаць 0,6 с паслабленне наперад; /* Няма больш ручных зменных --index! */ затрымка анімацыі: calc(sibling-index() * 0.1s); }
Я нават эксперыментаваў з выкарыстаннем гэтых функцый разам з трыганаметрыяй, каб размясціць элементы ў ідэальным крузе без JavaScript.
Дэманстрацыя: ашаламляльная дынамічная анімацыя карт.
Глядзіце карты Pen Stagger з дапамогай sibling-index() [forked] ад utilitybend.
Дэманстрацыя: размяшчэнне элементаў у ідэальным крузе з дапамогай sibling-index, sibling-count і новай функцыі CSS @function.
Глядзіце Pen Круг з выкарыстаннем sibling-index, sibling-count і функцый [forked] ад utilitybend. Мой спіс спраў CSS: функцыі, якія я не магу чакаць, каб паспрабаваць Пакуль я быў заняты лепкай выбару і пераходаў, справаздача «CSS Wrapped 2025» напоўнена іншымі прысмакамі, якія ў мяне яшчэ не было магчымасці запусціць у CodePen. Яны займаюць першае месца ў маім спісе для наступных эксперыментаў: Прывязаныя запыты кантэйнераў Я выкарыстаў CSS Anchor Positioning для кнопак у сваёй дэманстрацыі каруселі, але «CSS Wrapped» вылучаеэвалюцыя гэтага: прывязаныя запыты кантэйнераў. Гэта вырашае праблему, якую мы ўсе мелі з усплывальнымі падказкамі: калі браўзер перагортвае ўсплывальную падказку зверху ўніз з-за недахопу прасторы, «стрэлка» часта застаецца паказваць не ў той бок. З дапамогай запытаў з прывязаным кантэйнерам (@container anchored(fallback: flip-block)) мы можам стылізаваць элемент у залежнасці ад таго, якую рэзервовую пазіцыю насамрэч выбраў браўзер. Групы пераходаў укладзеных праглядаў View Transitions былі рэвалюцыяй, але яны прыйшлі з пэўным кампрамісам: яны згладзілі дрэва элементаў, што часта парушала 3D-трансфармацыі або overflow: clip. У мяне заўсёды было адчуванне, што чагосьці не хапае, і гэта можа быць толькі адказам. Выкарыстоўваючы view-transition-group: nearest, мы нарэшце можам укласці групы пераходаў адна ў адну. Гэта дазваляе нам падтрымліваць эфекты адсячэння або 3D-павароты падчас пераходу — тое, што раней было немагчыма, таму што элементы падымаліся на верхні ўзровень. .card img { view-transition-name: фота; view-transition-group: бліжэйшы; /* Трымайце яго ўкладзеным! */ }
Друкарня і формы Нарэшце, майму эрганомісту вельмі хочацца паспрабаваць Text Box Trim, які абяцае выдаліць надакучлівыя лішнія прабелы над і пад тэкставым змесцівам (галоўнае), каб нарэшце дасягнуць ідэальнага вертыкальнага выраўноўвання. А што тычыцца творчага боку, кутовая форма і функцыя shape() адкрываюць непрамакутныя макеты, дазваляючы «квадраты» і складаныя шляхі, якія рэагуюць на зменныя CSS. З улікам сказанага, я не магу дачакацца, каб атрымаць дызайн, поўны завірухаў! Абнадзейлівая будучыня Мы назіраем свет, дзе CSS становіцца здольным апрацоўваць логіку, стан і складаныя ўзаемадзеянні, якія раней належалі JavaScript. Такія функцыі, як moveBefore (захаванне стану DOM для iframes/відэа) і attr() (выкарыстанне тыпаў, акрамя радкоў для колераў і сетак), яшчэ больш замацоўваюць гэтую рэальнасць. У той час як некаторыя з гэтых функцый у цяперашні час з'яўляюцца эксперыментальнымі або спецыфічнымі для Chrome, імпульс бясспрэчна. Мы павінны спадзявацца на працяг падтрымкі ва ўсіх браўзерах праз такія ініцыятывы, як Interop, каб гарантаваць, што гэтыя магчымасці стануць базавымі. З улікам сказанага, наяўнасць рухавікоў браўзераў гэтак жа важна, як і наяўнасць усіх гэтых дзіўных функцый у «Chrome first». Гэтыя новыя функцыі трэба абмеркаваць, павазіцца з імі і праверыць, перш чым яны з'явяцца ў браўзерах. Гэта фантастычны момант патрапіць у CSS. Мы больш не проста стылізуем дакументы; мы ствараем дынамічныя, эрганамічныя і надзейныя прыкладанні з уласным наборам інструментаў, які з'яўляецца больш магутным, чым калі-небудзь. Давайце пачнем з гэтай новай эры і распаўсюдзім інфармацыю. Гэта CSS Wrapped!
