توابع مثلثاتی

کروم 111 پشتیبانی از توابع مثلثاتی sin() , cos() , tan() , asin() , acos() , atan() و atan2() اضافه کرد و آنها را در همه موتورهای اصلی در دسترس قرار داد. این توابع برای اهداف انیمیشن و چیدمان بسیار مفید هستند. به عنوان مثال، اکنون بسیار ساده تر است که عناصر را روی یک دایره در اطراف یک مرکز انتخاب شده قرار دهید.

درباره توابع مثلثاتی در CSS بیشتر بدانید.

انتخاب پیچیده nth-*

با انتخابگر شبه کلاس :nth-child() امکان انتخاب عناصر در DOM بر اساس شاخص آنها وجود دارد. با استفاده از میکروسینتکس An+B کنترل خوبی بر روی عناصری که می خواهید انتخاب کنید، بدست می آورید.

به طور پیش فرض شبه های :nth-*() همه عناصر فرزند را در نظر می گیرند. از Chrome 111 می‌توانید به صورت اختیاری، فهرست انتخابگر را به :nth-child() و :nth-last-child() ارسال کنید. به این ترتیب شما می توانید لیست فرزندان را قبل از اینکه An+B کار خود را انجام دهد، از قبل فیلتر کنید.

در نسخه ی نمایشی زیر، منطق 3n+1 فقط برای عروسک های کوچک با استفاده of .small از پیش فیلتر کردن آنها اعمال می شود. از منوهای کشویی برای تغییر پویا انتخابگر استفاده شده استفاده کنید.

درباره انتخاب های پیچیده nth-* بیشتر بیاموزید.

محدوده

Chrome 118 پشتیبانی از @scope را اضافه کرد، یک قانون at-قاعده که به شما امکان می‌دهد انتخابگر محدوده مطابق با زیردرخت خاصی از سند باشد. با استایل‌بندی محدوده‌ای، می‌توانید در مورد عناصری که انتخاب می‌کنید، بدون نیاز به نوشتن انتخابگرهای خیلی خاص یا اتصال محکم آنها به ساختار DOM، کاملاً مشخص باشید.

یک زیردرخت دامنه دار با یک ریشه محدوده (مرز بالایی) و یک محدودیت دامنه اختیاری (مرز پایین) تعریف می شود.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

قوانین سبکی که در داخل یک بلوک scope قرار می‌گیرند، فقط عناصر درون زیردرخت حک شده را هدف قرار می‌دهند. به عنوان مثال، قانون سبک محدوده زیر فقط عناصر <img> را هدف قرار می دهد که بین عنصر .card و هر جزء تو در تو که با انتخابگر [data-component] مطابقت دارد قرار می گیرد.

@scope (.card) to ([data-component]) {
  img { … }
}

در نسخه ی نمایشی زیر، عناصر <img> در جزء چرخ فلک به دلیل محدودیت محدوده اعمال شده مطابقت ندارند.

اسکرین شات نسخه نمایشی محدوده

Scope Live Demo

در مقاله «نحوه استفاده از @scope برای محدود کردن دسترسی انتخابگرها» درباره @scope بیشتر بیاموزید. در این مقاله در مورد انتخابگر :scope ، نحوه رسیدگی به ویژگی‌ها، دامنه‌های بدون پیش درآمد، و چگونگی تأثیر آبشار توسط @scope خواهید آموخت.

لانه سازی

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

تودرتو می تواند وزن یک شیوه نامه را کاهش دهد، سربار انتخابگرهای تکراری را کاهش دهد و سبک های مؤلفه را متمرکز کند. این نحو ابتدا با محدودیتی منتشر شد که نیاز به استفاده از & در مکان‌های مختلف داشت، اما از آن زمان با یک به‌روزرسانی نحو آرام تودرتو برداشته شد.

درباره لانه سازی بیشتر بدانید.

زیرشبکه

subgrid CSS شما را قادر می سازد تا شبکه های پیچیده تری را با هم ترازی بهتر بین طرح بندی های فرزند ایجاد کنید. این به شبکه ای که در داخل یک شبکه دیگر است، اجازه می دهد تا با استفاده از subgrid به عنوان یک مقدار برای ردیف ها یا ستون های شبکه، سطرها و ستون های شبکه بیرونی را به عنوان شبکه خود بپذیرد.

