در ماه آگوست وارد پلتفرم وب شده است

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

Rachel Andrew

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

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

به روز رسانی برای قالب بندی روبی

عنصر <ruby> HTML یک ابزار قدرتمند برای بهبود ارائه متن، به ویژه برای زبان های آسیای شرقی است. این عنصر به شما امکان می دهد حاشیه نویسی آوایی یا سایر اطلاعات تکمیلی را در بالا یا کنار متن اصلی نمایش دهید. از کروم 128، حاشیه‌نویسی یاقوت به صورت خطی شکسته می‌شود و می‌توانید متن یاقوتی را با ویژگی CSS ruby-align استایل دهید.

در ویژگی های Line-breakable <ruby> و CSS ruby-align بیشتر بیاموزید.

PointerEvent.deviceProperties برای جوهر کاری چند قلمی

این تغییر که در Chrome 128 ارسال می‌شود، روشی مطمئن و قابل اعتماد برای شناسایی قلم‌های فردی (نشانگرها) در تعامل با صفحه نمایش برای تنظیم رنگ‌ها یا شکل‌های قلم خاص برای هر دستگاهی که با دیجیتایزر تعامل دارد، ارائه می‌کند. این رابط PointerEvent گسترش می دهد تا یک ویژگی جدید، deviceProperties را شامل شود. این شامل ویژگی uniqueId است که نشان‌دهنده یک شناسه منحصربه‌فرد، سند جدا شده و پایدار است که می‌توانید با اطمینان از آن برای شناسایی قلم‌های فردی که با صفحه در تعامل هستند استفاده کنید.

Promise.try

همچنین در Chrome 128، Promise.try رسیدگی به خطاها را با Promises آسان‌تر می‌کند. الگویی وجود دارد که در آن شما یک تابع دارید، f . این تابع ممکن است ناهمگام باشد و یک Promise را برگرداند، یا ممکن است نباشد. برای استفاده از معنای Promise برای رسیدگی به خطاها در هر دو مورد، تابع را در یک Promise قرار می دهید. این معمولاً با new Promise(resolve => resolve(f())) به دست می آید.

Promise.try یک راه ساده تر برای انجام همین کار است. این به شما امکان می‌دهد یک زنجیره Promise را راه‌اندازی کنید که همه خطاها را در کنترل‌کننده‌های .catch به‌جای رسیدگی به جریان‌های استثنا همزمان و ناهمزمان می‌گیرد.

جلوه های ورودی را متحرک کنید

فایرفاکس 129 شامل دو ویژگی CSS است که برای متحرک سازی جلوه های ورودی استفاده می شود، و این ویژگی ها اکنون به تازگی در دسترس هستند.

قانون @starting-style استایل های اولیه را بر روی یک عنصر قبل از رندر شدن در صفحه تعریف می کند. این برای عناصری که از صفحه نمایش متحرک می شوند لازم است: هیچ، زیرا آنها به حالتی نیاز دارند که از آن در آن متحرک شوند.

جلوه‌های ورودی همچنین به انیمیشن ویژگی‌های گسسته نیاز دارند، ویژگی‌هایی که نمی‌توانند بین مقادیر درون‌یابی کنند. اکنون می‌توان این کار را با transition-behavior: allow-discrete یا مقدار allow-discrete در خلاصه‌نویسی انتقال شما. این در حال حاضر در فایرفاکس 129 نیز پشتیبانی می شود.

در Now in Baseline: animating entry effect .

موارد اضافه شده به PerformanceResourceTiming

فایرفاکس 129 ویژگی های contentType و responseStatus رابط PerformanceResourceTiming را اضافه می کند. اینها به ترتیب نشان دهنده نوع محتوای منبع واکشی شده و کد وضعیت پاسخ HTTP است که هنگام واکشی منبع بازگردانده شده است.

contentType

responseStatus

متدهای موقعیت جغرافیایی toJSON()

همچنین در فایرفاکس 129 GeolocationCoordinates.toJSON() و GeolocationPosition.toJSON() است.

WebDriver BiDi

اکنون فایرفاکس 129 از WebDriver BiDi پشتیبانی می کند. این بدان معنی است که می توانید از Puppeteer با Chrome یا Firefox برای اتوماسیون استفاده کنید. در WebDriver BiDi Ready در Firefox، Chrome و Puppeteer و اعلام پشتیبانی رسمی Puppeteer برای Firefox بیشتر بیاموزید.

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

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

فایرفاکس 130 از ویژگی نام عنصر <details> در گروه بندی عناصر <details> پشتیبانی می کند، که در آن تنها یک عنصر در یک گروه می تواند در یک زمان باز باشد. این به شما امکان می دهد بدون استفاده از جاوا اسکریپت یک آکاردئون انحصاری ایجاد کنید.

Chrome 129 ویژگی CSS interpolate-size و تابع calc-size() را اضافه می کند.

ویژگی CSS interpolate-size به صفحه اجازه می‌دهد انیمیشن‌ها و انتقال کلمات کلیدی اندازه ذاتی CSS مانند auto ، min-content و fit-content را انتخاب کند، در مواردی که آن کلمات کلیدی را می‌توان متحرک کرد.

تابع calc-size() CSS یک تابع CSS شبیه به calc() است، با این حال از عملیات دقیقاً روی یک کلمه کلیدی سایز پشتیبانی شده نیز پشتیبانی می کند. در حال حاضر کلیدواژه‌های اندازه‌گیری پشتیبانی شده auto ، min-content ، max-content و fit-content هستند.

همچنین در Chrome 129 Intl.DurationFormat است که روشی برای قالب‌بندی مدت زمان ارائه می‌دهد، به عنوان مثال «1 ساعت و 40 دقیقه و 30 ثانیه» که از چندین منطقه پشتیبانی می‌کند.