در ماه مه وارد پلتفرم وب شده است

برخی از ویژگی‌های جالبی که در ماه مه ۲۰۲۶ به مرورگرهای وب پایدار و بتا اضافه شده‌اند را کشف کنید.

راشل اندرو

منتشر شده: ۲۹ مه ۲۰۲۶

نسخه‌های پایدار مرورگر

کروم ۱۴۸ ، فایرفاکس ۱۵۱ و سافاری ۲۶.۵ در ماه مه به نسخه پایدار منتشر شدند. این پست نگاهی به ویژگی‌های جدید فراوان این ماه می‌اندازد.

شبه کلاس :open در CSS به Baseline تبدیل می‌شود.

سافاری ۲۶.۵ عمدتاً نسخه‌ای برای رفع مشکلات ویژگی‌های موجود است. با این حال، از شبه کلاس :open نیز پشتیبانی می‌کند و این ویژگی را به نسخه پایه (Baseline Newly) تبدیل کرده است.

شبه کلاس :open به شما امکان می‌دهد عناصری را که در حالت باز بودن حالت‌های "باز" ​​و "بسته" دارند، استایل‌دهی کنید. این امر در مورد عناصری مانند <details> و <dialog> در حالت باز بودن و همچنین عناصر <select> و <input> (مانند انتخابگرهای رنگ یا تاریخ) در حالت نمایش رابط‌های انتخابگر آنها صدق می‌کند. این یک جایگزین تمیزتر و معنایی برای استایل‌دهی با استفاده از ویژگی‌هایی مانند details[open] ارائه می‌دهد.

Browser Support

  • کروم: ۱۳۳.
  • لبه: ۱۳۳.
  • فایرفاکس: ۱۳۶.
  • سافاری: ۲۶.۵

Source

کوئری‌های کانتینر فقط نام CSS به خط پایه تبدیل می‌شوند

با عرضه کروم ۱۴۸ در این ماه، اکنون پرس‌وجوهای کانتینر فقط بر اساس نام، به صورت Baseline New در دسترس قرار گرفته‌اند.

پیش از این، هنگام نوشتن یک کوئری کانتینر، لازم بود که در کنار نام کانتینر، شرط کوئری اندازه یا سبک را مشخص کنید و نوع کانتینر را با ویژگی container-type مشخص کنید. اکنون، می‌توانید وجود یک کانتینر نامگذاری شده را فقط با نام آن و بدون هیچ شرط اضافی جستجو کنید. علاوه بر این، اگر فقط با نام جستجو می‌کنید، دیگر نیازی به تنظیم container-type روی والد آن ندارید:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

  • کروم: ۱۴۸.
  • لبه: ۱۴۸.
  • فایرفاکس: ۱۴۹.
  • سافاری: ۲۶.۴.

کوئری‌های سبک کانتینر برای ویژگی‌های سفارشی به حالت پایه (Baseline) تبدیل می‌شوند.

فایرفاکس ۱۵۱ پشتیبانی از کوئری‌های style() روی @container را معرفی می‌کند و کوئری‌های سبک کانتینر را برای ویژگی‌های سفارشی ایجاد می‌کند. نسخه پایه (Baseline) به تازگی در دسترس قرار گرفته است.

کوئری‌های استایل کانتینر به شما این امکان را می‌دهند که استایل‌ها را بر اساس ویژگی‌های CSS کانتینر والد به عناصر اعمال کنید. در حالی که کوئری‌های سایز بسیار قدرتمند هستند، کوئری‌های استایل به شما این امکان را می‌دهند که ویژگی‌های غیر سایز را کوئری کنید. به طور خاص، این نسخه پشتیبانی کامل از مرورگرهای مختلف را برای کوئری کردن ویژگی‌های سفارشی ارائه می‌دهد. به عنوان مثال، می‌توانید بررسی کنید که آیا یک ویژگی سفارشی --theme در کانتینر والد روی dark تنظیم شده است یا خیر:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

  • کروم: ۱۱۱.
  • لبه: ۱۱۱.
  • فایرفاکس: ۱۵۱.
  • سافاری: ۱۸.

بارگذاری تنبل برای عناصر ویدیویی و صوتی

کروم ۱۴۸ بارگذاری تنبل ذاتی را برای عناصر <video> و <audio> با ویژگی loading="lazy" معرفی می‌کند.

