برخی از ویژگی های جالبی را که در طول ژوئیه 2024 در مرورگرهای وب پایدار و بتا قرار گرفته اند، کشف کنید.
نسخه های مرورگر پایدار
در جولای 2024، فایرفاکس 128 ، سافاری 17.6 و کروم 127 پایدار شدند. این پست به ویژگی های جدید اضافه شده به پلتفرم وب می پردازد.
CSS نحو رنگ نسبی
فایرفاکس 128 شامل نحو نسبی رنگ CSS است، این به شما امکان می دهد یک رنگ نسبت به رنگ اصلی ایجاد کنید. CSS زیر با استفاده از hsl()
اشباع رنگ indigo
را به نصف کاهش می دهد.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
پشتیبانی مرورگر
میتوانید نمونههای بسیار بیشتری را در سینتکس رنگ نسبی CSS پست وبلاگ پیدا کنید. نحو نسبی رنگ یکی از مناطق تمرکز Interop 2024 است، بنابراین این به روز رسانی به بهبود امتیاز برای فایرفاکس پایدار کمک می کند.
متن جایگزین برای ویژگی content
فایرفاکس 128 از متن جایگزین برای ویژگی content
CSS، زمانی که شامل یک تصویر است، پشتیبانی می کند. متن جایگزین در معرض درخت دسترسی قرار می گیرد. این بدان معنی است که متن جایگزین اکنون توسط همه مرورگرها برای content
پشتیبانی می شود.
پشتیبانی مرورگر
بهروزرسانی در Chrome 127 تضمین میکند که Chrome بهجای یک رشته، تعداد دلخواه عنصر را میپذیرد، برای مثال، استفاده از تابع attr()
را امکانپذیر میکند.
ویژگی font-size-adjust
Chrome 127 شامل font-size-adjust
، همچنین یک ناحیه فوکوس برای Interop 2024 است. این ویژگی برای موقعیتهایی مفید است که امکان بازگشت فونت وجود دارد، زیرا به شما کمک میکند اندازه فونت بازگشتی را با فونت انتخاب اول مطابقت دهید.
با این نسخه کروم، ویژگی font-size-adjust
بخشی از Baseline Newly Available می شود.
پشتیبانی از View Transition API در iframes
از Chrome 127، انتقالهای نمایش همزمان سند در یک قاب اصلی و iframe با منبع مشابه در دسترس خواهد بود.
قبلاً، اگر فریم اصلی یک انتقال را همزمان اجرا می کرد، اجرای یک انتقال view با استفاده از document.startViewTransition در یک iframe با همان منبع کار نمی کرد. انتقال iframe به طور خودکار نادیده گرفته می شود. اکنون، هر دو انتقال اجرا خواهند شد.
ظروف اسکرول قابل فوکوس روی صفحه کلید
اسکرولهای کروم 127 بهطور پیشفرض قابل تمرکز روی کلیک و فوکوس برنامهنویسی هستند. اسکرول های بدون کودکان قابل فوکوس به طور پیش فرض قابل فوکوس روی صفحه کلید هستند.
درباره این تغییر در پست اسکرول های قابل فوکوس با صفحه کلید بیشتر بیاموزید.
قانون @property
فایرفاکس 128 شامل پشتیبانی از قانون @property
و APIهای جاوا اسکریپت مرتبط است. این بدان معنی است که می توانید ویژگی های سفارشی CSS را ایجاد کنید که یک نحو، وراثت و یک مقدار اولیه را تعریف می کند.
در مثال زیر، ویژگی سفارشی به گونه ای تعریف شده است که فقط یک مقدار <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 می پیوندند.
کلمه کلیدی safe
در ویژگی های flexbox
Safari 17.6 عمدتاً نسخهای از اصلاحات مربوط به ویژگیهای موجود است، با این حال شامل کلیدواژه safe
برای ویژگیهای تراز فلکسباکس نیز میشود. این باعث می شود کلمه کلیدی safe
در بین مرورگرها قابل اجرا باشد.
پشتیبانی مرورگر
کلمه کلیدی 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 خواهند بود.