آنچه در CSS و UI جدید است: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

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

در اینجا 20 مورد از هیجان انگیزترین و تاثیرگذارترین ویژگی هایی که اخیراً به وجود آمده یا به زودی ارائه می شوند آورده شده است:

• پرس و جوهای کانتینر
• پرس و جوهای سبک
• انتخابگر :has()
• n ام میکروسینتکس
• text-wrap: balance
• initial-letter
• واحدهای نمای پویا
• فضاهای رنگی گسترده
• color-mix()
• لانه سازی
• لایه های آبشاری
• سبک های محدوده
• توابع مثلثاتی
• ویژگی های تبدیل فردی
• پاپاور
• موقعیت لنگر
• منوی انتخابی
• انتقال اموال گسسته
• انیمیشن های اسکرول محور
• مشاهده انتقال

پاسخگوی جدید

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

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

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

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

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

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

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

مشخصات پرس و جوی کانتینر همچنین به شما امکان می دهد تا مقادیر سبک یک ظرف والد را پرس و جو کنید. این در حال حاضر تا حدی در Chrome 111 پیاده‌سازی شده است، جایی که می‌توانید از ویژگی‌های سفارشی CSS برای اعمال سبک‌های کانتینر استفاده کنید.

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

می‌توانید بیشتر بیاموزید و نمایش‌های نمایشی بیشتری را در پست وبلاگ ما در مورد سؤالات سبک مشاهده کنید.

:has()

در مورد ویژگی های قدرتمند و پویا صحبت می کنیم، انتخابگر :has() یکی از قدرتمندترین قابلیت های جدید CSS است که در مرورگرهای مدرن فرود می آید. با :has() می‌توانید با بررسی اینکه آیا عنصر والد حاوی فرزندان خاصی است یا آن فرزندان در وضعیت خاصی هستند، استایل‌ها را اعمال کنید. این بدان معناست که ما اساساً اکنون یک انتخابگر والد داریم.

با استفاده از مثال پرس و جو کانتینر، می توانید :has() استفاده کنید تا کامپوننت ها را حتی پویاتر کنید. در آن، یک مورد با عنصر "ستاره" یک پس‌زمینه خاکستری روی آن اعمال می‌شود و موردی با یک چک باکس علامت‌دار، پس‌زمینه آبی را دریافت می‌کند.

اما این API به انتخاب والدین محدود نمی شود. شما همچنین می توانید به هر کودکی در درون والدین استایل دهید. به عنوان مثال، زمانی که مورد دارای عنصر ستاره باشد، عنوان پررنگ است. این کار با .item:has(.star) .title انجام می شود. استفاده از انتخابگر :has() به شما امکان دسترسی به عناصر والد، عناصر فرزند و حتی عناصر خواهر و برادر را می‌دهد، و این یک API واقعا انعطاف‌پذیر است که هر روز موارد استفاده جدیدی ظاهر می‌شود.

بیشتر بیاموزید و دموهای بیشتری را کاوش کنید، این پست وبلاگ را در مورد :has() بررسی کنید.

n ام نحو

اکنون پلتفرم وب دارای گزینش فرزند n پیشرفته تری است. نحو پیشرفته nth-child یک کلمه کلیدی جدید ("of") می دهد که به شما امکان می دهد از ریز نحو موجود An+B با زیرمجموعه خاصی که در آن جستجو کنید استفاده کنید.

اگر از nth-child معمولی مانند :nth-child(2) در کلاس ویژه استفاده کنید، مرورگر عنصری را انتخاب می کند که کلاس ویژه روی آن اعمال شده است و همچنین فرزند دوم است. این برخلاف :nth-child(2 of .special) است که ابتدا تمام عناصر .special را از قبل فیلتر می کند و سپس مورد دوم را از لیست انتخاب می کند.

این ویژگی را در مقاله ما در مورد nth-of syntax بیشتر بررسی کنید.

text-wrap: balance

انتخابگرها و پرس‌وجوهای سبک تنها مکان‌هایی نیستند که می‌توانیم منطق را در سبک‌های خود جاسازی کنیم. تایپوگرافی یکی دیگر است. از Chrome 114، می‌توانید با استفاده از ویژگی text-wrap با مقدار balance ، از متوازن کردن متن برای سرفصل‌ها استفاده کنید.