Subgrid به ویژه برای همسوسازی خواهر و برادر با محتوای پویا یکدیگر مفید است. این کار کپی‌رایترها، نویسندگان تجربه کاربری و مترجمان را از تلاش برای ایجاد نسخه‌ای از پروژه که در طرح‌بندی «مناسب» باشد، آزاد می‌کند. با زیرشبکه، طرح را می توان به تناسب محتوا تنظیم کرد.

درباره زیرشبکه بیشتر بدانید.

حرف اول

با شروع سال در کروم 110، ویژگی initial-letter یک ویژگی کوچک و در عین حال قدرتمند CSS است که استایلی را برای قرار دادن حروف اولیه تنظیم می کند. می توانید حروف را در حالت افتاده یا برجسته قرار دهید. این ویژگی دو استدلال را می پذیرد: اولی برای اینکه حرف چقدر عمیق در پاراگراف مربوطه رها شود و دوم اینکه چقدر حرف را بالاتر از آن قرار دهیم. حتی می توانید ترکیبی از هر دو را انجام دهید، مانند نسخه ی نمایشی زیر.

تصویر صفحه حرف اول

نسخه ی نمایشی با حرف اولیه

درباره حرف اول بیشتر بدانید.

text-wrap: متعادل و زیبا

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

اینجاست که دو تکنیک جدید برای بسته بندی متن وارد می شود، یکی به نام balance و دیگری pretty . مقدار balance به دنبال ایجاد یک بلوک هماهنگ از متن است در حالی که pretty به دنبال جلوگیری از یتیم شدن و اطمینان از خط خطی سالم است. هر دوی این کارها به طور سنتی با دست انجام می‌شدند، و این شگفت‌انگیز است که کار را به مرورگر بدهید و آن را برای هر زبان ترجمه‌شده کار کنید.

درباره text-wrap: balance بیشتر بیاموزید.

فضاهای رنگی HD (سطح رنگ 4)

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

اکنون CSS و رنگ می‌توانند: - بررسی کنند که آیا سخت‌افزار صفحه‌نمایش کاربران قادر به رنگ‌های HDR با گستره وسیع است یا خیر. - بررسی کنید که آیا مرورگر کاربر نحو رنگی مانند Oklch یا Display P3 را درک می کند یا خیر. - رنگ‌های HDR را در Oklab، Oklch، HWB، Display P3، Rec.2020، XYZ و موارد دیگر مشخص کنید. - ایجاد شیب با رنگ های HDR، - درون یابی گرادیان ها در فضاهای رنگی جایگزین. - رنگ ها را با color-mix() مخلوط کنید. - ایجاد انواع رنگ با نحو نسبی رنگ.

درباره رنگ 4 و فضاهای رنگی بیشتر بیاموزید.

عملکرد ترکیب رنگ

ترکیب رنگ یک کار کلاسیک است و در سال 2023 CSS نیز می تواند آن را انجام دهد. شما نه تنها می توانید سفید یا سیاه را با یک رنگ ترکیب کنید، بلکه شفافیت را نیز می توانید در هر فضای رنگی که انتخاب می کنید انجام دهید. این به طور همزمان یک ویژگی رنگ پایه و یک ویژگی رنگ پیشرفته است.

می توانید color-mix() را به عنوان یک لحظه در زمان از یک گرادیان در نظر بگیرید. در جایی که یک گرادیان تمام مراحلی که برای رفتن از آبی به سفید طول می‌کشد را نشان می‌دهد، color-mix() فقط یک مرحله را نشان می‌دهد. زمانی که شروع به در نظر گرفتن فضاهای رنگی کنید و یاد بگیرید که فضای ترکیبی رنگ چقدر می تواند با نتایج متفاوت باشد، همه چیز پیشرفت می کند.

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

نحو نسبی رنگ

نحو نسبی رنگ (RCS) یک روش مکمل برای color-mix() برای ایجاد انواع رنگ است. این کمی قدرتمندتر از color-mix() است، اما همچنین یک استراتژی متفاوت برای کار با رنگ است. color-mix() ممکن است با رنگ سفید ترکیب شود تا یک رنگ روشن شود، جایی که RCS دسترسی دقیقی به کانال روشنایی و توانایی استفاده از calc() در کانال برای کاهش یا افزایش روشنایی به صورت برنامه‌ریزی می‌کند.

