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

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

Rachel Andrew

تاریخ انتشار: ۲۹ اکتبر ۲۰۲۶

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

Chrome 155،‏ Chrome 156،‏ Firefox 158،‏ Firefox 159،‏ Safari 27.1،‏ و Safari 27.2 در اکتبر ۲۰۲۶ در کانال پایدار منتشر شدند. این پست نگاهی به ویژگی‌های جدیدی می‌اندازد که این ماه در مرورگرها عرضه می‌شوند، و چندین ویژگی اصلی به Baseline Newly available می‌رسند.

پویانمایی‌های پیمایش‌محور به Baseline تبدیل می‌شوند

Firefox 159 پویانمایی‌های پیمایش‌محور را به‌طور پیش‌فرض فعال می‌کند.

پویانمایی‌های مبتنی بر پیمایش به شما امکان می‌دهند پیشرفت پویانمایی CSS یا پویانمایی Web Animations API را به افست پیمایش یک محفظه پیمایش پیوند دهید—بااستفاده از scroll-timeline و تابع scroll()—یا به نمایان بودن یک عنصر در درگاه پیمایش آن بااستفاده از view-timeline و تابع view()، که با animation-timeline اختصاص داده شده است:

با پشتیبانی در Chrome،‏ Safari، و اکنون Firefox 159، پویانمایی‌های پیمایش‌محور به‌تازگی در Baseline دردسترس قرار گرفته‌اند.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

پویانمایی‌های پیمایش‌محور: مسیر رسیدن به «خط پایه به‌تازگی دردسترس» را ببینید و خط زمان را پیمایش کنید تا ببینید پویانمایی‌های پیمایش‌محور چگونه از یک پیشنهاد اولیه در سال ۲۰۱۴ به یک استاندارد وب هم‌کنش‌پذیر تبدیل شدند که در همه موتورهای مرورگر اصلی ارائه می‌شود.

ثبت‌های عنصر سفارشی با دامنه محدود به «پایه» تبدیل می‌شوند

Firefox 159 پشتیبانی از ثبت‌های عنصر سفارشی با دامنه را اضافه می‌کند.

قبلاً، همه عناصر سفارشی باید در یک دفتر ثبت جهانی window.customElements ثبت می‌شدند که می‌توانست باعث تداخل نام‌گذاری هنگام ترکیب مؤلفه‌ها از کتابخانه‌ها یا تیم‌های مختلف شود. اکنون می‌توانید بااستفاده از سازنده CustomElementRegistry() یک نمونه مستقل CustomElementRegistry ایجاد کنید و تعاریف آن را به یک درخت سایه خاص محدود کنید. دارایی customElementRegistry در Document، Element، و ShadowRoot نیز دردسترس است.

با پشتیبانی در Chrome،‏ Safari، و Firefox 159، ثبت‌های عنصر سفارشی با دامنه محدود اکنون در «خط پایه» به‌تازگی دردسترس قرار گرفته است.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

پشتیبانی از تصویر JPEG XL

‫Chrome 155 و Firefox 158 هر دو به‌طور پیش‌فرض از قالب تصویر JPEG XL (image/jxl) پشتیبانی می‌کنند.

‫JPEG XL یک قالب تصویر شطرنجی بدون بهره مالکانه است که به‌عنوان ISO/IEC 18181 استانداردسازی شده است. این قالب از فشرده‌سازی پراتلاف و بی‌اتلاف، رمزگشایی پیش‌رونده، طیف رنگی گسترده، دامنه پویای بالا (HDR)، عمق بیت بالا، شفافیت، و پویانمایی، و همچنین تراتبدیل بی‌اتلاف فایل‌های JPEG موجود پشتیبانی می‌کند. ‫Firefox 158 همچنین سرصفحه HTTP پیش‌فرض Accept را برای درخواست‌های تصویر به‌روز می‌کند تا شامل image/jxl شود.

در ارسال JPEG XL در Chrome بیشتر بدانید.

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 17.

Source

حساب تایپ‌شده CSS به «خط پایه» تبدیل می‌شود

Firefox 158 پشتیبانی از حساب تایپ‌شده CSS را در توابع ریاضی مانند calc() اضافه می‌کند.