برای متعادل کردن متن، مرورگر به طور موثر جستجوی باینری را برای کوچکترین عرض انجام می دهد که هیچ خط اضافی ایجاد نمی کند و در یک پیکسل CSS (نه پیکسل نمایش) متوقف می شود. برای به حداقل رساندن بیشتر مراحل در جستجوی باینری، مرورگر با 80٪ از عرض خط متوسط ​​شروع می شود.

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

initial-letter

یکی دیگر از پیشرفت های خوب در تایپوگرافی وب، initial-letter است. این ویژگی CSS به شما کنترل بهتری برای استایل دراپ درپوش داخلی می دهد.

شما از initial-letter در عنصر شبه :first-letter استفاده می کنید تا مشخص کنید: اندازه حرف بر اساس تعداد خطوطی که اشغال می کند. بلوک آفست نامه یا "سینک" برای جایی که نامه قرار می گیرد.

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

واحدهای نمای پویا

یکی از مشکلات رایجی که امروزه توسعه دهندگان وب با آن مواجه هستند، اندازه دقیق و ثابت تمام نمای کامل، به ویژه در دستگاه های تلفن همراه است. به‌عنوان یک توسعه‌دهنده، می‌خواهید 100vh (100 درصد ارتفاع درگاه دید) به معنای «به اندازه نما باشد»، اما واحد vh مواردی مانند جمع کردن نوارهای ناوبری در تلفن همراه را در نظر نمی‌گیرد، بنابراین گاهی اوقات خیلی طولانی می‌شود و باعث اسکرول می شود.

برای حل این مشکل، اکنون مقادیر واحد جدیدی در پلتفرم وب داریم، از جمله: - ارتفاع و عرض نمای کوچک (یا svh و svw )، که کوچکترین اندازه نمای فعال را نشان می دهد. - ارتفاع و عرض نمای بزرگ ( lvh و lvw ) که بزرگترین اندازه را نشان می دهد. - ارتفاع و عرض نمای پویا ( dvh و dvw ).

واحدهای نمای پویا زمانی که نوار ابزارهای پویا مرورگر اضافی، مانند آدرس در بالا یا نوار برگه در پایین، قابل مشاهده هستند و زمانی که قابل مشاهده نیستند، تغییر می کنند.

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

فضاهای رنگی گسترده

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

اما اکنون طیف وسیعی از فضاهای رنگی جدید را در پلتفرم وب داریم که شامل REC2020، P3، XYZ، LAB، OKLAB، LCH و OKLCH می‌شود. با فضاهای رنگی جدید وب و موارد دیگر در راهنمای رنگ HD آشنا شوید.

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

ابزارهای زیادی برای رنگ موجود است! همه بهبودهای شیب عالی را نیز از دست ندهید. حتی یک ابزار کاملاً جدید وجود دارد که Adam Argyle ساخته شده است تا به شما کمک کند انتخابگر رنگ وب و سازنده گرادیان جدید را امتحان کنید، آن را در gradient.style امتحان کنید.

color-mix()

گسترش در فضاهای رنگی گسترش یافته تابع color-mix() است. این تابع از اختلاط دو مقدار رنگ برای ایجاد مقادیر جدید بر اساس کانال‌های ترکیب رنگ‌ها پشتیبانی می‌کند. فضای رنگی که در آن ترکیب می‌کنید بر نتایج تأثیر می‌گذارد. کار در یک فضای رنگی ادراکی تر مانند oklch از طیف رنگی متفاوتی نسبت به چیزی مانند srgb عبور می کند.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

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

امروز می‌توانید این را در Chrome DevTools با یک نماد نمودار venn پیش‌نمایش بسیار زیبا در پنجره سبک‌ها مشاهده کنید.

نمونه ها و جزئیات بیشتر را در پست وبلاگ ما در مورد color-mix مشاهده کنید یا این زمین بازی ()color-mix را امتحان کنید.

مبانی CSS

ایجاد قابلیت‌های جدید که برنده‌های کاربر واضح است، بخشی از معادله است، اما بسیاری از ویژگی‌هایی که در کروم فرود می‌آیند، هدفشان بهبود تجربه توسعه‌دهنده و ایجاد معماری CSS قابل اعتمادتر و سازمان‌یافته‌تر است. این ویژگی ها عبارتند از تودرتو CSS، لایه های آبشاری، سبک های محدوده، توابع مثلثاتی و ویژگی های تبدیل فردی.

