خط پایه 2023

راشل اندرو

Baseline به caniuse.com می آید! در این پست با ادغام آشنا شوید، و همچنین برخی از ویژگی‌هایی را که در سال 2023 بخشی از Baseline شدند، بیاموزید.

با تعریف جدید Baseline ، دو مرحله در چرخه حیات یک ویژگی وجود دارد. اول، زمانی که به تازگی در دسترس می شود، و سپس زمانی که پس از 30 ماه به طور گسترده در دسترس قرار می گیرد. زمانی که یک ویژگی در مرورگرهای زیر قابلیت همکاری داشته باشد، به تازگی در دسترس قرار می گیرد:

• سافاری (macOS و iOS)
• فایرفاکس (دسکتاپ و اندروید)
• کروم (دسکتاپ و اندروید)
• لبه (رومیزی)

خط پایه روی Can I Use قرار می گیرد

به عنوان گام بعدی در شفاف سازی در دسترس بودن ویژگی، Baseline از امروز شروع به فرود در Can I Use می کند. هنگام بازدید از برخی از صفحات در آیا می توانم استفاده کنم، نشانی خواهید دید که به شما می گوید که آیا این ویژگی در خط مبنا به طور گسترده در دسترس است یا خیر.

ویژگی‌هایی که در Baseline به تازگی در دسترس هستند، به همراه سالی که در دسترس قرار گرفته‌اند، نشان نشان می‌دهند. بنابراین، هر چیزی که امسال در سراسر مجموعه مرورگر اصلی قابلیت همکاری داشته باشد، بخشی از Baseline 2023 است.

در ادامه این پست، در مورد ویژگی هایی که در طول سال 2023 به این نقطه عطف دست یافته اند، بیاموزید. همه این ویژگی ها Baseline 2023 هستند — به تازگی در دسترس هستند.

پرس و جوهای اندازه کانتینر و واحدهای پرس و جو کانتینر

پرس و جوهای محفظه اندازه به شما امکان می دهند اندازه یک عنصر را پرس و جو کنید، تقریباً به همان روشی که پرس و جوهای رسانه ای به شما امکان می دهند اندازه ی پورت دید را جستجو کنید. آنها ایجاد اجزای قابل استفاده مجدد را بسیار ساده تر می کنند، زیرا می توانید اجزایی ایجاد کنید که به اندازه منطقه ای که در آن قرار می گیرند واکنش نشان دهند.

طراحی کارت زیر بسته به عرض قطعه تغییر می کند. در جستجوهای Container در مرورگرهای پایدار بیشتر بیاموزید.

فضاهای رنگی و عملکردهای جدید

CSS اکنون از فضاهای رنگی پشتیبانی می کند که به شما امکان می دهد به رنگ های خارج از محدوده sRGB دسترسی داشته باشید. این به این معنی است که می‌توانید از نمایشگرهای HD (با وضوح بالا) با استفاده از رنگ‌های طیف‌های HD پشتیبانی کنید.

مدل های رنگی جدید

اکنون در Baseline، توابع رنگ lch() ، lab() ، oklch() و oklab() به مدل های رنگی LCH، Lab، OKLCH و OKLab دسترسی دارند.

تابع color-mix()

علاوه بر این، توابع رنگ جدید بخشی از Baseline شده اند. تابع color-mix() ترکیب یک رنگ به رنگ دیگر را در هر یک از فضاهای رنگی امکان پذیر می کند. در CSS زیر، 25 درصد رنگ آبی در فضای رنگی srgb با رنگ سفید مخلوط می شود.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

درباره color-mix() بیشتر بیاموزید .

تابع color()

