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

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

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

در اکتبر، فایرفاکس 106 ، کروم 107 و سافاری 16.1 پایدار شدند. بیایید نگاهی بیندازیم که این به چه معناست برای پلتفرم وب.

انیمیشن آهنگ های شبکه

به لطف کار همکاران ما در مایکروسافت، Chrome اکنون می‌تواند مقادیر grid-template-columns و grid-template-rows را درون‌یابی کند. این به این معنی است که طرح‌بندی‌های شبکه‌ای می‌توانند به آرامی بین حالت‌ها جابه‌جا شوند، به‌جای اینکه در نیمه راه یک انیمیشن یا انتقال قرار بگیرند.

برای دیدن انیمیشن، نشانگر را روی آواتارها نگه دارید. این مثال از مقاله طرح‌بندی‌های شبکه متحرک CSS است که در آن می‌توانید اطلاعات بیشتری کسب کنید.

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

  • 107
  • 107
  • 66
  • 16

موارد اضافه شده به getDisplayMedia()

همچنین در کروم، افزوده‌هایی به getDisplayMedia() وجود دارد که هدف آن جلوگیری از اشتراک‌گذاری تصادفی در هنگام اشتراک‌گذاری صفحه است.

  • گزینه displaySurface می تواند نشان دهد که برنامه وب ترجیح می دهد یک نوع سطح صفحه نمایش خاص (برگه ها، پنجره ها یا صفحه نمایش ها) را ارائه دهد.
  • گزینه surfaceSwitching نشان می دهد که آیا کروم باید به کاربر اجازه دهد تا به صورت پویا بین برگه های مشترک جابجا شود یا خیر.
  • از گزینه selfBrowserSurface می توان برای جلوگیری از اشتراک گذاری برگه فعلی توسط کاربر استفاده کرد. این از جلوه "تالار آینه ها" جلوگیری می کند.
  • گزینه systemAudio تضمین می‌کند که Chrome فقط ضبط صوتی مرتبط را به کاربر ارائه می‌کند.

Safari 16.1 همچنین شامل پشتیبانی از getDisplayMedia ، اضافه کردن پشتیبانی برای گرفتن یک پنجره Safari خاص است.

تست پشتیبانی از فناوری فونت و ویژگی های CSS

فایرفاکس توابع font-tech() و font-format() برای مشخص کردن پرس و جوها با @supports اضافه کرده است. نمونه زیر برای پشتیبانی از فونت های COLRv1 تست می کند.

@supports font-tech(color-COLRv1) {

}

می توانید نمونه های بیشتری را در MDN بیابید.

به قطعه متن بروید

Safari 16.1 شامل پشتیبانی از اسکرول به قطعه متن است که پشتیبانی برای پیمایش به یک URL با قطعه متن خاص مشخص شده را اضافه می کند.

پشتیبانی AVIF

Safari 16 شامل پشتیبانی از تصاویر ثابت AVIF، Safari 16.1 شامل پشتیبانی از تصاویر متحرک AVIF در macOS Ventura، iOS 16 و iPadOS 16 است.

وب فشار برای سافاری

Safari 16.1 پشتیبانی Web Push را به Safari در macOS Ventura می‌آورد. این از Push API و Notifications API استفاده می‌کند، می‌توانید در مقاله Meet Web Push اطلاعات بیشتری در مورد آن بخوانید. فرود Web Push در سافاری به این معنی است که اکنون در هر سه موتور اصلی در دسترس است.

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

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

Chrome 108 شامل پشتیبانی از مقدار avoid از خصوصیات تکه تکه شدن CSS break-before ، break-after و break-inside هنگام چاپ است. این مقدار به مرورگر می‌گوید که قبل، بعد یا داخل عنصری که روی آن اعمال می‌شود، شکسته نشود. به عنوان مثال، CSS زیر از شکسته شدن یک شکل در شکست صفحه جلوگیری می کند.

figure {
    break-inside: avoid;
}

Chrome 108 شروع به ایجاد تغییری در نحوه رفتار سرریز روی عناصر جایگزین می کند، که ممکن است در برخی شرایط باعث تغییرات بصری شود. برای جزئیات بیشتر و نحوه رسیدگی به هر مشکلی که مشاهده می کنید، مقاله تغییر در سرریز عناصر جایگزین شده در CSS را بخوانید.

هنگامی که صفحه‌کلید روی صفحه نمایش داده می‌شود، تغییری در نحوه عملکرد Layout Viewport در Chrome در Android وجود دارد. آماده‌سازی برای تغییرات رفتار تغییر اندازه درگاه مشاهده که به Chrome در Android می‌آیند را بخوانید تا بیشتر بدانید و بدانید که چگونه می‌توانید برای این ارسال به حالت پایدار در ماه آینده آماده شوید.

همچنین در کروم واحدهای جدید CSS Viewport وجود دارد. این موارد عبارتند از: کوچک ( svw ، svh ، svi ، svb ، svmin ، svmax )، بزرگ ( lvw ، lvh ، lvi dvh lvb dvi lvmin ، lvmax ) dvmin پویا ( dvw ، dvb ، dvmax ، و dvi. واحدهای vi ، vb . این واحدها قبلاً در فایرفاکس و سافاری پیاده سازی شده اند.

فایرفاکس 107 پشتیبانی از فونت COLRv1 را فعال می کند و در پشتیبانی از این فناوری فونت به کروم می پیوندد. همچنین در فونت‌ها، Chrome 108 از توابع font-tech() و font-format() پشتیبانی می‌کند تا پرس و جوهایی را با @supports مشخص کند.

فایرفاکس همچنین پشتیبانی contain-intrinsic-size را اضافه می کند و به کروم می پیوندد تا دو مرورگر با پشتیبانی از این ویژگی بسازد.

Safari 16.2 Beta شامل مجموعه ای از اصلاحات CSS از جمله اندازه و اسکرول است.

بخشی از سری جدید به وب