Әгәр дә мин CSS эволюцияләрен категорияләргә бүлеп карасам, без киләчәктә яшәгән кебек тоелыр өчен чик-радиус сораган көннәрдән ераклаштык. Хәзерге вакытта без платформа безгә визуаль катламны тәртипкә китерми торган, ләкин архитектур интерфейсларыбызны төптән билгеләгән кораллар бирүче мизгелдә яшибез. 2024-нче елда игълан ителгән функцияләр саны өстен була алмый дип уйладым. Мин беркайчан да бәхетле ялгышмадым.
Chrome командасының "CSS төрелгән 2025" функцияләр исемлеге генә түгел; ул динамик, туган веб өчен манифест. Бер-ике ел бу эволюцияләрне документлаштырган кеше буларак - "CSS5" чорларын билгеләүдән алып, заманча урнаштыру коммуналь хезмәтләренең эчтәлегенә кадәр - мин быелгы тәмамлануга зур дулкынлану хисе белән карыйм. Без "Оптимальләштерелгән Эргономика" һәм "Киләсе Ген үзара бәйләнешләр" ка күчү күрәбез, бу безгә код белән көрәшүне туктатырга һәм табигый халәтендә скульптура интерфейсларын башларга мөмкинлек бирә.
Бу мәкаләдә сез Chrome докладыннан аерылып торган үзенчәлекләргә тулы күз сала аласыз, минем соңгы экспериментлар объективы аша каралган һәм платформаның киләчәгенә өмет.
Компонент революциясе: Ниһаять, туган үзенчәлекле сайлау
Еллар дәвамында без авыр JavaScript китапханәләренә таяндык, стиль төшүенә, платформа ниһаять чишкән "дистә еллык проблема". Мин көйләнә торган сайлау (һәм аңа бәйле мәкаләләр) тарихына тирән сикерүемдә җентекләп сөйләгәндә, бу ачык UI катнашындагы озын юл,
Рәсемнәр яки флаглар кебек эчтәлекле бай эчтәлекне рөхсәт итәр өчен фантастик өстәмә бик күңелле. Без хәзерге вакытта төрле сайлау ясый алабыз:
Демо: Мин Поке-маҗаралы демо ясадым, яңа
Каләмне карагыз Вариантлар эчендәге рәсемнәр белән көйләнә торган сайлау һәм utilbend тарафыннан сайланган контент.
Демо: Псевдо-элементлар белән сайлап алу стиленә тулы караш.
Каләмне карагыз.
Демо: Яисә сез аны опгруппалар ярдәмендә бу Меню сайлау демо белән чабып җибәрә аласыз.
Каләмне карагыз. Бу үзенчәлек кенә без формаларны ничек төзибез, бәйләнешләрне һәм техник бурычны киметәбез. Маркерларны әйләндерү һәм JavaScript Карусель үлеме Карусельләр ясау тарихи яктан уйлап табучылар һәм клиентлар арасында сүрелү ноктасы булды. Клиентлар аларны ярата, эшләүчеләр JavaScript-тан курка, аларны куллану һәм башкару өчен. :: Scroll-marker һәм :: scroll-button () псевдо-элементларның килүе бу динамиканы бөтенләй үзгәртә. Бу үзенчәлекләр безгә навигация нокталарын һәм әйләндерү төймәләрен CSS белән генә ясарга мөмкинлек бирә, әйләндерү контейнерына туган. Блогымда язганча, бу беренче слайдта Мәхәббәт иде. JavaScriptның бер сызыгы булмаган тулы функциональ, үтемле слайдер ясау мөмкинлеге уңайлы гына түгел; бу спектакль өчен җиңү. Бу функция тирәсендә кайбер мөмкинлекләр турында борчылулар бар, һәм алар дөрес булса да, безнең уйлап табучылар өчен аны эшләтеп җибәрү ысулы булырга мөмкин. Яхшысы, бу барлык UI үзгәртүләр аны DOM манипуляциясенә һәм ария тэгларына тартуга караганда күпкә җиңеләйтә, ләкин мин шикләнәм… Хәзер без маркерларны автоматик рәвештә әйләндерү-маркер-группа ярдәмендә төркемли алабыз һәм төймәләрне без теләгән урынга урнаштыру өчен якор позициясе ярдәмендә стиль ясый алабыз.
.Карусель { ташып-х: автомобиль; әйләндерү-маркер-төркем: соң; / * Нокталар өчен контейнер ясый * /
/ * Кнопкалар ясагыз * / & :: әйләндерү-төймә (сызык-ахыр),& :: әйләндерү-төймә (кертү-башлау) { эчтәлеге: ""; позиция: абсолют; / * Аларны үзәкләштерү өчен якор позициясен кулланыгыз * / позиция-якор: - карусель; өске: якорь (үзәк); }
/ * Балаларда маркерлар ясагыз * / div { & :: әйләндерү маркеры { эчтәлеге: ""; киңлеге: 24px; чик-радиус: 50%; курсор: күрсәткеч; } / * Актив маркерны аерып алыгыз * / & :: әйләндерү-маркер: максат-ток { фон: ак; } } }
Демо: Минем эксперимент HTML һәм CSSдан гына карусель ясау, төймәләрне урнаштыру өчен якор позициясен кулланып.
Каләм Карусель Чиста HTML һәм CSS-ны карагыз.
Демо: Фон рәсемнәрне маркерларга динамик тарту өчен attr () ярдәмендә веб-магазинның слайдер редакциясе.
Коммуналь хезмәтләр ярдәмендә CSS [кадакланган] каләм веб-магазинының слайдер редакциясен карагыз. Дәүләт сораулары: ябыштырылган әйбер? Снэппи нәрсә урланган? Озак вакыт дәвамында бездә "ябыштырылган әйбер тыгылган" яки "кисешкән әйбер урланган" икәнлеген белү сәләте җитмәде, IntersectionObserver хакларына таянмыйча. Chrome 133 әйләндерү-дәүләт сорауларын кертте, безгә бу дәүләтләрне декларатив рәвештә сорарга мөмкинлек бирде. Контейнер тибын куеп: әйләндерү-халәт, без хәзер балаларны ябыштырылган, урланган яки ташып торганга карап ясый алабыз. Бу массакүләм "тормыш сыйфаты" яхшырту, мин аны CSS 2023 көннән түземсезлек белән көттем. Ул хәтта бик күп үсеш алды, чөнки без төргәкнең юнәлешен дә күрә алабыз! Гади мисал өчен: без, ниһаять, күренешнең башына ябышканда гына башны күләгәдә куллана алабыз: контейнер { контейнер тибы: әйләндерү-торыш; позиция: ябыштыргыч; өстә: 0;
башлам { күчү: тартма-күләгә 0,5с җиңел; / * Сорау контейнерның торышын тикшерә * / @container әйләндерү-торышы (тыгылган: өстә) { тартма-күләгә: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Демо: Ябыштырылган баш, күләгәдә булганда гына кулланыла.
Каләм ябыштырылган башламнарны әйләндерү-дәүләт соравы белән карагыз, ябыштыргыч элементның утильбенд белән ябыштырылганын тикшерегез.
Демо: Покемон тематик исемлек, хәзерге вакытта төшерелгән персонаж өстендә рамны күчерү өчен якор позициясе белән кушылган әйләндерү-дәүләт сорауларын куллана.
Кайсы әйбернең CSS белән тартылганын тикшерү өчен, Каләм Scroll-дәүләт соравын карагыз, utilbend тарафыннан Покемон версиясе. Оптимальләштерелгән эргономика: CSS логикасы CSS төрелгән "Оптимальләштерелгән эргономика" бүлеге безнең эш процессын интуитив итә торган үзенчәлекләрне күрсәтә. Логиканы ничек язуыбыз өчен өч үзенчәлек үзгәрә:
if () Аңлатмалар Без ниһаять CSS шартлы алдык. If () функциясе стиль таблицалары өчен өченче оператор кебек эш итә, безгә медиа, ярдәм яки стиль соравы нигезендә кыйммәтләр кулланырга мөмкинлек бирә. Бу бер милек үзгәрү өчен фигыль @media блокларына ихтыяҗны киметә. @ функция функцияләре Без ниһаять кайбер логиканы бүтән урынга күчерә алабыз, нәтиҗәдә кайбер чиста файллар, реаль тормыш үзенчәлеге. кардәш-индекс () һәм кардәшләр санау () Бу агачларны санау функцияләре исемлек күләменә карап гаҗәпләнүче анимацияләр яки әйберләр ясау проблемасын чишәләр. CSS белән бертуган абый-кардәшләрне өйрәнгәндә беркайчан да җиңел булмады, бу безнең HTML-да каты кодлы үзенчәлекләр (--index: 1) кирәклеген бетерә.
Мисал: Таблицаларны исәпләү Хәзер без кыска математик формулалар яза алабыз. Мәсәлән, экранга кергән карточкалар өчен анимация шаккатыра: .карт-контейнер> * { анимация: алга таба 0,6с җиңеллекне ачу; / * Бүтән кулланма юк --index үзгәрүчәннәр! * / анимация-тоткарлау: кальк (кардәш-индекс () * 0,1с); }
Мин хәтта бу функцияләрне тригонометрия белән бергә сынап карадым, әйберләрне бернинди JavaScriptсыз камил түгәрәккә урнаштыру.
Демо: Карта анимацияләрен динамик рәвештә.
Коммуналь программа ярдәмендә кардәш-индекс () [кадакланган] ярдәмендә Каләм Стаггер карталарын карагыз.
Демо: Кардәшләр индексы, кардәшләр санын һәм яңа CSS @ функциясен кулланып, әйберләрне камил түгәрәккә урнаштыру.
Каләмне карагыз Кардәшләр индексы, кардәшләр саны һәм функцияләр ярдәмендә түгәрәк. Минем CSS Эшләр исемлеге: Сынап көтә алмыйм Сайлау һәм күчү скульптура белән мәшгуль булганда, "CSS Wrapped 2025" отчеты башка яхшы әйберләр белән тулы, миңа әле CodePen'та ут кабызу мөмкинлеге булмаган. Киләсе экспериментлар өчен алар минем исемлектә бик югары: Анкор контейнер сораулары Мин карусель демодагы төймәләр өчен CSS Анкор Позициясен кулландым, ләкин "CSS Wrapped" анны күрсәтәмоның эволюциясе: Анкор контейнер сораулары. Бу корал киңәшләре белән бездә булган проблеманы чишә: браузер космик чикләүләр аркасында коралның очын өстән аска юнәлтсә, "ук" еш кына дөрес булмаган юлны күрсәтә. Анкорлы контейнер соравы белән (@container anchored (кире кайту: флип-блок)), без браузерның кире кайту позициясен сайлап алган элементны ясый алабыз. Күчерү төркемнәре Күчешләрне карау революция булды, ләкин алар билгеле бер сәүдә белән килделәр: алар элемент агачын тигезләделәр, алар еш 3D трансформацияләрен өзделәр яки ташып тордылар: клип. Миндә һәрвакыт берәр нәрсә җитми кебек тоелды, һәм бу җавап кына булырга мөмкин. View-transition-group кулланып: иң якын, без ниһаять бер-беребезгә күчү төркемнәрен оялый алабыз. Бу безгә күчү вакытында кисү эффектларын яки 3D әйләнешне сакларга мөмкинлек бирә - моңа кадәр мөмкин булмаган әйбер, чөнки элементлар югары дәрәҗәгә күтәрелгән иде. .card img { view-transition-name: фото; карау-күчү-төркем: иң якын; / * Ояны саклагыз! * / }
Типография һәм формалар Ниһаять, миндәге эргономист Текст Бокс Тримын сынап карарга кычкыра, ул текстның эчтәлеге өстендә һәм астындагы бу рәнҗетүче өстәмә киңлекне бетерергә вәгъдә бирә (әйдәп баручы), ниһаять, вертикаль тигезләнешкә ирешү өчен. Иҗади ягы өчен почмак формасы һәм форма () функциясе турыпочмаклы булмаган макетларны ача, бу "сквариклар" һәм CSS үзгәрүләренә җавап бирүче катлаулы юллар өчен мөмкинлек бирә. Әйтелгәнчә, мин дизайн белән тулы дизайн көтә алмыйм! Өметле киләчәк Без CSS логика, дәүләт һәм катлаулы үзара бәйләнешләр белән эш итә алган дөньяның шаһиты, моңа кадәр JavaScriptныкы иде. MoveBefore (iframes / videos өчен DOM халәтен саклау) һәм attr () (төсләр һәм челтәрләр өчен сызыклардан тыш төрләрне куллану) кебек үзенчәлекләр бу чынбарлыкны тагын да ныгыта. Бу функцияләрнең кайберләре хәзерге вакытта эксперименталь яки Chrome өчен махсус булса да, момент бәхәссез. Бу мөмкинлекләрнең төп база булуын тәэмин итү өчен, без Интероп кебек инициативалар ярдәмендә барлык браузерларда даими ярдәмгә өметләнергә тиеш. Әйткәндәй, браузер двигательләре булу "Chrome first" ның бу искиткеч функцияләренә ия булу кебек үк мөһим. Бу яңа функцияләр браузерларга төшкәнче тикшерелергә, уйланырга һәм сыналырга тиеш. CSS-ка керү фантастик мизгел. Без инде документларны стилизацияләү генә түгел; без динамик, эргономик һәм ныклы кушымталар ясыйбыз, алар элеккегә караганда көчлерәк туган кораллар җыелмасы белән. Әйдәгез, бу яңа чор белән барып, хәбәр таратыйк. Бу CSS төрелгән!