حساب تایپ‌شده CSS به شما امکان می‌دهد دو مقدار از یک نوع داده را تقسیم کنید—حتی اگر از واحدهای مختلفی استفاده کنند—تا یک خارج‌قسمت <number> بدون واحد تولید شود. می‌توانید از آن نتیجه بدون واحد مستقیماً در ویژگی‌هایی که عدد می‌پذیرند (مانند opacity یا line-height) استفاده کنید یا آن را در واحد دیگری ضرب کنید تا بین انواع تبدیل شود:.

با اضافه شدن Firefox 158 به پشتیبانی موجود در Chrome و Safari، حساب تایپ‌شده CSS اکنون «خط پایه» است به‌تازگی دردسترس قرار گرفته است.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158 پشتیبانی از ویژگی PerformanceResourceTiming.deliveryType را اضافه می‌کند.

این ویژگی نشان می‌دهد که منبع چگونه ارائه شده است—برای مثال، برگرداندن "cache" وقتی منبع از حافظه نهان ارائه شده است.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

تابع CSS random()

Chrome 156 پشتیبانی از تابع CSS random() را اضافه می‌کند.

تابع random() مقدار عددی تصادفی را در محدوده حداقل و حداکثر مشخص‌شده با فاصله گام اختیاری تولید می‌کند. به‌طور پیش‌فرض، هر random() فراخوانی به یک مقدار تصادفی متمایز تبدیل می‌شود، یا می‌توانید یک <random-key> را به‌عنوان اولین آرگومان برای هم‌رسانی یک مقدار تصادفی در ویژگی‌ها یا عناصر ارسال کنید:

نمونه‌ها را در مقاله Embracing playful imperfection with the CSS random() function در Smashing Magazine ببینید.

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

خصوصیت CSS margin-trim

Chrome 155 پشتیبانی از ویژگی CSS margin-trim را در محفظه‌های بلوک و محفظه‌های چندستونی اضافه می‌کند.

می‌توانید از margin-trim در یک محفظه استفاده کنید تا حاشیه‌های عناصر فرزند آن را در جایی که با لبه‌های محفظه برخورد می‌کنند حذف کنید، و از ایجاد فاصله اضافی قبل از اولین فرزند یا بعداز آخرین فرزند بدون نیاز به لغو :first-child یا :last-child جلوگیری کنید.

در برداشتن حاشیه‌های شروع و پایان با ویژگی margin-trim اطلاعات بیشتری کسب کنید.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: not supported.
  • Safari: 16.4.

Source

سبک‌های شمارنده درون‌خطی با تابع CSS symbols()

Chrome 155 پشتیبانی از تابع CSS symbols() را معرفی می‌کند.

تابع symbols() به شما امکان می‌دهد سبک شمارنده ناشناس را مستقیماً در list-style-type، کوته‌نوشت list-style، counter()، یا counters() بدون اعلام قانون at-rule نام‌گذاری‌شده جداگانه @counter-style تعریف کنید.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

خصوصیت CSS text-decoration-skip-spaces

Chrome 155 ویژگی CSS text-decoration-skip-spaces را اضافه می‌کند که کنترل می‌کند آیا خطوط تزئین نوشتار (مانند زیرخط، روخط، و خط‌خوردگی) از نویسه‌های فاصله سفید رد شوند یا نه. این کار به شما اجازه می‌دهد از کشیده شدن تزئینات در زیر فاصله‌های پیشرو، دنباله‌رو، یا بین کلمات جلوگیری کنید.

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

کلاس کاذب :navigation-source CSS

‫Chrome 156 کلاس کاذب CSS :navigation-source را معرفی می‌کند. این شبه‌کلاس با پیوند، دکمه، یا عنصر فرمی که پیمایش را آغاز کرده است مطابقت دارد و آن عنصر را درطول پیمایش در حالت انتخاب‌شده نگه می‌دارد.

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox: not supported.
  • Safari: not supported.

وارد کردن واحد نوشتاری جاوا اسکریپت و امتحان مجدد بار کردن واحد ناموفق

Chrome 155 پشتیبانی از وارد کردن مدول نوشتاری بااستفاده از import ... with { type: "text" } را اضافه می‌کند و به Firefox می‌پیوندد. مشخصه وارد کردن type: "text" محتوای ماژول هدف را به‌عنوان رشته جاوا اسکریپت بار می‌کند.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 153.
  • Safari: not supported.

Source

‫Chrome 156 همچنین رفتار بار کردن ماژول را به‌روز می‌کند تا بار کردن ناموفق ماژول دیگر به‌طور دائم در حافظه نهان ذخیره نشود. اکنون برنامه‌ها می‌توانند بارگیری‌های ناموفق ماژول را دوباره امتحان کنند—برای مثال، با فراخوانی مجدد import() پس‌از خرابی موقت شبکه.

