منتشر شده: ۳ ژوئن ۲۰۲۶
به خلاصه ماهانه Baseline خوش آمدید. در ماه مه 2026، چندین ویژگی جدید CSS، ویژگیهای رویداد و API به Baseline Newly در دسترس قرار گرفتند، در حالی که واحدهای CSS، ویژگیهای تعامل کاربر و شبه کلاسها به Baseline Widely در دسترس قرار گرفتند، در کنار بهروزرسانیهای مهم از جامعه توسعهدهندگان.
بررسی وضعیت CSS در سال 2026
بررسی سالانهی نبض جامعهی وب از راه رسید: نظرسنجی وضعیت CSS 2026 اکنون آغاز شده است. امسال، برگزارکنندگان تلاش آگاهانهای برای اصلاح این نظرسنجی انجام دادهاند و بر ویژگیهایی تمرکز کردهاند که در عصر کدنویسی با کمک هوش مصنوعی، بیشترین اهمیت را برای توسعهدهندگان دارند. فروشندگان مرورگرها این نتایج را از نزدیک زیر نظر دارند تا به اولویتبندی نقشههای راه مهندسی خود و رفع نقاط ضعف توسعهدهندگان کمک کنند. حتماً قبل از پایان نظرسنجی در اول جولای، نظرات خود را بیان کنید و تجربهی خود را با چشمانداز در حال تحول CSS به اشتراک بگذارید.
ویژگیهای جدید پایه
ویژگیهای این بخش از ماه مه ۲۰۲۶ در مجموعه مرورگر اصلی پشتیبانی میشوند و اکنون به صورت پایهای (Baseline) در دسترس هستند.
کوئریهای سبک کانتینر
کوئریهای کانتینر دیگر محدود به اندازه نیستند. با کوئریهای استایل، اکنون میتوانید استایلها را بر اساس ویژگیهای سفارشی یک کانتینر والد به عناصر اعمال کنید. این به شما امکان میدهد کامپوننتهای بسیار ماژولاری بسازید که میتوانند تم یا استایل خود را بر اساس موقعیت مکانی خود و بدون تکیه بر ساختارهای کلاس پیچیده تطبیق دهند.
برای اطلاعات بیشتر به صفحه مرجع MDN برای @container مراجعه کنید.
:open
استایلدهی به عناصری که حالتهای باز و بسته دارند - مانند <dialog> و <details> - قبلاً نیازمند بررسی ویژگیها یا مدیریت کلاسها بود. شبه کلاس :open این کار را با تطبیق این عناصر فقط زمانی که در حال حاضر در حالت باز خود هستند، ساده میکند و امکان CSS تمیزتر و اعلانیتری را فراهم میکند.
برای اطلاعات بیشتر در مورد آن، صفحه MDN مربوط به شبه کلاس :open را مطالعه کنید.
ToggleEvent.source
هنگام کار با API مربوط به Popover، واکنش به تغییرات حالت بسیار مهم است. ویژگی source ) رابط ToggleEvent ، عنصر کنترلی را که باعث فعال شدن عمل تغییر وضعیت popover شده است، برمیگرداند. این به شما امکان میدهد منشأ رویداد را شناسایی کرده و تعاملات پیچیده رابط کاربری را هماهنگ کنید.
برای اطلاعات بیشتر به مستندات MDN مربوط به ToggleEvent.source مراجعه کنید.
ویژگی image-rendering
ویژگی image-rendering در CSS به شما امکان میدهد الگوریتم مقیاسبندی مورد استفاده هنگام تغییر اندازه تصاویر را کنترل کنید. این ویژگی به ویژه برای تصاویر پیکسلی، تصاویر با وضوح پایین یا کدهای QR مفید است که در آنها جلوگیری از درونیابی تار و حفظ مقیاسبندی واضح و پیکسلی اهمیت دارد.
نحوه استفاده از آن را در صفحه MDN برای رندر تصویر بیاموزید.
text-decoration-skip-ink: all
زیرخطهایی که از پایینخطها عبور میکنند، گاهی اوقات میتوانند بههمریخته به نظر برسند. در حالی که text-decoration-skip-ink: auto فقط هنگام تقاطع، جوهر را رد میکند، تنظیم آن روی all باعث میشود زیرخط صرف نظر از تقاطع، از همه حروف عبور کند و کنترل بیشتری بر زیباییشناسی تایپوگرافی ارائه دهد.
جزئیات مربوط به text-decoration-skip-ink را در راهنمای MDN مطالعه کنید.
SharedWorker
API SharedWorker یک عامل پسزمینهی تخصصی ارائه میدهد که میتوان از چندین زمینهی مرور، مانند پنجرهها، تبها یا iframeهای مختلف در یک مبدا، به آن دسترسی داشت. این ابزار برای اشتراکگذاری وضعیت، مدیریت اتصالات یا هماهنگی وظایف پسزمینه در مرزهای تبها قدرتمند است.
مستندات MDN برای SharedWorker را بررسی کنید.
ویژگیهای پایه که به طور گسترده در دسترس هستند
ویژگیهای زیر به صورت گسترده در Baseline در دسترس قرار گرفتند، به این معنی که اکنون به طور گسترده سازگار و قابل استفاده در پروژههای شما هستند.
واحد طول lh
واحد نسبی lh مربوط به ارتفاع خط محاسبهشده عنصری است که روی آن استفاده میشود. این امر، تطبیق کامل اندازه عناصر - مانند نشانهای آیکون یا هایلایتهای پسزمینه - با ارتفاع یک خط متن را سادهتر میکند.
برای اطلاعات بیشتر در مورد واحدهای طول، به مرجع MDN مراجعه کنید.
واحد طول rlh
مشابه lh ، واحد rlh نشاندهنده ارتفاع خط است، اما بهطور خاص برای عنصر ریشه ( <html> ). این به شما امکان میدهد بدون توجه به اندازه فونت محلی یا لغو ارتفاع خط، یک ریتم عمودی ثابت در کل صفحه خود ایجاد کنید.
برای اطلاعات بیشتر در مورد واحدهای طول، به مرجع MDN مراجعه کنید.
Navigator.userActivation
بسیاری از APIهای وب (مانند پخش ویدیو، پنجرههای بازشو یا دسترسی به کلیپبورد) قبل از اینکه بتوانند فعال شوند، نیاز به تعامل کاربر دارند. ویژگی Navigator.userActivation یک شیء حاوی اطلاعات مربوط به وضعیت فعالسازی فعلی و قبلی کاربر در پنجره را برمیگرداند و به اسکریپتها اجازه میدهد تا تأیید کنند که آیا حرکتی از کاربر رخ داده است یا خیر.
نحوه استفاده از آن را در صفحه MDN برای Navigator.userActivation بیابید.
clip-path
ویژگی clip-path در CSS به شما امکان میدهد یک ناحیه برش ایجاد کنید که مشخص میکند چه بخشی از یک عنصر باید قابل مشاهده باشد. با استفاده از اشکال پایه (مانند دایره، بیضی یا چندضلعی) یا مسیرهای SVG، میتوانید طرحهای چیدمان و انتقالهای جذابی را بدون پنهان کردن سرریز ایجاد کنید.
جزئیات پیادهسازی را در صفحه MDN برای clip-path بررسی کنید.
شبه کلاس :user-invalid
برخلاف :invalid که به محض بارگذاری صفحه، استایلبندی را اعمال میکند (که اغلب منجر به تجربه کاربری ضعیف میشود)، شبهکلاس :user-invalid فقط عناصر نامعتبر فرم را پس از تعامل کاربر با آنها مطابقت میدهد. این بدان معناست که میتوانید بازخورد اعتبارسنجی فرم را پس از خروج کاربر از فیلد نمایش دهید.
برای آشنایی با نحوهی عملکرد آن، به مستندات MDN برای :user-invalid مراجعه کنید.
این یه جورایی پیچیده شده
اگر موردی مربوط به Baseline را از قلم انداختهایم، به ما اطلاع دهید تا مطمئن شویم در نسخههای بعدی به آن پرداخته میشود! اگر سؤالی دارید یا میخواهید در مورد Baseline بازخوردی ارائه دهید، میتوانید در بخش پیگیری مشکلات ما، مشکل خود را ثبت کنید.