RCS به شما اجازه می دهد تا دستکاری های نسبی و مطلق را روی یک رنگ انجام دهید. یک تغییر نسبی تغییری است که در آن مقدار فعلی اشباع یا سبکی را می گیرید و آن را با calc() تغییر می دهید. تغییر مطلق تغییری است که در آن یک مقدار کانال را با یک مقدار کاملاً جدید جایگزین کنید، مانند تنظیم opacity روی 50%. این نحو ابزارهای معنی‌داری برای قالب‌بندی، انواع به موقع و موارد دیگر به شما می‌دهد.

درباره نحو نسبی رنگ بیشتر بیاموزید.

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

به‌جای استفاده از اطلاعات اندازه کلی درگاه برای اعمال سبک‌های CSS، کوئری‌های کانتینر از پرس‌وجو از عنصر والد در صفحه پشتیبانی می‌کنند. این بدان معناست که اجزاء را می توان به صورت پویا در چندین طرح بندی و در چندین نما استایل بندی کرد. درخواست‌های کانتینر برای اندازه در روز ولنتاین امسال (14 فوریه) در همه مرورگرهای مدرن ثابت شد.

برای استفاده از این ویژگی، ابتدا Containment را روی عنصری که در حال پرس و جو هستید تنظیم کنید، و سپس، مشابه یک درخواست رسانه، از @container با پارامترهای اندازه برای اعمال استایل ها استفاده کنید. همراه با پرس و جوهای کانتینر، اندازه های پرس و جوی کانتینر را دریافت می کنید. در نسخه ی نمایشی زیر، اندازه پرس و جوی کانتینر cqi (نماینده اندازه ظرف درون خطی)، برای اندازه هدر کارت استفاده می شود.

درباره استفاده از جستجوهای کانتینر بیشتر بیاموزید.

پرس و جوهای ظرف سبک

درخواست‌های سبک با اجرای جزئی در Chrome 111 وارد شدند. در حال حاضر با جستجوهای سبک، می‌توانید هنگام استفاده از @container style() مقدار ویژگی‌های سفارشی را در یک عنصر والد پرس‌وجو کنید. به عنوان مثال، اگر مقدار خاصیت سفارشی وجود دارد، یا روی مقدار خاصی تنظیم شده است، پرس و جو کنید، مانند @container style(--rain: true) .

اسکرین شات پرس و جوی سبک

دمو پرس و جوی سبک

در حالی که این شبیه به استفاده از نام کلاس ها در CSS است، پرس و جوهای سبک دارای مزایایی هستند. اولین مورد این است که با کوئری های سبک، می توانید مقدار را در CSS در صورت نیاز برای حالت های کاذب به روز کنید. همچنین، در نسخه‌های بعدی پیاده‌سازی، می‌توانید محدوده‌هایی از مقادیر را برای تعیین سبک اعمال شده جستجو کنید، مانند style(60 <= --weather <= 70) و سبک بر اساس جفت‌های ویژگی-مقدار مانند style(font-style: italic) .

درباره استفاده از پرس و جوهای سبک بیشتر بیاموزید.

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

تقریباً 20 سال است که توسعه دهندگان درخواست یک "انتخاب کننده والد" در CSS داشتند. با انتخابگر :has() که در کروم 105 ارسال شده است، اکنون این امکان وجود دارد. به عنوان مثال، با استفاده از .card:has(img.hero) عناصر .card را انتخاب می کنیم که در کودکی تصویر قهرمان دارند.

:has() اسکرین شات دمو

:has() نمایش زنده

از آنجا که :has() یک لیست انتخابگر نسبی را به عنوان آرگومان خود می پذیرد، می توانید خیلی بیشتر از عنصر والد انتخاب کنید. با استفاده از ترکیب‌کننده‌های مختلف CSS، نه تنها می‌توان از درخت DOM بالا رفت، بلکه انتخاب‌های جانبی را نیز انجام داد. به عنوان مثال، li:has(+ li:hover) عنصر <li> را که قبل از عنصر <li> شناور فعلی قرار دارد انتخاب می کند.