به‌روزرسانی‌های WebTransport در Chrome و Firefox

Firefox 158 و Chrome 156 هر دو گسترش می‌یابند WebTransport:

Firefox 158 روش WebTransport.getStats() را برای بازیابی آمار اتصال و دیتاگرام اضافه می‌کند، و ویژگی ثابت WebTransport.supportsReliableOnly نشان می‌دهد که آیا مرورگر از جلسه‌های WebTransport ازطریق انتقال‌های منحصراً قابل‌اعتماد پشتیبانی می‌کند یا نه.

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

‫Chrome 156 پشتیبانی از ارسال سرایندهای درخواست HTTP سفارشی را در WebTransportOptions درطول دست‌دهی اولیه CONNECT و خواندن سرایندهای پاسخ سرور از نمونه WebTransport اضافه می‌کند.

گزینه Notification navigate در Firefox

Firefox 158 پشتیبانی از گزینه navigate را در سازنده Notification() و ServiceWorkerRegistration.showNotification() و همچنین ویژگی Notification.navigate اضافه می‌کند و به Safari می‌پیوندد. این گزینه نشانی وبی را برای مرورگر مشخص می‌کند تا وقتی کاربر روی اعلان سیستم کلیک می‌کند، به آن پیمایش کند.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

به‌روزرسانی‌های HTML Sanitizer API در Firefox

Firefox 158 گزینه پیکربندی javascriptURLs و Sanitizer.setJavascriptURLs() را به HTML Sanitizer API اضافه می‌کند، که کنترل می‌کند آیا مشخصه‌های حاوی نشانی‌های وب javascript: هنگام استفاده از روش‌های درج HTML ناامن مانند Element.setHTMLUnsafe() حذف می‌شوند یا نه.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: not supported.

‫Firefox 159 همچنین روش‌های پاک‌سازی ایمن مانند Element.setHTML() را به‌روز می‌کند تا عناصر و ویژگی‌های ناخواسته را درطول تجزیه به‌جای پس‌از ساختن درخت DOM حذف کند و مطمئن شود که نوشتار مجاور در یک گره نوشتاری واحد باقی می‌ماند.

درحال تغییر نام flow-tolerance به fit-tolerance در Safari

‫Safari 27.2 نام ویژگی flow-tolerance را به fit-tolerance برای چیدمان خطوط شبکه (display: grid-lanes) تغییر می‌دهد و flow-tolerance را به‌عنوان نام مستعار منسوخ‌شده حفظ می‌کند.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

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

نسخه‌های بتای مرورگر پیش‌نمایشی از چیزهایی را که در نسخه پایدار بعدی مرورگر وجود خواهد داشت به شما ارائه می‌دهد. این زمان فرصت خوبی برای آزمایش ویژگی‌های جدید یا حذفیاتی است که می‌تواند بر سایت شما تأثیر بگذارد، قبل‌از اینکه آن نسخه در سراسر جهان منتشر شود. نسخه‌های بتای جدید این ماه عبارتند از Chrome 157،‏ Chrome 158، و Firefox 160.

‫Chrome 157 beta شامل خلاصه CSS corner و خلاصه فرعی لبه برای تنظیم border-radius و corner-shape باهم، text-decoration-inset، text-overflow: <string>، و position-visibility: anchor-valid و anchor-visible است. همچنین شامل پشتیبانی از پرداز HTML-in-canvas و یک مشخصه فقط نماد displaymode برای عناصر قابلیت <camera>، <microphone>، و <geolocation> است.

‫Chrome 158 beta عنصر HTML اعلانی <install> و Web Install API‏ (navigator.install()) را برای نصب برنامه وب میان‌مبدئی معرفی می‌کند. CSS و افزودنی‌های SVG شامل انتخابگر سراسری برجسته‌سازی سفارشی ::highlight(*)، شبه‌کلاس‌های وضعیت عنصر رسانه (:playing، :paused، :seeking، :buffering، :stalled، :muted، :volume-locked)، کلیدواژه‌های تراز flow-start و flow-end، و شعاع‌های closest-corner و farthest-corner برای شکل‌های پایه circle() و ellipse() است.

Firefox 160 beta updates the WebExtensions runtime.PlatformInfo API to return arch as arm64 instead of aarch64 on ARM64 platforms, aligning with Chrome.