خط پایه 2023

Rachel Andrew

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 بیشتر بیاموزید.

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

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

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

صفت بی اثر

وقتی یک عنصر DOM را به عنوان inert علامت گذاری می کنید، حرکت یا تعامل را از آن حذف می کنید. ویژگی 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 به قابلیت همکاری رسیدند. دیدن این که چگونه ویژگی‌ها می‌توانند از طریق آن فرآیند به ارمغان بیاورند و به‌عنوان جدید در دسترس قرار گیرند، هیجان‌انگیز است، که تایمر را برای دسترسی گسترده به آن‌ها تنظیم می‌کند. این یک مسیر واضح‌تر برای تصمیم‌گیری درباره زمان استفاده از ویژگی‌ها در پروژه‌های خود ایجاد می‌کند.