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

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

راشل اندرو

منتشر شده: ۲ اکتبر ۲۰۲۶

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

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

تابع progress() در CSS به خط پایه تبدیل می‌شود.

فایرفاکس ۱۵۵ پشتیبانی از تابع ریاضی progress() در CSS را اضافه کرده و آن را به نسخه پایه (Baseline New) در دسترس قرار داده است.

تابع progress() یک <number> برمی‌گرداند که نشان‌دهنده موقعیت یک محاسبه بین یک مقدار شروع و یک مقدار پایان است. معمولاً نتیجه بین 0 و 1 محدود می‌شود، که آن را برای تعیین اندازه سیال، شفافیت یا رنگ‌ها بر اساس ابعاد ظرف یا نمای دید مفید می‌کند. هم فایرفاکس ۱۵۵ و هم سافاری ۲۷ همچنین از گزینه کلمه کلیدی no-clamp پشتیبانی می‌کنند و به مقدار پیشرفت بازگشتی اجازه می‌دهند تا کمتر از 0 یا بیشتر از 1 گسترش یابد.

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

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

Source

رنگ‌های آلفای نسبی با alpha() به خط پایه تبدیل می‌شوند

فایرفاکس ۱۵۵ و سافاری ۲۷ هر دو پشتیبانی از تابع رنگ نسبی alpha() را از CSS Color 5 اضافه کرده‌اند.

تابع alpha() یک رنگ مبدا را می‌گیرد و آن رنگ را با یک کانال آلفا (شفافیت) تنظیم‌شده، ضمن حفظ کانال‌های رنگی و فضای رنگی آن، برمی‌گرداند:

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

با پشتیبانی کروم ۱۵۱، فایرفاکس ۱۵۵ و سافاری ۲۷ از alpha() ، این تابع اکنون به صورت پایه‌ای (Baseline Newly) در دسترس است.

Browser Support

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

Source

کلمه کلیدی CSS revert-rule به Baseline تبدیل می‌شود.

سافاری ۲۷ پشتیبانی از کلمه کلیدی revert-rule در سطح CSS را اضافه می‌کند.

در حالی که revert آبشار را به مبدا کاربر یا عامل کاربر برمی‌گرداند و revert-layer به لایه آبشار قبلی برمی‌گرداند، revert-rule مقدار یک ویژگی را به مقداری که اگر قانون سبک فعلی وجود نداشت، برمی‌گرداند. با پشتیبانی در کروم، فایرفاکس و اکنون سافاری ۲۷، revert-rule به تازگی در دسترس قرار گرفته است.

Browser Support

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

Source

مقادیر <image> در light-dark() به خط پایه تبدیل می‌شوند.

سافاری نسخه ۲۷ پشتیبانی از استفاده از مقادیر <image> را درون تابع light-dark() در CSS اضافه کرده است.

تابع light-dark() که قبلاً محدود به مقادیر <color> بود، اکنون می‌تواند بر اساس color-scheme روشن یا تیره فعال، بین دو تصویر - مانند تصاویر url() یا گرادیان‌های CSS - جابجا شود. با پشتیبانی در کروم، فایرفاکس و سافاری ۲۷، مقادیر <image> در تابع light-dark() اکنون به صورت پایه (Baseline) و جدیداً در دسترس قرار گرفته‌اند.

Browser Support

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

لنگر انداختن اسکرول با overflow-anchor به Baseline تبدیل می‌شود

سافاری ۲۷ قابلیت لنگر انداختن اسکرول را فعال کرده و پشتیبانی از ویژگی CSS overflow-anchor اضافه کرده است.

لنگر اسکرول، موقعیت اسکرول را به طور خودکار تنظیم می‌کند، زمانی که DOM در بالای نمای قابل مشاهده تغییر می‌کند، در غیر این صورت باعث پرش محتوا در حین خواندن یا تعامل کاربر با صفحه می‌شود. می‌توانید از overflow-anchor: none برای جلوگیری از عملکرد عناصر خاص به عنوان گره‌های لنگر استفاده کنید. با پیوستن Safari 27 به Chrome و Firefox، لنگر اسکرول اکنون به صورت Baseline New در دسترس است.