لانه سازی

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

شما همچنین می توانید Media Queries را در داخل قرار دهید، که همچنین به این معنی است که می توانید Queries Container را در داخل قرار دهید. در مثال زیر، یک کارت از طرح‌بندی عمودی به طرح‌بندی افقی تغییر می‌کند، اگر عرض کافی در ظرف آن وجود داشته باشد:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

تنظیم طرح به flex زمانی اتفاق می افتد که ظرف بیشتر (یا مساوی) 480px فضای درون خطی در دسترس داشته باشد. مرورگر به سادگی آن سبک نمایش جدید را در صورت وجود شرایط اعمال می کند.

برای اطلاعات بیشتر و مثال‌ها، پست ما را در CSS nesting بررسی کنید.

لایه های آبشاری

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

لایه‌های آبشاری این مشکل را با دادن کنترل به کاربران بر روی اینکه کدام لایه‌ها دارای اولویت بالاتری نسبت به سایرین هستند، حل می‌کنند، به این معنی که کنترل دقیق‌تری بر روی زمان اعمال سبک‌های شما.

در این مقاله درباره نحوه استفاده از لایه های آبشاری بیشتر بدانید.

CSS محدوده

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

در اینجا، ما یک عنصر .title را به یک .card اختصاص می دهیم. این امر از تداخل عنصر عنوان با سایر عناصر .title در صفحه مانند عنوان پست وبلاگ یا عنوان دیگر جلوگیری می کند.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

می‌توانید @scope با محدودیت‌های محدوده به همراه @layer در این نسخه نمایشی زنده ببینید:

درباره @scope در مشخصات css-cascade-6 بیشتر بیاموزید.

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

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

در دمو زیر، نقاط حول یک نقطه مرکزی می چرخند. به جای چرخاندن هر نقطه حول مرکز خودش و سپس حرکت آن به بیرون، هر نقطه بر روی محورهای X و Y ترجمه می شود. فواصل روی محورهای X و Y با در نظر گرفتن cos() و به ترتیب sin() زاویه --angle تعیین می شود.

برای اطلاعات بیشتر در مورد این موضوع به مقاله ما در مورد توابع مثلثاتی مراجعه کنید.

ویژگی های تبدیل فردی

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

در گذشته، برای اعمال تابع‌های فرعی برای مقیاس، چرخش و ترجمه یک عنصر UI، به تابع تبدیل تکیه می‌کردید. این شامل تکرارهای زیادی بود و به ویژه هنگام اعمال چندین تبدیل در زمان های مختلف در انیمیشن خسته کننده بود.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

اکنون می‌توانید با جدا کردن انواع تبدیل‌ها و اعمال آن‌ها به صورت جداگانه، تمام این جزئیات را در انیمیشن‌های CSS خود داشته باشید.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

با این کار، تغییرات در ترجمه، چرخش یا مقیاس می تواند به طور همزمان با نرخ های مختلف تغییر در زمان های مختلف در طول انیمیشن اتفاق بیفتد.

برای اطلاعات بیشتر به این پست در مورد توابع تبدیل فردی مراجعه کنید.

اجزای قابل تنظیم

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

1. قابلیت بازشو داخلی با کنترل‌کننده‌های رویداد، ساختار DOM اعلامی و پیش‌فرض‌های قابل دسترس.
2. یک CSS API برای اتصال دو عنصر به یکدیگر برای فعال کردن موقعیت لنگر.
3. یک مؤلفه منوی کشویی قابل تنظیم، برای زمانی که می‌خواهید به محتوای یک انتخاب استایل دهید.

پاپاور

پاپاور API به عناصر برخی جادوهای داخلی پشتیبانی از مرورگر مانند:

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

همه اینها به این معنی است که جاوا اسکریپت کمتری برای ایجاد همه این قابلیت ها و ردیابی همه این حالت ها باید نوشته شود.

ساختار DOM برای popover اعلانی است و می تواند به وضوح نوشته شود که به عنصر popover شما یک id و ویژگی popover بدهید. سپس، آن شناسه را با عنصری که popover را باز می کند، همگام می کنید، مانند دکمه ای با ویژگی popovertarget :

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

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

