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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

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

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

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

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

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

کوئری‌های استایل

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

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

نحو n ام از

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

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

این ویژگی را در مقاله ما در مورد نحو n ام بیشتر بررسی کنید.

text-wrap: balance

انتخابگرها و کوئری‌های استایل تنها جاهایی نیستند که می‌توانیم منطق را در استایل‌هایمان جاسازی کنیم؛ تایپوگرافی هم یکی دیگر از آنهاست. از کروم ۱۱۴، می‌توانید از text-wrap balancing برای عنوان‌ها استفاده کنید، برای این کار از ویژگی text-wrap به همراه مقدار balance استفاده کنید.

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

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

initial-letter

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

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

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

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

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

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

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

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

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

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

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

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

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

ترکیب رنگ()

تابع 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 امروز با یک آیکون پیش‌نمایش بسیار زیبا از نمودار ون در پنل استایل‌ها مشاهده کنید.

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

مبانی CSS

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

لانه سازی

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

.card {}
.card:hover {}

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

  }
}

شما همچنین می‌توانید کوئری‌های رسانه‌ای (Media Queries ) را به صورت تو در تو قرار دهید، که به این معنی است که می‌توانید کوئری‌های کانتینر (Container Queries) را نیز به صورت تو در تو قرار دهید. در مثال زیر، اگر عرض کافی در کانتینر یک کارت وجود داشته باشد، آن کارت از حالت عمودی (Portrait) به حالت افقی (Landscape) تغییر می‌کند:

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

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

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

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

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

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

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

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

CSS محدود شده

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

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

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

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

برای کسب اطلاعات بیشتر در مورد @scope به مشخصات css-cascade-6 مراجعه کنید.

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

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

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

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

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

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

در گذشته، برای اعمال زیرتابع‌ها جهت تغییر اندازه، چرخش و جابه‌جایی یک عنصر رابط کاربری، به تابع تبدیل (transform) متکی بودید. این کار مستلزم تکرار زیاد بود و به خصوص هنگام اعمال چندین تبدیل در زمان‌های مختلف در انیمیشن، آزاردهنده بود.

.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. یک API CSS برای اتصال دو عنصر به یکدیگر جهت فعال کردن موقعیت‌یابی لنگری.
3. یک کامپوننت منوی کشویی قابل تنظیم، برای زمانی که می‌خواهید محتوای داخل یک انتخاب را استایل‌دهی کنید.

پاپ‌اوور

API مربوط به popover به عناصر، قابلیت‌های جادویی پشتیبانی مرورگر داخلی مانند موارد زیر را ارائه می‌دهد:

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

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

ساختار 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ها را به زور می‌بندد، هنگام باز شدن فوکوس دریافت می‌کند و می‌تواند با نور رد شود. برعکس، عناصر popover=manual هیچ نوع عنصر دیگری را به زور نمی‌بندند، بلافاصله فوکوس دریافت نمی‌کنند و با نور رد نمی‌شوند. آنها از طریق یک ضامن یا عمل بستن دیگر بسته می‌شوند.

جدیدترین مستندات مربوط به popoverها را می‌توانید در MDN پیدا کنید.

موقعیت یابی لنگر

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

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

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

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

.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>

با استفاده از هر دو روش موقعیت‌یابی popover و anchor، می‌توانید منوهای انتخابی کاملاً قابل تنظیم بسازید. گروه جامعه 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 زیر، popoverها را با استفاده از :popover-open برای حالت باز بودن، @starting-style برای حالت قبل از باز بودن، به صورت انیمیشن نمایش می‌دهد و برای حالت بعد از باز بودن، یک مقدار transform را مستقیماً به عنصر اعمال می‌کند. برای اینکه همه این‌ها با display کار کنند، باید به ویژگی 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 استفاده کنید. برای اجرای یک API انیمیشن‌های وب جاوا اسکریپت، یک نمونه ScrollTimeline یا ViewTimeline را به عنوان گزینه timeline به Element.animate() ارسال کنید.

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

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

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

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

انتقال‌های نمایش می‌توانند به عنوان یک بهبود پیش‌رونده استفاده شوند: کدی را که DOM را با هر روشی به‌روزرسانی می‌کند، بردارید و آن را در 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 نشان داده شده است، سایر تعاملات صفحه، مانند پخش ویدیو، در حالی که یک گذار نما (View Transition) در حال رخ دادن است، به کار خود ادامه می‌دهند.

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

نتیجه‌گیری

همین حالا در developer.chrome.com از آخرین اخبار CSS و HTML مطلع شوید و برای اطلاعات بیشتر در مورد وب لندینگ‌ها، ویدیوهای I/O را ببینید.