آینده CSS

در چند سال گذشته، همه فروشندگان بزرگ مرورگر (گوگل، اپل، مایکروسافت و موزیلا، همراه با Igalia و Bocoup) روی Interop (در برگه جدید باز می شود) با هم کار کرده اند، پروژه ای برای بهبود پشتیبانی جهانی از مرورگرها در فناوری های وب. این یک تلاش بسیار موفق بوده است. هنگامی که یک منطقه فوکوس به Interop اضافه می شود، اغلب در عرض یک سال به پشتیبانی نزدیک به 100٪ در همه مرورگرهای اصلی می رسد. ✨

CSS Subgrid یک مثال خوب است. Subgrid یک افزونه فوق‌العاده قدرتمند برای CSS Grid است که طرح‌بندی‌های کاملا جدیدی را فعال می‌کند. در سال 2019 در فایرفاکس پیاده سازی شد، اما برای سال ها حرکت زیادی در مرورگرهای دیگر وجود نداشت. به Interop 2023 اضافه شد و تا پایان همان سال، به طور گسترده در تمام مرورگرهای مدرن در دسترس بود:

با رسیدن به پایان سال 2026، Interop 2027 در حال حاضر در حال برنامه ریزی است و تیم موزیلا یک سیستم رتبه بندی (در برگه جدید باز می شود) برای ما ایجاد کرده است تا به ویژگی های مورد درخواست ما رأی مثبت دهیم. آنها قصد دارند از داده های رتبه بندی استفاده کنند تا تصمیم بگیرند چه چیزی را برای Interop سال آینده شامل شود!

در این پست وبلاگ، می‌خواهم ۱۰ ویژگی برتری را که به آن‌ها رای داده‌ام بررسی کنم تا کمی پیش‌نمایش از ظاهر CSS در سال آینده ارائه دهم. همچنین نکات و ترفندهای کوچکی وجود خواهد داشت که می توانید از امروز استفاده کنید!

یکی از مهیج ترین ایده ها پیشنهاد اضافه کردن توابع به CSS است (در برگه جدید باز می شود):

اگر با جاوا اسکریپت آشنایی دارید، این باید کاملا آشنا باشد. توابع جدید را با @function تعریف می کنیم و مقدار برگشتی را با نتیجه مشخص می کنیم.

کارهای جالب زیادی وجود دارد که می توانیم با این کار انجام دهیم. شخصا، موردی که بیشتر به آن علاقه دارم، توانایی تبدیل بین مختصات قطبی و دکارتی است، مفهومی که بارها و بارها در دوره آموزشی Whimsical Animations خود استفاده می کنیم (در برگه جدید باز می شود):

این برای من بسیار «علمی تخیلی» است، اما قبلا در مرورگرهای Chromium پیاده‌سازی شده است، و اگر به Interop 2027 اضافه شود، فکر می‌کنم احتمال بسیار خوبی وجود دارد که زودتر به‌طور گسترده در دسترس قرار گیرد!

در CSS، می‌توانیم از ویژگی border-radius برای گرد کردن لبه‌های گره‌های DOM خود برای ایجاد مستطیل‌های گرد استفاده کنیم. این ویژگی به طور موثر یک چهارم دایره را به هر گوشه اضافه می کند و 4 ضلع مستقیم را به هم متصل می کند.

ویژگی گوشه شکل کاوشی در راه های جایگزین برای اتصال 4 طرف گره های DOM ما است. چندین گزینه جدید را ارائه می دهد:

وقتی برای اولین بار در مورد این ویژگی شنیدم، بیشتر در مورد سنجاب هیجان زده شدم. اگر آشنایی ندارید، سنجاب ها الگوریتم جایگزینی برای ایجاد گوشه های گرد با استفاده از ابربیضی هستند. اپل سال‌هاست که از آنها استفاده می‌کند زیرا لبه‌های نرم‌تر و ملایم‌تری تولید می‌کنند.

