Ti MO ba pin awọn itankalẹ CSS si awọn ẹka, a ti lọ jinna ju awọn ọjọ lọ nigba ti a kan beere fun redio aala lati lero bi a ti n gbe ni ọjọ iwaju. A n gbe lọwọlọwọ ni akoko kan nibiti pẹpẹ ti n fun wa ni awọn irinṣẹ ti kii ṣe tweak Layer wiwo nikan, ṣugbọn tun ṣe ni ipilẹ bi a ṣe n ṣe awọn atọkun ayaworan. Mo ro pe nọmba awọn ẹya ti a kede ni 2024 ko le ṣe afikun. Emi ko ti jẹ aṣiṣe pẹlu idunnu rara.
Ẹgbẹ Chrome ti “CSS Wrapped 2025” kii ṣe atokọ awọn ẹya nikan; o jẹ a manifesto fun a ìmúdàgba, abinibi ayelujara. Gẹgẹbi ẹnikan ti o ti lo ọdun meji ti o ṣe akọsilẹ awọn itankalẹ wọnyi - lati asọye awọn akoko “CSS5” si awọn intricacies ti awọn ohun elo ipilẹ ode oni - Mo rii ara mi ni wiwo ipari-oke ti ọdun yii pẹlu ori idunnu nla kan. A n rii iyipada si ọna “Ergonomics Iṣapeye” ati “Awọn ibaraenisọrọ t’okan” ti o gba wa laaye lati da ija koodu naa duro ki o bẹrẹ awọn atọkun sculpting ni ipo adayeba wọn.
Ninu nkan yii, o le rii iwoye okeerẹ ni awọn ẹya iduro lati inu ijabọ Chrome, ti a wo nipasẹ lẹnsi ti awọn adanwo to ṣẹṣẹ ati awọn ireti fun ọjọ iwaju ti Syeed.
Iyika paati: Nikẹhin, Aṣayan Isọdi ti Ilu abinibi
Fun awọn ọdun, a ti gbarale awọn ile-ikawe JavaScript ti o wuwo si awọn ifilọlẹ aṣa, “iṣoro ọdun mẹwa” ti pẹpẹ ti yanju nipari. Bi mo ṣe ṣe alaye ninu isunmi jinlẹ mi sinu itan-akọọlẹ ti yiyan isọdi (ati awọn nkan ti o jọmọ), eyi ti jẹ ọna gigun ti o kan Ṣii UI, awọn orukọ bikesheding bi
Afikun ikọja lati gba akoonu ọlọrọ laaye ninu awọn aṣayan, gẹgẹbi awọn aworan tabi awọn asia, jẹ igbadun pupọ. A le ṣẹda gbogbo iru awọn aṣayan ni ode oni:
Ririnkiri: Mo ṣẹda demo Poké-adventure kan ti n fihan bii “akoonu ti a yan> tuntun le ṣe ẹda akoonu ọlọrọ (bii aami Pokéball) lati aṣayan taara sinu bọtini.
Wo Pen A asefara yan pẹlu awọn aworan inu ti awọn aṣayan ati awọn ti a ti yan akoonu [forked] nipa utilitybend.
Ririnkiri: Wiwo okeerẹ ni iselona yiyan pẹlu awọn eroja afarape nikan.
Wo Pen A asefara yan pẹlu nikan pseudo-eroja [forked] nipa utilitybend.
Ririnkiri: Tabi o le tapa soke ni ogbontarigi pẹlu demo yiyan Akojọ aṣyn ni lilo awọn ẹgbẹ ijade.
Wo Pen An gangan Yan Akojọ aṣyn pẹlu optgroups [forked] nipa utilitybend. Ẹya yii nikan ṣe afihan iyipada nla ni bii a ṣe le kọ awọn fọọmu, idinku awọn igbẹkẹle ati gbese imọ-ẹrọ. Yi lọ Awọn asami Ati iku ti JavaScript Carousel Ṣiṣẹda carousels ti jẹ itan-akọọlẹ jẹ aaye ija laarin awọn olupilẹṣẹ ati awọn alabara. Awọn alabara nifẹ wọn, awọn olupilẹṣẹ bẹru JavaScript ti o nilo lati jẹ ki wọn wa ati ṣiṣe. Awọn dide ti :: yi lọ-asami ati :: yi lọ-bọtini () pseudo-eroja ayipada yi ìmúdàgba o šee igbọkanle. Awọn ẹya ara ẹrọ yii gba wa laaye lati ṣẹda awọn aami lilọ kiri ati awọn bọtini yi lọ ni mimọ pẹlu CSS, ti a so mọ ni abinibi si apo eiyan. Bi mo ti kowe lori mi bulọọgi, yi je Love ni akọkọ ifaworanhan. Agbara lati ṣẹda iṣẹ-ṣiṣe ni kikun, esun wiwọle laisi laini kan ti JavaScript kii ṣe irọrun nikan; o jẹ iṣẹgun fun iṣẹ. Diẹ ninu awọn ifiyesi iraye si wa ni ayika ẹya yii, ati botilẹjẹpe iwọnyi wulo, ọna le wa fun awa awọn olupilẹṣẹ lati jẹ ki o ṣiṣẹ. Ohun ti o dara ni, gbogbo awọn iyipada UI wọnyi jẹ ki o rọrun pupọ ju ifọwọyi DOM aṣa ati fifa ni ayika awọn aami aria, ṣugbọn Mo digress… Bayi a le ṣe akojọpọ awọn asami laifọwọyi nipa lilo ẹgbẹ-ami-ami-simi ati aṣa awọn bọtini nipa lilo ipo oran lati gbe wọn si deede ibiti a fẹ.
.carousel { àkúnwọ́sílẹ̀-x: auto; yi lọ-marker-ẹgbẹ: lẹhin; /* Ṣẹda apoti fun awọn aami */
/ * Ṣẹda awọn bọtini * / & :: yi-bọtini (opopona-ila),&:: yi-bọtini (ibẹrẹ-ila) { akoonu:""; ipo: idi; /* Lo ipo oran lati aarin wọn */ ipo-oran: --carousel; oke: oran (aarin); }
/ * Ṣẹda awọn asami lori awọn ọmọ */ div { &:: ami yiyi { akoonu:""; ìbú: 24px; rediosi aala: 50%; kọsọ: ijuboluwole; } /* Ṣe afihan aami ti nṣiṣe lọwọ */ & :: ami-ami: ibi-afẹde-lọwọlọwọ { abẹlẹ: funfun; } } }
Ririnkiri: Idanwo mi ṣiṣẹda carousel kan jade ni HTML ati CSS, ni lilo ipo oran lati gbe awọn bọtini.
Wo Pen Carousel Pure HTML ati CSS [forked] nipasẹ utilitybend.
Ririnkiri: Atunṣe slider Webshop slick ni lilo attr () lati fa awọn aworan isale ni agbara sinu awọn asami.
Wo Pen Webshop slick slider atunṣe ni CSS [forked] nipasẹ utilitybend. Awọn ibeere Ipinle: Ohun Dile? Nkan Snappy Snapped? Fun igba pipẹ, a ko ni agbara lati mọ boya “ohun alalepo ti di” tabi ti “ohun kan ti o ni ipanu ti di” laisi gbigbekele awọn gige IntersectionObserver. Chrome 133 ṣe afihan awọn ibeere yi-ipinle, gbigba wa laaye lati beere awọn ipinlẹ wọnyi ni asọye. Nipa tito eiyan-iru: yi lọ-ipinle, a le bayi ara ọmọ da lori boya wọn ti di, snapped, tabi àkúnwọsílẹ. Eyi jẹ ilọsiwaju “didara ti igbesi aye” nla ti Mo ti nduro ni itara lati Ọjọ CSS 2023. O ti wa pupọ pupọ nitori a tun le rii itọsọna ti yiyi, ẹlẹwà! Fun apẹẹrẹ ti o rọrun: nikẹhin a le lo ojiji kan si akọsori nikan nigbati o ba tẹramọ si oke ti iwo wiwo: .akọsori-epo { eiyan-iru: yi lọ-ipinle; ipo: alalepo; oke: 0;
akọsori { iyipada: apoti-ojiji 0.5s irọrun-jade; /* Ibeere naa ṣayẹwo ipo ti eiyan naa */ @container yi lọ-ipinle(di: oke) { apoti-ojiji: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Ririnkiri: Akọsori alalepo ti o kan ojiji nikan nigbati o di gangan.
Wo awọn akọle Alalepo Pen pẹlu ibeere lilọ-ipinle, ṣayẹwo boya ohun elo alalepo ti di [forked] nipasẹ utilitybend.
Ririnkiri: Atokọ-akori Pokémon kan ti o nlo awọn ibeere-ipinlẹ yipo ni idapo pẹlu ipo oran lati gbe fireemu kan lori iwa ti o ya lọwọlọwọ.
Wo ibeere Pen Yi lọ-ipinle lati ṣayẹwo iru nkan wo ni o mu pẹlu CSS, ẹya Pokemon [forked] nipasẹ utilitybend. Iṣapeye Ergonomics: Logic Ni CSS Apakan “Ergonomics Iṣapeye” ti CSS Wrapped ṣe afihan awọn ẹya ti o jẹ ki ṣiṣan iṣẹ wa ni oye diẹ sii. Awọn ẹya mẹta duro jade bi iyipada fun bii a ṣe kọ ọgbọn:
ti o ba ti () GbólóhùnA nipari gba awọn majemu ni CSS. Iṣẹ if() n ṣiṣẹ bi oniṣẹ ternary fun awọn iwe ara, gbigba wa laaye lati lo awọn iye ti o da lori media, atilẹyin, tabi awọn ibeere ara inu laini. Eyi dinku iwulo fun awọn bulọọki @media verbose fun awọn ayipada ohun-ini ẹyọkan. Awọn iṣẹ ṣiṣe A le nipari gbe ọgbọn diẹ si aye ti o yatọ, ti o mu abajade diẹ ninu awọn faili mimọ, ẹya didara igbesi aye gidi kan. atọka arakunrin () ati arakunrin-ka () Awọn iṣẹ kika igi wọnyi yanju ọran ti awọn ohun idanilaraya iyalẹnu tabi awọn ohun iselona ti o da lori iwọn atokọ. Bi Mo ṣe ṣawari ni Awọn arakunrin Styling pẹlu CSS ko rọrun rara, eyi yọkuro iwulo lati ṣe awọn ohun-ini aṣa koodu lile (bii --index: 1) ninu HTML wa.
Apeere: Iṣiro Awọn Ifilelẹ Bayi a le kọ awọn agbekalẹ mathematiki ṣoki. Fun apẹẹrẹ, didamu ere idaraya fun awọn kaadi ti nwọle iboju di ohun kekere: .kaadi-epo > * { iwara: fi han 0.6s Ease-jade forwards; /* Ko si afọwọṣe diẹ sii --awọn oniyipada atọka! */ iwara-idaduro: calc (sibling-index () * 0.1s); }
Mo paapaa ṣe idanwo pẹlu lilo awọn iṣẹ wọnyi pẹlu trigonometry lati gbe awọn nkan sinu Circle pipe laisi JavaScript eyikeyi.
Ririnkiri: Iyalẹnu kaadi awọn ohun idanilaraya ni agbara.
Wo Pen Stagger awọn kaadi lilo sibling-index () [forked] nipa utilitybend.
Ririnkiri: Gbigbe awọn ohun kan sinu Circle pipe ni lilo atọka arakunrin, kika arakunrin, ati ẹya CSS @iṣẹ tuntun.
Wo Ayika Pen naa nipa lilo atọka arakunrin, kika arakunrin ati awọn iṣẹ [forked] nipasẹ utilitybend. Akojọ-Ṣe CSS Mi: Awọn ẹya Emi Ko le Duro Lati Gbiyanju Lakoko ti Mo ti n ṣiṣẹ ni yiyan awọn yiyan ati awọn iyipada, ijabọ “CSS Wrapped 2025” ti kun pẹlu awọn ire miiran ti Emi ko ni aye lati tan ni CodePen sibẹsibẹ. Iwọnyi ga lori atokọ mi fun awọn idanwo atẹle mi: Awọn ibeere Apoti Anchored Mo lo Ipo Anchor CSS fun awọn bọtini inu demo carousel mi, ṣugbọn “CSS Wrapped” ṣe afihan ohun kanitankalẹ ti yi: Anchored Eiyan ibeere. Eyi yanju iṣoro kan ti gbogbo wa ni pẹlu awọn itọnisọna irinṣẹ: ti ẹrọ aṣawakiri ba yi ọpa irinṣẹ lati oke de isalẹ nitori awọn idiwọ aaye, “ọfa” nigbagbogbo ma n tọka si ọna ti ko tọ. Pẹlu awọn ibeere eiyan ti a daduro (@container anchored(fallback: flip-block)), a le ṣe ara eroja ti o da lori iru ipo isubu ti ẹrọ aṣawakiri ti yan gangan. Awọn ẹgbẹ Iyipada Ti Itẹle Wiwo Awọn iyipada ti jẹ iyipada, ṣugbọn wọn wa pẹlu iṣowo-pipa kan pato: wọn tan igi eroja, eyiti o nigbagbogbo fọ awọn iyipada 3D tabi aponsedanu: agekuru. Mo nigbagbogbo ni rilara pe o nsọnu nkankan, ati pe eyi le jẹ idahun nikan. Nipa lilo wiwo-iyipada-ẹgbẹ: sunmọ, a le nipari itẹ-ẹiyẹ iyipada awọn ẹgbẹ laarin kọọkan miiran. Eyi n gba wa laaye lati ṣetọju awọn ipa gige tabi awọn iyipo 3D lakoko iyipada kan - nkan ti ko ṣee ṣe tẹlẹ nitori awọn eroja ti gbe soke si ipele oke. .kaadi img { wiwo-iyipada-orukọ: Fọto; wiwo-iyipada-ẹgbẹ: sunmọ; /* Jeki o iteeye! */ }
Typography ati Awọn apẹrẹ Lakotan, ergonomist ninu mi jẹ nyún lati gbiyanju Text Box Trim, eyiti o ṣe ileri lati yọkuro irunu afikun funfun aaye loke ati ni isalẹ akoonu ọrọ (asiwaju) lati nikẹhin ṣaṣeyọri titete inaro pipe. Ati fun ẹgbẹ ẹda, igun-igun-igun ati iṣẹ apẹrẹ () n ṣii awọn ipilẹ ti kii ṣe onigun mẹrin, gbigba fun "squaricles" ati awọn ọna idiju ti o dahun si awọn oniyipada CSS. Ti o sọ pe, Emi ko le duro lati ni apẹrẹ ti o kún fun awọn squircles! Ojo iwaju to ni ireti A n jẹri agbaye nibiti CSS ti n ni agbara lati mu ọgbọn, ipinlẹ, ati awọn ibaraenisepo idiju ti o jẹ ti JavaScript tẹlẹ. Awọn ẹya ara ẹrọ bi moveBefore (titọju ipo DOM fun iframes / awọn fidio) ati attr () (lilo awọn iru ti o kọja awọn okun fun awọn awọ ati awọn grids) siwaju simenti otitọ yii. Lakoko ti diẹ ninu awọn ẹya wọnyi jẹ adaṣe lọwọlọwọ tabi pato si Chrome, ipa naa ko ṣee sẹ. A gbọdọ nireti fun atilẹyin ti o tẹsiwaju kọja gbogbo awọn aṣawakiri nipasẹ awọn ipilẹṣẹ bii Interop lati rii daju pe awọn agbara wọnyi di ipilẹ. Iyẹn ni sisọ, nini awọn ẹrọ aṣawakiri jẹ pataki bi nini gbogbo awọn ẹya oniyi wọnyi ni “Chrome akọkọ”. Awọn ẹya tuntun wọnyi nilo lati jiroro, tinkered pẹlu, ati idanwo ṣaaju ibalẹ ni awọn aṣawakiri lailai. O jẹ akoko ikọja lati wọle si CSS. A wa ni ko gun o kan iselona awọn iwe aṣẹ; a n ṣe iṣẹda agbara, ergonomic, ati awọn ohun elo to lagbara pẹlu ohun elo ohun elo abinibi ti o lagbara ju lailai. Jẹ ki a lọ pẹlu akoko tuntun yii ki a tan ọrọ naa. Eleyi jẹ CSS we!