به روزترین مستندات مربوط به پاپاورها در حال حاضر در MDN یافت می شود.

موقعیت لنگر

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

می‌توانید با تابع anchor() یک tooltip در مرکز ایجاد کنید، با استفاده از عرض لنگر برای قرار دادن tooltip در 50٪ موقعیت x انکر. سپس، از مقادیر موقعیت‌یابی موجود برای اعمال بقیه سبک‌های قرارگیری استفاده کنید.

اما چه اتفاقی می‌افتد اگر پاپ‌اور بر اساس روشی که آن را قرار داده‌اید در ویوپورت قرار نگیرد؟

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

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

در این پست وبلاگ درباره موقعیت لنگر بیشتر بیاموزید.

<selectmenu>

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

برای ساختن آن نمونه selectmenu سمت چپ، با نقاط رنگی مربوط به رنگی که در یک رویداد تقویم نشان داده می شود، می توانید آن را به صورت زیر بنویسید:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

انتقال اموال گسسته

برای اینکه همه اینها به آرامی پاپاورها را به داخل و خارج منتقل کنند، وب به روشی برای متحرک سازی خصوصیات گسسته نیاز دارد. اینها ویژگی هایی هستند که معمولاً در گذشته قابل متحرک سازی نبودند، مانند متحرک سازی به و از لایه بالا و متحرک سازی به و از display: none .

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

نسخه ی نمایشی پاپاور زیر، پاپاورها را به داخل و خارج با استفاده از :popover-open برای حالت باز، @starting-style برای حالت قبل از باز کردن متحرک می کند، و یک مقدار تبدیل را مستقیماً برای حالت after-open-is-closed به عنصر اعمال می کند. . برای اینکه همه اینها با نمایش کار کند، باید به ویژگی transition اضافه شود، مانند:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

فعل و انفعالات

که ما را به تعاملات می رساند، آخرین ایستگاه در این گشت و گذار از ویژگی های رابط کاربری وب.

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

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

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

این API از مجموعه‌ای از کلاس‌های جاوا اسکریپت و ویژگی‌های CSS پشتیبانی می‌کند که به شما این امکان را می‌دهد تا به راحتی انیمیشن‌های پیمایش محور را ایجاد کنید.

برای هدایت یک انیمیشن CSS توسط اسکرول از ویژگی‌های جدید scroll-timeline ، view-timeline و animation-timeline استفاده کنید. برای راه اندازی یک JavaScript Web Animations API، یک نمونه ScrollTimeline یا ViewTimeline را به عنوان گزینه timeline به Element.animate() ارسال کنید.

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

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

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

View Transition API تغییر DOM را در یک مرحله آسان می کند، در حالی که یک انتقال متحرک بین دو حالت ایجاد می کند. اینها می توانند محو شدن های ساده بین نماها باشند، اما می توانید نحوه انتقال بخش های جداگانه صفحه را نیز کنترل کنید.

View Transitions را می توان به عنوان یک بهبود پیشرونده استفاده کرد: کد خود را که DOM را با هر روشی به روز می کند، بردارید و آن را در view transition API با یک نسخه بازگشتی برای مرورگرهایی که از این ویژگی پشتیبانی نمی کنند بپیچید.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

آنچه که انتقال باید به نظر برسد از طریق CSS کنترل می شود

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

همانطور که در این نسخه ی نمایشی فوق العاده توسط Maxi Ferreira نشان داده شده است، سایر تعاملات صفحه، مانند پخش یک ویدیو، در حالی که یک انتقال نمایش اتفاق می افتد، به کار خود ادامه می دهند.

مشاهده انتقال‌ها در حال حاضر با برنامه‌های تک صفحه‌ای (SPA) از Chrome 111 کار می‌کند. پشتیبانی از برنامه‌های چند صفحه‌ای در حال کار است. برای اطلاعات بیشتر، راهنمای کامل انتقال نمای ما را بررسی کنید تا شما را از طریق همه این موارد راهنمایی کند.

نتیجه

در اینجا در developer.chrome.com با آخرین فرودها در CSS و HTML همراه باشید و ویدیوهای I/O را برای فرودهای بیشتر وب بررسی کنید.