Browser Support

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

Source

ویژگی font-width و توصیفگر @font-face به Baseline تبدیل می‌شوند.

CSS Fonts 4، font-stretch را با font-width به عنوان نام استاندارد برای انتخاب سطوح فونت معمولی، فشرده یا گسترده جایگزین کرد و font-stretch به عنوان یک نام مستعار قدیمی حفظ کرد.

فایرفاکس ۱۵۵ پشتیبانی از ویژگی font-width CSS، توصیفگر font-width @font-face و CSSStyleDeclaration.fontWidth را اضافه کرده است. کروم ۱۵۴ نیز توصیفگر font-width را در قوانین @font-face و ویژگی width را روی اشیاء FontFace اضافه کرده است. علاوه بر پشتیبانی موجود در سافاری، font-width اکنون به صورت Baseline New در دسترس است.

Browser Support

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

Source

sizes="auto" برای تصاویر lazy-loaded به Baseline تبدیل می‌شود.

سافاری نسخه ۲۷ پشتیبانی از کلمه کلیدی auto را در ویژگی sizes روی عناصر <img> که loading="lazy" استفاده می‌کنند، اضافه کرده است.

وقتی شما sizes="auto" (یا لیست sizes که با auto شروع می‌شوند) را مشخص می‌کنید، مرورگر از عرض طرح‌بندی رندر شده تصویر lazy-loaded برای انتخاب مناسب‌ترین منبع تصویر از srcset استفاده می‌کند. با پشتیبانی در کروم، فایرفاکس و اکنون سافاری ۲۷، sizes="auto" به تازگی در دسترس قرار گرفته است.

Browser Support

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

Source

تکرار ناهمگام و اشیاء ReadableStream قابل انتقال به Baseline تبدیل می‌شوند

سافاری ۲۷ شامل چندین به‌روزرسانی برای ReadableStream است:

  • پشتیبانی از تکرار ناهمگام روی اشیاء ReadableStream با استفاده از حلقه‌های for await...of و ReadableStream.prototype.values() .
  • پشتیبانی از انتقال اشیاء ReadableStream بین contextها با استفاده از postMessage() .
  • پشتیبانی از متد استاتیک ReadableStream.from() برای ایجاد یک ReadableStream از یک شیء iterable یا async iterable (همچنین در فایرفاکس پشتیبانی می‌شود).

با سافاری ۲۷، استریم‌های قابل تکرار ناهمگام و اشیاء قابل انتقال ReadableStream اکنون به صورت Baseline Newly در دسترس هستند.

Browser Support

  • کروم: ۱۲۴.
  • لبه: ۱۲۴.
  • فایرفاکس: ۱۱۰.
  • سافاری: ۲۷.

AnimationEvent.animation و TransitionEvent.animation به Baseline تبدیل می‌شوند.

سافاری ۲۷ ویژگی animation را به AnimationEvent و ویژگی animation را به TransitionEvent اضافه می‌کند.

این ویژگی، شیء Animation مرتبط با انیمیشن CSS یا رویداد انتقال را برمی‌گرداند و بررسی یا کنترل انیمیشن را مستقیماً از یک شنونده رویداد آسان‌تر می‌کند. با پشتیبانی کروم، فایرفاکس و سافاری ۲۷ از این ویژگی، اکنون به صورت Baseline Newly در دسترس است.

Browser Support

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

Source

گزینه maxAge در cookieStore.set() به Baseline تبدیل می‌شود.

سافاری ۲۷ از گزینه maxAge هنگام تنظیم کوکی با cookieStore.set() پشتیبانی می‌کند و به شما امکان می‌دهد طول عمر یک کوکی را به صورت مدت زمان بر حسب ثانیه مشخص کنید، نه اینکه یک مهر زمانی expires مطلق را محاسبه کنید. با پشتیبانی در کروم، فایرفاکس و سافاری ۲۷، گزینه maxAge اکنون به صورت Baseline Newly در دسترس است.