درست مانند عناصر <img> و <iframe> ، اکنون می‌توانید به مرورگر دستور دهید که بارگذاری منابع رسانه‌ای را تا زمانی که به نمای دید نزدیک شوند، به تأخیر بیندازد. این به بهبود عملکرد بارگذاری صفحه، صرفه‌جویی در پهنای باند و کاهش استفاده از داده برای کاربران شما کمک می‌کند. برای کسب اطلاعات بیشتر در مورد این ویژگی، به مقاله «نحوه استفاده از بارگذاری تنبل استاندارد ویدیو و صدا در HTML در وب امروز» مراجعه کنید .

Browser Support

  • کروم: ۱۴۸.
  • لبه: ۱۴۸.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

API تصویر در تصویر اسناد

فایرفاکس ۱۵۱ پشتیبانی از API تصویر در تصویر اسناد را در پلتفرم‌های دسکتاپ معرفی می‌کند.

برخلاف API استاندارد تصویر در تصویر که به شما امکان می‌دهد یک عنصر <video> را در یک پنجره همیشه در بالا مشاهده کنید، API تصویر در تصویر سند به شما امکان می‌دهد یک پنجره همیشه در بالا حاوی محتوای HTML دلخواه باز کنید. این امر امکان ایجاد پوشش‌های تعاملی غنی مانند شبکه‌های شرکت‌کنندگان کنفرانس ویدیویی، نشانگرهای سهام تعاملی یا تایمرهایی را فراهم می‌کند که حتی هنگام خروج از صفحه نیز باقی می‌مانند.

Browser Support

  • کروم: ۱۱۶.
  • لبه: ۱۱۶.
  • فایرفاکس: ۱۵۱.
  • سافاری: پشتیبانی نمی‌شود.

Source

API سریال وب، پشتیبانی از پلتفرم را گسترش می‌دهد

فایرفاکس ۱۵۱ پشتیبانی از رابط برنامه‌نویسی کاربردی سریال وب را در پلتفرم‌های دسکتاپ اضافه می‌کند و کروم ۱۴۸ نیز از آن در اندروید پشتیبانی می‌کند.

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

Browser Support

  • کروم: ۸۹.
  • لبه: ۸۹.
  • فایرفاکس: ۱۵۱.
  • سافاری: پشتیبانی نمی‌شود.

Source

نسخه‌های بتای مرورگر منتشر شد

نسخه‌های بتای مرورگر، پیش‌نمایشی از ویژگی‌های نسخه پایدار بعدی مرورگر را به شما ارائه می‌دهند. اکنون زمان بسیار خوبی برای آزمایش ویژگی‌های جدید یا حذف مواردی است که می‌توانند قبل از انتشار عمومی، سایت شما را تحت تأثیر قرار دهند. نسخه‌های بتای جدید این ماه کروم ۱۴۹ و فایرفاکس ۱۵۲ هستند. این ماه نسخه بتای سافاری وجود ندارد.

نسخه بتای کروم ۱۴۹ شامل به‌روزرسانی‌های جذاب CSS مانند تزئینات شکاف CSS است که به شما امکان می‌دهد فضای خالی (شکاف‌ها) بین آیتم‌های flex و grid را استایل‌دهی کنید. همچنین از توابع شکل پایه path() و shape() و همچنین توابع شکل پایه rect() و xywh() در ویژگی shape-outside و path-length به عنوان یک ویژگی CSS پشتیبانی می‌کند. در سمت API، متدهای اسکرول برنامه‌ریزی‌شده مانند scrollTo() ، scrollBy() و scrollIntoView() اکنون Promises را برمی‌گردانند که پس از تکمیل اسکرول روان، برطرف می‌شوند و صفحاتی که اتصالات WebSocket فعال دارند، اکنون می‌توانند واجد شرایط ذخیره‌سازی back/forward (BFCache) باشند.

فایرفاکس ۱۵۲ بتا پشتیبانی کامل از ویژگی field-sizing را ارائه می‌دهد که به کنترل‌های فرم اجازه می‌دهد اندازه خود را به طور خودکار متناسب با محتوایشان تنظیم کنند. همچنین ویژگی‌های actions و maxActions را به رابط Notification و پشتیبانی از options.pseudoElement را در Element.getAnimations() اضافه می‌کند.