که زه د CSS ارتقاء په کټګوریو ویشم، موږ د هغو ورځو څخه ډیر تللي یو کله چې موږ په ساده ډول د سرحد ریډیس غوښتنه کوله ترڅو احساس وکړو چې موږ په راتلونکي کې ژوند کوو. موږ اوس مهال په یوه شیبه کې ژوند کوو چیرې چې پلیټ فارم موږ ته وسیلې راکوي چې یوازې بصري پرت نه ټیکوي ، مګر په بنسټیز ډول بیا تعریفوي چې موږ څنګه انٹرفیس معمار کوو. ما فکر کاوه چې په 2024 کې د اعلان شوي ب featuresو شمیر پورته نشي کیدی. زه هیڅکله په خوښۍ سره غلط نه یم.
د کروم ټیم "سی ایس ایس ریپډ 2025" یوازې د ځانګړتیاو لیست نه دی؛ دا د متحرک، اصلي ویب لپاره یو منشور دی. د یو چا په توګه چې څو کاله یې د دې تحولاتو مستند کولو کې تیر کړي دي - د "CSS5" دورې تعریف کولو څخه د عصري ترتیب اسانتیاوو پیچلتیاو ته - زه خپل ځان د دې کال بشپړیدو ته د لوی جوش احساس سره ګورم. موږ د "غوره شوي ارګونومیک" او "راتلونکي نسل تعاملاتو" په لور یو بدلون ګورو چې موږ ته اجازه راکوي چې د کوډ سره مبارزه ودروو او په طبیعي حالت کې د انټرفیس مجسم کول پیل کړو.
پدې مقاله کې ، تاسو کولی شئ د کروم راپور څخه د سټنډرډ ب featuresو په اړه هراړخیز نظر ومومئ ، زما د وروستي تجربو لینز له لارې لیدل شوي او د پلیټ فارم راتلونکي لپاره امیدونه.
د اجزاو انقلاب: په نهایت کې ، یو اصلي دودیز انتخاب
د کلونو لپاره ، موږ د سټایل ډراپ ډاونونو لپاره په دروند جاواسکریپټ کتابتونونو تکیه کړې ، "د لسیزو زوړ ستونزه" چې پلیټ فارم په پای کې حل کړې. لکه څنګه چې ما د دودیز انتخاب (او اړوندو مقالو) تاریخ ته زما په ژوره ژوره کې تفصیل ورکړ، دا یو اوږد سړک و چې خلاص UI پکې شامل و، د بایسکل شیډینګ نومونه لکه
د اختیارونو دننه بډایه مینځپانګې ته اجازه ورکولو په زړه پوري اضافه ، لکه عکسونه یا بیرغونه ، خورا ساتیري ده. موږ کولی شو نن ورځ هر ډول انتخابونه جوړ کړو:
ډیمو: ما د پوکی - ساہسک ډیمو رامینځته کړی چې ښیې چې څنګه نوی
د اختیارونو دننه د عکسونو سره د قلم A تخصیص وړ انتخاب وګورئ او د یوټیلیټ بینډ لخوا غوره شوي مینځپانګې [فورک شوي].
ډیمو: یوازې د سیډو عناصرو سره د انتخاب سټایل کولو لپاره جامع لید.
د یوټیلیټ بینډ لخوا یوازې د سیډو - عناصرو [فورک شوي] سره د قلم A دودیز انتخاب وګورئ.
ډیمو: یا تاسو کولی شئ دا د غوره ګروپونو په کارولو سره د دې مینو انتخاب ډیمو سره یو نښه پورته کړئ.
د یوټیلیټ بینډ لخوا د آپټ ګروپونو [فورک شوي] سره قلم یو ریښتینی انتخاب مینو وګورئ. دا ځانګړتیا یوازې د لوی بدلون نښه کوي چې څنګه به موږ فارمونه جوړ کړو، انحصار کم کړو او تخنیکي پور. سکرول مارکرونه او د جاواسکریپټ کیروسل مړینه د carousels رامینځته کول په تاریخي ډول د پراختیا کونکو او پیرودونکو ترمینځ د ټکر نقطه وه. پیرودونکي له دوی سره مینه لري، پراختیا کونکي د جاواسکریپټ څخه ویره لري ترڅو دوی ته د لاسرسي وړ او فعال کړي. د ::scroll-marker او ::scroll-button() pseudo-عناصرو راتګ دا متحرک په بشپړه توګه بدلوي. دا ځانګړتیاوې موږ ته اجازه راکوي چې د نیویګیشن نقطې او سکرول بټنونه په خالص ډول د CSS سره جوړ کړو، په اصلي توګه د سکرول کانټینر سره تړل شوي. لکه څنګه چې ما په خپل بلاګ کې لیکلي، دا په لومړي سلایډ کې مینه وه. د جاواسکریپټ له یوې کرښې پرته د بشپړ فعال او د لاسرسي وړ سلائیڈر رامینځته کولو وړتیا یوازې اسانه نه ده؛ دا د فعالیت لپاره بریا ده. د دې خصوصیت په شاوخوا کې د لاسرسي ځینې اندیښنې شتون لري، او که څه هم دا د اعتبار وړ دي، ممکن زموږ د پراختیا کونکو لپاره یوه لاره وي چې دا کار وکړي. ښه خبره دا ده چې دا ټول UI بدلونونه د دودیز DOM لاسوهنې په پرتله خورا اسانه کوي او د aria ټاګونو شاوخوا راښکته کوي ، مګر زه انحراف کوم ... موږ اوس کولی شو د سکرول مارکر ګروپ په کارولو سره په اتوماتيک ډول مارکر ګروپ کړو او د لنگر موقعیت په کارولو سره بټنونه سټایل کړو ترڅو په هغه ځای کې ځای په ځای کړو چې موږ یې غواړو.
.carousel { overflow-x: اتومات؛ scroll-marker-group: وروسته؛ /* د نقطو لپاره کانټینر جوړوي */
/* تڼۍ جوړې کړئ */ &::سکرول تڼۍ(انلاین پای)،&::سکرول-بټن(انلاین-پیل) { content: " "; position: absolute; /* د مرکز کولو لپاره د لنگر موقعیت وکاروئ */ پوزیشن لنگر: --carousel; top: anchor(center); }
/* په ماشومانو کې مارکرونه جوړ کړئ */ div { &::scroll-marker { content: " "; width: 24px; border-radius: 50%; کرسر: پوائنټر؛ } /* فعال مارکر روښانه کړئ */ &::scroll-marker:target-current { پس منظر: سپین؛ } } }
ډیمو: زما تجربه په خالص ډول د HTML او CSS څخه یو کیروسل رامینځته کول ، د بټونو ځای په ځای کولو لپاره د لنگر موقعیت کارول.
د utilitybend لخوا د قلم کاروسیل خالص HTML او CSS [فورک شوی] وګورئ.
ډیمو: د ویب شاپ سلیک سلیډر ریمیک د attr() په کارولو سره د شالید عکسونه په متحرک ډول مارکرونو ته راوباسي.
د یوټیلیټ بینډ لخوا په CSS [فورک شوی] کې د قلم ویب شاپ سلیک سلیډر ریمیک وګورئ. د دولت پوښتنې: چپچپا شی پټ شوی؟ Snappy Thing Snapped? د اوږدې مودې لپاره ، موږ د دې وړتیا نه لرو چې پوه شو چې ایا یو "چپچکی شی پټ شوی" یا که "چټک شوی توکي" پرته له دې چې په IntersectionObserver هیکونو تکیه وکړي. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively. د کانټینر ډول: سکرول حالت په ترتیب کولو سره، موږ اوس کولی شو ماشومان د دې پراساس سټایل کړو چې ایا دوی بند شوي، چپ شوي، یا ډیریږي. دا یو لوی "د ژوند کیفیت" ښه والی دی چې زه د CSS ورځې 2023 راهیسې په لیوالتیا سره انتظار کوم. دا حتی ډیر پرمختګ شوی ځکه چې موږ کولی شو د سکرول سمت هم وګورو، ښکلی! د ساده مثال لپاره: موږ کولی شو په پای کې یو سرلیک ته سیوري پلي کړو کله چې دا واقعیا د لید پورټ پورتنۍ برخې ته ولاړ وي: .header-container { د کانټینر ډول: سکرول حالت؛ position: sticky; top: 0;
header { لیږد: د بکس سیوري 0.5s آسانه بهر؛ /* پوښتنه د کانټینر حالت ګوري */ @container scroll-state(stuck: top) { د بکس سیوري: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
ډیمو: یو چپکونکی سرلیک چې یوازې سیوري پلي کوي کله چې واقعیا ودرول شي.
د سکرول حالت پوښتنې سره د قلم سټیکي سرلیکونه وګورئ، دا وګورئ چې ایا چپکونکی عنصر د یوټیلیټ بینډ لخوا پټ شوی [فورک شوی].
ډیمو: د پوکیمون تیم لرونکی لیست چې د لنگر موقعیت سره یوځای د سکرول ریاست پوښتنې کاروي ترڅو د اوسني عکس شوي کرکټر باندې چوکاټ حرکت وکړي.
د قلم سکرول ریاست پوښتنه وګورئ ترڅو وګورئ چې کوم توکي د CSS سره اخیستل شوي، د پوکیمون نسخه [فورک شوي] د یوټیلیټ بینډ لخوا. مطلوب ارګونومیک: په CSS کې منطق د CSS پوښل شوي "غوره شوي ارګونومیک" برخه هغه ځانګړتیاوې په ګوته کوي چې زموږ کاري جریان ډیر هوښیار کوي. د منطق لیکلو څرنګوالی لپاره درې ځانګړتیاوې د بدلون وړ دي:
if() بیانونه موږ په پای کې په CSS کې شرایط ترلاسه کوو. if() فنکشن د سټایل شیټونو لپاره د تریري آپریټر په څیر عمل کوي ، موږ ته اجازه راکوي چې د میډیا ، ملاتړ یا سټایل پوښتنو انلاین پراساس ارزښتونه پلي کړو. دا د واحد ملکیت بدلونونو لپاره د وربوز @ میډیا بلاکونو اړتیا کموي. @function functions موږ په پای کې ځینې منطق یو بل ځای ته لیږدولی شو، په پایله کې ځینې پاکې فایلونه، د ژوند ریښتینې کیفیت ځانګړتیا. sibling-index() او sibling-count()دا د ونې شمیرنې دندې د لیست اندازې پراساس د حیرانتیا متحرکاتو یا سټایل کولو توکو مسله حل کوي. لکه څنګه چې ما د CSS سره د خویندو سټایل کولو کې سپړل هیڅکله اسانه ندي ، دا زموږ په HTML کې د هارډ کوډ دودیز ملکیتونو (لکه --index: 1) اړتیا له مینځه وړي.
بېلګه: د ترتیب حساب کول اوس موږ کولی شو د ریاضیاتو لنډ فارمولونه ولیکو. د مثال په توګه، سکرین ته د ننوتلو کارتونو لپاره د حرکت حرکت کول خورا کوچني کیږي: .card-container > * { انیمیشن: د 0.6s په اسانۍ سره بهر ښکاره کول؛ /* نور لارښود نه --index متغیرونه! */ د حرکت ځنډ: calc(sibling-index() * 0.1s); }
ما حتی د دې فنکشنونو کارولو سره د مثلثاتو په کارولو سره تجربه وکړه ترڅو توکي په بشپړ دایره کې پرته له جاواسکریپټ ځای په ځای کړي.
ډیمو: په متحرک ډول د زړه راښکونکي کارت متحرکات.
د یوټیلیټ بینډ لخوا د sibling-index() [forked] په کارولو سره د قلم سټیګر کارتونه وګورئ.
ډیمو: د sibling-index، Sibling-count، او د نوي CSS @function خصوصیت په کارولو سره د شیانو ځای په ځای کول.
د قلم دا حلقه وګورئ چې د یوټیلیټ بینډ لخوا د ورور-انډیکس، د وروڼو شمیره او افعال [فورک شوي] کاروي. My CSS To-Do List: Features I Can’t Wait To Try پداسې حال کې چې زه د مجسمو انتخابونو او لیږدونو کې بوخت وم، د "CSS Wrapped 2025" راپور د نورو نیکونو سره ډک شوی چې ما تر اوسه په CodePen کې د اوریدو چانس نه درلود. دا زما د راتلونکو تجربو لپاره زما په لیست کې لوړ دي: لنگر شوي کانټینر پوښتنې ما په خپل کاروسیل ډیمو کې د تڼیو لپاره د CSS اینکر موقعیت کارولی، مګر "CSS لپټ" یو روښانه کويد دې تکامل: لنگر شوي کانټینر پوښتنې. دا هغه ستونزه حل کوي چې موږ ټول د وسیلو لارښوونو سره درلودل: که براوزر د ځای محدودیتونو له امله له پورته څخه ښکته ته ټوپ فلیپ کړي ، "تیر" اکثرا په غلطه لاره په ګوته کوي. د لنگر شوي کانټینر پوښتنو سره (@container anchored(fallback: flip-block))، موږ کولی شو هغه عنصر سټایل کړو چې براوزر واقعیا د کوم فال بیک موقعیت پراساس غوره کړی. د نیست شوي لید لیږد ګروپونه د لید لیږد یو انقلاب و ، مګر دوی د ځانګړي سوداګرۍ بند سره راغلل: دوی د عنصر ونه فلیټ کړه ، کوم چې ډیری وختونه د 3D بدلونونه یا ډیر جریان ماتوي: کلپ. ما تل احساس درلود چې دا یو څه ورک دی، او دا ممکن یوازې ځواب وي. د لید - لیږد - ګروپ په کارولو سره: نږدې ، موږ کولی شو په پای کې د لیږد ګروپونه په یو بل کې دننه کړو. دا موږ ته اجازه راکوي چې د لیږد په جریان کې د کلیپینګ اغیزې یا 3D گردشونه وساتو - یو څه چې دمخه ناشونی و ځکه چې عناصر تر پورتنۍ کچې پورته شوي و. .card img { view-transition-name: انځور; view-transition-group: نږدې; /* دا ځاله وساتئ! */ }
ټایپوګرافي او شکلونه په نهایت کې ، زما کې ارګونومیسټ د متن بکس ټرم هڅه کولو لپاره خارښ کوي ، کوم چې د متن مینځپانګې پورته او لاندې د ځورونکي اضافي سپین ځای لرې کولو ژمنه کوي (مخکې) ترڅو په پای کې کامل عمودی ترتیب ترلاسه کړي. او د تخلیقي اړخ لپاره، د کونج شکل او شکل () فنکشن غیر مستطیل ترتیبونه پرانیزي، د "squaricles" او پیچلي لارو لپاره اجازه ورکوي چې د CSS متغیرونو ته ځواب ووايي. دا ویل کیږي، زه انتظار نشم کولی چې د چوکیو څخه ډک ډیزاین ولري! یو امید لرونکی راتلونکی موږ د داسې نړۍ شاهدان یو چیرې چې CSS د منطق، حالت، او پیچلي تعاملاتو اداره کولو توان لري چې مخکې له جاواسکریپټ سره تړاو لري. ځانګړنې لکه moveBefore (د iframes/ویډیوګانو لپاره د DOM حالت ساتل) او attr() (د رنګونو او ګریډونو لپاره د تارونو هاخوا ډولونو کارول) دا حقیقت نور هم قوي کوي. پداسې حال کې چې دا ځینې ځانګړتیاوې اوس مهال تجربوي یا کروم ته ځانګړي دي، سرعت د انکار وړ نه دی. موږ باید د انټروپ په څیر نوښتونو له لارې په ټولو براوزرونو کې د دوامدار ملاتړ تمه وکړو ترڅو ډاډ ترلاسه کړو چې دا وړتیاوې اساسې شوي. دا ویل کیږي، د براوزر انجنونه درلودل دومره مهم دي لکه څنګه چې په "کروم لومړی" کې د دې ټولو په زړه پورې ب featuresو درلودل. دا نوي ب featuresې باید په براوزرونو کې د ښکته کیدو دمخه د بحث کولو ، سره ټینکر کولو او ازموینې ته اړتیا ولري. دا په زړه پورې شیبه ده چې CSS ته ورشئ. موږ نور یوازې د اسنادو سټایل نه یو؛ موږ د اصلي وسیلې کټ سره متحرک ، ایرګونومیک او قوي غوښتنلیکونه چمتو کوو چې د هرکله څخه خورا پیاوړي دي. راځئ چې د دې نوي دور سره لاړ شو او کلمه خپره کړو. دا د CSS لپاسه ده!
