Эгерде мен CSS эволюциясын категорияларга бөлө турган болсом, анда биз келечекте жашап жаткандай сезилиши үчүн чек ара радиусун сураган күндөрдөн бир топ ашып кеттик. Учурда биз платформа бизге визуалдык катмарды гана чыңдоо менен чектелбестен, интерфейстерди кантип түзө турганыбызды түп тамырынан бери кайра аныктай турган куралдарды берип жаткан учурда жашап жатабыз. Мен 2024-жылы жарыяланган функциялардын санын толуктоо мүмкүн эмес деп ойлогом. Мен эч качан мынчалык бактылуу жаңылган эмесмин.
Chrome командасынын "CSS Wrapped 2025" жөн гана функциялардын тизмеси эмес; бул динамикалык, нукура желе үчүн манифест. Бул эволюцияларды документтештирүүгө бир нече жыл сарптаган адам катары - "CSS5" доорун аныктоодон баштап, заманбап макеттик утилиттердин татаалдыктарына чейин - мен быйылкы жылдын жыйынтыгын абдан толкундануу менен карап жатам. Биз "Оптимизацияланган эргономика" жана "Кийинки муундун өз ара аракеттешүүсү" жагына өзгөрүүнү көрүп жатабыз, бул бизге код менен күрөшүүнү токтотуп, интерфейстерди табигый абалында айкелдештире баштоого мүмкүндүк берет.
Бул макалада сиз менин акыркы эксперименттеримди жана платформанын келечегине болгон үмүттөрүмдүн объективинде каралган Chrome отчетундагы өзгөчөлүктөргө кеңири көз карашты таба аласыз.
Компоненттик революция: Акыр-аягы, жергиликтүү өзгөчөлөштүрүлүүчү тандоо
Көп жылдар бою биз ачылуучу тизмелерди стилдештирүү үчүн оор JavaScript китепканаларына таянып келдик, бул платформа акыры чечкен "ондогон жылдардагы көйгөй". Мен ыңгайлаштырылган тандоонун (жана тиешелүү макалалардын) тарыхына терең сүңгүп киргенимде, бул Open UI,
Сүрөттөр же желектер сыяктуу параметрлердин ичиндеги бай мазмунга уруксат берүү үчүн фантастикалык кошумча абдан кызыктуу. Бүгүнкү күндө биз тандоолордун бардык түрлөрүн түзө алабыз:
Демо: Мен жаңы
Опциялардын ичиндеги сүрөттөрү менен өзгөчөлөштүрүлүүчү Калемди жана utilitybend аркылуу тандалган мазмунду [айрыкча] караңыз.
Демо: Жалаң гана псевдо-элементтер менен тандоо стилин комплекстүү кароо.
Utilitybend аркылуу псевдо-элементтери [айрыктары] менен ыңгайлаштырылуучу Калемди караңыз.
Демо: Же болбосо, оптималдуу топторду колдонуп, бул Меню тандоо демо менен аны бир тепкичке көтөрө аласыз.
Калемди караңыз. utilitybend аркылуу optgroups [forked] менен чыныгы тандоо менюсу. Бул өзгөчөлүктүн өзү эле формаларды кантип түзөөрүбүздү, көз карандылыкты жана техникалык карызды кыскартуудагы чоң өзгөрүүнү билдирет. Жылдыруу маркерлери жана JavaScript каруселинин өлүмү Каруселдерди түзүү тарыхый жактан иштеп чыгуучулар менен кардарлардын ортосунда талаш-тартыш болуп келген. Кардарлар аларды жакшы көрүшөт, иштеп чыгуучулар аларды жеткиликтүү жана натыйжалуу кылуу үчүн талап кылынган JavaScript'тен коркушат. ::scroll-marker жана ::scroll-button() псевдо-элементтеринин келиши бул динамикти толугу менен өзгөртөт. Бул өзгөчөлүктөр бизге сыдырма контейнерине түптүү түрдө байланышкан CSS менен гана навигация чекиттерин жана жылдыруу баскычтарын түзүүгө мүмкүндүк берет. Мен блогумда жазганымдай, бул биринчи слайддагы сүйүү болчу. JavaScript'тин бир сабы жок толук функционалдык, жеткиликтүү сыдырманы түзүү мүмкүнчүлүгү жөн гана ыңгайлуу эмес; аткаруунун салтанаты болуп саналат. Бул функциянын айланасында кээ бир жеткиликтүүлүк көйгөйлөрү бар жана алар жарактуу болсо да, биз иштеп чыгуучулар үчүн аны иштетүүнүн бир жолу болушу мүмкүн. Жакшы жери, бул UI өзгөрүүлөрүнүн баары аны DOM манипуляциясынан жана ария тегдерин сүйрөгөндөн бир топ жеңилдетет, бирок мен чегиндим… Эми биз маркерлерди scroll-marker-group аркылуу автоматтык түрдө топтой алабыз жана аларды так биз каалаган жерге жайгаштыруу үчүн анкердин жайгашуусун колдонуп, баскычтарды стилдей алабыз.
.carusel { overflow-x: auto; scroll-marker-group: кийин; /* чекиттер үчүн контейнерди түзөт */
/* баскычтарды түзүү */ &::жылдыруу баскычы(саптын аягында),&:: жылдыруу баскычы (саптык баштоо) { мазмуну: " "; позициясы: абсолюттук; /* Аларды ортого салуу үчүн анкердин жайгашуусун колдонуңуз */ position-anchor: --карусель; үстү: казык (орто); }
/* Балдарга маркерлерди түзүңүз */ див { &::жылдыргыч { мазмуну: " "; туурасы: 24px; чек ара радиусу: 50%; курсор: көрсөткүч; } /* активдүү маркерди бөлүп көрсөтүү */ & :: жылдыруу маркер: максаттуу учурдагы { фон: ак; } } }
Демо: Баскычтарды жайгаштыруу үчүн анкердин позициясын колдонуп, HTML жана CSS'тен таза карусель түзүү менин экспериментим.
Utilitybend аркылуу Pen Carousel Pure HTML жана CSS [Forked] караңыз.
Демо: Фондук сүрөттөрдү маркерлерге динамикалык түрдө тартуу үчүн attr() аркылуу Webshop slick slider remake.
Utilitybend аркылуу CSS'те Pen Webshop slick slider remake караңыз [forked]. Мамлекеттик суроолор: Жабышкак нерсе тыгылып калдыбы? Snappy Thing Snapped? Көптөн бери биз IntersectionObserver хакерлерине таянбай туруп, "жабышчаак нерсе жабышып калганбы" же "тез нерсе жарылып калганбы" билүү жөндөмүбүз жок болчу. Chrome 133 сыдырма абалын сурамдарын киргизди, бул бизге бул мамлекеттерди декларативдик түрдө суроого мүмкүндүк берди. Контейнер түрүн: сыдырма абалын коюу менен, биз эми балдардын тыгылып калганына, үзүлгөнүнө же толуп калганына жараша стилди түзө алабыз. Бул 2023-жылдын CSS күнүнөн бери мен чыдамсыздык менен күтүп жаткан "жашоо сапатынын" масштабдуу жакшырышы. Ал тургай, биз түрмөктүн багытын көрө алгандан бери бир топ өзгөрдү, сүйкүмдүү! Жөнөкөй мисал үчүн: биз акыры көлөкө көрүнүштү көрүнүштүн жогору жагына жабышканда гана колдоно алабыз: .header-контейнер { контейнер түрү: жылдыруу абалы; абалы: жабышчаак; top: 0;
баш { өтүү: куту-көлөкө 0.5s жеңил-чыгып; /* Суроо контейнердин абалын текшерет */ @container scroll-state(жабышкан: үстү) { куту-көлөкө: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Демо: жабышчаак тема, ал иш жүзүндө тыгылып калганда гана көлөкөнү колдонот.
жабышчаак элементтин utilitybend аркылуу жабышып калганын текшерип, сыдырма абалынын суроосу менен Pen Sticky темаларын караңыз.
Демо: Учурда тартылган символдун үстүнө кадрды жылдыруу үчүн анкердин жайгашуусу менен айкалышкан сыдырма абалындагы сурамдарды колдонгон Покемон тематикалык тизме.
Кайсы нерсе CSS менен кесилгенин текшерүү үчүн Pen Scroll-стату суроосун караңыз, Pokemon версиясы [айрылуу] utilitybend. Оптимизацияланган эргономика: CSSдеги логика CSS Wrapped программасынын "Оптимизацияланган эргономика" бөлүмү биздин иш процесстерибизди интуитивдик кылган өзгөчөлүктөргө басым жасайт. Логиканы кантип жазууда үч өзгөчөлүк өзгөрөт:
if() Билдирүүлөр Биз акыры CSS'те шарттарды алып жатабыз. if() функциясы стилдер жадыбалдары үчүн үчтүк оператор сыяктуу иштейт, бул бизге медиа, колдоо же стил сурамдарынын негизинде маанилерди колдонууга мүмкүндүк берет. Бул бир мүлктү өзгөртүү үчүн кеңири @media блокторуна муктаждыкты азайтат. @function functionsБиз акыры логиканы башка жерге жылдыра алабыз, натыйжада кээ бир таза файлдар, жашоонун чыныгы сапаты. sibling-index() жана sibling-count() Бул дарактарды санаган функциялар тизменин өлчөмүнө негизделген таң калыштуу анимацияларды же элементтерди стилдөө маселесин чечет. Мен CSS менен бир туугандардын стилин түзүүдө изилдегенимдей, бул биздин HTMLдеги өзгөчөлөштүрүлгөн касиеттерди (мисалы --index: 1) катуу коддоо зарылдыгын жок кылат.
Мисал: Макеттерди эсептөө Эми биз кыскача математикалык формулаларды жаза алабыз. Мисалы, экранга кирген карталар үчүн анимацияны таң калтыруу маанисиз болуп калат: .карта-контейнер > * { анимация: 0,6 сек ылдамдыкта алдыга жылдыруу; /* Мындан ары кол менен --index өзгөрмөлөр жок! */ анимация кечигүү: calc(singling-index() * 0.1s); }
Атүгүл мен бул функцияларды тригонометрия менен бирге колдонуп, эч кандай JavaScript жок нерселерди кемчиликсиз бир тегерекке жайгаштырууга эксперимент жасадым.
Демо: Динамикалык картанын укмуштуу анимациялары.
Utilitybend аркылуу sibling-index() [forked] колдонуу менен Pen Stagger карталарын караңыз.
Демо: singling-index, singling-count жана жаңы CSS @function функциясын колдонуу менен нерселерди кемчиликсиз чөйрөгө жайгаштыруу.
Utilitybend аркылуу sibling-index, sibling-count жана функцияларды [forked] колдонуучу Pen чөйрөсүн караңыз. Менин CSS иштердин тизмеси: Мен аракет кылууну күтө албайм Мен тандоолорду жана өткөөлдөрдү скульптуралоо менен алек болсом да, "CSS Wrapped 2025" отчету башка жакшы нерселерге жык толгон, бирок менде CodePenде күйгүзүүгө мүмкүнчүлүгүм жок. Булар менин кийинки эксперименттерим үчүн тизмемде жогору: Анкерленген контейнер сурамдары Мен карусель демосунда баскычтар үчүн CSS Anchor Positioning колдондум, бирок "CSS Wrapped"мунун эволюциясы: Анкерленген контейнер сурамдары. Бул баарыбызда болгон кеңештер менен болгон көйгөйдү чечет: эгер браузер мейкиндиктин чектелүүсүнөн улам кеңешти жогорудан ылдыйга оодарса, "жебе" көбүнчө туура эмес жолду көрсөтүп калат. Анкерленген контейнер сурамдары менен (@container anchored(fallback: flip-block)) биз элементти браузер чындыгында тандап алган резервдик позициянын негизинде стилдей алабыз. Кыстарылган көрүү өткөөл топтору View Transitions революция болду, бирок алар белгилүү бир соодалашуу менен келди: алар элемент дарагын түздөштү, ал көбүнчө 3D трансформациясын же толуп кетүүнү сындырды: клип. Мен ар дайым бир нерсе жетишпей жатканын сезчүмүн, бул жөн гана жооп болушу мүмкүн. View-transition-group: жакынын колдонуу менен, акыры өткөөл топторду бири-биринин ичине уялай алабыз. Бул бизге өтүү учурунда кесүү эффекттерин же 3D айлануусун сактап калууга мүмкүндүк берет — буга чейин элементтер жогорку деңгээлге көтөрүлгөндүктөн, мүмкүн болбогон нерсе. .card img { view-transition-name: photo; көрүү-өткөөл тобу: эң жакын; /* Аны уяча сактаңыз! */ }
Типография жана формалар Акыр-аягы, мендеги эргономист Text Box Trimди сынап көрүүнү каалап жатат, ал акыры кемчиликсиз вертикалдуу тегиздөө үчүн тексттин мазмунунун үстүндө жана астындагы тажатма кошумча боштуктарды (жетектөөчү) жок кылууга убада берет. Ал эми чыгармачыл тарап үчүн бурчтук форма жана shape() функциясы тик бурчтуу эмес макеттерди ачып, CSS өзгөрмөлөрүнө жооп берген "төрт бурчтуктарга" жана татаал жолдорго мүмкүндүк берет. Айткандай эле, мен куурчактарга толгон дизайнды күтө албайм! Үмүттүү келечек Биз CSS мурда JavaScript'ке таандык болгон логиканы, абалды жана татаал өз ара аракеттенүүнү башкарууга жөндөмдүү болуп жаткан дүйнөгө күбө болуп жатабыз. moveBefore (iframes/videos үчүн DOM абалын сактоо) жана attr() (түстөр жана торлор үчүн саптардан тышкары типтерди колдонуу) сыяктуу функциялар бул чындыкты бекемдейт. Бул функциялардын кээ бирлери учурда эксперименталдык же Chrome үчүн өзгөчө болсо да, импульс талашсыз. Биз бул мүмкүнчүлүктөрдүн базалык негизи болушун камсыз кылуу үчүн Interop сыяктуу демилгелер аркылуу бардык браузерлерде үзгүлтүксүз колдоо күтүшүбүз керек. Айтылгандай, браузердин кыймылдаткычтарына ээ болуу "Адегенде Chrome'до" ушул укмуштуудай өзгөчөлүктөргө ээ болуу сыяктуу эле маанилүү. Бул жаңы функциялар браузерлерге кирерден мурун талкууланып, каралып, сыналышы керек. Бул CSSке кирүү үчүн укмуштуудай учур. Биз мындан ары документтерди стилдештирүү эмес; биз динамикалык, эргономикалык жана күчтүү тиркемелерди болуп көрбөгөндөй күчтүү жергиликтүү инструменттер топтому менен иштеп жатабыз. Келгиле, бул жаңы доор менен баралы жана сөздү жайылталы. Бул CSS Wrapped!