با این اوصاف، پس از مدتی درگیر شدن با شکل گوشه، متوجه شدم که از شکل گوشه استفاده می کنم: bevel a ton. برای ایجاد رابط های کاربری بازی های ویدئویی / علمی تخیلی عالی است. در اینجا یک پیش نمایش کوچک از یک پروژه جانبی است که من روی آن کار کرده ام، با تعداد زیادی گوشه: bevel:

ما از لحاظ فنی توانسته‌ایم کارهایی مانند این را با مسیر کلیپ یا ماسک انجام دهیم، اما برخلاف آن ویژگی‌ها، شکل گوشه در واقع شکل کادر حاشیه را تغییر می‌دهد. این بدان معنی است که مرزها، خطوط و سایه های جعبه ما به درستی از اشکال گوشه های تغییر یافته پیروی می کنند!

و حتی اگر این ویژگی در Firefox/Safari در دسترس نیست (همانطور که من این را در اکتبر 2026 می نویسم)، فکر می کنم منطقی است که از امروز شروع به استفاده از آن کنید. این یک پیشرفت کامل است!

علاوه بر شکل گوشه، یک پیشنهاد جداگانه برای شکل حاشیه وجود دارد (در برگه جدید باز می شود) که در اصل یک نسخه سطح پایین تر است که به ما امکان می دهد خودمان مرز را ترسیم کنیم.

من اخیرا از این ویژگی برای کشیدن این کارت با یک اسکوپ دایره ای بزرگ در بالا استفاده کردم:

مانند گوشه شکل، این ویژگی کادر حاشیه واقعی عنصر را تغییر می‌دهد، بنابراین حاشیه‌ها/طرح‌ها/سایه‌ها به درستی آن را ردیابی می‌کنند. من شکلی را که می خواستم کشیدم و سپس یک حاشیه سفید و طرح کلی سیاه اضافه کردم تا به افکتی که در بالا نشان داده شده بود برسم!

ما حتی می‌توانیم بین شکل‌های مرزی مختلف متحرک شویم، مانند آنچه در این کلیپ انجام می‌دهم:

من اخیرا یک پست وبلاگ در Anchor Positioning منتشر کردم، یکی از هیجان انگیزترین ویژگی های مدرن CSS (که در واقع در Interop 2026 اولویت بندی شد و اکنون به طور گسترده در دسترس است!).

Anchor Positioning API به ما این امکان را می دهد که یک عنصر را به عنصر دیگر متصل کنیم. به عنوان مثال، ممکن است یک عنصر راهنمای ابزار شناور را به ماشه آن متصل کنیم، به طوری که مهم نیست آن ماشه در کجای صفحه باشد، راهنمای ابزار همیشه به آن متصل باشد.

اگر تا به حال سعی کرده اید این نوع مشکل را خودتان حل کنید، می دانید که به طرز شگفت انگیزی مشکل است. به عنوان مثال، ممکن است بخواهیم راهنمای ابزار ما در بالای لنگر شناور باشد، اما اگر لنگر نزدیک بالای پنجره دید باشد، چه؟

API اصلی Anchor Positioning اکثر ابزارهای مورد نیاز برای حل آسان این مشکل در CSS را در اختیار ما قرار داد. به ما امکان می دهد موقعیت های بازگشتی را مشخص کنیم. اگر عنصر هدف در بالای لنگر قرار نگیرد، می تواند به طور خودکار به پایین بچرخد.

تنها چیزی که از دست می‌رفت، توانایی تشخیص اینکه آیا هدف برگشته است یا خیر بود. ما هیچ راهی برای دانستن اینکه عنصر هدف در حال حاضر در بالا یا پایین لنگر قرار دارد، در حال استفاده از موقعیت پیش‌فرض یا بازگشت به عقب، در CSS نداشتیم. برای راهنمایی ابزار، این یک مشکل است زیرا ما معمولا می خواهیم کمی برآمدگی اضافه کنیم که به سمت لنگر باشد.

نسخه «سطح ۲» Anchor Positioning API شامل نوع جدیدی از پرس‌وجو ظرف است که به ما امکان می‌دهد بررسی کنیم که آیا عنصر هدف از موقعیت بازگشتی استفاده می‌کند یا خیر. می‌توانید در پست وبلاگ Anchor Positioning من درباره آن اطلاعات بیشتری کسب کنید، یا پیشنهاد Interop 2027 را بررسی کنید (در برگه جدید باز می‌شود).

