جدید به پلت فرم وب در ماه ژوئن

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

Rachel Andrew

منتشر شده: ۳۰ ژوئن ۲۰۲۶

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

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

تغییر اندازه کنترل‌های فرم با استفاده از field-sizing به حالت پایه (Baseline)

فایرفاکس ۱۵۲ پشتیبانی از ویژگی CSS مربوط به field-sizing معرفی می‌کند که باعث می‌شود کنترل اندازه فرم به صورت خودکار و در حالت Baseline در تمام موتورهای مرورگر اصلی در دسترس باشد.

ویژگی field-sizing به کنترل‌های فرم مانند <textarea> ، <input> و <select> اجازه می‌دهد تا به صورت پویا کوچک یا بزرگ شوند تا با محتوایشان متناسب شوند ( field-sizing: content ) به جای اینکه در اندازه پیش‌فرض ثابت بمانند ( field-sizing: fixed ). این امر نیاز به راه‌حل‌های جاوا اسکریپت را هنگام ساخت ورودی‌های متنی یا textareaهایی که با تایپ کاربران تغییر اندازه می‌دهند، از بین می‌برد.

textarea {
  field-sizing: content;
}

شکل‌های پایه rect() و xywh() در shape-outside به Baseline تبدیل می‌شوند.

با پشتیبانی کروم ۱۴۹ از توابع شکل rect() و xywh() در ویژگی shape-outside در بخش حمل و نقل، این شکل‌های پایه اکنون به صورت Baseline New در مرورگرهای اصلی در دسترس هستند.

توابع rect() و xywh() به شما امکان می‌دهند نواحی حذف اعشاری مستطیلی را با استفاده از مختصات دقیق درج یا سینتکس origin-and-dimensions تعریف کنید. این سینتکس ساده‌تر و خواناتری نسبت به استفاده از polygon() برای شکل‌های پوششی اعشاری مستطیلی ارائه می‌دهد.

مقیاس‌بندی خودکار فونت با text-fit CSS

کروم ۱۵۰ ویژگی CSS text-fit را معرفی می‌کند که به توسعه‌دهندگان اجازه می‌دهد به‌طور خودکار اندازه فونت‌ها را متناسب با عرض یک کادر تنظیم کنند.

.headline {
  text-fit: grow;
}

تزئینات شکاف CSS

کروم ۱۴۹ پشتیبانی از تزئینات فاصله CSS را در طرح‌بندی‌های grid و flexbox معرفی می‌کند. تزئینات فاصله به شما امکان می‌دهد خطوط و سبک‌بندی را مستقیماً به فاصله بین آیتم‌های grid و flex اضافه کنید، مشابه column-rule در طرح‌بندی‌های چند ستونی.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

در تزئینات گپ بیشتر بدانید: اکنون در کرومیوم .

background-clip: border-area

کروم ۱۵۰ پشتیبانی از background-clip: border-area از CSS Backgrounds سطح ۴ را اضافه می‌کند.

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

وعده‌های اسکرول برنامه‌ریزی‌شده

کروم ۱۵۰ متدهای اسکرول برنامه‌ریزی‌شده ( scrollTo() ، scrollBy() و scrollIntoView() ) را برای برگرداندن یک Promise به‌روزرسانی کرد.

Promise برگردانده شده زمانی که انیمیشن اسکرول روان به پایان می‌رسد، اجرا می‌شود و سیگنال قابل اعتمادی برای اجرای اقدامات بعدی پس از تثبیت اسکرول فراهم می‌کند.

ناوبری صفحه کلید اعلانی با focusgroup

کروم ۱۵۰ از ویژگی focusgroup پشتیبانی می‌کند.

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

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

از Focusgroup Explainer بیشتر بیاموزید.

پشتیبانی از WebSockets در Back/Forward Cache (bfcache)

در کروم ۱۴۹، صفحاتی که اتصالات WebSocket فعال دارند، اکنون می‌توانند وارد حافظه پنهان Back/Forward (bfcache) شوند.

پیش از این، یک اتصال WebSocket باز، صفحه‌ای را برای bfcache غیرقابل استفاده می‌کرد. اکنون، مرورگر به طور خودکار اتصالات فعال WebSocket را پس از ورود به bfcache می‌بندد و به صفحه اجازه می‌دهد تا در حافظه پنهان (cache) ذخیره شود و هنگام بازگشت به آن، فوراً بازیابی شود.

زمان‌بندی پاسخ موقت و هدر در زمان‌بندی منابع

فایرفاکس ۱۵۲ پشتیبانی از firstInterimResponseStart و finalResponseHeadersStart را در رابط PerformanceResourceTiming اضافه می‌کند.

از این موارد می‌توان برای اندازه‌گیری مدت زمان دریافت پاسخ‌های موقت HTTP و پاسخ نهایی HTTP پس از ارسال درخواست توسط مرورگر استفاده کرد.

دکمه‌های عملیاتی برای اعلان‌ها

فایرفاکس ۱۵۲ با استفاده از ویژگی actions در Notification و گزینه‌های موجود در ServiceWorkerRegistration.showNotification() پشتیبانی از دکمه‌های اکشن اعلان را اضافه می‌کند.

اکنون می‌توانید دکمه‌های عملیاتی را در اعلان‌های سیستم عامل بگنجانید و هنگام ضربه زدن به دکمه‌ها، به تعاملات کاربر گوش دهید.

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

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

نسخه بتای فایرفاکس ۱۵۳ پشتیبانی از Error.stackTraceLimit برای پیکربندی حداکثر عمق ردیابی پشته ثبت‌شده، IDBObjectStore.getAllRecords() و IDBIndex.getAllRecords() برای بازیابی رکوردهای فهرست‌بندی‌شده و RTCDtlsTransport.getRemoteCertificates() برای بازرسی امنیتی WebRTC را ارائه می‌دهد. توسعه‌دهندگان افزونه‌ها همچنین یک API جدید publicSuffix و متد userScripts.execute() را برای تزریق اسکریپت بر اساس تقاضا دریافت می‌کنند.

نسخه بتای سافاری ۲۷، موقعیت‌یابی لنگر آگاه از تبدیل، شبه‌کلاس :heading برای تطبیق عناصر عنوان، کلمه کلیدی revert-rule برای برگرداندن لایه‌های آبشاری، پشتیبانی از کلمه کلیدی stretch در تعیین اندازه کادر و انتخابگرهای مرکب :host:has() را معرفی می‌کند.