درباره انتخابگر CSS :has() بیشتر بیاموزید.

درخواست رسانه را به روز کنید

درخواست رسانه update راهی به شما می دهد تا رابط کاربری را با نرخ تازه سازی دستگاه تطبیق دهید. این ویژگی می‌تواند مقدار fast ، slow یا none را گزارش کند که به قابلیت‌های دستگاه‌های مختلف مربوط می‌شود.

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

درباره رسانه @ (به روز رسانی) بیشتر بیاموزید.

پرس و جو رسانه اسکریپت

پرس و جو رسانه اسکریپت را می توان برای بررسی اینکه آیا جاوا اسکریپت در دسترس است یا نه استفاده می شود. این برای بهبود پیشرونده بسیار خوب است. قبل از این پرسش رسانه ای، یک استراتژی برای تشخیص موجود بودن جاوا اسکریپت، قرار دادن یک کلاس nojs در HTML و حذف آن با جاوا اسکریپت بود. این اسکریپت ها را می توان حذف کرد زیرا CSS اکنون راهی برای شناسایی جاوا اسکریپت و تنظیم بر اساس آن دارد.

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

یک سوئیچ تم را در یک وب سایت در نظر بگیرید، پرس و جو رسانه اسکریپت می تواند به کارکرد سوئیچ بر خلاف اولویت سیستم کمک کند زیرا جاوا اسکریپتی در دسترس نیست. یا یک جزء سوئیچ را در نظر بگیرید—اگر جاوا اسکریپت در دسترس باشد، می‌توان سوئیچ را به جای روشن و خاموش کردن، با یک اشاره حرکت داد. اگر اسکریپت‌نویسی در دسترس باشد، فرصت‌های بسیار خوبی برای ارتقای UX وجود دارد، در حالی که اگر اسکریپت‌نویسی غیرفعال باشد، یک تجربه پایه معنادار ارائه می‌کند.

درباره اسکریپت بیشتر بیاموزید.

پرس و جو رسانه ای با شفافیت کاهش یافته

رابط های غیر شفاف می توانند باعث سردرد یا مبارزه بصری برای انواع مختلف کمبود بینایی شوند. به همین دلیل است که Windows، macOS و iOS تنظیمات برگزیده سیستمی دارند که می تواند شفافیت را از رابط کاربری کاهش دهد یا حذف کند. این پرس و جو رسانه ای برای prefers-reduced-transparency به خوبی با دیگر پرس و جوهای رسانه ترجیحی مطابقت دارد، که به شما امکان می دهد در عین حال برای کاربران خلاق باشید.

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

درباره @media (prefers-reduced-transparency) بیشتر بیاموزید.

مشاهده انتقال

انتقال مشاهده تاثیر زیادی بر تجربه کاربری یک صفحه دارد. با View Transitions API، می‌توانید انتقال‌های بصری بین دو حالت صفحه برنامه Single Page خود ایجاد کنید. این انتقال‌ها می‌توانند انتقال کامل صفحه یا چیزهای کوچک‌تر در یک صفحه مانند افزودن یا حذف یک مورد جدید به یک لیست باشند.

در هسته View Transitions API تابع document.startViewTranstion است. تابعی را بفرستید که DOM را به حالت جدید به روز می کند و API همه چیز را برای شما انجام می دهد. این کار را با گرفتن یک عکس فوری قبل و بعد و سپس انتقال بین این دو انجام می دهد. با استفاده از CSS می توانید آنچه را که گرفته می شود کنترل کنید و به صورت اختیاری نحوه متحرک شدن این عکس های فوری را سفارشی کنید.

View Transitions API برای برنامه‌های یک صفحه در Chrome 111 ارسال شده است. درباره View Transitions بیشتر بدانید.

تابع تسهیل خطی

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

قبل از linear() که در کروم 113 عرضه شد، ایجاد افکت های برگشتی یا فنری در CSS غیرممکن بود. به لطف linear() می‌توان با ساده‌سازی آنها به یک سری نقاط و سپس درونیابی خطی بین این نقاط، این کاهش‌ها را تقریبی کرد.

درباره linear() بیشتر بیاموزید. برای ایجاد منحنی های linear() از مولد آسان سازی خطی استفاده کنید.

اسکرول پایان

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

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