بنابراین صادقانه بگویم، من هرگز در مورد این پیشنهاد (در برگه جدید باز می شود) نشنیده بودم، و تا آنجا که می توانم بگویم، در هیچ مرورگری اجرا نمی شود. حتی در caniuse لیست نشده است، بنابراین من نمی توانم یکی از آن ویجت های کوچک را نمایش دهم!

و با این حال، لحظه ای که آن را دیدم، تبدیل به چیزی شد که به آن نیاز داشتم. 😂

همانطور که ممکن است بدانید، کلمه کلیدی inherit در CSS به ما امکان می دهد یک مقدار را از والد منتقل کنیم، حتی اگر آن ویژگی معمولا به ارث برده نشود:

این یک ترفند کوچک مفید برای استفاده مجدد از مقادیر است، اما من اغلب متوجه می شوم که کاملا کار نمی کند. برای مثال، فرض کنید شعاع های مرزی تودرتو داریم (یا شعاع است؟):

برای اینکه شعاع های مرزی تو در تو درست به نظر برسند، باید میزان گرد شدن در شعاع داخلی را کاهش دهیم. بنابراین من دقیقا نمی خواهم از مقدار ارثی استفاده کنم. من می خواهم آن را متحول کنم.

در اینجاست که تابع inherit() پیشنهادی وارد می‌شود. مقدار ارثی را حذف می‌کند و به ما اجازه می‌دهد آن را با استفاده از calc() تغییر دهیم:

با توجه به اینکه این ویژگی چقدر مقدماتی است، اگر برای Interop 2027 کاهش پیدا کند، کمی متعجب خواهم شد. اما امیدوارم در آینده این ویژگی را داشته باشیم! فوق العاده مفید به نظر می رسد. 😄

در پست وبلاگم در مورد انیمیشن‌های اسکرول محور، بررسی می‌کنیم که چگونه می‌توانیم با پیمایش یک انیمیشن فریم کلیدی را تمیز کنیم. برای مثال، می‌توانیم از آن برای محو کردن یک عنصر در هنگام عبور از viewport استفاده کنیم:

انیمیشن های اسکرول محور بخشی از Interop 2026 بودند (در برگه جدید باز می شود) و با موفقیت در همه مرورگرها پیاده سازی شده است. با این حال، علاوه بر انیمیشن‌های اسکرول محور، پیشنهاد جداگانه‌ای برای انیمیشن‌های پیمایش‌شده نیز وجود دارد.

با انیمیشن‌های اسکرول، هدف این است که وقتی کاربر به نقطه خاصی حرکت می‌کند، یک انیمیشن فریم کلیدی فعال شود، مانند خاموش شدن حسگر مجاورت. در آن نقطه، انیمیشن به طور معمول در یک مدت زمان مشخص اجرا می شود.

ما در حال حاضر می‌توانیم انیمیشن‌های اسکرول راه‌اندازی شده را با استفاده از IntersectionObserver API در جاوا اسکریپت پیاده‌سازی کنیم، اما این یک جور دردسر است. زمانی که بتوانیم از CSS برای انیمیشن های اسکرول محور و اسکرول راه اندازی شده استفاده کنیم بسیار خوب خواهد بود، زیرا هر کدام موارد استفاده خاص خود را دارند.

می‌توانید در این مقاله فوق‌العاده توسط Bramus (در برگه جدید باز می‌شود) درباره انیمیشن‌های اسکرول راه‌اندازی اطلاعات بیشتری کسب کنید.

من در حال حاضر روی یک پروژه فوق محرمانه کار می کنم که شامل یک طرح بندی مبتنی بر شبکه پویا است. موارد در دسک تاپ در مقایسه با موبایل بسیار متفاوت چیده شده اند:

این یکی از چیزهای عالی در مورد CSS پاسخگو است، اما منجر به یک عارضه جانبی ناگوار می شود: ترتیب برگه ها همیشه بر اساس ترتیب DOM است، نه ترتیب بصری. بنابراین، اگر شخصی از فناوری‌های کمکی برای پیمایش بین عناصر استفاده کند، این ترتیب پیمایش همیشه یکسان خواهد بود، حتی اگر چیدمان بسته به اندازه صفحه نمایش به‌طور چشمگیری تغییر کند.

در دسکتاپ، اولین آیتم بصری لیست صداهای Redacted در سمت چپ است، اما در موبایل، اولین مورد آن دکمه قرمز بزرگ است. هر عنصری که در DOM اول باشد، اولین موردی است که فوکوس دریافت می‌کند، که برای درصدی از کاربران ما همیشه اشتباه است.

خوشبختانه، ویژگی جدید خواندن جریان به ما راه حلی برای این مشکل می دهد، و پیشنهادی برای Interop 2027 (در برگه جدید باز می شود) وجود دارد.

ایده اصلی این است که ما می توانیم مشخص کنیم که ترتیب برگه باید یکی از چندین ترتیب بصری را دنبال کند:

مقادیری هم برای CSS Grid و هم برای Flexbox وجود دارد، و اگر به کنترل بیشتری نیاز دارید، ویژگی reading-order به ما اجازه می‌دهد تا یک سفارش سفارشی ایجاد کنیم، مرتب‌سازی‌شده‌ای مانند tabIndex در HTML.

این ملک توسط یکی از قهرمانان شخصی من، ریچل اندرو، حمایت شده است. می توانید در پست وبلاگ او در مورد جریان خواندن اطلاعات بیشتری در مورد آن بخوانید.

یک نقطه درد طولانی مدت در وب، ناتوانی در متحرک سازی بین مقادیر کلیدواژه مانند خودکار است. ویژگی interpolate-size این مشکل را حل می‌کند و یک پیشنهاد Interop 2027 (در برگه جدید باز می‌شود) برای آن همراه با تابع calc-size () مربوطه وجود دارد.

رایج ترین مورد استفاده برای این ویژگی، متحرک سازی بین ارتفاع: 0 و ارتفاع: خودکار، برای ایجاد رابط های کاربری آکاردئونی تاشو است:

ویژگی interpolate-size هنوز در مرورگر شما پشتیبانی نمی شود. در مرورگرهای پشتیبانی شده به این صورت است:

مسلما این یک نمونه پیچیده است که به CSS دیگری مانند انتقال رفتار نیاز دارد، اما به خوبی پشتیبانی می‌شود. اما نکته کلیدی این است که interpolate-size: allow-keywords این نوع انتقال را ممکن می کند.

این پیشنهاد مدتی است که شروع به کار کرده است، و از سال 2024 در کروم پیاده سازی شده است، بنابراین امیدواریم که به Interop 2027 راه یابد!

و حتی اگر هنوز در همه مرورگرها در دسترس نیست، می‌توانیم از امروز به عنوان یک پیشرفت پیشرو استفاده کنیم. فقط مطمئن شوید که انتقال پشت یک جستجوی @supports را گیت کنید، زیرا در غیر این صورت یک تاخیر کوتاه به مرورگرهای پشتیبانی نشده اضافه می شود.

یکی از مواردی که چیدمان شبکه CSS را منحصر به فرد می کند این است که کودکان شبکه با استفاده از سطرها/ستون هایی که به طور کامل در CSS تعریف شده اند قرار می گیرند. در هر حالت طرح بندی دیگر، عناصر با استفاده از عناصر دیگر قرار می گیرند! برای مثال، در طرح‌بندی جدول، هر سلول شبکه دارای یک عنصر <td> یا <th> است.

CSS Grid نکات مثبت زیادی دارد، اما یکی از نکات منفی این است که اضافه کردن مرز بین سلول‌های شبکه به آسانی نیست. اگر یک سلول شبکه خالی باشد، هیچ عنصری برای زدن حاشیه وجود ندارد: 1px جامد!

