برخی از ویژگی های جالبی را که در طول آگوست 2024 در مرورگرهای وب پایدار و بتا یافت شده اند، کشف کنید.
نسخه های مرورگر پایدار
در آگوست 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 ثانیه» که از چندین منطقه پشتیبانی میکند.