تابع color() می توان برای هر فضای رنگی که رنگ ها را با کانال های R، G و B مشخص می کند استفاده کرد. color() ابتدا یک پارامتر فضای رنگ، سپس یک سری از مقادیر کانال برای RGB و در صورت تمایل مقداری آلفا می گیرد. می توانید از هر یک از این موارد استفاده کنید: srgb ، srgb-linear ، display-p3 ، a98-rgb ، prophoto-rgb ، rec2020 ، xyz ، xyz-d50 ، و xyz-d65 . مثلا:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

راهنمای رنگ‌های با وضوح بالا CSS نمونه‌های بیشتری از فضاها و توابع رنگی جدید به همراه اطلاعاتی در مورد زمان استفاده در اختیار شما می‌گذارد.

جریان های فشرده سازی

Compression Streams API یک API جاوا اسکریپت برای فشرده سازی و از حالت فشرده خارج کردن جریان داده است. با استفاده از این فشرده سازی داخلی، برنامه ها دیگر نیازی به گنجاندن کتابخانه فشرده سازی ندارند.

بیشتر بدانید در حال حاضر جریان های فشرده سازی در همه مرورگرها پشتیبانی می شوند .

بوم خارج از صفحه

قبل از OffscreenCanvas، قابلیت‌های طراحی بوم به عنصر <canvas> گره خورده بود، به این معنی که مستقیماً به DOM وابسته بود. همانطور که از نامش پیداست، OffscreenCanvas با انتقال آن به خارج از صفحه، DOM و Canvas API را جدا می کند.

به لطف این جداسازی، رندر OffscreenCanvas به طور کامل از DOM جدا می شود و بنابراین برخی از بهبودهای سرعت را نسبت به بوم معمولی ارائه می دهد زیرا هیچ هماهنگی بین این دو وجود ندارد. اما نکته بیشتر این است که می توان از آن برای انتقال کار رندر به Web Worker استفاده کرد، حتی اگر DOM در دسترس نباشد، رشته اصلی را آزاد کرده و برنامه را پاسخگوتر می کند.

در OffscreenCanvas بیشتر بیاموزید—با یک وب کار، عملیات بوم خود را سرعت دهید

پیش بارگذاری ماژول

پیش بارگذاری ماژول ها می تواند زمان دانلود و پردازش را کاهش دهد. rel="modulepreload" به عنصر پیوندی که به یک ماژول جاوا اسکریپت ارجاع می دهد اضافه کنید، و مرورگر ماژول را دریافت می کند، آن را تجزیه و کامپایل می کند و نتایج را در نقشه ماژول آماده برای اجرا قرار می دهد.

در مقاله Preload modules بیشتر بیاموزید.

توابع مثلثاتی در CSS

در سال 2023 توابع مثلثاتی از مشخصات CSS مقادیر و واحدهای سطح 4 قابل اجرا شدند. این بدان معناست که توابع sin() ، cos() ، tan() ، asin() ، acos() ، atan() و atan2() بخشی از Baseline 2023 هستند.

نحوه استفاده از این توابع را بیاموزید و موارد استفاده را در توابع مثلثاتی در CSS کشف کنید.

صفت بی اثر

Inert به معنای عدم توانایی حرکت است، بنابراین وقتی چیزی بی اثر را علامت گذاری می کنید، حرکت یا تعامل را از آن عناصر DOM حذف می کنید. ویژگی inert باعث می شود که مرورگر عنصر را نادیده بگیرد.

• اگر کاربر روی عنصر کلیک کند رویداد click فعال نمی شود.
• عنصر تمرکز نمی کند.
• عنصر و محتوای آن از درخت دسترسی حذف می شود.

این ویژگی باید به عناصری اضافه شود که خارج از صفحه هستند یا به شکل دیگری پنهان هستند. می‌توانید در ویژگی inert اطلاعات بیشتری کسب کنید.

زیرشبکه در طرح بندی شبکه CSS

مقدار subgrid برای grid-template-columns و grid-template-rows به شما امکان می‌دهد از مسیرهای تعریف‌شده در یک شبکه مادر، در شبکه‌های تودرتو استفاده کنید. این بدان معنی است که می توانید عناصر درون این شبکه های تودرتو را با یکدیگر تراز کنید.