درباره اسکرولند بیشتر بدانید.

انیمیشن های اسکرول محور

انیمیشن‌های اسکرول‌مدار یک ویژگی هیجان‌انگیز در Chrome 115 هستند. این ویژگی‌ها به شما امکان می‌دهند یک انیمیشن CSS موجود یا یک انیمیشن ساخته شده با Web Animations API را بگیرید و آن را به افست اسکرول یک اسکرول متصل کنید. همانطور که به بالا و پایین پیمایش می کنید – یا به چپ و راست در یک پیمایش افقی – انیمیشن پیوند داده شده در پاسخ مستقیم به جلو و عقب حرکت می کند.

همانطور که در نسخه ی نمایشی زیر نشان داده شده است، با ScrollTimeline می توانید پیشرفت کلی یک اسکرولر را ردیابی کنید. همانطور که به انتهای صفحه پیمایش می کنید، متن کاراکتر به کاراکتر خود را نشان می دهد.

با ViewTimeline می‌توانید یک عنصر را هنگام عبور از اسکرولپورت ردیابی کنید. این کار مشابه نحوه ردیابی یک عنصر IntersectionObserver است. در دمو زیر، هر تصویر از لحظه ای که وارد اسکرولپورت می شود تا زمانی که در مرکز قرار می گیرد، خود را نشان می دهد.

از آنجایی که انیمیشن های اسکرول محور با انیمیشن های CSS و Web Animations API کار می کنند، می توانید از تمام مزایای این API ها بهره مند شوید. این شامل توانایی این است که این انیمیشن ها از موضوع اصلی خارج شوند. اکنون می‌توانید انیمیشن‌های صاف ابریشمی داشته باشید که با اسکرول هدایت می‌شوند و تنها با چند خط کد اضافی از رشته اصلی خارج می‌شوند – چه چیزی را دوست ندارید؟

برای کسب اطلاعات بیشتر در مورد انیمیشن های اسکرول محور ، این مقاله را با تمام جزئیات بررسی کنید یا از scroll-driven-animations.style بازدید کنید که شامل دموهای زیادی است.

پیوست جدول زمانی معوق

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

برای اینکه عنصر متحرک بتواند یک خط زمانی اسکرول نامگذاری شده از یک غیر اجداد را پیدا کند، از ویژگی timeline-scope در والد مشترک استفاده کنید. این اجازه می دهد تا scroll-timeline یا view-timeline تعریف شده با آن نام به آن متصل شود و دامنه وسیع تری به آن بدهد. با این کار، هر فرزند آن والدین مشترک می‌تواند از جدول زمانی با آن نام استفاده کند.

درباره timeline-scope بیشتر بیاموزید.

انیمیشن های دارایی گسسته

یکی دیگر از قابلیت‌های جدید در سال 2023، امکان متحرک کردن انیمیشن‌های مجزا، مانند متحرک سازی به و از display: none . از Chrome 116، می‌توانید از display و content-visibility در قوانین فریم کلیدی استفاده کنید. همچنین می توانید هر ویژگی گسسته را در نقطه 50% به جای 0% انتقال دهید. این امر با ویژگی transition-behavior با استفاده از کلمه کلیدی allow-discrete یا در ویژگی transition به عنوان مختصر به دست می آید.

درباره انتقال انیمیشن های مجزا بیشتر بیاموزید.

@starting-style

قانون CSS @starting-style بر اساس قابلیت‌های جدید وب برای متحرک سازی به و از display: none . این قانون راهی برای دادن یک عنصر به سبک "قبل از باز کردن" ارائه می دهد که مرورگر می تواند قبل از باز شدن عنصر در صفحه جستجو کند. این برای انیمیشن های ورودی و برای انیمیشن سازی در عناصری مانند پاپاور یا دیالوگ بسیار مفید است. همچنین می‌تواند برای هر زمانی که یک عنصر را ایجاد می‌کنید و می‌خواهید به آن امکان متحرک سازی را بدهید، مفید باشد. مثال زیر را در نظر بگیرید که یک ویژگی popover (به بخش بعدی را ببینید) به صورت هموار از خارج از قسمت مشاهده و وارد لایه بالایی می‌کند. درگاه دید

درباره @starting-style و سایر انیمیشن های ورودی بیشتر بیاموزید.

