پرش به محتوا:
- طراحی واکنش‌گرا
- پرس و جوهای کانتینر
- کوئری‌های سبک
- :دارای انتخابگر است
- به‌روزرسانی پرس‌وجوی رسانه
- اسکریپت نویسی پرس و جو رسانه ای
- استعلام شفافیت رسانه‌ای
وای! سال ۲۰۲۳ سال بزرگی برای CSS بود!
از #Interop2023 گرفته تا بسیاری از نوآوری‌های جدید در فضای CSS و رابط کاربری که قابلیت‌هایی را که توسعه‌دهندگان زمانی در پلتفرم وب غیرممکن می‌دانستند، فعال می‌کنند. اکنون، هر مرورگر مدرنی از کوئری‌های کانتینر، subgrid، انتخابگر :has() و مجموعه‌ای کامل از فضاها و توابع رنگی جدید پشتیبانی می‌کند. ما در کروم از انیمیشن‌های پیمایشی فقط CSS و انیمیشن روان بین نماهای وب با انتقال نماها پشتیبانی می‌کنیم. و علاوه بر همه اینها، بسیاری از عناصر اولیه جدید وجود دارند که برای تجربیات بهتر توسعه‌دهندگان مانند CSS nesting و سبک‌های scoped ارائه شده‌اند.
چه سالی بود! و ما دوست داریم این سال مهم را با تجلیل و قدردانی از تمام زحمات توسعه‌دهندگان مرورگر و جامعه وب که همه اینها را ممکن ساختند، به پایان برسانیم.
بیایید با به‌روزرسانی‌های زبان اصلی CSS و قابلیت‌های آن شروع کنیم. اینها ویژگی‌هایی هستند که برای نحوه‌ی نوشتن و سازماندهی استایل‌ها اساسی هستند و قدرت زیادی را در اختیار توسعه‌دهنده قرار می‌دهند.
کروم ۱۱۱ پشتیبانی از توابع مثلثاتی sin() ، cos() ، tan() ، asin() ، acos() ، atan() و atan2() را اضافه کرد و آنها را در تمام موتورهای اصلی در دسترس قرار داد. این توابع برای اهداف انیمیشن و طرح‌بندی بسیار مفید هستند. به عنوان مثال، اکنون چیدمان عناصر روی یک دایره به دور یک مرکز انتخاب شده بسیار آسان‌تر شده است.
درباره توابع مثلثاتی در CSS بیشتر بدانید.
Browser Support
با استفاده از انتخابگر شبه کلاس :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 بر آبشار یاد خواهید گرفت.
قبل از تودرتوسازی، هر انتخابگر باید به‌طور صریح و جداگانه از یکدیگر تعریف می‌شد. این امر منجر به تکرار، حجم زیاد 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) به ویژه برای تراز کردن بخش‌های مشابه با محتوای پویای یکدیگر مفید است. این امر نویسندگان محتوا، نویسندگان تجربه کاربری و مترجمان را از تلاش برای ایجاد نسخه‌ای از پروژه که "با طرح‌بندی" مطابقت داشته باشد، بی‌نیاز می‌کند. با زیرشبکه، طرح‌بندی را می‌توان طوری تنظیم کرد که با محتوا متناسب باشد.
درباره زیرشبکه بیشتر بدانید.
تایپوگرافی وب در سال ۲۰۲۳ چند به‌روزرسانی کلیدی را تجربه کرد. یکی از پیشرفت‌های تدریجی و به‌خصوص خوب، ویژگی text-wrap است. این ویژگی امکان تنظیم طرح‌بندی تایپوگرافی را فراهم می‌کند که در مرورگر و بدون نیاز به اسکریپت‌نویسی اضافی ایجاد می‌شود. با طول خطوط نامناسب خداحافظی کنید و به تایپوگرافی قابل پیش‌بینی‌تر سلام کنید!
ویژگی initial-letter که در ابتدای سال در کروم ۱۱۰ معرفی شد، یک ویژگی کوچک اما قدرتمند CSS است که استایل قرارگیری حروف اولیه را تنظیم می‌کند. می‌توانید حروف را در حالت افتاده یا برآمده قرار دهید. این ویژگی دو آرگومان می‌پذیرد: اولی برای اینکه حرف چقدر در پاراگراف مربوطه قرار گیرد و دومی برای اینکه حرف چقدر بالاتر از آن قرار گیرد. حتی می‌توانید ترکیبی از هر دو را انجام دهید، مانند دموی زیر.
initial-letter را برای شبه عنصر ::first-letter تغییر دهید تا تغییر آن را مشاهده کنید.درباره حرف اول اسم (initial-letter) بیشتر بدانید.
به عنوان یک توسعه‌دهنده، شما اندازه نهایی، اندازه فونت یا حتی زبان یک تیتر یا پاراگراف را نمی‌دانید. تمام متغیرهای مورد نیاز برای یک رفتار مؤثر و زیبا در چیدمان متن، در مرورگر هستند. از آنجایی که مرورگر تمام عواملی مانند اندازه فونت، زبان و فضای اختصاص داده شده را می‌داند ، آن را به گزینه‌ای عالی برای مدیریت طرح‌بندی متن پیشرفته و با کیفیت بالا تبدیل می‌کند.
اینجاست که دو تکنیک جدید برای چیدمان متن وارد می‌شوند، یکی balance و دیگری pretty . مقدار balance به دنبال ایجاد یک بلوک متن هماهنگ است در حالی که pretty به دنبال جلوگیری از یتیم شدن و اطمینان از خط فاصله‌گذاری سالم است. هر دوی این وظایف به طور سنتی با دست انجام می‌شدند، و شگفت‌انگیز است که این کار را به مرورگر واگذار کنیم و آن را برای هر زبان ترجمه شده‌ای به کار بگیریم.
balance و pretty را روی یک عنوان و یک پاراگراف مقایسه کنید. سعی کنید دمو را به زبان دیگری ترجمه کنید!درباره text-wrap: balance بیشتر بدانید.
سال ۲۰۲۳ سال رنگ برای پلتفرم وب بود. با فضاهای رنگی جدید و عملکردهایی که امکان تم‌بندی رنگی پویا را فراهم می‌کنند، هیچ چیز مانع شما از ایجاد تم‌های زنده و باشکوهی که کاربرانتان شایسته آن هستند، و همچنین قابل تنظیم کردن آنها نخواهد شد!
از سخت‌افزار گرفته تا نرم‌افزار، از 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 و موارد دیگر در اختیار شما قرار می‌دهد.
درباره سینتکس رنگ نسبی بیشتر بدانید.
طراحی واکنش‌گرا (Responsive) در سال ۲۰۲۳ تکامل یافت. این سال پیشگامانه، ویژگی‌های جدیدی را فراهم کرد که به طور کامل نحوه ساخت تجربیات وب واکنش‌گرا را تغییر می‌دهد و مدل جدیدی از طراحی واکنش‌گرا مبتنی بر کامپوننت را معرفی کرد. ترکیب کوئری‌های کانتینر و :has() از کامپوننت‌هایی پشتیبانی می‌کند که سبک‌بندی واکنش‌گرا و منطقی خود را بر اساس اندازه والد خود و همچنین وجود یا وضعیت هر یک از فرزندانشان دارند. این بدان معناست که بالاخره می‌توانید طرح‌بندی سطح صفحه را از طرح‌بندی سطح کامپوننت جدا کنید و منطق را یک بار بنویسید تا از کامپوننت خود در همه جا استفاده کنید!
به جای استفاده از اطلاعات اندازه سراسری viewport برای اعمال سبک‌های CSS، کوئری‌های container از کوئری گرفتن از یک عنصر والد در صفحه پشتیبانی می‌کنند. این بدان معناست که کامپوننت‌ها می‌توانند به صورت پویا در چندین طرح‌بندی و در چندین نما استایل‌دهی شوند. کوئری‌های container برای اندازه در روز ولنتاین امسال (۱۴ فوریه) در تمام مرورگرهای مدرن پایدار شدند.
برای استفاده از این ویژگی، ابتدا محدودیت را روی عنصری که کوئری می‌کنید تنظیم کنید و سپس، مشابه یک کوئری رسانه‌ای، @container به همراه پارامترهای اندازه برای اعمال استایل‌ها استفاده کنید. همراه با کوئری‌های کانتینر، اندازه‌های کوئری کانتینر را نیز دریافت می‌کنید. در دموی زیر، از اندازه کوئری کانتینر cqi (که نشان‌دهنده اندازه کانتینر درون‌خطی است) برای تعیین اندازه هدر کارت استفاده می‌شود.
درباره استفاده از پرس‌وجوهای کانتینر بیشتر بدانید.
Browser Support
کوئری‌های استایل با پیاده‌سازی جزئی در کروم ۱۱۱ ارائه شدند. با کوئری‌های استایل فعلی، می‌توانید هنگام استفاده از @container style() مقدار ویژگی‌های سفارشی را روی یک عنصر والد جستجو کنید. برای مثال، بررسی کنید که آیا مقدار ویژگی سفارشی وجود دارد یا روی مقدار خاصی تنظیم شده است، مانند @container style(--rain: true) .
اگرچه این شبیه به استفاده از نام کلاس در CSS به نظر می‌رسد، اما کوئری‌های استایل مزایایی دارند. اولین مزیت این است که با کوئری‌های استایل، می‌توانید مقدار را در CSS در صورت نیاز برای حالت‌های کاذب به‌روزرسانی کنید. همچنین، در نسخه‌های بعدی پیاده‌سازی، می‌توانید محدوده‌هایی از مقادیر را برای تعیین استایل اعمال شده، مانند style(60 <= --weather <= 70) و استایل مبتنی بر جفت‌های ویژگی-مقدار مانند style(font-style: italic) کوئری کنید.
درباره استفاده از کوئری‌های استایل بیشتر بدانید.
تقریباً 20 سال است که توسعه‌دهندگان درخواست وجود یک "انتخابگر والد" در CSS را داشته‌اند. با انتخابگر :has() که در کروم 105 ارائه شد، اکنون این امر امکان‌پذیر است. برای مثال، استفاده از .card:has(img.hero) عناصر .card را که دارای تصویر قهرمان به عنوان فرزند هستند، انتخاب می‌کند.
:has() نسخه آزمایشی: کارت بدون/با تصویر از آنجا که :has() یک لیست انتخابگر نسبی را به عنوان آرگومان خود می‌پذیرد، می‌توانید عناصر بسیار بیشتری را علاوه بر عنصر والد انتخاب کنید. با استفاده از ترکیب‌کننده‌های مختلف CSS، نه تنها می‌توان در درخت DOM به سمت بالا حرکت کرد، بلکه می‌توان انتخاب‌های جانبی نیز انجام داد. برای مثال، li:has(+ li:hover) عنصر <li> را که قبل از عنصر <li> که در حال حاضر موس روی آن قرار دارد، قرار دارد، انتخاب می‌کند.
:has() نسخه آزمایشی: داک درباره انتخابگر :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() در CSS درباره 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 در والد مشترک، scroll-timeline تعریف شده در scroller را می‌توان توسط عنصری که از آن به عنوان animation-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 را قادر می‌سازد تا هنگام اضافه شدن به یک عنصر لایه بالایی، به آرامی خارج شود.
درباره پوشش و سایر انیمیشن‌های خروج بیشتر بدانید.
سال ۲۰۲۳ سال بزرگی برای تلاقی استایل و کامپوننت‌های HTML بود، با فرود popover و کارهای زیادی که در مورد موقعیت‌یابی anchor و آینده‌ی منوی‌های کشویی استایل‌دهی انجام شد. این کامپوننت‌ها ساخت الگوهای رابط کاربری رایج را بدون نیاز به تکیه بر کتابخانه‌های اضافی یا ساخت سیستم‌های مدیریت حالت خودتان از صفر در هر بار، آسان‌تر می‌کنند.
API مربوط به Popover به شما کمک می‌کند تا عناصری بسازید که روی بقیه صفحه قرار می‌گیرند. این عناصر می‌توانند شامل منوها، انتخاب‌ها و راهنماهای ابزار باشند. می‌توانید با اضافه کردن ویژگی popover و یک id به عنصری که ظاهر می‌شود و اتصال ویژگی id آن به یک دکمه فراخوانی با استفاده از popovertarget="my-popover" یک popover ساده ایجاد کنید. API مربوط به Popover از موارد زیر پشتیبانی می‌کند:
- ارتقاء به لایه بالا. پاپ‌اوورها در یک لایه جداگانه بالای بقیه صفحه ظاهر می‌شوند، بنابراین لازم نیست با z-index بازی کنید.
- قابلیت حذف نور. کلیک کردن در خارج از ناحیه‌ی بازشو، بازشو را می‌بندد و فوکوس را برمی‌گرداند.
- مدیریت فوکوس پیش‌فرض. باز کردن پنجره‌ی پاپ‌اوور باعث می‌شود تب بعدی درون پنجره‌ی پاپ‌اوور متوقف شود.
- پیوندهای صفحه کلید قابل دسترسی. فشردن کلید
escیا دوبار فشردن همزمان کلیدها، پنجره‌ی بازشو را می‌بندد و فوکوس را برمی‌گرداند. - اتصال کامپوننت‌های قابل دسترس. اتصال یک عنصر popover به یک تریگر popover از نظر معنایی.
یکی دیگر از تغییرات کوچک HTML که امسال در کروم و سافاری اعمال شد، امکان اضافه کردن عناصر خط افقی (تگ‌های <hr> ) به عناصر <select> است تا به تفکیک بصری محتوای شما کمک کند. پیش از این، قرار دادن یک تگ <hr> در یک select به سادگی رندر نمی‌شد. اما امسال، هم سافاری و هم کروم از این ویژگی پشتیبانی می‌کنند و امکان جداسازی بهتر محتوا در عناصر <select> را فراهم می‌کنند.
درباره استفاده از using hr در select بیشتر بدانید
:user-valid و :user-invalid که امسال در همه مرورگرها پایدار شده‌اند، رفتاری مشابه شبه‌کلاس‌های :valid و :invalid دارند، اما فقط پس از اینکه کاربر تعامل قابل توجهی با ورودی داشته باشد، با یک کنترل فرم مطابقت پیدا می‌کنند. یک کنترل فرم که الزامی و خالی باشد، حتی اگر کاربر تعامل با صفحه را شروع نکرده باشد، با :invalid مطابقت خواهد داشت. همین کنترل تا زمانی که کاربر ورودی را تغییر نداده و آن را در حالت نامعتبر قرار نداده باشد، با :user-invalid مطابقت نخواهد داشت.
با این انتخابگرهای جدید، دیگر نیازی به نوشتن کد stateful برای پیگیری ورودی‌هایی که کاربر تغییر داده است، نیست.
درباره استفاده از شبه عناصر اعتبارسنجی فرم user-* بیشتر بدانید.
Browser Support
یک الگوی رابط کاربری رایج در وب، کامپوننت آکاردئونی است. برای پیاده‌سازی این الگو، شما چند عنصر <details> را با هم ترکیب می‌کنید، و اغلب آنها را از نظر بصری گروه‌بندی می‌کنید تا نشان دهید که به هم تعلق دارند.
قابلیت جدید کروم ۱۲۰، پشتیبانی از ویژگی name در عناصر <details> است. وقتی از این ویژگی استفاده می‌شود، چندین عنصر <details> که مقدار name یکسانی دارند، یک گروه معنایی تشکیل می‌دهند. حداکثر یک عنصر در گروه می‌تواند همزمان باز باشد: وقتی یکی از عناصر <details> را از گروه باز می‌کنید، عنصری که قبلاً باز بوده است به طور خودکار بسته می‌شود. این نوع آکاردئون ، آکاردئون انحصاری نامیده می‌شود.
عناصر <details> که بخشی از یک آکاردئون انحصاری هستند، لزوماً نباید خواهر و برادر باشند. آنها می‌توانند در سراسر سند پراکنده شوند.
CSS در چند سال گذشته و به خصوص در سال ۲۰۲۳، رنسانسی را تجربه کرده است. اگر در CSS تازه‌کار هستید یا فقط می‌خواهید اصول اولیه را مرور کنید، دوره رایگان Learn CSS ما را به همراه سایر دوره‌های رایگان ارائه شده در web.dev بررسی کنید.
تعطیلات خوبی را برایتان آرزو می‌کنیم و امیدواریم به زودی فرصتی پیدا کنید تا برخی از این ویژگی‌های جدید و درخشان CSS و UI را در کار خود بگنجانید!
⇾ تیم توسعه‌دهنده رابط کاربری کروم،
پرش به محتوا:
- طراحی واکنش‌گرا
- پرس و جوهای کانتینر
- کوئری‌های سبک
- :دارای انتخابگر است
- به‌روزرسانی پرس‌وجوی رسانه
- اسکریپت نویسی پرس و جو رسانه ای
- استعلام شفافیت رسانه‌ای
وای! سال ۲۰۲۳ سال بزرگی برای CSS بود!
از #Interop2023 گرفته تا بسیاری از نوآوری‌های جدید در فضای CSS و رابط کاربری که قابلیت‌هایی را که توسعه‌دهندگان زمانی در پلتفرم وب غیرممکن می‌دانستند، فعال می‌کنند. اکنون، هر مرورگر مدرنی از کوئری‌های کانتینر، subgrid، انتخابگر :has() و مجموعه‌ای کامل از فضاها و توابع رنگی جدید پشتیبانی می‌کند. ما در کروم از انیمیشن‌های پیمایشی فقط CSS و انیمیشن روان بین نماهای وب با انتقال نماها پشتیبانی می‌کنیم. و علاوه بر همه اینها، بسیاری از عناصر اولیه جدید وجود دارند که برای تجربیات بهتر توسعه‌دهندگان مانند CSS nesting و سبک‌های scoped ارائه شده‌اند.
What a year it has been! And so we'd like to end this milestone year celebrating and acknowledging all of the hard work by browser developers and the web community that made this all possible.
Let's begin with updates to the core CSS language and capabilities. These are features which are foundational to the way you author and organize styles, and bring great power to the hands of the developer.
Chrome 111 added support for the trigonometric functions sin() , cos() , tan() , asin() , acos() , atan() , and atan2() , making them available across all major engines. These functions come in very handy for animation and layout purposes. For example, it's now much easier to lay out elements on a circle around a chosen center.
Learn more about the trigonometric functions in CSS .
Browser Support
With the :nth-child() pseudo-class selector it's possible to select elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select.
By default the :nth-*() pseudos take all child elements into account. As of Chrome 111 you can, optionally, pass a selector list into :nth-child() and :nth-last-child() . That way you can prefilter the list of children before An+B does its thing.
In the following demo, the 3n+1 logic is applied only to the small dolls by prefiltering them out using of .small . Use the dropdowns to dynamically change the used selector.
Learn more about complex nth-* selections .
Chrome 118 added support for @scope , an at-rule that lets you scope selector matching to a specific subtree of the document. With scoped styling, you can be very specific about which elements you select without having to write overly-specific selectors or tightly coupling them to the DOM structure.
A scoped subtree is defined by a scoping root (the upper boundary) and an optional scoping limit (the lower boundary).
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
Style rules placed inside a scope block will only target elements within the carved out subtree. For example, the following scoped style rule only targets <img> elements that sit between .card element and any nested component matched by the [data-component] selector.
@scope (.card) to ([data-component]) {
img { … }
}
In the following demo, the <img> elements in the carousel component are not matched because of the applied scoping limit.
@scope demo Find out more about @scope in the article "How to use @scope to limit the reach of your selectors" . In this article you'll learn about the :scope selector, how specificity gets handled, prelude-less scopes, and how the cascade is affected by @scope .
Before nesting, every selector needed to be explicitly declared, separately from one another. This leads to repetition, stylesheet bulk and a scattered authoring experience. Now, selectors can be continued with related style rules grouped within.
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 */
}
Nesting can reduce the weight of a stylesheet, reduce the overhead of repeating selectors, and centralize component styles. The syntax initially released with a limitation that required usage of & in various places, but since has been lifted with a nesting relaxed syntax update .
Learn more about nesting .
CSS subgrid enables you to create more complex grids with better alignment between child layouts. It allows a grid that's inside another grid, to adopt the rows and columns of the outer grid as its own, by using subgrid as a value for grid rows or columns.
Subgrid is especially useful for aligning siblings to each other's dynamic contents. This frees copywriters, UX writers, and translators from attempting to create project copy that "fits" into the layout. With subgrid, the layout can be adjusted to fit the content.
Learn more about subgrid .
Web typography saw a few key updates in 2023. An especially nice progressive enhancement is the text-wrap property. This property enables typographic layout adjustment, composed in the browser with no additional scripting required. Say goodbye to awkward line lengths and hello to more predictable typography!
Landing at the start of the year in Chrome 110, the initial-letter property is a small yet powerful CSS feature which sets styling for the placement of initial letters. You can position letters in either a dropped or raised state. The property accepts two arguments: the first for how deeply to drop the letter into the corresponding paragraph, and second for how much to raise the letter above it. You can even do a combination of both, such as in the following demo.
initial-letter for the ::first-letter pseudo element to watch it shift.Learn more about initial-letter .
As a developer, you don't know the final size, font size, or even language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. Since the browser does know all the factors, like font size, language, and allocated area, it makes it a great candidate for handling advanced and high quality text layout.
This is where two new text wrapping techniques come in, one called balance and the other pretty . The balance value seeks to create a harmonious block of text while pretty seeks to prevent orphans and ensure healthy hyphenation. Both of these tasks have traditionally been done by hand, and it's amazing to give the job to the browser and have it work for any translated language.
balance and pretty on a heading and a paragraph. Try translating the demo into another language!Learn more about text-wrap: balance .
2023 was the year of color for the web platform. With new color spaces and functions that enable dynamic color theming, there's nothing stopping you from creating the vivid, lush themes your users deserve, and make them customizable, too!
From the hardware to the software, the CSS to the blinking lights; it can take a lot of work for our computers to try and represent colors as good as our human eyes can see. In 2023, we have new colors, more colors, new color spaces, color functions and new capabilities.
CSS and color can now: - Check if the users screen hardware is capable of wide gamut HDR colors. - Check if the user's browser understands color syntax like Oklch or Display P3. - Specify HDR colors in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, and more. - Create gradients with HDR colors, - Interpolate gradients in alternative color spaces. - Mix colors with color-mix() . - Create color variants with relative color syntax.
Learn more about Color 4 and color spaces .
Mixing color is a classic task and in 2023 CSS can do it too. You can not only mix white or black to a color, but also transparency, and do all this in any color space of your choosing. It's simultaneously a basic color feature and an advanced color feature.
You can think of color-mix() as a moment in time from a gradient. Where a gradient shows all the steps it takes to go from blue to white, color-mix() shows just one step. Things get advanced once you begin to take color spaces into account and learn just how different the mixing color space can be to the results.
Learn more about color-mix() .
Relative color syntax (RCS) is a complementary method to color-mix() for creating color variants. It's slightly more powerful than color-mix() but also a different strategy for working with color. color-mix() may mix in the color white to lighten a color, where RCS gives precise access to the lightness channel and the ability to use calc() on the channel to reduce or increase lightness programmatically.
RCS allows you to perform relative and absolute manipulations to a color. A relative change is one where you take the current value of saturation or lightness and modify it with calc() . An absolute change is one where you replace a channel value with an entirely new one, like setting opacity to 50%. This syntax gives you meaningful tools for theming, just in time variants, and more.
Learn more about relative color syntax .
Responsive design evolved in 2023. This groundbreaking year enabled new features that entirely change the way we build responsive web experiences, and ushered in a new model of component-based responsive design. The combination of container queries and :has() supports components that own their responsive and logical styling based on the size of their parent, as well as the presence or state of any of their children. That means you can finally separate page-level layout from component-level layout, and write the logic once to use your component everywhere!
Rather than using the viewport's global size information to apply CSS styles, container queries support the querying of a parent element within the page. This means components can be styled in a dynamic way across multiple layouts and in multiple views. Container queries for size became stable in all modern browsers on Valentine's Day this year (February 14th).
To use this feature, first set up containment on the element you are querying, and then, similar to a media query, use @container with the size parameters to apply the styles. Along with container queries you get container query sizes. In the following demo, the container query size cqi (representing the size of the inline container), is used to size the card header.
Learn more about using container queries .
Browser Support
Style queries landed with partial implementation in Chrome 111. With style queries currently, you can query the value of custom properties on a parent element when using @container style() . For example, query if a custom property value exists, or is set to a certain value, such as @container style(--rain: true) .
While this sounds similar to using class names in CSS, style queries have some advantages. The first is that with style queries, you can update the value in CSS as needed for pseudo states. Also, in future versions of the implementation, you'll be able to query ranges of values to determine the style applied, such as style(60 <= --weather <= 70) , and style based on property-value pairs such as style(font-style: italic) .
Learn more about using style queries .
For almost 20 years developers asked for a "parent selector" in CSS. With the :has() selector that shipped in Chrome 105 this is now possible. For example, using .card:has(img.hero) will select the .card elements that have a hero image as a child.
:has() demo: Card without/with image Because :has() accepts a relative selector list as its argument, you can select much more than the parent element. Using various CSS combinators, it's possible to not only go up the DOM tree, but also do sideway selections. For example, li:has(+ li:hover) will select the <li> element that precedes the currently hovered <li> element.
:has() demo: Dock Learn more about the CSS :has() selector .
The update media query gives you a way to adapt UI to the refresh rate of a device. The feature can report a value of fast , slow , or none which relates to the capabilities of different devices.
Most of the devices you design for are likely to have a fast refresh rate. This includes desktops and most mobile devices. eReaders and devices such as low powered payment systems, may have a slow refresh rate. Knowing that the device can't handle animation or frequent updates, means that you can save battery usage or faulty view updates.
Learn more about @media (update) .
The scripting media query can be used to check whether or not JavaScript is available. This is very nice for progressive enhancement. Before this media query, a strategy for detecting if JavaScript was available was to place a nojs class in the HTML, and remove it with JavaScript. These scripts can be removed as CSS now has a way to detect JavaScript and adjust accordingly.
Learn how to enable and disable JavaScript on a page for testing via Chrome DevTools here .
Consider a theme switch on a website, the scripting media query can assist in making the switch work against the system preference since no JavaScript is available. Or consider a switch component—if JavaScript is available then the switch can be swiped with a gesture instead of just toggled on and off. Lots of great opportunities to upgrade UX if scripting is available while providing a meaningful foundation experience if scripting is disabled.
Learn more about script .
Non-opaque interfaces can cause headaches or be a visual struggle for various types of vision deficiencies. This is why Windows, macOS, and iOS have system preferences that can reduce or remove transparency from the UI. This media query for prefers-reduced-transparency fits in well with the other preference media queries, which allow you to be creative while also adjusting for users.
In some cases, you can provide an alternative layout which doesn't have content overlaying other content. In other cases, the opacity of a color can be adjusted to be opaque or nearly opaque. The following blog post has more inspiring demos that adapt to the user preference, give them a look if you're curious about times when this media query is valuable.
Learn more about @media (prefers-reduced-transparency) .
Interaction is a cornerstone of digital experiences. It helps users get feedback on what they clicked on and where they are in a virtual space. This year, there have been many exciting features landing which have made interactions easier to compose and implement, enabling smooth user journeys and a more finessed web experience.
View transitions have a huge impact on the user experience of a page. With the View Transitions API, you can create visual transitions between two page states of your Single Page Application. These transitions can be full page transitions, or smaller things on a page such as adding or removing a new item to a list.
At the core of the View Transitions API is the document.startViewTranstion function. Pass in a function that updates the DOM to the new state, and the API takes care of everything for you. It does this by taking a before and after snapshot, then transitioning between the two. Using CSS you can control what gets captured and optionally customize how these snapshots should be animated.
The View Transitions API for Single Page Applications shipped in Chrome 111. Learn more about View Transitions .
Don't let the name of this function fool you. The linear() function (not to be confused with the linear keyword) allows you to create complex easing functions in a simple manner, with the compromise of losing some precision.
Before linear() , which shipped in Chrome 113, it was impossible to create bounce or spring effects in CSS. Thanks to linear() it is possible to approximate these easings by simplifying them to a series of points, then linearly interpolating between these points.
linear() function uses these points and interpolates linearly between them. linear() demo. Learn more about linear() . To create linear() curves, use the linear easing generator .
Many interfaces include scroll interactions, and sometimes the interface needs to synchronize information relevant to the current scroll position, or fetch data based on current state. Before the scrollend event, you had to use an inaccurate timeout method that could fire while the user's finger was still on the screen. With the scrollend event, you have a perfectly timed scrollend event that understands whether a user is still mid gesture or not.
This was important for the browser to own because JavaScript cannot track a fingers presence on the screen during a scroll, the information is just simply not available. Chunks of inaccurate scroll end attempting code can now be deleted and replaced with a browser owned high precision event.
Learn more about scrollend .
Scroll-driven animations are an exciting feature available from Chrome 115. These allow you to take an existing CSS animation or an animation built with the Web Animations API , and couple it to the scroll offset of a scroller. As you scroll up and down–or left and right in a horizontal scroller–the linked animation will scrub forwards and backwards in direct response.
With a ScrollTimeline you can track the overall progress of a scroller, as demonstrated in the following demo. As you scroll to the end of the page, the text reveals itself character by character.
With a ViewTimeline you can track an element as it crosses the scrollport. This works similarly to how IntersectionObserver tracks an element. In the following demo, each image reveals itself from the moment it enters the scrollport until it is at the center.
Because scroll-driven animations work with CSS animations and the Web Animations API, you can benefit from all the advantages these APIs bring. That includes the ability to have these animations run off the main thread. You can now have silky smooth animations, driven by scroll, running off the main thread with just a few lines of extra code–what's not to like?
To learn more about scroll-driven animations check out this article with all the details or visit scroll-driven-animations.style which includes many demos.
When applying a scroll-driven animation through CSS, the lookup mechanism to find the controlling scroller always walks up the DOM tree making it limited to scroll ancestors only. Very often though, the element that needs to be animated is not a child of the scroller but an element located in an entirely different subtree.
To allow the animated element to find a named scroll-timeline of a non-ancestor use the timeline-scope property on a shared parent. This allows the defined scroll-timeline or view-timeline with that name to attach to it, giving it a broader scope. With this in place, any child of that shared parent can use the timeline with that name.
timeline-scope declared on the shared parent, the scroll-timeline declared on the scroller can be found by the element that uses it as its animation-timeline Learn more about timeline-scope .
Another new capability in 2023 is the ability to animate discrete animations, such as animating to and from display: none . From Chrome 116, you can use display and content-visibility in keyframe rules. You can also transition any discrete property at the 50% point rather than at the 0% point. This is achieved with the transition-behavior property using the allow-discrete keyword, or in the transition property as a shorthand.
Learn more about transitioning discrete animations .
The @starting-style CSS rule builds on new web capabilities for animating to and from display: none . This rule provides a way to give an element a "before-open" style that the browser can look up before the element is open on the page. This is very useful for entry animations, and for animating in elements such as a popover or dialog. It can also be useful for any time you are creating an element and want to give it the ability to animate in. Take the following example which animates a popover attribute (see next section) into view and into the top layer smoothly from outside of the viewport.
Learn more about @starting-style and other entry animations.
The new CSS overlay property can be added to your transition to enable elements with top-layer styles—such as popover and dialog —to animate out of the top-layer smoothly. If you don't transition overlay, your element will immediately go back to being clipped, transformed, and covered up, and you won't see the transition happen. Similarly, overlay enables ::backdrop to animate out smoothly when added to a top-layer element.
Learn more about overlay and other exit animations.
2023 was a big year for the intersection of style and HTML components, with popover landing and a lot of work being done around anchor positioning and the future of styling dropdowns. These components make it easier to build common UI patterns without the need to rely on additional libraries or building your own state management systems from the ground up each time.
The Popover API helps you build elements which lay on top of the rest of the page. These could include menus, selection, and tooltips. You can create a simple popover by adding the popover attribute and an id to the element which pops up, and connecting its id attribute to an invoking button using popovertarget="my-popover" . The Popover API supports:
- Promotion to the top layer. Popovers will appear on a separate layer above the rest of the page, so you don't have to play around with z-index.
- Light-dismiss functionality. Clicking outside of the popover area will close the popover and return focus.
- Default focus management. Opening the popover makes the next tab stop inside the popover.
- Accessible keyboard bindings. Hitting the
esckey or double toggling will close the popover and return focus. - Accessible component bindings. Connecting a popover element to a popover trigger semantically.
Another small change to HTML which landed in Chrome and Safari this year, is the ability to add horizontal rule elements ( <hr> tags) into <select> elements to help visually break up your content. Previously, putting an <hr> tag into a select simply would not render. But this year, both Safari and Chrome support this feature, enabling better separation of content within <select> elements.
Learn more about using using hr in select
Stable in all browsers this year, the :user-valid and :user-invalid behave similarly to the :valid and :invalid pseudo-classes, but match a form control only after a user has significantly interacted with the input. A form control that is required and empty will match :invalid even if a user has not started interacting with the page. The same control will not match :user-invalid until the user has changed the input and left it in an invalid state.
With these new selectors, there's no longer a need to write stateful code to keep track of input a user has changed.
Learn more about using user-* form validation pseudo elements .
Browser Support
A common UI pattern on the web is an accordion component. To implement this pattern, you combine a few <details> elements, often visually grouping them to indicate that they belong together.
New in Chrome 120 is support for the name attribute on <details> elements. When this attribute is used, multiple <details> elements that have the same name value form a semantic group. At most one element in the group can be open at once: when you open one of the <details> elements from the group, the previously open one will automatically close. This type of accordion is called an exclusive accordion .
The <details> elements that are part of an exclusive accordion don't necessarily need to be siblings. They can be scattered across the document.
CSS has had such a renaissance in the past few years, and especially during 2023. If you're new to CSS or just want a refresher on the basics, check out our free Learn CSS course along with the other free courses on offer at web.dev.
We wish you a happy holiday season and hope you get a chance to incorporate some of these brilliant new CSS and UI features into your work soon!
⇾ The Chrome UI DevRel Team,