این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

آنچه در 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 واقعا انعطاف‌پذیر است که هر روز موارد استفاده جدیدی ظاهر می‌شود.

توجه: برای جلوگیری از کند شدن عملکرد رندر در درخت‌های DOM بزرگ، توصیه می‌کنیم تا حد امکان دامنه این انتخابگر را نزدیک‌تر کنید. به عنوان مثال، استفاده از :has() برای بررسی تطابق در عنصر ریشه html کندتر از بررسی مطابقت در یک نوار ناو یا در یک عنصر کارت با درخت کوچکتر است.

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

DevTools یک خط وسعت را در انتخابگر رنگ نشان می دهد.

ابزارهای زیادی برای رنگ موجود است! همه بهبودهای شیب عالی را نیز از دست ندهید. حتی یک ابزار کاملاً جدید وجود دارد که 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);

7 فضای رنگی (srgb، خطی-srgb، lch، oklch، lab، oklab، xyz) که هر کدام نتایج متفاوتی دارند. بسیاری از آنها صورتی یا بنفش هستند، تعداد کمی در واقع هنوز آبی هستند. — نسخه ی نمایشی را امتحان کنید

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

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

اسکرین شات 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 است.

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

تصویر آبشار

اسکرین شات از پروژه Codepen — پروژه را در Codepen کاوش کنید.

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

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 کار می کنیم و سه راه حل را برای شروع شناسایی کرده ایم:

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

پاپاور 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 را برای فرودهای بیشتر وب بررسی کنید.

Una Kravets

Bramus

Adam Argyle

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

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

پاسخگوی جدید

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

پشتیبانی مرورگر

منبع

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

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

پشتیبانی مرورگر

منبع

@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() بررسی کنید.

n ام نحو

پشتیبانی مرورگر

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

`text-wrap: balance`

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

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

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

`initial-letter`

پشتیبانی مرورگر

منبع

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

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

پشتیبانی مرورگر

نمایش تعداد زیادی نوار پیمایش

واحدهای نمای جدید تجسم شدند

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

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

پشتیبانی مرورگر

منبع

پنج مثلث انباشته با رنگ های مختلف برای کمک به نشان دادن رابطه و اندازه هر یک از فضاهای رنگی جدید.

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

DevTools یک خط گام در انتخاب رنگ نشان می دهد.

ابزارهای بیشتری برای رنگ در دسترس است! همه پیشرفت های بزرگ شیب را نیز از دست ندهید. حتی یک ابزار کاملاً جدید وجود دارد که 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);

7 فضای رنگی (SRGB ، خطی-SRGB ، LCH ، OKLCH ، LAB ، OKLAB ، XYZ) هر کدام نتایج متفاوتی نشان داده اند. بسیاری از آنها صورتی یا بنفش هستند ، تعداد کمی از آنها هنوز هم آبی هستند. — نسخه ی نمایشی را امتحان کنید

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

امروز می توانید این را در عمل در Chrome Devtools با یک نماد پیش نمایش بسیار خوب ون در صفحه سبک مشاهده کنید.

تصویر DevTools با نماد رنگ و رنگ Venn Diagram

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

مبانی CSS

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

لانه سازی

پشتیبانی مرورگر

منبع

CSS Nesting ، چیزی که مردمی از SASS دوست دارند ، و یکی از بهترین درخواست های توسعه دهنده CSS برای سالها ، سرانجام در حال فرود روی سکوی وب است. لانه سازی به توسعه دهندگان این امکان را می دهد تا با فرمت گروهی موجز تر و گروهی بنویسند که باعث کاهش افزونگی می شود.

.card {}
.card:hover {}

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

  }
}

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

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

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

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

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

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

پشتیبانی مرورگر

منبع

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

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

تصویر آبشار

تصویر از پروژه Codepen — پروژه را در Codepen کاوش کنید.

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

CSS با محدوده

پشتیبانی مرورگر

منبع

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

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

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

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

تصویر کارت از نسخه ی نمایشی

در مورد @scope در مشخصات CSS-Cascade-6 اطلاعات بیشتری کسب کنید.

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

پشتیبانی مرورگر

منبع

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

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

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

خصوصیات تبدیل فردی

پشتیبانی مرورگر

منبع

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

در گذشته ، شما به تابع تبدیل متکی هستید تا عملکردهای زیر را برای مقیاس ، چرخش و ترجمه یک عنصر 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 کار می کنیم و سه راه حل برای شروع کار را شناسایی کرده ایم:

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

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

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

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

نمونه ای از پوپور

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

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

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

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

شما می توانید با استفاده از عرض از لنگر ، یک ابزار ابزار متمرکز با تابع anchor() ایجاد کنید تا بتوانید ابزار ابزار را در 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>`

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

نمونه هایی از Selectmenus

برای ساختن آن به عنوان مثال سمت چپ 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 ، SelectMenus و حتی عناصر موجود مانند دیالوگ یا اجزای سفارشی ، مرورگرها برای پشتیبانی از این انیمیشن ها لوله کشی جدیدی را قادر می سازند.

نسخه ی نمایشی پاپور زیر ، انیمیشن ها را با استفاده از :popover-open for the Open State ، @starting-style برای حالت قبل از باز ، و یک مقدار تبدیل را برای عنصر مستقیماً برای حالت بعد از افتتاحیه استفاده می کند. . برای اینکه همه این کارها را با نمایشگر انجام دهید ، نیاز به اضافه کردن به ویژگی 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;
}

تعاملات

که ما را به تعامل می رساند ، آخرین توقف در این تور از ویژگی های UI وب.

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

انیمیشن های محور پیمایش

پشتیبانی مرورگر

منبع

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

این API از مجموعه ای از کلاس های JavaScript و خواص CSS پشتیبانی می کند که به شما امکان می دهد انیمیشن های محور اعلانی را به راحتی ایجاد کنید.

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

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

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

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

پشتیبانی مرورگر

منبع

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

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

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 کار می کند. پشتیبانی برنامه چند صفحه ای روی آن کار می شود. برای اطلاعات بیشتر ، راهنمای انتقال کامل ما را بررسی کنید تا همه شما را طی کنید.

نتیجه گیری

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