پوشش

ویژگی جدید overlay CSS را می‌توان به انتقال شما اضافه کرد تا عناصر با سبک‌های لایه بالا - مانند popover و dialog - را فعال کند تا به راحتی از لایه بالایی متحرک شوند. اگر همپوشانی انتقال را انجام ندهید، عنصر شما فوراً به حالت بریده شدن، تبدیل شدن و پوشاندن برمی‌گردد و شما شاهد وقوع این انتقال نخواهید بود. به طور مشابه، overlay ::backdrop را قادر می‌سازد تا وقتی به یک عنصر لایه بالایی اضافه می‌شود، به آرامی متحرک شود.

درباره همپوشانی و سایر انیمیشن های خروجی بیشتر بیاموزید.

پاپاور

Popover API به شما کمک می کند تا عناصری را بسازید که در بالای بقیه صفحه قرار دارند. اینها می تواند شامل منوها، انتخاب و نکات ابزار باشد. می‌توانید با افزودن ویژگی popover و یک id به عنصری که ظاهر می‌شود، یک popover ساده ایجاد کنید و با استفاده از popovertarget="my-popover" ویژگی id آن را به یک دکمه فراخوانی متصل کنید. Popover API پشتیبانی می کند:

• ارتقاء به لایه بالایی Popover ها در یک لایه جداگانه در بالای بقیه صفحه ظاهر می شوند، بنابراین شما مجبور نیستید با z-index بازی کنید.
• قابلیت حذف نور کلیک کردن در خارج از ناحیه پاپاور، پاپاور را بسته و فوکوس را برمی‌گرداند.
• مدیریت تمرکز پیش‌فرض باز کردن پاپاور باعث می شود که زبانه بعدی در داخل پاپاور متوقف شود.
• اتصالات صفحه کلید قابل دسترس با زدن کلید esc یا دوبار تغییر حالت پاپاور بسته می شود و فوکوس برمی گردد.
• اتصالات قابل دسترسی اتصال یک عنصر پاپاور به یک ماشه پاپاور از نظر معنایی.

قوانین افقی در انتخاب

یکی دیگر از تغییرات کوچک دیگر در HTML که امسال در کروم و سافاری مشاهده شد، امکان افزودن عناصر قاعده افقی (برچسب‌های <hr> ) به عناصر <select> برای کمک به تقسیم بصری محتوای شما است. قبلاً، قرار دادن تگ <hr> در یک انتخاب به سادگی رندر نمی شد. اما امسال، هم سافاری و هم کروم از این ویژگی پشتیبانی می‌کنند و امکان تفکیک بهتر محتوا در عناصر <select> را فراهم می‌کنند.

اسکرین شات را انتخاب کنید

Live Demo را انتخاب کنید

درباره استفاده از hr در انتخاب بیشتر بیاموزید

:کلاس های شبه کاربر معتبر و نامعتبر

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

با این انتخابگرهای جدید، دیگر نیازی به نوشتن کد حالتی برای پیگیری تغییرات ورودی کاربر نیست.

درباره استفاده از عناصر شبه اعتبارسنجی فرم کاربر* بیشتر بیاموزید.

آکاردئون انحصاری

یک الگوی رابط کاربری رایج در وب، یک جزء آکاردئونی است. برای پیاده‌سازی این الگو، چند عنصر <details> را با هم ترکیب می‌کنید و اغلب آنها را به صورت بصری گروه‌بندی می‌کنید تا نشان دهند که به یکدیگر تعلق دارند.

جدید در Chrome 120 پشتیبانی از ویژگی name در عناصر <details> است. هنگامی که از این ویژگی استفاده می شود، چندین عنصر <details> که مقدار name یکسانی دارند، یک گروه معنایی را تشکیل می دهند. حداکثر یک عنصر در گروه می تواند به طور همزمان باز شود: وقتی یکی از عناصر <details> را از گروه باز می کنید، عنصری که قبلاً باز شده بود به طور خودکار بسته می شود. این نوع آکاردئون را آکاردئون انحصاری می نامند.

عناصر <details> که بخشی از یک آکاردئون انحصاری هستند لزوماً لازم نیست خواهر و برادر باشند. آنها می توانند در سراسر سند پراکنده شوند.