چیزهای جدید در وب

Rachel Andrew

در Google I/OI اخباری را در مورد چگونگی تکامل Baseline از زمان اعلام ما در I/O در سال گذشته به اشتراک گذاشت. همچنین داشبورد پلتفرم وب، ادغام با آرشیو RUM و ادغام آینده با RUMvision را اعلام کردم. این پست تمام منابع بحث را در یک مکان آورده است.

داشبورد پلتفرم وب یک راه جدید و هیجان انگیز برای مشاهده کل پلتفرم وب و سفر ویژگی های فردی به قابلیت همکاری و تبدیل شدن به بخشی از Baseline است. درباره آن در اعلام داشبورد پلتفرم وب بیشتر بیاموزید.

ادغام Baseline با ابزارهایی که هر روز استفاده می کنید همیشه بخشی از چشم انداز این پروژه بوده است. ما می‌خواهیم کار با سازگاری مرورگر را به چیزی تبدیل کنیم که نیازی به صرف زمان زیادی برای فکر کردن به آن ندارید. درباره ادغام بایگانی RUM بیشتر بیاموزید و به زودی این فضا را برای اخبار ارائه دهندگان ابزار بیشتر تماشا کنید.

جدید به Baseline

در I/OI 12 ویژگی پلتفرم وب را به اشتراک گذاشت که اخیراً بخشی از Baseline Newly Available شده است. این ویژگی‌ها اکنون در کروم، اج، فایرفاکس و سافاری در دسترس هستند و از موارد افزوده کوچکی که می‌توانند توسعه را ساده‌تر کنند تا برخی از ویژگی‌های مورد نظر توسعه‌دهندگان - از جمله کوئری‌های کانتینر و :has() در دسترس هستند.

درخواست اندازه ظرف

عبارت Size container به شما این امکان را می دهد که طرح خود را بر اساس عرض یا اندازه درونی یک ظرف تغییر دهید، نه اینکه فقط بتوانید اندازه Viewport را با جستجوهای رسانه هدف قرار دهید. این اجزای قابل استفاده مجدد بیشتری را قادر می‌سازد که بتوانند خود را بر اساس فضای موجود در صورت قرار دادن در یک طرح، تغییر دهند. آنها تقریباً تا زمانی که مفهوم طراحی واکنشگرا وجود داشته است، در صدر لیست ویژگی های مورد نیاز بوده اند.

• به تازگی در فوریه 2023 در دسترس است.
• به طور گسترده در آگوست 2025 در دسترس است.

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

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

انتخابگر :has() چیزی را به ما می‌دهد که سال‌ها یکی دیگر از درخواست‌های اصلی توسعه‌دهندگان بوده است - انتخابگر والد، راهی برای انتخاب یک عنصر بر اساس آنچه در داخل آن است. اگرچه :has() می تواند بسیار بیشتر از این باشد.

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

• به تازگی در دسامبر 2023 در دسترس است.
• به طور گسترده در ژوئن 2026 در دسترس است.

درباره :has() در MDN ، در :has() انتخابگر خانواده و در مطالعات موردی :has() بیشتر بیاموزید.

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

Subgrid این امکان را برای یک طرح شبکه تودرتو برای به ارث بردن آهنگ ها از والد خود فراهم می کند. این امکان را برای تراز بهتر اقلام در شبکه های تودرتو فراهم می کند.

• به تازگی در دسامبر 2023 در دسترس است.
• به طور گسترده در ژوئن 2026 در دسترس است.

درباره زیرشبکه در MDN و در زیرشبکه CSS که به تعداد زیادی از منابع دیگر پیوند دارد، بیشتر بیاموزید.

CSS Nesting

در سال های اخیر CSS از ویژگی هایی که توسعه دهندگان در پیش پردازنده هایی مانند Sass استفاده می کنند الهام گرفته است. برای مثال، ویژگی‌های سفارشی CSS، که اغلب به عنوان متغیرهای CSS شناخته می‌شوند، یک ویژگی به‌طور گسترده در دسترس هستند که به متغیرهایی مانند رنگ‌ها اجازه می‌دهند در یک مکان تنظیم شوند و در سرتاسر CSS شما استفاده شوند، چیزی که قبلاً فقط در هنگام استفاده از یک پیش‌پردازنده در دسترس بود.

یکی دیگر از ویژگی های پیش پردازنده ها Nesting است. تودرتو به جلوگیری از تکرار انتخابگرها کمک می‌کند و به خوانایی CSS کمک می‌کند، زیرا موارد مرتبط را می‌توان راحت‌تر با هم گروه‌بندی کرد.

• به تازگی در آگوست 2023 در دسترس است
• به طور گسترده در فوریه 2026 در دسترس است

درباره CSS Nesting در MDN و در CSS Nesting بیشتر بیاموزید.

عنصر <search> HTML

جستجو چیزی است که در بسیاری از سایت‌ها و برنامه‌ها ظاهر می‌شود، اما تا همین اواخر هیچ عنصری برای علامت‌گذاری عملکرد مورد استفاده برای جستجو یا فیلتر کردن در یک صفحه وجود نداشت. عنصر <search> برای این منظور طراحی شده است. به عنوان عنصری وجود دارد که می توانید یک فرم جستجو یا سایر عناصر مورد استفاده برای فیلتر کردن نتایج را در داخل آن قرار دهید.

• به تازگی در اکتبر 2023 در دسترس است
• به طور گسترده در آوریل 2026 در دسترس است

درباره عنصر <search> در MDN بیشتر بیاموزید.

ویدیوی واکنش گرا

