Хэрэв би CSS-ийн хувьслыг ангилалд хуваах юм бол бид ирээдүйд амьдарч байгаа мэт сэтгэгдэл төрүүлэхийн тулд хилийн радиусыг асуудаг байсан үеийг бид хол давсан. Одоогоор бид платформ нь зөвхөн харааны давхаргыг өөрчлөх бус, интерфейсийг хэрхэн яаж зохион бүтээхийг үндсээр нь шинэчлэн тодорхойлох хэрэгслүүдийг бидэнд өгч байгаа цаг үед амьдарч байна. 2024 онд зарласан функцүүдийн тоог гүйцэх боломжгүй гэж би бодсон. Би хэзээ ч ийм аз жаргалтай алдаа гаргаж байгаагүй.
Chrome багийн "CSS Wrapped 2025" нь зөвхөн функцүүдийн жагсаалт биш юм; Энэ бол динамик, уугуул вэбийн манифест юм. "CSS5"-ын эрин үеийг тодорхойлохоос эхлээд орчин үеийн зохион байгуулалтын хэрэгслүүдийн нарийн ширийнийг хүртэл эдгээр хувьслыг баримтжуулахад хэдэн жил зарцуулсан хүний хувьд би энэ оны төгсөлтийг маш их сэтгэл хөдөлгөмөөр харж байна. Бид кодтой тэмцэхээ зогсоож, интерфэйсүүдийг байгалийн байдлаар нь сийлбэрлэж эхлэх боломжийг олгодог "Оновчтой эргономик" болон "Дараагийн үеийн харилцан үйлчлэл" рүү шилжиж байгааг харж байна.
Энэ нийтлэлээс та Chrome-ын тайлангийн онцлох шинж чанаруудыг, миний сүүлийн үеийн туршилтуудын нүдээр харж, платформын ирээдүйн талаарх итгэл найдварыг иж бүрэн харах боломжтой.
Бүрэлдэхүүн хэсгүүдийн хувьсгал: Эцэст нь өөрчлөх боломжтой төрөлх сонголт
Олон жилийн турш бид унадаг цэсийг загварчлахын тулд JavaScript-ийн хүнд сангуудад найдаж байсан бөгөөд энэ нь платформ эцэст нь шийдэж чадсан "олон арван жилийн асуудал" юм. Би тохируулж болох сонголтын (болон холбогдох нийтлэлүүдийн) түүхийг нарийвчлан судлахдаа энэ нь Нээлттэй UI,
Зураг эсвэл туг гэх мэт сонголтуудын дотор баялаг контентыг зөвшөөрөх гайхалтай нэмэлт нь маш хөгжилтэй байдаг. Өнөөдөр бид бүх төрлийн сонголтыг үүсгэж болно:
Үзүүлэн: Би шинэ <сонгосон контент> элемент нь сонголтоос товч руу хэрхэн баялаг агуулгыг (Pokéball дүрс гэх мэт) хувилж болохыг харуулсан Poké адал явдалт үзүүлбэрийг бүтээсэн.
Сонголтуудын доторх зураг бүхий тохируулж болох Pen A болон сонгосон контентыг utilitybend-ээр [салаатай] харна уу.
Демо: Сонголтыг зөвхөн псевдо-элементүүдээр загварчлах цогц харагдац.
Utilitybend-ээр зөвхөн псевдо элементүүдтэй [салаатай] тохируулж болох Pen A-г харна уу.
Демо: Эсвэл та optgroups ашиглан цэсийг сонгон үзүүлснээр үүнийг ахиулж болно.
Үзэг харна уу. Энэ онцлог нь дангаараа бид хэлбэрийг хэрхэн бүтээх, хараат байдал, техникийн өрийг бууруулах томоохон өөрчлөлтийг харуулж байна. Гүйлгэх тэмдэглэгээ ба JavaScript тойруулгын үхэл Тойрог бий болгох нь түүхэндээ хөгжүүлэгчид болон үйлчлүүлэгчдийн хоорондох маргаан байсаар ирсэн. Үйлчлүүлэгчид тэдэнд хайртай, хөгжүүлэгчид тэдгээрийг хүртээмжтэй, гүйцэтгэлтэй болгохын тулд шаардлагатай JavaScript-ээс айдаг. ::scroll-marker болон ::scroll-button() псевдо-элементүүд ирснээр энэ динамикийг бүхэлд нь өөрчилдөг. Эдгээр функцууд нь гүйлгэх контейнертэй шууд холбогдсон CSS-ээр навигацийн цэгүүд болон гүйлгэх товчлууруудыг үүсгэх боломжийг бидэнд олгодог. Би блогтоо бичсэнээр энэ бол анхны слайд байсан. JavaScript-ийн нэг мөргүйгээр бүрэн ажиллагаатай, хүртээмжтэй гулсагч үүсгэх чадвар нь зүгээр л тохиромжтой биш юм; энэ бол гүйцэтгэлийн ялалт юм. Энэ функцийн эргэн тойронд хүртээмжтэй холбоотой зарим асуудал байгаа бөгөөд эдгээр нь хүчинтэй хэдий ч хөгжүүлэгчид бидэнд үүнийг ажиллуулах арга зам байж болох юм. Хамгийн сайн зүйл бол эдгээр бүх UI өөрчлөлтүүд нь DOM-ийн захиалгаар залруулга хийх, ариа хаягуудыг чирэхээс хамаагүй хялбар болгож байгаа юм, гэхдээ би ухарч байна ... Бид одоо гүйлгэх-маркер-групп ашиглан тэмдэглэгээг автоматаар бүлэглэж, зангууны байрлалыг ашиглан товчлууруудыг яг хүссэн газраа байрлуулах боломжтой.
.карусель { халих-x: автомат; scroll-marker-group: дараа; /* Цэгүүдийн савыг үүсгэнэ */
/* Товчлуур үүсгэх */ &:: гүйлгэх товч (дотор төгсгөл),&:: гүйлгэх товч(дотоод-эхлэх) { агуулга: ""; байрлал: үнэмлэхүй; /* Тэдгээрийг голлуулахын тулд зангууны байрлалыг ашиглана уу */ байрлал-зангуу: --карусель; дээд: зангуу (төв); }
/* Хүүхдүүд дээр тэмдэглэгээ үүсгэх */ див { &:: гүйлгэх тэмдэг { агуулга: ""; өргөн: 24px; хилийн радиус: 50%; курсор: заагч; } /* Идэвхтэй тэмдэглэгээг тодруулах */ &:: гүйлгэх маркер: зорилтот-гүйдэл { дэвсгэр: цагаан; } } }
Үзүүлэн: Товчнуудыг байрлуулахдаа зангууны байрлалыг ашиглан зөвхөн HTML болон CSS-ээс тойруулгыг бүтээх миний туршилт.
Pen Carousel Pure HTML болон CSS-г [салаатай] utilitybend-ээс үзнэ үү.
Үзүүлэн: Арын зургийг маркерууд руу динамикаар татахын тулд attr() ашиглан вэб дэлгүүрийн гулсагчийг дахин хийх.
Pen Webshop slick slider remake-г CSS-д [салаатай] utilitybend-ээр харна уу. Төрийн асуулга: Наалттай зүйл гацсан уу? Хурдан зүйл хагарсан уу? Бид IntersectionObserver хакерд найдахгүйгээр "наалдамхай зүйл гацсан" эсвэл "хурдан зүйл тасарсан" эсэхийг мэдэх чадваргүй удаж байна. Chrome 133 нь гүйлгэх төлөвийн асуулгыг нэвтрүүлсэн нь бидэнд эдгээр төлөвийг мэдүүлгээр асуух боломжийг олгосон. Container-type: scroll-state-г тохируулснаар бид хүүхдүүдийг гацсан, тасарсан, дүүрсэн эсэхээс нь хамаарч загварчлах боломжтой болсон. Энэ бол 2023 оны CSS Day-аас хойш миний тэсэн ядан хүлээж байсан "амьдралын чанар"-ын асар том сайжруулалт юм. Бид гүйлгэх чиглэлийг харах боломжтой болсноос хойш энэ нь бүр маш их хувьсан өөрчлөгдсөн, хөөрхөнөө! Энгийн жишээний хувьд: бид эцэст нь гарчгийн хэсэг нь харагдах цонхны дээд хэсэгт наалдсан үед л сүүдэрт сүүдэрлэж болно. .толгой-контейнер { контейнерийн төрөл: гүйлгэх төлөв; байрлал: наалдамхай; дээд: 0;
толгой { шилжилт: хайрцаг-сүүдэр 0.5 сек хялбар гарах; /* Асуулга нь савны төлөвийг шалгадаг */ @container scroll-state(гацсан: дээд) { хайрцаг-сүүдэр: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Үзүүлэн: Зөвхөн гацсан үед л сүүдэр өгдөг наалдамхай толгой.
Наалттай элемент нь utilitybend-ээр гацсан [салаатай] эсэхийг шалгахын тулд гүйлгэх төлөвтэй асуулга бүхий Pen Sticky толгой хэсгийг үзнэ үү.
Үзүүлэн: Одоогийн таслагдсан тэмдэгт дээр хүрээг шилжүүлэхийн тулд зангууны байрлалтай хослуулан гүйлгэх төлөвийн асуулга ашигладаг Покемон сэдэвт жагсаалт.
Pen Scroll-state query-г харна уу CSS, Pokemon хувилбарыг [салаатай] utilitybend-ээр ямар зүйл хадсан болохыг шалгана уу. Оновчтой эргономик: CSS дахь логик CSS Wrapped-ийн "Оновчилсон эргономик" хэсэг нь бидний ажлын урсгалыг илүү ойлгомжтой болгодог онцлогуудыг онцолж өгдөг. Гурван онцлог нь бидний логикийг хэрхэн бичихэд хувь нэмэр оруулдаг:
if() мэдэгдлүүд Бид эцэст нь CSS дээр нөхцөлүүдийг авч байна. if() функц нь загварын хуудасны гуравдагч операторын үүрэг гүйцэтгэдэг бөгөөд бидэнд медиа, дэмжлэг эсвэл хэв маягийн асуулгад суурилсан утгуудыг оруулах боломжийг олгодог. Энэ нь нэг өмчийн өөрчлөлтөд дэлгэрэнгүй @media блокуудын хэрэгцээг багасгадаг. @function functionsБид эцэст нь зарим логикийг өөр газар шилжүүлж, илүү цэвэр файлуудыг бий болгож, амьдралын бодит чанарыг бий болгож чадна. sibling-index() болон sibling-count() Эдгээр мод тоолох функцууд нь жагсаалтын хэмжээн дээр тулгуурлан гайхалтай хөдөлгөөнт дүрс эсвэл загварчлалын асуудлыг шийддэг. CSS-тэй ах дүүсийг загварчлах нь урьд өмнө хэзээ ч амар байгаагүй тул энэ нь манай HTML-д захиалгат шинж чанаруудыг (--index: 1 гэх мэт) хатуу кодлох хэрэгцээг арилгасан.
Жишээ нь: Байршлыг тооцоолох Одоо бид математикийн товч томьёо бичиж болно. Жишээлбэл, дэлгэц рүү орж буй картуудын хөдөлгөөнт дүрсийг гайхшруулах нь энгийн зүйл болж хувирдаг: .карт-контейнер > * { хөдөлгөөнт дүрс: 0.6 секундын зайтай форвардыг илчлэх; /* Дахиж гарын авлага --index хувьсагч байхгүй! */ хөдөлгөөнт саатал: calc(sibling-index() * 0.1s); }
Би эдгээр функцуудыг тригонометрийн хамт ашиглан ямар ч 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 { харах-шилжилтийн нэр: зураг; харах-шилжилтийн бүлэг: хамгийн ойрын; /* Үүнийг үүрлэсэн байлга! */ }
Типографи ба хэлбэр Эцэст нь хэлэхэд, миний эргономист Text Box Trim-ийг туршиж үзэхийг хүсч байгаа бөгөөд энэ нь эцэст нь төгс босоо байрлалд хүрэхийн тулд текстийн контентын дээрх болон доор (тэргүүлэгч) нэмэлт хоосон зайг арилгахыг амлаж байна. Бүтээлч талын хувьд булангийн хэлбэр ба shape() функц нь тэгш өнцөгт бус байршлыг нээж, CSS хувьсагчдад хариу үйлдэл үзүүлэх "дөрвөлжин" болон нарийн төвөгтэй замыг бий болгож байна. Үүнийг хэлэхэд би хэрэм дүүрэн дизайнтай болохыг тэсэн ядан хүлээж байна! Найдвартай ирээдүй Бид CSS нь өмнө нь JavaScript-д харьяалагддаг байсан логик, төлөв байдал, нарийн төвөгтэй харилцан үйлчлэлийг зохицуулах чадвартай болж байгаа дэлхийн гэрч болж байна. moveBefore (iframes/видео бичлэгийн DOM төлөвийг хадгалах) болон attr() (өнгө болон сүлжээнд мөрнөөс гадуурх төрлүүдийг ашиглах) зэрэг функцууд энэ бодит байдлыг улам бүр бэхжүүлдэг. Эдгээр функцүүдийн зарим нь одоогоор туршилтын шинж чанартай эсвэл Chrome-д зориулагдсан боловч эрч хүч нь маргаангүй юм. Эдгээр чадавхийг суурь болгох үүднээс Interop гэх мэт санаачлагуудаар дамжуулан бүх хөтчүүдэд үргэлжлүүлэн дэмжлэг үзүүлнэ гэдэгт бид найдаж байна. Үүнийг хэлэхэд, хөтөчийн хөдөлгүүртэй байх нь "Chrome-д эхлээд" эдгээр бүх гайхалтай боломжуудтай адил чухал юм. Эдгээр шинэ функцуудыг хөтчүүдэд суулгахаасаа өмнө ярилцаж, сайтар судалж, туршиж үзэх шаардлагатай. Энэ бол CSS-д орох гайхалтай мөч юм. Бид зөвхөн баримт бичгийг загварчлахаа больсон; Бид урьд өмнөхөөсөө илүү хүчирхэг эх багаж хэрэгслээр динамик, эргономик, бат бөх програмуудыг бүтээж байна. Энэ шинэ эрин үетэй хамт явж, мэдээллийг түгээцгээе. Энэ бол CSS ороосон!
