Егер мен CSS эволюциясын санаттарға бөлетін болсам, біз болашақта өмір сүріп жатқандай сезіну үшін шекара радиусын сұраған күндерден әлдеқайда асып кеттік. Біз қазір платформа бізге визуалды қабатты ғана емес, интерфейстерді қалай құрастыратынымызды түбегейлі қайта анықтайтын құралдарды беретін сәтте өмір сүріп жатырмыз. Мен 2024 жылы жарияланған мүмкіндіктер санын толықтыру мүмкін емес деп ойладым. Мен ешқашан мұндай бақытты қателескен емеспін.
Chrome тобының «CSS Wrapped 2025» мүмкіндігі жай ғана мүмкіндіктер тізімі емес; бұл динамикалық, жергілікті желіге арналған манифест. Осы эволюцияларды құжаттауға бірнеше жыл жұмсаған адам ретінде - «CSS5» дәуірлерін анықтаудан қазіргі заманғы макет утилиталарының күрделілігіне дейін - мен өзімді биылғы жылдың қорытындысына үлкен толқу сезімімен қараймын. Біз кодпен күресуді тоқтатуға және интерфейстерді табиғи күйінде мүсіндеуді бастауға мүмкіндік беретін «Оңтайландырылған эргономика» және «Келесі ұрпақтың өзара әрекеттесуіне» қарай жылжуды көріп отырмыз.
Бұл мақалада сіз менің соңғы эксперименттерімнің объективі арқылы қаралған Chrome есебіндегі ерекше мүмкіндіктерге және платформаның болашағына деген үміттерге толық шолу таба аласыз.
Құрамдас төңкеріс: Ақырында, жергілікті теңшелетін таңдау
Көптеген жылдар бойы біз ашылмалы тізімдерді стильдеу үшін ауыр JavaScript кітапханаларына сүйендік, бұл платформа ақыры шешкен «ондаған жылдардағы мәселе». Мен теңшелетін таңдаудың (және қатысты мақалалардың) тарихына терең үңілу барысында егжей-тегжейлі айтып өткенімдей, бұл Open UI,
Суреттер немесе жалаушалар сияқты опциялардың ішіндегі бай мазмұнға мүмкіндік беретін фантастикалық қосымша өте қызықты. Қазіргі таңда біз таңдаудың барлық түрлерін жасай аламыз:
Демо: Мен жаңа
Опциялар ішіндегі кескіндері бар теңшелетін таңдау қаламын және utilitybend арқылы таңдалған мазмұнды [айырылған] қараңыз.
Демо: таңдауды тек псевдоэлементтермен сәндеуге жан-жақты көзқарас.
Utilitybend арқылы тек жалған элементтері бар теңшелетін Қаламды қараңыз.
Демонстрация: Немесе оптималды топтар арқылы осы Мәзір таңдау демонстрациясымен оны жоғарылатуға болады.
Қаламды қараңыз Utilitybend арқылы таңдаулы топтары бар нақты таңдау мәзірі [форкталған]. Бұл мүмкіндіктің өзі тәуелділік пен техникалық қарызды азайтып, пішіндерді құру жолындағы үлкен өзгерісті білдіреді. Айналдыру маркерлері және JavaScript карусельінің өлімі Карусельдер жасау тарихи түрде әзірлеушілер мен клиенттер арасындағы үйкеліс нүктесі болды. Клиенттер оларды жақсы көреді, әзірлеушілер оларды қол жетімді және өнімді ету үшін қажет JavaScript-тен қорқады. ::scroll-marker және ::scroll-button() псевдоэлементтерінің келуі бұл динамиканы толығымен өзгертеді. Бұл мүмкіндіктер шарлау нүктелері мен айналдыру түймелерін тек CSS көмегімен айналдыру контейнерімен тікелей байланыстыруға мүмкіндік береді. Мен өз блогымда жазғанымдай, бұл бірінші слайдтағы махаббат болды. JavaScript бір жолынсыз толық функционалды, қолжетімді сырғытпаны жасау мүмкіндігі жай ғана ыңғайлы емес; бұл орындаудың жеңісі. Бұл мүмкіндікке қатысты кейбір қол жетімділік мәселелері бар және олар жарамды болса да, біз әзірлеушілер үшін оны жұмыс істеуге мүмкіндік беретін әдіс болуы мүмкін. Бір жақсысы, бұл UI өзгерістерінің барлығы оны пайдаланушы DOM манипуляциясынан және ария тегтерін сүйреп апарудан әлдеқайда жеңілдетеді, бірақ мен шегінемін… Біз енді таңбалауыштарды айналдыру-маркер-тобы арқылы автоматты түрде топтауға және оларды дәл қалаған жерге орналастыру үшін анкерлік орналастыруды пайдаланып түймелерді сәндей аламыз.
.карусель { overflow-x: auto; айналдыру-маркер-топ: кейін; /* Нүктелер үшін контейнер жасайды */
/* Түймелерді жасау */ &::жылжу түймесі(кіріктірілген соң),&::жылжу түймесі(кіріктіру-бастау) { мазмұны: " "; позициясы: абсолютті; /* Оларды ортаға қою үшін якорь орналасуын пайдаланыңыз */ позиция-зәкір: --карусель; жоғарғы: якорь(орталық); }
/* Балаларға маркерлер жасаңыз */ div { &:: айналдыру маркері { мазмұны: " "; ені: 24px; шекара радиусы: 50%; курсор: көрсеткіш; } /* Белсенді маркерді бөлектеңіз */ &:: айналдыру-маркер: мақсатты-ағым { фон: ақ; } } }
Демо: Түймелерді орналастыру үшін анкерлік орналастыруды пайдаланып, HTML және CSS-тен таза карусель жасау экспериментім.
Utilitybend арқылы Pen Carousel Pure HTML және CSS [forked] қараңыз.
Көрсетілім: Фондық кескіндерді маркерлерге динамикалық түрде тарту үшін attr() көмегімен веб-дүкеннің сырғымалы сырғытпасы.
Utilitybend арқылы CSS [forked] ішіндегі Pen Webshop slick слайдер ремейкін қараңыз. Күй сұраулары: жабысқақ нәрсе кептеліп қалды ма? Жылдам нәрсе жарылып қалды ма? Ұзақ уақыт бойы IntersectionObserver хакерлеріне сүйенбестен, «жабысқақ заттың тұрып қалғанын» немесе «жылдам элементтің үзілгенін» білу мүмкіндігі жоқ еді. Chrome 133 бұл күйлерді декларациялық түрде сұрауға мүмкіндік беретін айналдыру күйі сұрауларын енгізді. Контейнер түрі: айналдыру күйін орнату арқылы біз енді балаларды олардың кептелуіне, үзілгеніне немесе толып кетуіне қарай мәнерлей аламыз. Бұл 2023 жылғы CSS күнінен бері мен асыға күткен «өмір сапасының» ауқымды жақсаруы. Ол тіпті көп дамыды, өйткені біз айналдыру бағытын да көре аламыз, тамаша! Қарапайым мысал үшін: біз тақырыпқа көлеңкені ол шын мәнінде қарау терезесінің жоғарғы жағына жабысып тұрғанда ғана қолдана аламыз: .тақырып-контейнер { контейнер түрі: айналдыру күйі; позиция: жабысқақ; жоғарғы: 0;
тақырып { өту: қорап-көлеңке 0,5 с жеңілдету; /* Сұрау контейнердің күйін тексереді */ @container scroll-state(кептеліп қалған: жоғарғы) { жәшік көлеңкесі: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Демонстрация: Көлеңке шынымен тұрып қалғанда ғана қолданылатын жабысқақ тақырып.
Жабысқақ элементтің utilitybend арқылы жабысып қалғанын тексеру үшін, айналдыру күйі сұрауы бар Pen Sticky тақырыптарын қараңыз.
Демо: кадрды қазіргі таңдалған таңбаның үстіне жылжыту үшін анкерлік орналасумен біріктірілген айналдыру күйіндегі сұрауларды пайдаланатын Покемон тақырыбына арналған тізім.
Utilitybend арқылы CSS, Pokemon нұсқасы [forked] арқылы қай элемент үзілгенін тексеру үшін Pen Scroll-күй сұрауын қараңыз. Оңтайландырылған эргономика: CSS-дегі логика CSS Wrapped бағдарламасының «Оңтайландырылған эргономика» бөлімі жұмыс үрдістерімізді интуитивті ететін мүмкіндіктерді бөлектейді. Логиканы жазу жолында үш қасиет түрлендіргіш ретінде ерекшеленеді:
if() Мәлімдемелер Біз ақырында CSS-те шартты аламыз. if() функциясы стиль кестелері үшін үштік оператор ретінде әрекет етеді, бұл бізге медиа, қолдау немесе мәнер сұрауларына негізделген мәндерді енгізуге мүмкіндік береді. Бұл жалғыз сипат өзгерістері үшін егжей-тегжейлі @media блоктарының қажеттілігін азайтады. @function functions Біз ақырында кейбір логиканы басқа орынға жылжыта аламыз, нәтижесінде кейбір таза файлдар, шынайы өмір сапасы мүмкіндігі пайда болады. sibling-index() және sibling-count() Бұл ағаштарды санау функциялары тізім өлшеміне негізделген таңқаларлық анимациялар немесе элементтерді сәндеу мәселесін шешеді. Мен CSS көмегімен ағайындыларды сәндеуді зерттегенімдей, бұл біздің HTML-де реттелетін сипаттарды (мысалы, --index: 1) қатаң кодтау қажеттілігін болдырмайды.
Мысалы: Макеттерді есептеу Енді біз қысқаша математикалық формулаларды жаза аламыз. Мысалы, экранға кіретін карталар үшін анимацияны таң қалдыру тривиальды болады: .карта-контейнер > * { анимация: 0,6 сек алға жылжытуды ашу; /* Енді қолмен --index айнымалылары жоқ! */ анимация-кідіріс: calc(sisling-index() * 0,1с); }
Мен тіпті JavaScriptсіз элементтерді тамаша шеңберге орналастыру үшін осы функцияларды тригонометриямен бірге қолданып көрдім.
Демо: динамикалық түрде таңқаларлық карта анимациялары.
Utilitybend арқылы sibling-index() [forked] көмегімен Pen Stagger карталарын қараңыз.
Демо: sibling-index, sibling-count және жаңа CSS @function мүмкіндігін пайдаланып элементтерді тамаша шеңберге орналастыру.
Utilitybend арқылы sibling-index, sibling-count және [forked] функцияларын пайдаланатын Қаламды қараңыз. Менің CSS істерім тізімі: Көруді күте алмайтын мүмкіндіктер Мен таңдаулар мен ауысуларды мүсіндеумен айналысқан кезде, «CSS Wrapped 2025» есебінде CodePen-де әлі жұмыс істеуге мүмкіндігім болмаған басқа да жақсылықтар бар. Бұл менің келесі тәжірибелерім үшін тізімімде жоғары: Бекітілген контейнер сұраулары Мен карусель демонстрациясындағы түймелер үшін CSS Anchor Positioning қолдандым, бірақ «CSS Wrapped»оның эволюциясы: Анкерленген контейнер сұраулары. Бұл бәрімізде құрал кеңестерімен кездесетін мәселені шешеді: егер браузер кеңістік шектеулеріне байланысты құралдар кеңесін жоғарыдан төмен қарай аударса, «көрсеткі» жиі дұрыс емес бағытты көрсетеді. Бекітілген контейнер сұрауларымен (@container anchored(fallback: flip-block)) браузер нақты таңдаған резервтік позиция негізінде элементті мәнерлей аламыз. Кірістірілген көрініс өтпелі топтары View Transitions революция болды, бірақ олар белгілі бір айырбаспен келді: олар 3D түрлендірулерін немесе толып кетуді жиі бұзатын элементтер ағашын тегістеді: клип. Мен әрқашан бірдеңе жетіспейтінін сезіндім, бұл жауап болуы мүмкін. Көрініс-өткізу-тобын пайдалану арқылы: ең жақын, біз ақырында өту топтарын бір-бірінің ішіне орналастыра аламыз. Бұл көшу кезінде кесу әсерлерін немесе 3D айналуларын сақтауға мүмкіндік береді — бұрын элементтер жоғарғы деңгейге көтерілгендіктен мүмкін болмаған нәрсе. .card img { view-transition-name: фото; көрініс-өтпелі-тобы: ең жақын; /* Оны ұяшықта сақтаңыз! */ }
Типография және пішіндер Ақырында, мендегі эргономист Text Box Trim қолданбасын қолданып көргісі келеді, ол мәтін мазмұнының үстіндегі және астындағы (жетекші) тітіркендіргіш қосымша бос орынды алып тастауға уәде береді, сайып келгенде, тамаша тік туралауды қамтамасыз етеді. Шығармашылық жағы үшін бұрыш-пішін және пішін() функциясы тікбұрышты емес макеттерді ашады, бұл CSS айнымалыларына жауап беретін "шаршы" және күрделі жолдарға мүмкіндік береді. Айтуынша, мен шиыршықтарға толы дизайнды күте алмаймын! Үмітті болашақ Біз CSS бұрын JavaScript-ке тиесілі логиканы, күйді және күрделі өзара әрекеттесулерді өңдеуге қабілетті болатын әлемнің куәсі болып отырмыз. moveBefore (iframes/бейнелер үшін DOM күйін сақтау) және attr() (түстер мен торлар үшін жолдардан тыс түрлерді пайдалану) сияқты мүмкіндіктер бұл шындықты одан әрі бекітеді. Осы мүмкіндіктердің кейбірі қазіргі уақытта эксперименттік немесе Chrome-ға тән болғанымен, серпін жоққа шығарылмайды. Біз бұл мүмкіндіктердің негізгі болуын қамтамасыз ету үшін Interop сияқты бастамалар арқылы барлық браузерлерде үздіксіз қолдау күтуіміз керек. Айтуынша, браузер қозғалтқыштарының болуы «алдымен Chrome» жүйесінде осы керемет мүмкіндіктердің барлығына ие болу сияқты маңызды. Бұл жаңа мүмкіндіктерді браузерлерге енгізбес бұрын талқылап, өңдеп, сынау керек. Бұл CSS-ке кірудің керемет сәті. Біз енді құжаттарды сәндейтін жай ғана емеспіз; біз динамикалық, эргономикалық және сенімді қолданбаларды бұрынғыдан да күшті жергілікті құралдар жинағымен жасаймыз. Осы жаңа дәуірге кірісіп, сөзді таратайық. Бұл CSS оралған!