این ویژگی به توانایی استفاده از عنصر <source> در داخل عنصر <video> برای ارائه ویدئو با اندازه مناسب به دستگاه های مختلف اشاره دارد، به همان روشی که می توانید تصاویر با اندازه های مختلف را ارائه دهید.

• به تازگی در نوامبر 2023 در دسترس است
• به طور گسترده در ماه مه 2026 در دسترس است

درباره MDN در عنصر رسانه یا منبع تصویر و در نحوه استفاده از ویدیوی پاسخگو بیشتر بیاموزید.

صفت inert

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

با اعمال ویژگی inert به یک عنصر، اگر روی عنصر کلیک شود، رویدادهای کلیک فعال نمی شوند، عنصر نمی تواند تمرکز کند، عنصر و محتوای آن از فناوری های کمکی پنهان می شود زیرا از درخت دسترسی حذف می شود.

• به تازگی در آوریل 2023 در دسترس است
• به طور گسترده در اکتبر 2025 در دسترس است

در مورد inert در MDN و همچنین در ویژگی inert بیشتر بیاموزید.

تابع color-mix()

تابع color-mix() ترکیب یک رنگ به رنگ دیگر را در هر فضای رنگی موجود امکان‌پذیر می‌کند، این شامل تمام مدل‌های رنگی جدید LCH، Lab، OKLCH و OKLab است که اخیراً بخشی از Baseline Newly Available شده‌اند.

• به تازگی در آوریل 2023 در دسترس است
• به طور گسترده در اکتبر 2025 در دسترس است

درباره color-mix() در MDN و در CSS color-mix() بیشتر بیاموزید. ما همچنین یک راهنمای رنگ CSS با وضوح بالا داریم که تمام مدل‌های رنگی جدید موجود در CSS را پوشش می‌دهد. به‌علاوه، برای بازی با این رنگ‌های جدید و ایجاد شیب‌های زیبا، gradient.style را بررسی کنید.

:user-valid و :user-invalid

شبه کلاس های :valid و :invalid به طور گسترده در مرورگرها در دسترس هستند و نشان می دهند که آیا یک عنصر فرم در حال حاضر مطابق با قوانین محدودیتی که روی آن قرار داده شده معتبر است یا نامعتبر است. بنابراین، اگر فیلدی با یک نوع ایمیل دارید و حاوی نام است، شبه کلاس :invalid آن را انتخاب می‌کند و می‌توانید یک رنگ یا نماد اضافه کنید تا نشان دهید که باید اصلاح شود.

مشکل شبه کلاس های :valid و :invalid این است که قبل از تعامل کاربر با یک فرم اعمال می شوند. بنابراین، اگر عنصر فرم مورد نیاز است و کاربر هنوز آن را تکمیل نکرده است، استایل نامعتبر شما نشان داده می‌شود. معمولاً فقط زمانی می خواهید استایل نامعتبر را نشان دهید که کاربر چیزی را اشتباه وارد کرده یا از روی یک فیلد رد شده و آن را خالی گذاشته است.

برای بهبود تجربه کاربری در این شرایط، از کلاس‌های :user-valid و :user-invalid استفاده کنید. اینها تقریباً به یک شکل عمل می کنند، با این تفاوت که فقط زمانی مطابقت دارند که کاربر با فیلد تعامل داشته باشد. بنابراین، در مثال یک فیلد الزامی، کاربر باید برگه یا روی فیلد کلیک کرده باشد و سپس بدون تکمیل آن، فیلد را به حالت نامعتبر نشان دهد.

• به تازگی در اکتبر 2023 در دسترس است
• به طور گسترده در آوریل 2026 در دسترس است

درباره :user-valid و :user-invalid در MDN بیشتر بیاموزید.

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

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

• به تازگی در ماه مه 2023 در دسترس است
• به طور گسترده در نوامبر 2025 در دسترس است

درباره The Compression Streams API در MDN و در Compression Streams اکنون در همه مرورگرها پشتیبانی می شود .

The Declarative Shadow DOM

Declarative Shadow DOM یک روش جدید برای ایجاد یک درخت سایه از HTML است که قبلاً فقط می توانستید یک درخت سایه از جاوا اسکریپت با استفاده از attachShadow() ایجاد کنید. امکان انجام این کار از طریق HTML به ویژه در محیط هایی که جاوا اسکریپت ممکن است اجرا نشود، مانند سرویس گیرنده ایمیل، مفید است. همچنین برای اجزای وب رندر شده در سمت سرور مهم است.

• به تازگی در فوریه 2024 در دسترس است
• به طور گسترده در آگوست 2026 در دسترس است

درباره DOM Shadow Declarative بیشتر بیاموزید.

Popover API

پنجره های بازشو برای بسیاری از وظایف مختلف در برنامه های کاربردی وب ما استفاده می شود. به عنوان مثال، منوها، اعلان‌های نان تست سفارشی و انتخاب‌کنندگان محتوا. اکنون یک روش داخلی برای ایجاد این پنجره‌های بازشو به روشی تزئینی با The Popover API وجود دارد.

• به تازگی در آوریل 2024 در دسترس است
• به طور گسترده در اکتبر 2026 در دسترس است

درباره Popover API در MDN ، Popover API در Baseline و در مطالعات موردی Popover بیشتر بیاموزید.

این 12 ویژگی تنها برخی از مواردی است که به بخشی از Baseline Newly Available تبدیل شده‌اند و می‌توانید اطلاعات بیشتری را در این سایت کشف کنید. تمام ویژگی‌هایی را که بخشی از Baseline 2023 شده‌اند و مجموعه رو به رشد ویژگی‌هایی که بخشی از Baseline 2024 هستند را کشف کنید.