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

برخی از ویژگی های جالبی را که در طول ژوئیه 2024 در مرورگرهای وب پایدار و بتا قرار گرفته اند، کشف کنید.

راشل اندرو

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

در جولای 2024، فایرفاکس 128 ، سافاری 17.6 و کروم 127 پایدار شدند. این پست به ویژگی های جدید اضافه شده به پلتفرم وب می پردازد.

CSS نحو رنگ نسبی

فایرفاکس 128 شامل نحو نسبی رنگ CSS است، این به شما امکان می دهد یک رنگ نسبت به رنگ اصلی ایجاد کنید. CSS زیر با استفاده از hsl() اشباع رنگ indigo را به نصف کاهش می دهد.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

پشتیبانی مرورگر

  • 119
  • 119
  • 128
  • 16.4

می‌توانید نمونه‌های بسیار بیشتری را در سینتکس رنگ نسبی CSS پست وبلاگ پیدا کنید. نحو نسبی رنگ یکی از مناطق تمرکز Interop 2024 است، بنابراین این به روز رسانی به بهبود امتیاز برای فایرفاکس پایدار کمک می کند.

متن جایگزین برای ویژگی content

فایرفاکس 128 از متن جایگزین برای ویژگی content CSS، زمانی که شامل یک تصویر است، پشتیبانی می کند. متن جایگزین در معرض درخت دسترسی قرار می گیرد. این بدان معنی است که متن جایگزین اکنون توسط همه مرورگرها برای content پشتیبانی می شود.

پشتیبانی مرورگر

  • 77
  • 79
  • 128
  • 17.4

به‌روزرسانی در Chrome 127 تضمین می‌کند که Chrome به‌جای یک رشته، تعداد دلخواه عنصر را می‌پذیرد، برای مثال، استفاده از تابع attr() را امکان‌پذیر می‌کند.

ویژگی font-size-adjust

Chrome 127 شامل font-size-adjust ، همچنین یک ناحیه فوکوس برای Interop 2024 است. این ویژگی برای موقعیت‌هایی مفید است که امکان بازگشت فونت وجود دارد، زیرا به شما کمک می‌کند اندازه فونت بازگشتی را با فونت انتخاب اول مطابقت دهید.

پشتیبانی مرورگر

  • 127
  • 127
  • 3
  • 16.4

منبع

با این نسخه کروم، ویژگی font-size-adjust بخشی از Baseline Newly Available می شود.

پشتیبانی از View Transition API در iframes

از Chrome 127، انتقال‌های نمایش همزمان سند در یک قاب اصلی و iframe با منبع مشابه در دسترس خواهد بود.

قبلاً، اگر فریم اصلی یک انتقال را همزمان اجرا می کرد، اجرای یک انتقال view با استفاده از document.startViewTransition در یک iframe با همان منبع کار نمی کرد. انتقال iframe به طور خودکار نادیده گرفته می شود. اکنون، هر دو انتقال اجرا خواهند شد.

ظروف اسکرول قابل فوکوس روی صفحه کلید

اسکرول‌های کروم 127 به‌طور پیش‌فرض قابل تمرکز روی کلیک و فوکوس برنامه‌نویسی هستند. اسکرول های بدون کودکان قابل فوکوس به طور پیش فرض قابل فوکوس روی صفحه کلید هستند.

درباره این تغییر در پست اسکرول های قابل فوکوس با صفحه کلید بیشتر بیاموزید.

قانون @property

فایرفاکس 128 شامل پشتیبانی از قانون @property و APIهای جاوا اسکریپت مرتبط است. این بدان معنی است که می توانید ویژگی های سفارشی CSS را ایجاد کنید که یک نحو، وراثت و یک مقدار اولیه را تعریف می کند.

پشتیبانی مرورگر

  • 85
  • 85
  • 128
  • 16.4

منبع

در مثال زیر، ویژگی سفارشی به گونه ای تعریف شده است که فقط یک مقدار <color> بپذیرد، به ارث برده نشود و مقدار اولیه hotpink داشته باشد.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

قانون @property اکنون بخشی از Baseline Newly Available است، در @property بیشتر بخوانید: متغیرهای CSS نسل بعدی اکنون با پشتیبانی مرورگر جهانی .

ArrayBuffer قابل تغییر اندازه و SharedArrayBuffer قابل رشد

ArrayBuffer قابل تغییر اندازه و SharedArrayBuffer قابل رشد در حال حاضر در فایرفاکس 128 پشتیبانی می‌شوند و امکان تغییر اندازه بافرها را بدون نیاز به اختصاص بافر جدید و کپی کردن داده‌ها در آن فراهم می‌کنند. این ویژگی ها نیز به Baseline Newly Available می پیوندند.

پشتیبانی مرورگر

  • 111
  • 111
  • 128
  • 16.4

منبع

کلمه کلیدی safe در ویژگی های flexbox

Safari 17.6 عمدتاً نسخه‌ای از اصلاحات مربوط به ویژگی‌های موجود است، با این حال شامل کلیدواژه safe برای ویژگی‌های تراز فلکس‌باکس نیز می‌شود. این باعث می شود کلمه کلیدی safe در بین مرورگرها قابل اجرا باشد.

پشتیبانی مرورگر

  • 115
  • 115
  • 63
  • 18

کلمه کلیدی safe مانع از نمایش یک تراز انتخابی در خارج از ناحیه قابل مشاهده می شود. CodePen زیر نشان می دهد که چگونه با موارد تراز شده در مرکز عمل می کند. اگر تراز center باعث از دست رفتن داده ها شود، به جای آن start استفاده می شود.

مرورگر بتا منتشر شد

نسخه های مرورگر بتا پیش نمایشی از مواردی را که در نسخه پایدار بعدی مرورگر وجود خواهند داشت، به شما ارائه می دهند. زمان بسیار خوبی برای آزمایش ویژگی‌های جدید یا حذف‌هایی است که می‌تواند بر سایت شما تأثیر بگذارد، قبل از اینکه جهان آن نسخه را دریافت کند. نسخه های بتا جدید فایرفاکس 129 و کروم 128 هستند. Safari 18 beta هنوز ادامه دارد. این نسخه ها ویژگی های بسیار خوبی را برای پلتفرم به ارمغان می آورند. برای همه جزئیات، یادداشت های انتشار را بررسی کنید. در اینجا فقط چند نکته برجسته وجود دارد.

کروم 128 شامل ویژگی CSS ruby-align ، همراه با تغییراتی برای امکان شکستن خطوط در عناصری است که دارای display: ruby ​​، ​​ویژگی zoom نیز برای مطابقت با مشخصات به روز شده است. یک به‌روزرسانی برای AudioContext API برای اضافه کردن یک تماس اختصاص داده شده به AudiContext.onerror وجود دارد که خطاهای ایجاد و رندر AudioContext را گزارش می‌کند.

فایرفاکس 129 شامل قانون @starting-style و ویژگی transition-behavior است. هنگامی که فایرفاکس 129 به حالت پایدار عرضه شود، این ویژگی ها بخشی از Baseline Newly Available خواهند بود.