ئەگەر مەن CSS نىڭ تەدرىجىي تەرەققىياتىنى تۈرلەرگە ئايرىماقچى بولسام ، بىز پەقەت ئۆزىمىزنى كەلگۈسىدە ياشاۋاتقاندەك ھېس قىلىش ئۈچۈن چېگرا رادىئوسىنى تەلەپ قىلغان كۈنلەردىن ھالقىپ كەتتۇق. بىز ھازىر سۇپا بىزگە كۆرۈنۈش قەۋىتىنى تەڭشىمەيلا قالماستىن ، بەلكى بىزنىڭ قانداق قىلىپ كۆرۈنمە يۈزىمىزنى قۇرغانلىقىمىزنى تۈپتىن قايتىدىن ئېنىقلايدىغان قوراللارنى بىزگە يەتكۈزۈۋاتقان پەيتتە تۇرۇۋاتىمىز. مەن 2024-يىلى ئېلان قىلىنغان ئىقتىدارلارنىڭ سانىنى ئالدىنقى ئورۇنغا قويغىلى بولمايدۇ دەپ ئويلىدىم. مەن ئەزەلدىن خۇشال ھالدا خاتالىشىپ باقمىغان.
Chrome گۇرۇپپىسىنىڭ «CSS ئورالغان 2025» پەقەت ئىقتىدار تىزىملىكىلا ئەمەس. ئۇ ھەرىكەتچان ، يەرلىك تورنىڭ ئىپادىسى. بىر قانچە يىل ۋاقىت سەرپ قىلىپ بۇ ئۆزگىرىشلەرنى خاتىرىلىگەن ئادەم بولۇش سۈپىتىم بىلەن - «CSS5» دەۋرىنى ئېنىقلاشتىن تارتىپ زامانىۋى ئورۇنلاشتۇرۇش ئەسلىھەلىرىنىڭ مۇرەككەپلىكىگىچە - ئۆزۈمنى بۇ يىلقى ئورالمىغا ناھايىتى ھاياجانلىنىش تۇيغۇسى بىلەن قارايمەن. بىز «ئەلالاشتۇرۇلغان Ergonomics» ۋە «كېيىنكى ئەۋلاد ئۆز-ئارا تەسىر» گە قاراپ بۇرۇلۇشنى كۆرۈۋاتىمىز ، بۇ بىزنىڭ كودقا قارشى تۇرۇشنى توختىتىشىمىز ۋە ئۇلارنىڭ تەبىئىي ھالىتىدىكى ئويما كۆرۈنۈشلەرنى باشلىشىمىزغا ياردەم بېرىدۇ.
بۇ ماقالىدە Chrome نىڭ دوكلاتىدىكى كۆزگە كۆرۈنەرلىك ئىقتىدارلارنى ئەتراپلىق كۆرەلەيسىز ، مېنىڭ يېقىنقى سىناقلىرىمنىڭ كۆز قارىشى ئارقىلىق كۆرۈنىمەن ۋە سۇپىنىڭ كەلگۈسىگە بولغان ئۈمىدنى تاپالايسىز.
زاپچاس ئىنقىلابى: ئاخىرىدا ، يەرلىك خاسلاشتۇرغىلى بولىدىغان تاللاش
كۆپ يىللاردىن بۇيان ، بىز ئېغىر JavaScript كۈتۈپخانىلىرىغا تايىنىپ ئۇسلۇبنىڭ تۆۋەنلىشىگە تاياندۇق ، بۇ سۇپا ئاخىرى ھەل قىلغان «نەچچە ئون يىللىق مەسىلە». مەن خاسلاشتۇرغىلى بولىدىغان تاللاش (ۋە مۇناسىۋەتلىك ماقالىلەر) نىڭ تارىخىغا چوڭقۇر چۆكۈشۈمدە تەپسىلىي بايان قىلغىنىمدەك ، بۇ ئۇزۇن UI بولۇپ ،
رەسىم ياكى بايراق قاتارلىق تاللاشلارنىڭ ئىچىدىكى مول مەزمۇنلارغا ئېرىشىشنىڭ قالتىس قوشۇلۇشى تولىمۇ قىزىقارلىق. بىز ھازىر ھەر خىل تاللاشلارنى قۇرالايمىز:
كۆرسەتمە: مەن يېڭى <تاللانغان مەزمۇن> ئېلېمېنتىنىڭ مول مەزمۇنلارنى (پوكېبول سىنبەلگىسىگە ئوخشاش) قانداق قىلىپ بىۋاسىتە كۇنۇپكا ئارقىلىق كلونلىيالايدىغانلىقىنى كۆرسىتىپ بېرىدىغان Poké تەۋەككۈلچىلىك ئۈلگىسىنى قۇردىم.
قەلەمنى تاللاڭ تاللانمىلارنىڭ ئىچىدىكى رەسىملەر ۋە utilbend تەرىپىدىن تاللانغان مەزمۇن [چاتما].
كۆرسەتمە: تاللاشنى پەقەت ساختا ئېلېمېنتلار بىلەن ئۇسلۇبقا ئەتراپلىق قاراش.
قەلەمنى پايدىلانغىلى بولىدىغان تاللانما ئېلېمېنتلار بىلەنلا تاللانغان خاسلاشتۇرغىلى بولىدىغان تاللاشنى كۆرۈڭ.
كۆرسەتمە: ياكى optgroups ئارقىلىق بۇ تىزىملىك تاللاش كۆرسەتكۈچى بىلەن ئۇنى بىر بالداق يۇقىرى كۆتۈرەلەيسىز.
قەلەمنى ئەمەلىي ئىشلىتىش ئارقىلىق optgroups [forked] بىلەن تاللاڭ. بۇ ئىقتىدار يالغۇز شەكىلنى قانداق شەكىللەندۈرىدىغانلىقىمىز ، تايىنىشچانلىقى ۋە تېخنىكىلىق قەرزنى ئازايتىدىغانلىقىمىزدىن دېرەك بېرىدۇ. دومىلىما بەلگە ۋە JavaScript كارۇسېلنىڭ ئۆلۈمى كارۇسېل ياساش تارىختا ئاچقۇچىلار بىلەن خېرىدارلار ئوتتۇرىسىدىكى سۈركىلىش نۇقتىسى بولۇپ كەلگەن. خېرىدارلار ئۇلارنى ياخشى كۆرىدۇ ، پروگراممېرلار ئۇلارنى زىيارەت قىلىش ۋە ئىجرا قىلىش ئۈچۈن تەلەپ قىلىنغان JavaScript دىن قورقىدۇ. :: Scroll-marker ۋە :: scroll-button () ساختا ئېلېمېنتلارنىڭ كېلىشى بۇ ھەرىكەتچانلىقىنى پۈتۈنلەي ئۆزگەرتىدۇ. بۇ ئىقتىدارلار يول باشلاش نۇقتىلىرى ۋە سىيرىلما كونۇپكىلارنى پەقەت CSS بىلەن ساپلا قاچىلىغىلى بولىدۇ. بىلوگىمدا يازغىنىمدەك ، بۇ تۇنجى تام تەسۋىردىكى مۇھەببەت ئىدى. بىر قۇر JavaScript بولمىسا تولۇق ئىقتىدارلىق ، قولايلىق سىيرىلما ھاسىل قىلىش ئىقتىدارى قۇلايلىق ئەمەس. ئۇ ئىقتىدارنىڭ غەلىبىسى. بۇ ئىقتىدارنى چۆرىدىگەن ھالدا بىر قىسىم قولايلىق مەسىلىلەر بار ، گەرچە بۇلار ئۈنۈملۈك بولسىمۇ ، بىز ئاچقۇچىلارنىڭ ئۇنى ئىشلەيدىغان يولى بولۇشى مۇمكىن. ياخشى يېرى ، بۇ UI ئۆزگىرىشلىرىنىڭ ھەممىسى ئۇنى ئىختىيارى DOM كونترول قىلىش ۋە ئارىيە خەتكۈچلىرىنى سۆرەشتىن كۆپ ئاسانلاشتۇرۇۋاتىدۇ ، ئەمما مەن چېكىنىمەن… بىز ھازىر سىيرىلما بەلگە گۇرۇپپىسى ئارقىلىق ئاپتوماتىك ھالدا گۇرۇپپىلارنى گۇرۇپپىلىيالايمىز ۋە لەڭگەر ئورنى ئارقىلىق كۇنۇپكىلارنى ئۆزىمىز خالىغان ئورۇنغا قويالايمىز.
.carousel { overflow-x: auto; scroll-marker-group: after; / * چېكىت ئۈچۈن قاچا ياساڭ * /
/ * كۇنۇپكىلارنى قۇرۇش * / & :: scroll-button (inline-end),& :: scroll-button (inline-start) { مەزمۇن: ""; ئورنى: مۇتلەق / * لەڭگەر ئورنىنى ئىشلىتىپ ئۇلارنى مەركەز قىلىڭ * / position-anchor: --carousel; ئۈستى: لەڭگەر (ئوتتۇرىدا) }
/ * بالىلارغا بەلگە ياساڭ * / div { & :: scroll-marker { مەزمۇن: ""; كەڭلىكى: 24px; چېگرا رادىئوسى:% 50; نۇر بەلگە: كۆرسەتكۈچ } / * ئاكتىپ بەلگىنى گەۋدىلەندۈرۈڭ * / & :: scroll-marker: target-current { تەگلىك: ئاق } } }
Demo: مېنىڭ تەجرىبەم پۈتۈنلەي HTML ۋە CSS دىن كارۇسېل ھاسىل قىلىپ ، لەڭگەر ئورنى ئارقىلىق كۇنۇپكىلارنى قويىدۇ.
Usebend ئارقىلىق قەلەم كارۇسېل ساپ HTML ۋە CSS نى كۆرۈڭ.
كۆرسەتمە: attr () ئارقىلىق توربېكەت سىيرىلما سىيرىلغۇچنى قايتا ياساپ ، تەگلىك رەسىملەرنى ھەرىكەتچان ھالدا بەلگە ئىچىگە تارتىدۇ.
Usebend تەرىپىدىن CSS [چاتما] دىكى قەلەم توربېكەت سىيرىلما سىيرىلغۇچنى قايتا كۆرۈڭ. دۆلەت سوئاللىرى: يېپىشقاق نەرسە چاپلىشىپ قالدىمۇ؟ Snappy Thing Snapped? ئۇزاقتىن بۇيان ، بىزدە IntersectionObserver خاككېرلىرىغا تايانماي ، «يېپىشقاق نەرسە چاپلىشىپ قالدى» ياكى «ئۇششاق-چۈششەك نەرسە تارتىۋېلىندى» ياكى ئەمەسلىكىنى بىلىش ئىقتىدارىمىز كەمچىل. Chrome 133 سىيرىلما ھالەتتىكى سوئاللارنى ئوتتۇرىغا قويدى ، بۇ ئارقىلىق بىز بۇ ھالەتلەرنى ئوچۇق-ئاشكارە سۈرۈشتۈرەلەيمىز. قاچا تىپى: سىيرىلما ھالەتنى تەڭشەش ئارقىلىق ، بىز ھازىر بالىلارنىڭ چاپلاشقان ، تارتىلغان ياكى تولۇپ كەتكەنلىكىگە ئاساسەن ئۇسلۇب قىلالايمىز. بۇ كەڭ كۆلەملىك «تۇرمۇش سۈپىتى» نىڭ ياخشىلىنىشى بولۇپ ، مەن CSS 2023-يىلدىن باشلاپ تەقەززالىق بىلەن كۈتىۋاتىمەن. ئاددىي بىر مىسال ئۈچۈن: بىز كۆرۈنۈشنىڭ چوققىسىغا چاپلاشقاندىلا ، ئاندىن باش قىسمىغا سايە قويالايمىز: .header-ପାତ୍ର { قاچا تىپى: سىيرىلما ھالەت; ئورنى: يېپىشقاق top: 0;
header { ئۆتكۈنچى: ساندۇق-سايە 0.5s ئاسانلاشتۇرۇلىدۇ / * سوئال قاچىنىڭ ئەھۋالىنى تەكشۈرىدۇ * / @container scroll-state (چاپلانغان: ئۈستى) { box-shadow: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
كۆرسەتمە: يېپىشقاق ماۋزۇ ئەمەلىيەتتە چاپلانغاندىلا سايە قوللىنىدۇ.
سىيرىلما ھالەتتىكى سوئال بىلەن قەلەم يېپىشقاق ماۋزۇلارنى كۆرۈڭ ، يېپىشقاق ئېلېمېنتنىڭ توك يولى تەرىپىدىن چاپلانغان ياكى چاپلانمىغانلىقىنى تەكشۈرۈڭ.
Demo: Pokémon باش تېما قىلىنغان تىزىملىك ، لەڭگەر ئورنى بىلەن بىرلەشتۈرۈلۈپ ، لەڭگەر ئورنى بىلەن بىرلەشتۈرۈلۈپ ، نۆۋەتتىكى تارتىلغان ھەرپ-بەلگە ئۈستىدە رامكا يۆتكىلىدۇ.
قايسى تۈرنىڭ CSS ، Pokemon نەشرى [forked] ئارقىلىق تۇتۇلغانلىقىنى تەكشۈرۈش ئۈچۈن قەلەم سىيرىلما ھالەتتىكى سوئالنى كۆرۈڭ. ئەلالاشتۇرۇلغان Ergonomics: CSS دىكى لوگىكا CSS ئورالغان «ئەلالاشتۇرۇلغان Ergonomics» بۆلىكى خىزمەت ئېقىمىمىزنى تېخىمۇ بىۋاسىتە ھېس قىلىدىغان ئىقتىدارلارنى گەۋدىلەندۈردى. لوگىكىنى قانداق يېزىشىمىزدا ئۈچ ئىقتىدار ئۆزگىرىشچان گەۋدىلىك:
if () بايانلار بىز ئاخىرى CSS دا شەرتكە ئېرىشىۋاتىمىز. If () فۇنكسىيەسى ئۇسلۇب جەدۋىلى ئۈچۈن ئۈچىنچى دەرىجىلىك مەشغۇلاتچىغا ئوخشاش ھەرىكەت قىلىدۇ ، ئۇ بىزنىڭ مېدىيا ، قوللاش ياكى ئۇسلۇب سوئاللىرى ئاساسىدا قىممەت قوللىنىشىمىزغا يول قويىدۇ. بۇ يەككە مۈلۈك ئۆزگەرتىش ئۈچۈن verbose @media بۆلەكلىرىگە بولغان ئېھتىياجنى ئازايتىدۇ. @ ئىقتىدار ئىقتىدارلىرى بىز ئاخىرى بەزى لوگىكىنى باشقا ئورۇنغا يۆتكىيەلەيمىز ، نەتىجىدە بىر قىسىم پاكىز ھۆججەتلەر ، ھەقىقىي تۇرمۇش سۈپىتى بارلىققا كېلىدۇ. ئاكا-ئۇكا كۆرسەتكۈچى () ۋە ئاكا-ئۇكا ساناش () بۇ دەرەخلەرنى ھېسابلاش ئىقتىدارلىرى تىزىملىكنىڭ چوڭ-كىچىكلىكىگە ئاساسەن كىشىنى ھەيران قالدۇرىدىغان كارتون ياكى ئۇسلۇبتىكى بۇيۇملارنى ھەل قىلىدۇ. مەن CSS بىلەن Styling ئاكا-ئۇكىلاردا ئىزدىنىپ باققىنىمدەك ، بۇ HTML دىكى قاتتىق كود خاسلىقى (--index: 1 گە ئوخشاش) نىڭ ئېھتىياجىنى يوقىتىدۇ.
مىسال: ئورۇنلاشتۇرۇشلارنى ھېسابلاش ھازىر ئىخچام ماتېماتىكىلىق فورمۇلا يازالايمىز. مەسىلەن ، ئېكرانغا كىرگەن كارتىلارنىڭ كارتون فىلىمى ئادەمنى ھەيران قالدۇرىدۇ: . كارتا-قاچا> * { كارتون فىلىم: 0.6s ئاسانلىقچە ئالدى تەرەپنى ئاشكارىلاش / * قولدا --index ئۆزگەرگۈچى مىقدار يوق! * / animation-delay: calc (sibling-index () * 0.1s); }
مەن ھەتتا بۇ ئىقتىدارلارنى ترىگونومېتىرىيە بىلەن بىللە ئىشلىتىپ ، JavaScript ئىشلەتمەي تۇرۇپ مۇكەممەل چەمبىرەككە قويۇشنى سىناق قىلدىم.
كۆرسەتمە: كىشىنى ھەيران قالدۇرىدىغان كارتا كارتونلىرى.
Usebend ئارقىلىق ئاكا-ئۇكا كۆرسەتكۈچى () [forked] ئارقىلىق قەلەم Stagger كارتىسىنى كۆرۈڭ.
ئۈلگە كۆرسىتىش: تۈرلەرنى ئاكا-ئۇكا كۆرسەتكۈچى ، ئاكا-ئۇكا ساناش ۋە يېڭى CSS @ ئىقتىدار ئىقتىدارى ئارقىلىق مۇكەممەل چەمبىرەككە قويۇش.
قەلەم چەمبىرىكىنى ئاكا-ئۇكا كۆرسەتكۈچى ، ئاكا-ئۇكا سانى ۋە ئىقتىدارلار [چاتما] ئارقىلىق ئىشلىتىڭ. مېنىڭ CSS قىلىشقا تېگىشلىك تىزىملىكىم: سىناپ بېقىشنى ساقلاپ تۇرالمايدىغان ئىقتىدارلار مەن تاللاش ۋە ئۆتكەلنى ئويۇش بىلەن ئالدىراش بولساممۇ ، «CSS ئورالغان 2025» دوكلاتىدا باشقا ياخشى نەرسىلەر بار ، مېنىڭ تېخى CodePen دا ئوت ئۆچۈرۈش پۇرسىتىم يوق. مېنىڭ كېيىنكى سىناقلىرىم ئۈچۈن بۇلار مېنىڭ تىزىملىكىمدە يۇقىرى: لەڭگەر كونتېينېر سوئاللىرى مەن كارۇسېل كۆرسەتكۈچتىكى كۇنۇپكىلارغا CSS لەڭگەر ئورۇن بەلگىلەش ئۇسۇلىنى قوللاندىم ، ئەمما «CSS ئورالغان»بۇنىڭ تەدرىجىي تەرەققىياتى: لەڭگەر كونتېينېر سوئاللىرى. بۇ ھەممىمىز قورال قوراللىرى بىلەن ساقلانغان مەسىلىنى ھەل قىلىدۇ: ئەگەر توركۆرگۈچ بوشلۇق چەكلىمىسى سەۋەبىدىن قورال قوراللىرىنى يۇقىرىدىن تۆۋەنگە توغرىلىسا ، «ئوق» ھەمىشە خاتا يولنى كۆرسىتىپ تۇرىدۇ. لەڭگەر قاچا سوئاللىرى (@container لەڭگەر (ئارقىغا قايتىش: flip-block)) ئارقىلىق ، توركۆرگۈچنىڭ قايسى ئورۇننى تاللىغانلىقىغا ئاساسەن بىز ئېلېمېنتنى ئۇسلۇب قىلالايمىز. Nested View ئۆتكۈنچى گۇرۇپپىلار ئۆتكۈنچى باسقۇچنى كۆرۈش بىر ئىنقىلاب بولدى ، ئەمما ئۇلار مەلۇم سودىدا بارلىققا كەلدى: ئۇلار ئېلېمېنت دەرىخىنى تەكشى قىلدى ، ئۇ دائىم 3D ئۆزگەرتىش ياكى ئېقىپ كېتىشنى بۇزدى: قىستۇرما. مەن ھەمىشە ئۇنىڭ بىر نەرسە كەملىكىنى ھېس قىلاتتىم ، بۇ پەقەت جاۋاب بولۇشى مۇمكىن. View-transition-group نى ئىشلىتىش ئارقىلىق: ئەڭ يېقىن ، بىز ئاخىرىدا ئۆز-ئارا ئۆتكۈنچى گۇرۇپپىلارنى ئۇۋا قىلالايمىز. بۇ بىزنىڭ ئۆتكۈنچى مەزگىلدە كېسىش ئۈنۈمىنى ياكى 3D ئايلىنىشنى ساقلاپ قالالايمىز - بۇ ئېلېمېنتلار يۇقىرى سەۋىيىگە كۆتۈرۈلگەنلىكى ئۈچۈن ئىلگىرى مۇمكىن بولمايدىغان ئىش ئىدى. .card img { view-transition-name: سۈرەت; view-transition-group: ئەڭ يېقىن; / * ئۇۋىسىنى ساقلاڭ! * / }
مەتبەئە ۋە شەكىللەر ئاخىرىدا ، مەندىكى ergonomist Text Box Trim نى سىناپ قىچىۋاتىدۇ ، ئۇ تېكىست مەزمۇنىنىڭ ئۈستى ۋە ئاستىدىكى كىشىنى بىزار قىلىدىغان ئارتۇقچە بوشلۇقنى چىقىرىپ تاشلاپ ، ئاخىرىدا مۇكەممەل تىك توغرىلاشنى ئەمەلگە ئاشۇرىدۇ. ئىجادىيەت تەرىپىگە نىسبەتەن ، بۇلۇڭ شەكلى ۋە شەكىل () ئىقتىدارى تىك تۆت بۇلۇڭلۇق ئورۇنلاشتۇرۇشلارنى ئېچىۋاتىدۇ ، بۇنىڭدا «كۋادرات» ۋە CSS ئۆزگەرگۈچى مىقدارغا ئىنكاس قايتۇرىدىغان مۇرەككەپ يوللار بار. مۇنداقچە قىلىپ ئېيتقاندا ، مەن لاھىيە بىلەن تولغان لايىھەنىڭ بولۇشىنى ساقلاپ تۇرالمايمەن! ئۈمىدلىك كەلگۈسى بىز CSS نىڭ ئىلگىرى JavaScript غا تەۋە لوگىكا ، ھالەت ۋە مۇرەككەپ ئۆز-ئارا تەسىرلەرنى بىر تەرەپ قىلالايدىغان دۇنياغا شاھىت بولۇۋاتىمىز. MoveBefore (iframes / سىنلارنىڭ DOM ھالىتىنى ساقلاپ قېلىش) ۋە attr () (رەڭ ۋە كاتەكچە سىزىقتىن ھالقىغان تىپلارنى ئىشلىتىش) قاتارلىق ئىقتىدارلار بۇ رېئاللىقنى تېخىمۇ مۇستەھكەملەيدۇ. بۇ ئىقتىدارلارنىڭ بەزىلىرى ھازىر سىناق ياكى Chrome غا خاس بولسىمۇ ، ھەرىكەتلەندۈرگۈچ كۈچنى ئىنكار قىلغىلى بولمايدۇ. بىز Interop غا ئوخشاش تەشەببۇسلار ئارقىلىق بارلىق توركۆرگۈچلەردە داۋاملىق قوللاپ ، بۇ ئىقتىدارلارنىڭ ئاساسىي سىزىققا ئايلىنىشىغا كاپالەتلىك قىلىشىمىز كېرەك. شۇنداق دېيىشكە بولىدۇكى ، تور كۆرگۈچ ماتورى بولۇش «Chrome ئاۋۋال» دىكى بۇ قالتىس ئىقتىدارلارنىڭ ھەممىسىگە ئوخشاشلا مۇھىم. بۇ يېڭى ئىقتىدارلارنى توركۆرگۈچلەرگە چۈشۈشتىن بۇرۇن مۇزاكىرە قىلىش ، ماسلاشتۇرۇش ۋە سىناق قىلىش كېرەك. CSS غا كىرىش ناھايىتى قالتىس پەيت. بىز ئەمدى پەقەت ئۇسلۇبتىكى ھۆججەت ئەمەس. بىز ئىلگىرىكى ھەر قانداق ۋاقىتتىكىدىن كۈچلۈك بولغان يەرلىك قورال قوراللىرى بىلەن ھەرىكەتچان ، ئېروگونومىيىلىك ۋە پۇختا قوللىنىشچان پروگراممىلارنى تەييارلاۋاتىمىز. بۇ يېڭى دەۋر بىلەن مېڭىپ ، تارقىتىمىز. بۇ CSS ئورالغان!