پیشنهاد تزئینات شکاف (در برگه جدید باز می شود) مجموعه جدیدی از ویژگی های CSS را معرفی می کند که به ما امکان می دهد از یک دستور حاشیه مانند در خود شبکه استفاده کنیم. این را بررسی کنید:

ویژگی rule هنوز در مرورگر شما پشتیبانی نمی شود. در مرورگرهای پشتیبانی شده به این صورت است:

مانند border، خاصیت rule یک ویژگی کوتاه‌نویسی است که به ما اجازه می‌دهد تا عرض، رنگ و استایل (نقطه‌دار/نقطه‌دار) خط را مشخص کنیم. همچنین اگر بخواهیم بین هر سطر یا ستون خطوطی رسم کنیم، می توانیم از row-rule و column-rule نیز استفاده کنیم.

هنگام کار با موقعیت: چسبنده، آیا تا به حال آرزو کرده اید که راهی وجود داشته باشد که بفهمید آیا عنصر در حال حاضر "گیر" است یا خیر؟ به عنوان مثال، ممکن است بخواهید رنگ پس‌زمینه یک هدر چسبنده را هنگامی که به بالای پنجره گیر می‌کند، تغییر دهید.

این پیشنهاد (در برگه جدید باز می شود) برای اجرای یک نوع جدید از پرس و جوی کانتینر است، موردی که زمانی مطابقت دارد که یک موقعیت: عنصر چسبنده از موقعیت معمولی خود در جریان به لنگر انداختن به نمای دید تغییر می کند. آن را بررسی کنید:

اگر این ویژگی هنوز در مرورگر شما پشتیبانی نمی‌شود، به این شکل به نظر می‌رسد.

جالب اینجاست که این API جدید فقط برای موقعیت یابی چسبنده نیست. ما می توانیم از آن برای پرس و جو کردن انواع حالت های مربوط به اسکرول استفاده کنیم. برای مثال، می‌توانیم بگوییم که آیا یک محفظه اسکرول به بالا/پایین پیمایش شده است یا خیر، که می‌تواند برای نشان دادن آن شیب‌های نشان‌دهنده پیمایش مفید باشد:

اگر قابلیت پیمایش به بالا وجود دارد، قابل پیمایش: برتر مطابقت دارد، و بنابراین ما شبه عنصر شناور در بالای محتوا را آشکار می کنیم. وقتی تا انتها به بالا پیمایش کنید، قابل پیمایش: بالا دیگر اعمال نمی شود و بنابراین گرادیان پنهان می شود.

در مرورگرهای پشتیبانی شده به این صورت است:

با ورود به هفتمین سال اینتروپ، غیرقابل انکار است که این پروژه موفقیت چشمگیری برای وب داشته است. من بسیار خوشحالم که آنها همچنان بر این موفقیت ادامه می دهند!

من می دانم که در حال حاضر زمان عجیبی برای توسعه دهندگان وب است، و بسیاری از ما در تعجب هستیم که آیا دیگر نیازی به اهمیت دادن به این نوع چیزها داریم یا خیر. اگر همه کارمان را به LLM واگذار کنیم، آیا هنوز باید با جدیدترین و بهترین ویژگی های CSS همگام باشیم؟

شخصا فکر می کنم مهمتر از همیشه است. ما نمی توانیم انتظار داشته باشیم که LLM ها از ویژگی های CSS مدرن استفاده کنند، در حالی که بسیاری از داده های آموزشی آنها سال ها گذشته است. بسیاری از ویژگی‌هایی که در این پست به اشتراک گذاشته‌ام، امروز می‌توانند به‌عنوان یک پیشرفت پیشرونده استفاده شوند، و اگر تاریخچه راهنما باشد، بسیاری از آنها به زودی به طور گسترده در دسترس خواهند بود.

در نهایت، من قویا شما را تشویق می‌کنم که انتخاب‌های برتر خود را رتبه‌بندی کنید (در برگه جدید باز می‌شود)! تعداد زیادی پیشنهاد عالی در این لیست وجود دارد، از جمله برخی APIهای جاوا اسکریپت هیجان انگیز مانند Temporal که گنجاندن آنها در این پست وبلاگ منطقی نیست.