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

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

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

انتخاب مختلط n ام-*

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

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

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

درباره انتخاب‌های پیچیده n ام-* بیشتر بدانید.

محدوده

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

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

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

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

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

در دموی زیر، عناصر <img> در کامپوننت carousel به دلیل محدودیت دامنه اعمال شده، تطبیق داده نمی‌شوند.

تصویر نمایشی Scope

نسخه آزمایشی زنده Scope

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

لانه سازی

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

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 */
}

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

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

زیرشبکه

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

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

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

حرف اول اسم

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

تصویر با حرف اول اسم

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

درباره حرف اول اسم (initial-letter) بیشتر بدانید.

متن-پیچیده: تعادل و زیبایی

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

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

درباره text-wrap: balance بیشتر بدانید.

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

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

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

درباره رنگ ۴ و فضاهای رنگی بیشتر بدانید.

تابع ترکیب رنگ

ترکیب رنگ یک کار کلاسیک است و در سال ۲۰۲۳ CSS نیز می‌تواند این کار را انجام دهد. شما نه تنها می‌توانید رنگ سفید یا سیاه را با یک رنگ ترکیب کنید، بلکه می‌توانید شفافیت را نیز تغییر دهید و همه این کارها را در هر فضای رنگی دلخواه خود انجام دهید. این همزمان یک ویژگی رنگ پایه و یک ویژگی رنگ پیشرفته است.

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

درباره تابع color-mix() بیشتر بدانید.

نحو رنگ نسبی

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

RCS به شما امکان می‌دهد تا دستکاری‌های نسبی و مطلق را روی یک رنگ انجام دهید. تغییر نسبی زمانی است که مقدار فعلی اشباع یا روشنایی را گرفته و آن را با calc() تغییر می‌دهید. تغییر مطلق زمانی است که مقدار یک کانال را با مقدار کاملاً جدیدی جایگزین می‌کنید، مانند تنظیم opacity روی ۵۰٪. این سینتکس ابزارهای معناداری برای تم‌بندی، انواع just in time و موارد دیگر در اختیار شما قرار می‌دهد.

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

سوالات مربوط به اندازه کانتینر

به جای استفاده از اطلاعات اندازه سراسری viewport برای اعمال سبک‌های CSS، کوئری‌های container از کوئری گرفتن از یک عنصر والد در صفحه پشتیبانی می‌کنند. این بدان معناست که کامپوننت‌ها می‌توانند به صورت پویا در چندین طرح‌بندی و در چندین نما استایل‌دهی شوند. کوئری‌های container برای اندازه در روز ولنتاین امسال (۱۴ فوریه) در تمام مرورگرهای مدرن پایدار شدند.

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

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

کوئری‌های مربوط به کانتینر استایل

کوئری‌های استایل با پیاده‌سازی جزئی در کروم ۱۱۱ ارائه شدند. با کوئری‌های استایل فعلی، می‌توانید هنگام استفاده از @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> که در حال حاضر موس روی آن قرار دارد، قرار دارد، انتخاب می‌کند.

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

به‌روزرسانی پرس‌وجوی رسانه

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

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

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

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

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

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

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

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

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

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

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

درباره @media (ترجیحاً شفافیت کاهش‌یافته) بیشتر بدانید.

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

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

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

رابط برنامه‌نویسی کاربردی View Transitions برای برنامه‌های تک‌صفحه‌ای در کروم ۱۱۱ ارائه شد. درباره View Transitions بیشتر بدانید.

تابع کاهش خطی

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

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

درباره linear() بیشتر بدانید. برای ایجاد منحنی‌های linear() ، از مولد linear easing استفاده کنید.

پایان اسکرول

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

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

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

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

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

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

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

از آنجایی که انیمیشن‌های اسکرول‌محور با انیمیشن‌های CSS و API انیمیشن‌های وب کار می‌کنند، می‌توانید از تمام مزایایی که این APIها ارائه می‌دهند، بهره‌مند شوید. این شامل قابلیت اجرای این انیمیشن‌ها در thread اصلی نیز می‌شود. اکنون می‌توانید انیمیشن‌های روان و ابریشمی داشته باشید که توسط اسکرول هدایت می‌شوند و تنها با چند خط کد اضافی از thread اصلی اجرا می‌شوند - چه چیزی دوست داشتنی نیست؟

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

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

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

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

درباره timeline-scope بیشتر بدانید.

انیمیشن‌های ویژگی‌های گسسته

یکی دیگر از قابلیت‌های جدید در سال ۲۰۲۳، امکان متحرک‌سازی انیمیشن‌های گسسته، مانند متحرک‌سازی به و از display: none است. از کروم ۱۱۶، می‌توانید از display و content-visibility در قوانین keyframe استفاده کنید. همچنین می‌توانید هر ویژگی گسسته را در نقطه ۵۰٪ به جای نقطه ۰٪ منتقل کنید. این کار با ویژگی transition-behavior با استفاده از کلمه کلیدی allow-discrete یا در ویژگی transition به عنوان یک میانبر انجام می‌شود.

درباره انتقال انیمیشن‌های گسسته بیشتر بدانید.

@سبک-شروع

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

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

روکش

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

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

پاپ‌اوور

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

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

قوانین افقی در select

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

انتخاب تصویر صفحه

نسخه آزمایشی زنده را انتخاب کنید

درباره استفاده از using hr در select بیشتر بدانید

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

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

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

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

آکاردئون اختصاصی

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

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

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