اگر بخواهم تکاملهای CSS را به دستههایی تقسیم کنم، از روزهایی فراتر رفتهایم که صرفاً شعاع مرزی را درخواست میکردیم تا احساس کنیم در آینده زندگی میکنیم. ما در حال حاضر در لحظهای زندگی میکنیم که پلتفرم ابزارهایی را در اختیار ما قرار میدهد که نه تنها لایه بصری را تغییر میدهند، بلکه اساساً نحوه معماری رابطها را دوباره تعریف میکنند. فکر میکردم نمیتوان از تعداد ویژگیهای اعلام شده در سال 2024 بالاتر رفت. من هرگز اینقدر خوشبختانه اشتباه نکرده ام.
«CSS Wrapped 2025» تیم Chrome فقط فهرستی از ویژگیها نیست. این یک مانیفست برای یک وب پویا و بومی است. به عنوان فردی که چند سال را صرف مستندسازی این تحولات کرده است - از تعریف دوره های "CSS5" گرفته تا پیچیدگی های ابزارهای چیدمان مدرن - من متوجه می شوم که با حس بسیار هیجان انگیزی به جمع بندی امسال نگاه می کنم. ما شاهد تغییر به سمت "ارگونومی بهینه" و "تعامل های نسل بعدی" هستیم که به ما امکان می دهد مبارزه با کد را متوقف کنیم و شروع به مجسمه سازی رابط ها در حالت طبیعی خود کنیم.
در این مقاله، میتوانید نگاهی جامع به ویژگیهای برجسته گزارش کروم بیابید، که از دریچه آزمایشهای اخیر من و امید به آینده این پلتفرم مشاهده شده است.
انقلاب مؤلفه: سرانجام، یک انتخاب بومی قابل تنظیم
برای سالها، ما به کتابخانههای سنگین جاوا اسکریپت برای استایل کشویی تکیه کردهایم، «مشکل چند دههای» که پلتفرم بالاخره آن را حل کرده است. همانطور که در بررسی عمیق خود در تاریخچه انتخاب های قابل تنظیم (و مقالات مرتبط) توضیح دادم، این مسیر طولانی شامل Open UI، نام هایی مانند
افزودنی فوق العاده برای اجازه دادن به محتوای غنی در داخل گزینه ها، مانند تصاویر یا پرچم ها، بسیار سرگرم کننده است. امروزه می توانیم انواع انتخاب ایجاد کنیم:
نسخه ی نمایشی: من یک نسخه ی نمایشی ماجراجویی Poké ایجاد کردم که نشان می دهد چگونه عنصر جدید
قلم را ببینید یک انتخاب قابل تنظیم با تصاویر در داخل گزینه ها و محتوای انتخاب شده توسط utilitybend.
نسخه ی نمایشی: نگاهی جامع به سبک انتخابی تنها با شبه عناصر.
قلم را ببینید یک انتخاب قابل تنظیم فقط با شبه عناصر [چنگال شده] توسط utilitybend.
نسخه ی نمایشی: یا می توانید با استفاده از گروه های انتخابی، آن را با این نسخه ی نمایشی انتخاب منو ارتقا دهید.
قلم را ببینید یک منوی انتخاب واقعی با گروههای انتخابی [فشار گرفته شده] توسط utilitybend. این ویژگی به تنهایی نشان دهنده یک تغییر عظیم در نحوه ساخت فرم ها، کاهش وابستگی ها و بدهی های فنی است. نشانگرهای اسکرول و مرگ چرخ فلک جاوا اسکریپت ایجاد چرخ و فلک از لحاظ تاریخی یک نقطه اصطکاک بین توسعه دهندگان و مشتریان بوده است. مشتریان آنها را دوست دارند، توسعه دهندگان از جاوا اسکریپت مورد نیاز برای در دسترس و کارآمد کردن آنها می ترسند. ورود شبه عناصر ::scroll-marker و ::scroll-button() این پویایی را به کلی تغییر می دهد. این ویژگیها به ما اجازه میدهند که نقطههای ناوبری و دکمههای پیمایش را صرفاً با CSS ایجاد کنیم، که به صورت بومی به محفظه اسکرول پیوند داده شده است. همانطور که در وبلاگم نوشتم، این اسلاید اول عشق بود. توانایی ایجاد یک نوار لغزنده کاملاً کاربردی و قابل دسترسی بدون یک خط جاوا اسکریپت فقط راحت نیست. این یک پیروزی برای عملکرد است. برخی نگرانیهای مربوط به دسترسی به این ویژگی وجود دارد، و حتی اگر این موارد معتبر هستند، ممکن است راهی برای ما توسعهدهندگان وجود داشته باشد که آن را به کار ببریم. نکته خوب این است که همه این تغییرات رابط کاربری کار را بسیار آسانتر از دستکاری DOM سفارشی و کشیدن تگهای آریا میکنند، اما من منحرف میشوم… اکنون میتوانیم نشانگرها را بهطور خودکار با استفاده از Scroll-Marker-group گروهبندی کنیم و دکمهها را با استفاده از موقعیت لنگر شکل دهیم تا دقیقاً در جایی که میخواهیم قرار گیرند.
چرخ فلک { سرریز-x: خودکار; scroll-marker-group: after; /* محفظه نقاط را ایجاد می کند */
/* ایجاد دکمه ها */ &::دکمه اسکرول (انتهای درون خطی)،&::scroll-button(inline-start) { محتوا: " "; موقعیت: مطلق; /* از موقعیت لنگر برای وسط آنها استفاده کنید */ position-anchor: -- چرخ فلک; بالا: لنگر (مرکز)؛ }
/* نشانگرها را روی کودکان ایجاد کنید */ div { &::مارکر پیمایش { محتوا: " "; عرض: 24 پیکسل؛ شعاع مرزی: 50%; مکان نما: اشاره گر } /* نشانگر فعال را برجسته کنید */ &::scroll-marker:target-current { پس زمینه: سفید؛ } } }
نسخه ی نمایشی: آزمایش من ایجاد یک چرخ فلک صرفاً خارج از HTML و CSS، با استفاده از موقعیت لنگر برای قرار دادن دکمه ها.
Pen Carousel Pure HTML and CSS [forked] توسط utilitybend را ببینید.
نسخه ی نمایشی: یک بازسازی نرم و لغزنده Webshop با استفاده از attr() برای کشیدن تصاویر پس زمینه به صورت پویا در نشانگرها.
بازسازی اسلایدر نرم وبشاپ Pen را در CSS [forked] توسط utilitybend ببینید. سؤالات وضعیت: چیز چسبنده گیر کرده است؟ Snappy چیز اسنپ شده؟ برای مدت طولانی، ما فاقد این توانایی بودیم که بدون اتکا به هک های IntersectionObserver، بفهمیم که آیا "چیز چسبنده گیر کرده است" یا "یک مورد ضربه خورده شکسته شده است". کروم 133 پرس و جوهای حالت اسکرول را معرفی کرد و به ما امکان داد که این حالت ها را به صورت اعلامی پرس و جو کنیم. با تنظیم Container-type: Scroll-state، اکنون میتوانیم به کودکان بر اساس گیرکردن، شکسته شدن یا سرریز بودن آنها استایل دهید. این یک بهبود عظیم «کیفیت زندگی» است که از روز CSS 2023 مشتاقانه منتظر آن بودهام. حتی از آنجایی که ما میتوانیم جهت اسکرول را نیز ببینیم، بسیار تکامل یافته است. برای مثال ساده: در نهایت میتوانیم یک سایه را فقط زمانی به یک هدر اعمال کنیم که در واقع به بالای نمای پورت بچسبد: .header-container { Container-type: scroll-state; موقعیت: چسبنده؛ بالا: 0;
سرصفحه { انتقال: جعبه سایه 0.5 ثانیه سهولت خارج. /* کوئری وضعیت کانتینر را بررسی می کند */ @container scroll-state(stuck: top) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
نسخه ی نمایشی: یک هدر چسبنده که فقط زمانی که یک سایه واقعاً گیر کرده باشد اعمال می کند.
سرصفحه های Pen Sticky را با پرس و جوی حالت اسکرول ببینید، بررسی کنید که آیا عنصر چسبنده توسط utilitybend گیر کرده است یا خیر.
نسخه ی نمایشی: فهرستی با مضمون پوکمون که از پرس و جوهای حالت اسکرول همراه با موقعیت یابی لنگر برای جابجایی یک فریم بر روی کاراکتر فعلی استفاده می کند.
برای بررسی اینکه کدام مورد با CSS، نسخه Pokemon [فشار شده] توسط utilitybend برداشته شده است، به عبارت Pen Scroll-state مراجعه کنید. ارگونومی بهینه شده: منطق در CSS بخش "ارگونومی بهینه" CSS Wrapped ویژگی هایی را برجسته می کند که گردش کار ما را بصری تر می کند. سه ویژگی به عنوان دگرگون کننده برای نحوه نوشتن منطق برجسته هستند:
if() Statements بالاخره در حال دریافت شرطی در CSS هستیم. تابع if() مانند یک عملگر سه تایی برای stylesheets عمل میکند و به ما اجازه میدهد مقادیر را بر اساس مدیا، پشتیبانی یا استایل کوئریهای درون خطی اعمال کنیم. این امر نیاز به بلوک های رسانه ای @ را برای تغییرات تک ویژگی کاهش می دهد. @function توابع بالاخره میتوانیم مقداری منطق را به مکان دیگری منتقل کنیم، که در نتیجه فایلهای پاکتر، یک ویژگی واقعی با کیفیت زندگی ایجاد میشود. () sibling-index و sibling-count() این توابع شمارش درخت مشکل انیمیشن های خیره کننده یا آیتم های سبک را بر اساس اندازه لیست حل می کنند. همانطور که در Styling خواهر و برادر با CSS بررسی کردم هرگز آسانتر نبوده است، این نیاز به کدگذاری ویژگیهای سفارشی (مانند --index: 1) در HTML ما را از بین میبرد.
مثال: محاسبه Layouts اکنون می توانیم فرمول های ریاضی مختصر بنویسیم. برای مثال، تکان دادن یک انیمیشن برای کارت هایی که وارد صفحه می شوند، بی اهمیت می شود: .card-container > * { انیمیشن: آشکار 0.6s آسان به جلو. /* دیگر از متغیرهای --index دستی خبری نیست! */ انیمیشن-تاخیر: calc(sibling-index() * 0.1s); }
من حتی با استفاده از این توابع همراه با مثلثات برای قرار دادن موارد در یک دایره کامل بدون جاوا اسکریپت آزمایش کردم.
نسخه ی نمایشی: انیمیشن های کارتی خیره کننده به صورت پویا.
کارتهای Pen Stagger را با استفاده از () sibling-index [forked] توسط utilitybend ببینید.
نسخه ی نمایشی: قرار دادن آیتم ها در یک دایره کامل با استفاده از sibling-index، sibling-count و ویژگی جدید CSS @function.
قلم را ببینید دایره با استفاده از sibling-index، sibling-count و توابع [forked] توسط utilitybend. فهرست کارهای CSS من: ویژگی هایی که نمی توانم منتظر امتحانشان باشم در حالی که من مشغول مجسمهسازی برگزیدهها و انتقالها بودم، گزارش «CSS Wrapped 2025» مملو از چیزهای دیگری است که من هنوز فرصت نکردهام در CodePen آنها را منتشر کنم. اینها در لیست من برای آزمایش های بعدی من بالا هستند: پرس و جوهای کانتینر لنگر من از CSS Anchor Positioning برای دکمههای دمو چرخ فلک استفاده کردم، اما «CSS Wrapped»تکامل این: پرس و جوهای کانتینر لنگر. این مشکلی را که همه ما با راهنمای ابزار داشتیم حل میکند: اگر مرورگر به دلیل محدودیت فضا، راهنمای ابزار را از بالا به پایین بچرخاند، «پیکان» اغلب به سمت اشتباه اشاره میکند. با جستجوهای کانتینر لنگر (@container anchored(fallback: flip-block))، میتوانیم عنصر را بر اساس موقعیت بازگشتی که مرورگر واقعاً انتخاب کرده است، استایل دهی کنیم. گروههای انتقال نمای تودرتو View Transitions یک انقلاب بوده است، اما آنها با یک مبادله خاص همراه شدند: آنها درخت عنصر را مسطح کردند، که اغلب تبدیل های سه بعدی یا سرریز را می شکند: کلیپ. من همیشه این احساس را داشتم که چیزی را از دست داده است، و این ممکن است فقط پاسخ باشد. با استفاده از view-transition-group: nearest، در نهایت میتوانیم گروههای انتقال را درون یکدیگر قرار دهیم. این به ما امکان میدهد جلوههای برش یا چرخشهای سهبعدی را در طول انتقال حفظ کنیم - چیزی که قبلاً غیرممکن بود زیرا عناصر تا سطح بالایی بالا میرفتند. .card img { view-transition-name: photo; view-transition-group: نزدیکترین; /* آن را تودرتو نگه دارید! */ }
تایپوگرافی و اشکال در نهایت، ارگونومیست در من مشتاق است که Text Box Trim را امتحان کند، که وعده حذف فضای خالی اضافی مزاحم بالا و پایین محتوای متن (پیشرو) را میدهد تا در نهایت به تراز عمودی کامل دست یابد. و برای جنبه خلاقانه، شکل گوشه و تابع shape() در حال باز کردن طرحبندیهای غیر مستطیلی هستند، و اجازه میدهند «مربع» و مسیرهای پیچیدهای که به متغیرهای CSS پاسخ میدهند. همانطور که گفته شد، من نمی توانم صبر کنم تا طرحی پر از سنجاب داشته باشم! آینده امیدوار ما شاهد جهانی هستیم که در آن CSS قادر به مدیریت منطق، حالت و تعاملات پیچیده ای است که قبلاً به جاوا اسکریپت تعلق داشت. ویژگی هایی مانند moveBefore (حفظ حالت DOM برای iframe/video) و attr() (استفاده از انواعی فراتر از رشته ها برای رنگ ها و شبکه ها) این واقعیت را بیشتر تقویت می کند. در حالی که برخی از این ویژگیها در حال حاضر آزمایشی یا مختص Chrome هستند، شتاب غیرقابل انکار است. ما باید به پشتیبانی مستمر در همه مرورگرها از طریق ابتکاراتی مانند Interop امیدوار باشیم تا اطمینان حاصل شود که این قابلیتها به خط پایه تبدیل میشوند. همانطور که گفته شد، داشتن موتورهای مرورگر به همان اندازه مهم است که همه این ویژگی های عالی در «اول Chrome» وجود دارد. این ویژگیهای جدید باید قبل از اینکه در مرورگرها قرار بگیرند، مورد بحث، اصلاح و آزمایش قرار گیرند. این یک لحظه فوق العاده برای ورود به CSS است. ما دیگر فقط به اسناد یک ظاهر طراحی نمی کنیم. ما در حال ساخت برنامه های کاربردی پویا، ارگونومیک و قوی با یک جعبه ابزار بومی هستیم که قدرتمندتر از همیشه است. بیایید با این دوره جدید پیش برویم و این خبر را منتشر کنیم. این CSS Wrapped است!