Browser Support

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

<select> قابل تنظیم در سافاری ۲۷

سافاری ۲۷ با استفاده از appearance: base-select و عنصر <selectedcontent> ، پشتیبانی از منوهای <select> قابل تنظیم را اضافه کرده و به کروم می‌پیوندد.

انتخاب یک <select> و شبه عنصر ::picker(select) آن برای appearance: base-select کنترل را به یک ظاهر پایه با قابلیت استایل‌دهی تغییر می‌دهد و امکان محتوای غنی HTML را درون عناصر <option> و استایل‌بندی سفارشی برای دکمه و انتخابگر منوی کشویی فراهم می‌کند.

Browser Support

  • کروم: ۱۳۵.
  • لبه: ۱۳۵.
  • فایرفاکس: پشت یک پرچم.
  • سافاری: ۲۷.

عناصر اعلانی <camera> و <microphone> در کروم

کروم ۱۵۳ عناصر قابلیت HTML <camera> و <microphone> را معرفی می‌کند.

با تکیه بر عنصر <usermedia> ، عناصر <camera> و <microphone> کنترل‌های اعلانی اختصاصی و فعال‌شده توسط کاربر را برای درخواست دسترسی به ضبط ویدیو یا صدا با یک قابلیت، بدون فعال شدن درخواست‌های مجوز آغازشده توسط اسکریپت در هنگام بارگذاری صفحه، ارائه می‌دهند.

Browser Support

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

افزونه‌های Iterator و Promise در جاوااسکریپت

کروم ۱۵۳، Iterator.prototype.join() را به همراه تکرار مشترک با استفاده از Iterator.zip() و Iterator.zipKeyed() اضافه می‌کند.

Browser Support

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

Source

فایرفاکس ۱۵۵ Promise.allKeyed() و Promise.allSettledKeyed() را پیاده‌سازی کرده است که یک شیء دیکشنری از promiseها را می‌پذیرند و به یک شیء با کلیدهای مشابه تبدیل می‌کنند.

Browser Support

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

Source

به‌روزرسانی‌های WebTransport در فایرفاکس ۱۵۵

فایرفاکس ۱۵۵ پیاده‌سازی WebTransport خود را گسترش می‌دهد:

Browser Support

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

Source

API مسیریابی استاتیک Service Worker در Safari 27

سافاری ۲۷ از طریق InstallEvent.addRoutes() پشتیبانی از API مسیریابی استاتیک Service Worker را اضافه می‌کند.

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

Browser Support

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

Source

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

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

نسخه بتای کروم ۱۵۵ شامل CSS margin-trim ، symbols() و text-decoration-skip-spaces به همراه پشتیبانی از رمزگشایی JPEG XL ( image/jxl )، وارد کردن ماژول متن ( import ... with { type: "text" } ) و پشتیبانی از صدور API اعتبارنامه‌های دیجیتال است.

نسخه بتای کروم ۱۵۶ شامل تابع random() در CSS، ویژگی‌های مختصرنویسی corner CSS، محفظه‌های اسکرول تک‌محوره، scroll-snap-type: pair ، ویژگی image-animation و شبه‌کلاس :animated-image ، شبه‌کلاس‌های حالت عنصر رسانه ( :playing , :paused , :seeking , :buffering , :stalled , :muted , :volume-locked )، ارزیابی ماژول به تعویق افتاده ( import defer )، و عنصر <install> در HTML و رابط برنامه‌نویسی نصب وب (Web Install API) است.

نسخه بتای سافاری ۲۷.۲ پشتیبانی از ترازبندی سرریز safe و unsafe را در صورت جفت شدن با normal اضافه می‌کند، ترازبندی safe روی جعبه‌های با موقعیت ثابت و عناصر ::picker(select) فعال می‌کند و برای display: grid-lanes ، flow-tolerance را به fit-tolerance تغییر نام می‌دهد.