در مقاله زیرشبکه CSS ، چند نمونه و پیوند به بسیاری از پست‌ها و نمونه‌هایی که موارد استفاده از زیرشبکه را برجسته می‌کنند، پیدا خواهید کرد.

NumberFormat V3

Intl.NumberFormat V3 مجموعه ای از ویژگی های جدید برای Intl.NumberFormat است که در طول سال 2023 بخشی از Baseline شد. ویژگی های اضافی عبارتند از:

• سه عملکرد جدید برای قالب بندی محدوده اعداد: formatRange، formatRangeToParts، و selectRange.
• شماره گروه بندی
• گزینه های گرد و دقیق جدید
• اولویت گرد کردن
• رشته ها را به صورت اعشاری تفسیر کنید
• حالت های گرد کردن
• نمایش علامت منفی

پیشنهاد NumberFormat V3 هر یک از ویژگی های جدید را شرح می دهد.

API تمام صفحه

API Fullscreen به شما امکان می دهد با فراخوانی متد requestFullscreen() یک عنصر مانند <video> را در حالت تمام صفحه قرار دهید. همچنین روش هایی را برای تشخیص اینکه آیا یک عنصر در حالت تمام صفحه است و اینکه آیا سند در حالتی است که به شما امکان می دهد حالت تمام صفحه را درخواست کنید ارائه می دهد.

در این راهنمای API تمام صفحه در MDN بیشتر بیاموزید.

انتخابگر CSS :has().

فقط ایجاد Baseline 2023 انتخابگر :has() است که در 19 دسامبر در فایرفاکس 121 قرار می گیرد. در میان کاربردهای دیگر، این انتخابگر به عنوان انتخابگر والد عمل می کند و به شما امکان می دهد یک عنصر را بر اساس چیزهایی که در داخل آن است انتخاب کنید. به عنوان مثال، بسته به اینکه آیا یک تصویر در یک عنصر وجود دارد یا خیر، می توانید CSS های مختلف را اعمال کنید.

در :has(): انتخابگر خانواده اطلاعات بیشتری کسب کنید.

ویژگی های بیشتری که امسال به Baseline پیوستند

این پست برخی از ویژگی‌های کلیدی را که امسال بخشی از Baseline شدند به اشتراک گذاشته است، اما موارد بیشتری نیز وجود دارد.

• شیت های قابل ساخت
• انتخابگرهای پیچیده فرزند n در CSS
• نحو محدوده برای پرس و جوهای رسانه ای
• وارد کردن نقشه ها
• مقادیر چندگانه برای نمایش CSS
• @counter-style
• ویژگی CSS counter-set
• تابع easing linear()
• سیستم فایل خصوصی Origin (OPFS)
• CSS Nesting , از جمله تغییری که تجزیه آرام را اضافه می کند .
• CSS :dir() انتخابگر شبه کلاس
• واحد طول cap CSS
• پوشش CSS
• پشتیبانی از پرس و جو رسانه برای عناصر <source> ویدیوی HTML
• عنصر <search> HTML
• بارگیری تنبل عناصر <iframe> (در 19 دسامبر در فایرفاکس 121 فرود آمد)
• واحدهای lh و rlh CSS line-height

بسیاری از این ویژگی ها از طریق کار مشترک در Interop 2023 به قابلیت همکاری رسیدند. دیدن این که چگونه ویژگی‌ها می‌توانند از طریق آن فرآیند به ارمغان بیاورند، و به‌عنوان جدید در دسترس قرار گیرند، هیجان‌انگیز است که تایمر آن‌ها را به طور گسترده در دسترس قرار می‌دهد. این یک مسیر واضح‌تر برای تصمیم‌گیری درباره زمان استفاده از ویژگی‌ها در پروژه‌های خود ایجاد می‌کند.