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

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

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

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

تغییری در رفتار Layout Viewport در Chrome در Android

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

واحدهای نمای جدید

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

واحدهای نمای بزرگ، کوچک و پویا را بخوانید.

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

  • کروم: 108.
  • لبه: 108.
  • فایرفاکس: 101.
  • سافاری: 15.4.

ویژگی contain-intrinsic-size shorthand CSS در فایرفاکس 107 به همراه ویژگی های longhand contain-intrinsic-width ، contain-intrinsic-height و منطقی contain-intrinsic-block-size و contain-intrinsic-inline-size پشتیبانی می شود.

اینها برای تعیین اندازه یک عنصر UI که تحت کنترل اندازه است اعمال می شود. این به یک کاربر اجازه می دهد تا اندازه یک عنصر را بدون نیاز به رندر کردن عناصر فرزند آن تعیین کند. آنها زمانی مفید هستند که یک عنصر تحت کنترل اندازه باشد.

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

  • کروم: 83.
  • لبه: 83.
  • فایرفاکس: 107.
  • سافاری: 17.

منبع

پشتیبانی از تکه تکه شدن CSS از کلمه کلیدی avoid

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

figure {
    break-inside: avoid;
}

این افزوده به دلیل گنجاندن پشتیبانی چاپ با استفاده از LayoutNG است، این یک تجربه مدرن و کم باگ را به ارمغان می آورد. درباره LayoutNG بیشتر بیاموزید .

API مدیریت اعتبار فدرال

API مدیریت اعتبار فدرال (FedCM) انتزاعی برای جریان‌های هویت فدرال در وب فراهم می‌کند. این یک گفتگو با واسطه مرورگر را نشان می دهد که به کاربران امکان می دهد حساب هایی را از بین ارائه دهندگان شناسایی برای ورود به وب سایت ها انتخاب کنند. FedCM در Chrome 108 ارسال می‌شود، در پست وبلاگ اعلامیه FedCM اطلاعات بیشتری در مورد آن پیدا کنید.

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

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

فایرفاکس 108 از ویژگی های height و width برای عنصر <source> پشتیبانی می کند، زمانی که این عنصر فرزند عنصر <picture> باشد. این ویژگی ها ارتفاع یا عرض تصویر را بر حسب پیکسل به عنوان یک عدد صحیح بدون واحد می پذیرند.

پیاده سازی پرس و جوهای کانتینر در فایرفاکس در حال انجام است. در پشت پرچم layout.css.container-queries.enabled در فایرفاکس 108 بتا، واحدهای طول پرس و جوی کانتینر را خواهید یافت - cqw ، cqh ، cqi ، cqb ، cqmin ، cqmax . اینها واحدهای طول نسبت به اندازه ظرف پرس و جو هستند.

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