جدیدترین در CSS و وب UI: خلاصه I/O 2024

Una Kravets

پلتفرم وب با نوآوری زنده است، با ویژگی های CSS و وب UI در خط مقدم این تکامل هیجان انگیز است. ما در عصر طلایی برای رابط کاربری وب زندگی می‌کنیم، با ویژگی‌های جدید CSS که با سرعتی که قبلاً ندیده‌ایم در مرورگرها فرود می‌آیند و دنیایی از امکانات را برای ایجاد تجربه‌های وب زیبا و جذاب باز می‌کند. این پست وبلاگ عمیقاً به وضعیت فعلی CSS می پردازد و برخی از متحول کننده ترین ویژگی های جدید را بررسی می کند که نحوه ساخت برنامه های وب را بازتعریف می کند که به صورت زنده در Google I/O 2024 ارائه شده است.

تجربیات تعاملی جدید

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

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

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

• 115
• 115
• 
• x

منبع

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

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

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

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

بصری انیمیشن اسکرول محور

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

کد قبلی یک انیمیشن ساده را تعریف می کند که با تغییر شفافیت و مقیاس یک تصویر در نمای نمایش ظاهر می شود. انیمیشن توسط موقعیت اسکرول هدایت می شود. برای ایجاد این افکت، ابتدا انیمیشن CSS را تنظیم کنید و سپس animation-timeline تنظیم کنید. در این حالت، تابع view() با مقادیر پیش‌فرض خود، تصویر را نسبت به Scrollport (که در این مثال، viewport نیز هست) دنبال می‌کند.

مهم است که پشتیبانی مرورگر و تنظیمات برگزیده کاربر را در نظر داشته باشید، به خصوص برای نیازهای دسترسی. بنابراین، از قانون @supports استفاده کنید تا بررسی کنید که آیا مرورگر از انیمیشن‌های اسکرول‌محور پشتیبانی می‌کند یا خیر، و انیمیشن پیمایش‌محور خود را در یک عبارت ترجیحی کاربر مانند @media (prefers-reduced-motion: no-preference) بپیچید تا به تنظیمات حرکتی کاربران احترام بگذارید. . با انجام این بررسی ها می دانید که سبک های شما کار می کنند و انیمیشن برای کاربر مشکلی ندارد.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

بصری انیمیشن اسکرول محور

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

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

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

Tokopedia اخیراً از انیمیشن های پیمایشی استفاده کرده است تا نوار ناوبری محصول را در حین پیمایش ظاهر کند. استفاده از این API مزایای جدی هم برای مدیریت کد و هم برای عملکرد داشته است.

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

"ما موفق شدیم تا 80٪ از خطوط کد خود را در مقایسه با استفاده از رویدادهای اسکرول JS معمولی کاهش دهیم و مشاهده کردیم که میانگین استفاده از CPU از 50٪ به 2٪ در حین پیمایش کاهش می یابد. - Andy Wihalim، مهندس ارشد نرم افزار، Tokopedia."

آینده افکت های اسکرول

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

و حتی ویژگی‌های اسکرول بیشتری در آینده به مرورگرها می‌آیند. دمو زیر ترکیبی از این ویژگی های آینده را نشان می دهد. از CSS scroll-start-target برای تنظیم تاریخ و زمان اولیه در انتخاب‌کننده‌ها و رویداد جاوا اسکریپت scrollsnapchange برای به‌روزرسانی تاریخ هدر استفاده می‌کند که همگام‌سازی داده‌ها با رویداد قطع‌شده را بی‌اهمیت می‌کند.

نسخه ی نمایشی زنده را در Codepen ببینید

همچنین می توانید با استفاده از رویداد جاوا اسکریپت scrollsnapchanging یک انتخابگر را در زمان واقعی به روز کنید.

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

برای کسب اطلاعات بیشتر درباره شروع کار با انیمیشن‌های پیمایشی، تیم ما به تازگی مجموعه ویدیویی جدیدی را راه‌اندازی کرده است که می‌توانید آن را در کانال یوتیوب Chrome for Developers پیدا کنید. در اینجا، شما اصول اولیه انیمیشن‌های اسکرول را از Bramus Van Damme از جمله نحوه کارکرد این ویژگی، واژگان، روش‌های مختلف برای ایجاد افکت‌ها، و نحوه ترکیب افکت‌ها برای ایجاد تجربیات غنی خواهید آموخت. این یک مجموعه ویدیویی عالی برای بررسی است.

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

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

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

• 111
• 111
• x
• 18

منبع

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

یک تغییر نمای سند مشابه همانطور که در Airbnb دیده می شود.

نمونه کارها از Maxwell Barvian ، انتقال دید بین نماها را به نمایش می گذارد.

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

راه برای فعال کردن سریع ترانزیشن‌های مشاهده در برنامه تک صفحه‌ای شما به سادگی بسته‌بندی یک تعامل با استفاده از document.startViewTransition است و اطمینان از اینکه هر عنصری که در حال انتقال است دارای یک view-transition-name ، درون خطی یا پویا با استفاده از جاوا اسکریپت در حین ایجاد است. گره های DOM

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

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

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

مشاهده کلاس های انتقال

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

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

• 125
• 125
• x
• 

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

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

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

• 125
• 125
• x
• 18

برای مثال، ممکن است بخواهید یک صفحه اصلی به یک صفحه وبلاگ به روشی متفاوت از آن صفحه که به صفحه اصلی متحرک می شود، متحرک شود. یا ممکن است بخواهید صفحات را به روش‌های مختلفی مانند این مثال، از چپ به راست و برعکس، جابه‌جا و خارج کنید. قبل از انجام این کار کثیف بود. می‌توانید برای اعمال سبک‌ها، کلاس‌هایی را به DOM اضافه کنید و سپس باید کلاس‌ها را حذف کنید. View-transition-types مرورگر را قادر می‌سازد تا انتقال‌های قدیمی را به‌جای اینکه از شما بخواهد قبل از شروع موارد جدید این کار را به‌صورت دستی انجام دهید، پاک‌سازی کند و این کار را برای شما انجام دهد.

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

می توانید انواع را در تابع document.startViewTransition خود تنظیم کنید، که اکنون یک شی را می پذیرد. update تابع فراخوانی است که DOM را به روز می کند و types آرایه ای با انواع است.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

انتقال نمایش چند صفحه ای

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

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

• 126
• 126
• x
• 

این مجموعه ویژگی جدید اسناد متقابل شامل تجربیات وب است که در یک مبدا زندگی می کنند، مانند پیمایش از web.dev به web.dev/blog، اما این شامل پیمایش با مبدا متقابل، مانند پیمایش از web.dev به blog.web.dev یا به دامنه دیگری مانند google.com.

یکی از تفاوت‌های اصلی با انتقال‌های نمای همان سند این است که نیازی نیست انتقال خود را با document.startViewTransition() بپیچید. در عوض، با استفاده از CSS @view-transition at-rule، هر دو صفحه درگیر در انتقال view را انتخاب کنید.

@view-transition {
  navigation: auto;
}

برای جلوه سفارشی‌تر، می‌توانید با استفاده از شنونده‌های رویداد pageswap یا pagereveal جدید به جاوا اسکریپت متصل شوید، که به شما امکان دسترسی به شی انتقال view را می‌دهد.

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

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

نمایش انتقال مشاهده در یک برنامه چند صفحه ای. لینک دمو را ببینید.

در آینده، ما در نظر داریم تا انتقال‌های مشاهده را گسترش دهیم، از جمله:

• انتقال‌های محدوده : به شما اجازه می‌دهد یک انتقال را به یک زیردرخت DOM محدود کنید، و بقیه صفحه را قادر می‌سازد همچنان تعاملی باشد و از انتقال‌های چند نمایشی که همزمان اجرا می‌شوند پشتیبانی می‌کند.
• انتقال‌های نمای مبتنی بر اشاره : از حرکت‌های کشیدن یا کشیدن انگشت برای راه‌اندازی انتقال نمای متقابل اسناد برای تجربه‌های بومی‌مانند بیشتر در وب استفاده کنید.
• تطبیق پیمایش در CSS : انتقال نمای متقاطع خود را مستقیماً در CSS خود به عنوان جایگزینی برای استفاده از رویدادهای pageswap و pagereveal در جاوا اسکریپت سفارشی کنید. سخنرانی زیر توسط براموس ون دام را بررسی کنید:

اجزای رابط کاربر با موتور: ساده کردن تعاملات پیچیده

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

یکی از مشکلات بزرگ توسعه دهندگان یک درخواست به ظاهر ساده است: توانایی استایل دادن به منوهای کشویی (عنصر انتخاب). در حالی که در ظاهر ساده به نظر می رسد، این یک مشکل پیچیده است و بسیاری از قطعات پلت فرم را لمس می کند. از طرح‌بندی و رندر گرفته تا اسکرول و تعامل، تا استایل عامل کاربر و ویژگی‌های CSS و حتی تغییرات در خود HTML.

شکستن قطعات یک منتخب

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

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

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

Popover API

ابتدا یک ویژگی جهانی به نام popover ارسال کردیم، که من هیجان زده هستم که اعلام کنم چند هفته پیش به وضعیت اولیه در دسترس رسیده است.

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

• 114
• 114
• 125
• 17

منبع

عناصر Popover با display: none تا زمانی که با فراخوانی مانند دکمه یا با جاوا اسکریپت باز نشود. برای ایجاد یک پاپاور اولیه، ویژگی popover را روی عنصر تنظیم کنید و ID آن را با استفاده از popovertarget به یک دکمه پیوند دهید. اکنون، دکمه فراخوان است،

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

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

با فعال شدن ویژگی popover، مرورگر بسیاری از رفتارهای کلیدی را بدون هیچ گونه اسکریپت اضافی از جمله:

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

مهم: ویژگی popover ذاتاً حاوی هیچ معنای معنایی نیست، بنابراین شما همچنان باید از HTML یا ARIA مناسب برای ارائه معنای متنی بیشتری به عنصر popover استفاده کنید. علاوه بر این، popover بقیه صفحه را خنثی نمی کند تا آن را غیرتعاملی یا تله تمرکز کند. اگر چنین تجربه ای را می خواهید، عنصر <dialog> احتمالا مناسب تر است.

منو در صفحه اصلی GitHub .

حتی ممکن است امروز بدون اینکه متوجه شوید از این API popover استفاده کنید. GitHub popover را در منوی "جدید" صفحه اصلی خود و در نمای کلی بررسی درخواست pull خود پیاده سازی کرد. آنها به تدریج این ویژگی را با استفاده از popover polyfill که توسط Oddbird با پشتیبانی قابل توجهی از Keith Cirkel خود GitHub ساخته شده بود، برای پشتیبانی از مرورگرهای قدیمی تر بهبود دادند.

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

متحرک سازی جلوه های ورود و خروج

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

توانایی متحرک سازی display و content-visibility در یک جدول زمانی کلید فریم.

ویژگی transition-behavior با کلمه کلیدی allow-discrete برای فعال کردن انتقال خصوصیات گسسته مانند display .

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

• 117
• 117
• 129
• 17.4

منبع

قانون @starting-style برای متحرک کردن جلوه های ورودی از display: none و در لایه بالایی .

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

• 117
• 117
• 129
• 17.5

منبع

ویژگی overlay برای کنترل رفتار لایه بالایی در طول یک انیمیشن.

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

• 117
• 117
• x
• x

منبع

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

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

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

ابتدا، @starting-style را راه‌اندازی کنید تا مرورگر بداند از چه سبک‌هایی این عنصر را در DOM متحرک کند. این کار هم برای دیالوگ و هم برای پس زمینه انجام می شود. سپس حالت باز را هم برای دیالوگ و هم برای پس زمینه استایل دهید. برای دیالوگ، از ویژگی open و برای popover از شبه عنصر ::popover-open استفاده می‌کند. در نهایت، opacity ، display ، و overlay با استفاده از کلمه کلیدی allow-discrete متحرک کنید تا حالت انیمیشن که در آن ویژگی‌های گسسته می‌توانند تغییر کنند، فعال شود.

موقعیت لنگر

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

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

• 125
• 125
• x
• x

منبع

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

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

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

با استفاده از ویژگی anchor-name در عنصر لنگر (در این مورد دکمه)، و ویژگی position-anchor در عنصر موقعیت (در این مورد، راهنمای ابزار) یک رابطه موقعیت لنگر در CSS تنظیم کنید. سپس با استفاده از تابع anchor() موقعیت مطلق یا ثابت را نسبت به لنگر اعمال کنید. کد زیر بالای راهنمای ابزار را در پایین دکمه قرار می دهد.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

از طرف دیگر، از anchor-name مستقیماً در تابع anchor استفاده کنید و از ویژگی position-anchor صرفنظر کنید. این می تواند هنگام اتصال به چندین عنصر مفید باشد.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

در نهایت، از کلمه کلیدی جدید anchor-center برای ویژگی های justify و align استفاده کنید تا عنصر قرار گرفته را روی لنگر آن متمرکز کنید.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

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

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

این مثال از تابع لنگر برای تنظیم موقعیت لنگر با استفاده از ویژگی های فیزیکی left ، right و bottom استفاده می کند. هنگامی که ماوس را روی یکی از پیوندها نگه می‌دارید، لنگر هدف تغییر می‌کند، و مرورگر هدف را تغییر می‌دهد تا موقعیت‌یابی را اعمال کند، همچنین رنگ را در همان زمان متحرک می‌کند تا جلوه‌ای منظم ایجاد کند.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

موقعیت یابی inset-area

علاوه بر موقعیت‌یابی مطلق جهت‌دار پیش‌فرض که احتمالاً قبلاً استفاده کرده‌اید، مکانیسم طرح‌بندی جدیدی نیز وجود دارد که به‌عنوان بخشی از API موقعیت‌یابی لنگر به نام ناحیه داخلی قرار گرفته است. ناحیه درونی، قرار دادن عناصر قرار گرفته نسبت به لنگرهای مربوطه را آسان می کند و بر روی یک شبکه 9 سلولی با عنصر لنگر در مرکز کار می کند. به عنوان مثال، inset-area: top عنصر قرار گرفته را در بالا قرار می دهد، و inset-area: bottom عنصر قرار گرفته را در پایین قرار می دهد.

یک نسخه ساده شده از اولین نسخه نمایشی لنگر با inset-area به شکل زیر است:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

می‌توانید این مقادیر موقعیتی را با کلیدواژه‌های span ترکیب کنید تا از موقعیت مرکزی شروع کنید و یا به سمت چپ، به راست یا همه را بچرخانید تا مجموعه کاملی از ستون‌ها یا ردیف‌های موجود را اشغال کنید. همچنین می توانید از ویژگی های منطقی نیز استفاده کنید. برای سهولت در تجسم و انتخاب این مکانیسم طرح‌بندی، این ابزار را در Chrome 125+ بررسی کنید:

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

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

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

موقعیت های لنگر پویا با position-try-options

ایجاد منوها و پیمایش زیر منوها با ترکیبی از پوپاور و موقعیت لنگر بسیار ساده تر است. و هنگامی که با عنصر لنگردار خود به لبه یک درگاه دید برخورد می‌کنید، می‌توانید به مرورگر اجازه دهید که تغییر موقعیت را برای شما نیز انجام دهد. شما می توانید این کار را به چند روش انجام دهید. اولین مورد این است که قوانین موقعیت یابی خود را ایجاد کنید. در این حالت، منوی فرعی ابتدا در سمت راست دکمه "فروشگاه" قرار می گیرد. اما می توانید یک بلوک @position-try برای زمانی که فضای کافی در سمت راست منو وجود ندارد ایجاد کنید و یک شناسه سفارشی از --bottom به آن بدهید. سپس، این بلوک @position-try را با استفاده از position-try-options به لنگر متصل می‌کنید.

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

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

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

در کنار منطق موقعیت یابی صریح، چند کلمه کلیدی وجود دارد که مرورگر در صورت تمایل به برخی تعاملات اساسی مانند چرخاندن لنگر در مسیرهای بلوک یا درون خطی ارائه می کند.

position-try-options: flip-block, flip-inline;

برای یک تجربه ساده ورق زدن، از این مقادیر کلیدواژه برگردان استفاده کنید و از نوشتن یک تعریف position-try تعیین کننده به طور کلی صرف نظر کنید. بنابراین اکنون می توانید تنها با چند خط CSS یک عنصر کاملاً کاربردی و پاسخگوی موقعیت مکانی داشته باشید.

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

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

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

آینده رابط کاربری لایه ای

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

علاوه بر این، یک فراخوان عمومی دیگر ( invoketarget ) برای آزمایش در Canary به لطف کار دو توسعه دهنده شخص ثالث، Keith Cirkel و Luke Warlow وجود دارد. invoketarget از تجربه توسعه‌دهنده اعلامی پشتیبانی می‌کند که popovertarget برای همه عناصر تعاملی، از جمله <dialog> ، <details> ، <video> ، <input type="file"> و غیره نرمال‌سازی شده است.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

انتخاب سبک

با استفاده از popover و anchor با هم، تیم پیشرفت کرده است تا در نهایت امکان انتخاب کشویی قابل تنظیم را فراهم کند. خبر خوب این است که پیشرفت های زیادی صورت گرفته است. خبر بد این است که این API در حال حاضر هنوز در حالت آزمایشی است. با این حال، من برای به اشتراک گذاشتن چند دموی زنده و به روز رسانی در مورد پیشرفت خود هیجان زده هستم و امیدوارم بازخورد شما را دریافت کنم. اول، پیشرفت هایی در مورد نحوه انتخاب کاربران در تجربه انتخابی جدید و قابل تنظیم وجود داشته است. روش فعلی و در حال انجام برای انجام این کار استفاده از یک ویژگی ظاهر در CSS است که روی appearance: base-select . پس از تنظیم ظاهر، تجربه انتخابی جدید و قابل تنظیم را انتخاب خواهید کرد.

select {
  appearance: base-select;
}

توجه: به خاطر داشته باشید، این یک API آزمایشی در این مرحله است و بنابراین احتمالاً این نحو تغییر خواهد کرد.

علاوه بر appearance: base-select ، چند به‌روزرسانی جدید HTML وجود دارد. اینها شامل توانایی قرار دادن گزینه های خود در یک datalist برای سفارشی سازی و توانایی اضافه کردن محتوای غیر تعاملی دلخواه مانند تصاویر در گزینه های شما می شود. شما همچنین به یک عنصر جدید، <selectedoption> دسترسی خواهید داشت، که محتوای گزینه ها را در خود منعکس می کند، سپس می توانید آن را مطابق با نیازهای خود سفارشی کنید. این عنصر واقعا مفید است.

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

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

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

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

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

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

selectedoption .text {
  display: none;
}

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

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

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

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

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

آکاردئون انحصاری

حل استایل انتخابی (و تمام قطعات همراه با آن) تنها جزء رابط کاربری نیست که تیم کروم روی آن تمرکز کرده است. اولین به روز رسانی اجزای اضافی، توانایی ایجاد آکاردئون های انحصاری است که در آن تنها یکی از آیتم های آکاردئون را می توان در یک زمان باز کرد.

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

• 120
• 120
• 130
• 17.2

راه فعال کردن این است که مقدار نام یکسانی را برای چندین عنصر جزئیات اعمال کنید، بنابراین یک گروه متصل از جزئیات ایجاد می شود، بسیار شبیه به یک گروه از دکمه های رادیویی

دمو انحصاری آکاردئون

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid و :user-invalid

یکی دیگر از بهبودهای مؤلفه رابط کاربری، کلاس‌های :user-valid و :user-invalid هستند. اخیراً در همه مرورگرها پایدار است، شبه کلاس‌های :user-valid و :user-invalid شبیه به کلاس‌های شبه :valid و :invalid رفتار می‌کنند، اما تنها پس از اینکه کاربر به طور قابل توجهی با ورودی تعامل داشته باشد، با یک کنترل فرم مطابقت دارد. این بدان معناست که برای تعیین اینکه آیا یک مقدار فرم با آن تعامل داشته است یا "کثیف" شده است، کد کمتری مورد نیاز است، که می تواند برای ارائه بازخورد کاربر بسیار مفید باشد و تعداد زیادی از اسکریپت های لازم برای انجام این کار را کاهش می دهد. گذشته

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

• 119
• 119
• 88
• 16.5

منبع

نمایش نمایشی نسخه ی نمایشی

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

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

field-sizing: content

یکی دیگر از به‌روزرسانی‌های مفید مؤلفه‌ای که اخیراً منتشر شده، field-sizing: content ، که می‌تواند برای تشکیل کنترل‌هایی مانند ورودی‌ها و مناطق متنی اعمال شود. این باعث می شود که اندازه ورودی بسته به محتوای آن بزرگ شود (یا کوچک شود). field-sizing: content می‌تواند مخصوصاً برای قسمت‌های متنی مفید باشد، زیرا دیگر اندازه‌های ثابتی ندارید که ممکن است لازم باشد برای دیدن آنچه در قسمت‌های قبلی درخواست خود در یک کادر ورودی خیلی کوچک نوشته‌اید، به بالا بروید.

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

• 123
• 123
• x
• x

منبع

نمایش نمایشی نسخه ی نمایشی

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

textarea, select, input {
  field-sizing: content;
}

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

<hr> در <select>

امکان فعال کردن <hr> یا عنصر قاعده افقی در انتخاب ها یکی دیگر از ویژگی های جزئی کوچک اما مفید است. در حالی که این کاربرد معنایی چندانی ندارد، به شما کمک می کند تا به خوبی محتوا را در یک لیست انتخابی جدا کنید، به خصوص محتوایی که ممکن است لزوماً نخواهید آنها را با یک optgroup گروه بندی کنید، مانند مقدار placeholder.

اسکرین شات را انتخاب کنید

Live Demo را انتخاب کنید

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

درباره استفاده از hr در انتخاب بیشتر بیاموزید

بهبود کیفیت زندگی

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

لانه سازی با چشم انتظار

تودرتوی CSS بومی سال گذشته در همه مرورگرها قرار گرفت و از آن زمان برای پشتیبانی از lookahead بهبود یافته است، به این معنی که نام عناصر & قبل از آن دیگر الزامی نیست. این باعث می‌شود لانه‌سازی بسیار ارگونومیک‌تر و شبیه به آنچه در گذشته به آن عادت کرده‌ام احساس شود.

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

• 120
• 120
• 117
• 17.2

منبع

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

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

یکی دیگر از تغییرات بسیار خوب، توانایی استفاده از مکانیسم های مرکزی مانند align-content در طرح بندی بلوک است. این بدان معناست که اکنون می‌توانید کارهایی مانند مرکز عمودی در یک div را بدون نیاز به اعمال طرح‌بندی انعطاف‌پذیر یا شبکه‌ای، و بدون عوارض جانبی مانند جلوگیری از فروپاشی حاشیه انجام دهید، که ممکن است از آن الگوریتم‌های طرح‌بندی نخواهید.

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

• 123
• 123
• 125
• 17.4

اسکرین شات

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

div {
  align-content: center;
}

بسته بندی متن: متعادل و زیبا

وقتی صحبت از چیدمان شد، چیدمان متن با افزودن text-wrap: balance و pretty . text-wrap: balance برای بلوک یکنواخت‌تر متن استفاده می‌شود، در حالی که text-wrap: pretty روی کاهش تک‌تنها در خط آخر متن تمرکز می‌کند.

نمایش نمایشی نسخه ی نمایشی

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

در دمو زیر می توانید با کشیدن نوار لغزنده، اثرات balance و pretty را روی عنوان و یک پاراگراف مقایسه کنید. سعی کنید نسخه ی نمایشی را به زبان دیگری ترجمه کنید!

h1 {
  text-wrap: balance;
}

درباره text-wrap: balance بیشتر بیاموزید.

به روز رسانی تایپوگرافی بین المللی

به‌روزرسانی‌های طرح‌بندی تایپوگرافی برای ویژگی‌های متن CJK در سال گذشته به‌روزرسانی‌های خوبی دریافت کردند، مانند ویژگی word-break: auto-phrase که خط را در مرز عبارت طبیعی می‌پیچد.

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

• 119
• 119
• x
• x

مقایسه word-break: normal و word-break: auto-phrase

و text-spacing-trim ، که برای بهبود خوانایی تایپوگرافی چینی، ژاپنی، و کره ای برای نتایج بصری دلپذیرتر، بین نویسه‌های نقطه‌گذاری هسته‌گذاری می‌شود.

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

• 123
• 123
• x
• x

منبع

وقتی نویسه‌های نقطه‌گذاری در یک ردیف ظاهر می‌شوند، نیمه سمت راست نقطه CJK باید حذف شود.

نحو نسبی رنگ

در دنیای تم رنگی، شاهد یک به روز رسانی بزرگ با نحو نسبی رنگ بودیم.

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

نمایش نمایشی نسخه ی نمایشی

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

در دمو زیر می توانید با کشیدن نوار لغزنده، اثرات balance و pretty را روی عنوان و یک پاراگراف مقایسه کنید. سعی کنید نسخه ی نمایشی را به زبان دیگری ترجمه کنید!

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

تابع light-dark()

همراه با تابع light-dark() ، موضوع بندی بسیار پویاتر و ساده تر شده است.

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

• 123
• 123
• 120
• 17.5

منبع

تابع light-dark() یک پیشرفت ارگونومیک است که گزینه های مضمون رنگ را ساده می کند تا بتوانید سبک های تم را به روشی مختصر تر بنویسید ، همانطور که در این نمودار بصری توسط آدام آرگیل بسیار زیبا نشان داده شده است. پیش از این ، برای تنظیم گزینه های موضوع به دو بلوک مختلف کد (موضوع پیش فرض و پرس و جو اولویت کاربر) نیاز دارید. اکنون ، می توانید این گزینه های سبک را برای هر دو مضمون سبک و تاریک در همان خط CSS با استفاده از عملکرد light-dark() بنویسید.

تجسم light-dark() . برای اطلاعات بیشتر به نسخه ی نمایشی مراجعه کنید.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

اگر کاربر یک تم نور را انتخاب کند ، دکمه دارای پس زمینه آبی روشن خواهد بود. اگر کاربر یک موضوع تاریک را انتخاب کند ، دکمه دارای پس زمینه آبی تیره خواهد بود.

:has() انتخاب کننده است

و من از اینکه در مورد UI مدرن صحبت می کنم بدون ذکر یکی از تأثیرگذارترین برجسته های بین المللی از سال گذشته ، که باید این باشد :has() ، در دسامبر سال گذشته در مرورگرها فرود می آید. این API یک تغییر دهنده بازی برای نوشتن سبک های منطقی است.

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

• 105
• 105
• 121
• 15.4

منبع

انتخاب :has() انتخاب کننده شما را قادر می سازد تا بررسی کنید که آیا یک عنصر کودک دارای فرزندان خاص است یا اینکه آن کودکان در وضعیت خاصی قرار دارند ، و اساساً می توانند به عنوان انتخاب کننده والدین نیز عمل کنند.

نسخه ی نمایشی از has() برای استفاده از بلوک های مقایسه بر روی توکوپیدیا استفاده می شود.

:has() قبلاً نشان داده است که برای بسیاری از شرکت ها ، از جمله PolicyBazaar ، که از آنها استفاده می کنند ، به ویژه در بخش Compare ، مانند بخش مقایسه ، که در آن سبک تنظیم می شود ، در صورت وجود برنامه ای ، برای بلوک های سبک :has() . در بلوک مقایسه کنید ، یا اگر خالی است.

"با انتخاب: HAS () ، ما توانستیم اعتبار سنجی مبتنی بر JavaScript از انتخاب کاربر را از بین ببریم و آن را با یک راه حل CSS جایگزین کنیم که یکپارچه برای ما با همان تجربه قبلی کار می کند.

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

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

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

• 105
• 105
• 110
• 16

منبع

Angular به تازگی یک سایت مستندات جدید زیبا را در Angular.dev با استفاده از نمایش داده های کانتینر برای سبک کردن بلوک های هدر بر اساس فضای موجود در صفحه راه اندازی کرده است. بنابراین حتی اگر طرح تغییر کند ، و از یک طرح نوار کناری چند رنگ به یک طرح تک ستونی می رود ، بلوک های هدر می توانند خود سازگار باشند.

angular.dev سایت نمایش داده های کانتینر در کارتهای هدر.

بدون پرس و جوهای کانتینر ، انجام چنین کاری بسیار دشوار بود و به عملکرد آسیب رساند و به ناظران تغییر اندازه و ناظران عنصر نیاز داشت. اکنون ، سبک بودن یک عنصر مبتنی بر اندازه والدین آن بی اهمیت است.

صفحه نمایش آزمایشی

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

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

@property

و سرانجام خیلی زود ، ما از دیدن زمین Property در ابتدا هیجان زده هستیم. این یک ویژگی اصلی برای ارائه معنای معنایی به خصوصیات سفارشی CSS (همچنین به عنوان متغیرهای CSS نیز شناخته می شود) است و ویژگی های تعامل جدیدی را امکان پذیر می کند. @property همچنین معنای متنی ، TypeChecking ، پیش فرض ها و مقادیر برگشتی را در CSS امکان پذیر می کند. باز کردن درها برای ویژگی های حتی قوی تر مانند نمایش داده های سبک. این ویژگی است که قبلاً هرگز امکان پذیر نبود ، و اکنون آنقدر عمق زبان CSS را فراهم می کند.

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

• 85
• 85
• 128
• 16.4

منبع

صفحه نمایش آزمایشی

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

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

نتیجه گیری

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

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

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

برای کسب اطلاعات بیشتر در مورد این ویژگی های جدید هنگام فرود ، در Developer.Chrome.com و Web.Dev دنبال کنید ، جایی که تیم ما آخرین اخبار را در فناوری های وب به اشتراک می گذارد. انیمیشن های محور پیمایش ، مشاهده انتقال ، موقعیت یابی لنگر یا حتی انتخاب قابل انتخاب را امتحان کنید و به ما بگویید که چه فکر می کنید. ما اینجا هستیم تا گوش کنیم و برای کمک به اینجا هستیم.

،

Una Kravets

پلتفرم وب با نوآوری زنده است و دارای ویژگی های CSS و UI وب در خط مقدم این تکامل هیجان انگیز است. ما در یک دوره طلایی برای UI وب زندگی می کنیم ، با ویژگی های جدید CSS با سرعتی که قبلاً ندیده بودیم در مرورگرها فرود می آیند و دنیایی از امکانات را برای ایجاد تجربیات وب زیبا و جذاب باز می کنند. این پست وبلاگ در اعماق وضعیت فعلی CSS فرو می رود و برخی از ویژگی های جدید تغییر بازی را که در حال تعریف مجدد برنامه های وب هستیم ، به صورت زنده در Google I/O 2024 به نمایش می گذارد.

تجربیات تعاملی جدید

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

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

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

• 115
• 115
• 
• x

منبع

همانطور که از نام آن پیداست ، API انیمیشن های محور Scroll به شما امکان می دهد انیمیشن های مبتنی بر پیمایش پویا را بدون تکیه بر ناظران پیمایش یا سایر اسکریپت های سنگین ایجاد کنید.

انیمیشن های پیمایشی را ایجاد کنید

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

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

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

کد قبلی یک انیمیشن ساده را تعریف می کند که با تغییر کدورت و مقیاس یک تصویر در نمای ظاهر می شود. انیمیشن توسط موقعیت پیمایش هدایت می شود. برای ایجاد این اثر ، ابتدا انیمیشن CSS را تنظیم کرده و سپس animation-timeline تنظیم کنید. در این حالت ، عملکرد view() با مقادیر پیش فرض آن ، تصویر را نسبت به Scrollport ردیابی می کند (که در این مورد نیز نمای Viewport است).

مهم است که پشتیبانی مرورگر و ترجیحات کاربر را در ذهن داشته باشید ، به خصوص برای نیازهای دسترسی. بنابراین ، از قانون @supports استفاده کنید تا بررسی کنید که آیا مرورگر از انیمیشن های پیمایشی پشتیبانی می کند ، و انیمیشن محور پیمایش خود را در یک پرس و جو اولویت کاربر مانند @media (prefers-reduced-motion: no-preference) برای احترام به ترجیحات حرکتی کاربران ، بسته بندی کنید. . با انجام این چک ها می دانید که سبک های شما کار خواهد کرد و انیمیشن برای کاربر مشکل ساز نیست.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

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

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

این نسخه ی نمایشی از چند انیمیشن مختلف KeyFrame-هدر ، متن ، نوار NAV و پس زمینه استفاده می کند-سپس انیمیشن مربوط به پیمایش را برای هر یک اعمال می کند. در حالی که هر یک از آنها یک سبک انیمیشن متفاوتی دارند ، همه آنها یک انیمیشن-زمان یکسان ، نزدیکترین پیمایشگر و محدوده انیمیشن یکسان دارند-از بالای صفحه تا 150 پیکسل.

مزایای عملکرد انیمیشن های محور پیمایش

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

Tokopedia به تازگی از انیمیشن های پیمایش محور استفاده کرده است تا نوار ناوبری محصول هنگام پیمایش ظاهر شود. استفاده از این API مزایای جدی هم برای مدیریت کد و هم برای عملکرد داشته است.

انیمیشن های محور پیمایش ، این نوار ناوبری محصول را هنگام حرکت به پایین به سمت توکوپیدیا هدایت می کنند.

"ما موفق شدیم تا 80 ٪ از خطوط کد خود را در مقایسه با استفاده از وقایع معمولی پیمایش JS کاهش دهیم و مشاهده کردیم که میانگین مصرف CPU در حین پیمایش از 50 ٪ به 2 ٪ کاهش می یابد. - اندی Wihalim ، مهندس ارشد نرم افزار ، توکوپدی"

آینده اثرات پیمایش

ما می دانیم که این تأثیرات همچنان وب را به مکانی جذاب تر تبدیل می کند ، و ما در حال فکر کردن در مورد آنچه ممکن است آینده باشد فکر می کنیم. این شامل توانایی نه تنها استفاده از جدول زمانی انیمیشن جدید ، بلکه استفاده از یک نقطه پیمایش برای شروع یک انیمیشن ، به نام انیمیشن های پراکنده است.

و حتی ویژگی های پیمایش بیشتری در آینده به مرورگرها می رسد. نسخه ی نمایشی زیر ترکیبی از این ویژگی های آینده را نشان می دهد. از CSS scroll-start-target برای تنظیم تاریخ و زمان اولیه در انتخاب کنندگان و رویداد JavaScript scrollsnapchange برای به روزرسانی تاریخ هدر استفاده می کند ، و این باعث می شود که همگام سازی داده ها با رویداد Snapped همگام سازی شود.

نسخه ی نمایشی زنده را در Codepen مشاهده کنید

همچنین می توانید در این مورد برای به روزرسانی یک انتخاب کننده در زمان واقعی با رویداد JavaScript scrollsnapchanging ایجاد کنید.

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

برای کسب اطلاعات بیشتر در مورد شروع کار با انیمیشن های محور Scroll ، تیم ما فقط یک سری ویدیویی جدید را راه اندازی کرد که می توانید در Chrome برای کانال YouTube Developers پیدا کنید. در اینجا ، اصول اولیه انیمیشن های مبتنی بر پیمایش را از Bramus van Damme از جمله نحوه عملکرد ویژگی ، واژگان ، روش های مختلف برای ایجاد جلوه ها و نحوه ترکیب جلوه ها برای ایجاد تجربیات غنی یاد خواهید گرفت. این یک سری ویدیویی عالی برای بررسی است.

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

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

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

• 111
• 111
• x
• 18

منبع

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

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

نمونه کارها از ماکسول بارویان ، نمایش نمای نمایش بین نماها.

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

راه فعال کردن سریع انتقال در برنامه تک صفحه ای شما به سادگی بسته بندی تعامل با استفاده از document.startViewTransition ، و اطمینان از هر عنصر موجود در حال انتقال view-transition-name ، خطی یا پویا با استفاده از JavaScript همانطور که ایجاد می کنید ایجاد می کند. گره های DOM.

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

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

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

مشاهده کلاسهای انتقال

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

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

• 125
• 125
• x
• 

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

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

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

• 125
• 125
• x
• 18

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

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

شما می توانید انواع را در document.startViewTransition خود تنظیم کنید. StartViewTransition ، که اکنون یک شی را می پذیرد. update عملکرد پاسخ به تماس است که DOM را به روز می کند ، و types آرایه ای با انواع است.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

انتقال چند صفحه ای

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

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

• 126
• 126
• x
• 

این مجموعه جدید از ویژگی های متقاطع شامل تجربیات وب است که در همان منبعی زندگی می کنند ، مانند پیمایش از Web.dev به Web.dev/blog ، اما این شامل پیمایش متقاطع نیست ، مانند پیمایش از Web.dev به Web.dev blog.web.dev یا به دامنه دیگری مانند Google.com.

یکی از تفاوت های مهم با انتقال نمایش همان مستند در این است که نیازی به بسته بندی انتقال خود با document.startViewTransition() نیست. در عوض ، هر دو صفحه را با استفاده از قانون CSS @view-transition AT در انتقال مشاهده کنید.

@view-transition {
  navigation: auto;
}

برای یک اثر سفارشی تر ، می توانید با استفاده از شنوندگان New pageswap یا pagereveal Event ، در JavaScript قلاب کنید ، که به شما امکان دسترسی به شیء View Transition را می دهد.

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

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

نمایش انتقال مشاهده در یک برنامه چند صفحه ای. به لینک نسخه ی نمایشی مراجعه کنید.

در آینده ، ما قصد داریم در مورد انتقال نمایش گسترش یابیم ، از جمله:

• انتقال Scoped : به شما اجازه می دهد یک انتقال به یک زیرزمین DOM را محدود کنید و بقیه صفحه را قادر می سازد تا تعاملی خود را ادامه دهند و از انتقال چند منظره در همان زمان پشتیبانی می کنند.
• انتقال نمایش ژست محور : از ژست های کشیدن یا کشویی استفاده کنید تا یک انتقال نمایش بین مستند را برای تجربیات بیشتر بومی در وب ایجاد کنید.
• تطبیق ناوبری در CSS : انتقال به طور مستقیم در CSS خود را به طور مستقیم در CSS خود به عنوان جایگزینی برای استفاده از pageswap و رویدادهای pagereveal در JavaScript برای کسب اطلاعات بیشتر در مورد مشاهده انتقال برای برنامه های چند صفحه ای ، از جمله نحوه تنظیم بیشترین عملکرد آنها با پیش تنظیم کنید. ارائه ، صحبت های زیر توسط Bramus van Damme را بررسی کنید:

مؤلفه های UI با موتور: ساده سازی تعامل پیچیده

ساخت برنامه های پیچیده وب هیچ کار ساده ای نیست ، اما CSS و HTML در حال تحول هستند تا این روند بسیار قابل کنترل تر شود. ویژگی ها و پیشرفت های جدید ، ایجاد اجزای UI را ساده می کند و به شما امکان می دهد تا روی ایجاد تجربیات عالی تمرکز کنید. این کار از طریق یک تلاش مشترک با چندین گروه استاندارد و گروه های جامعه ، از جمله کارگروه CSS ، گروه UI Community Open و WhatWG (کارگروه فناوری برنامه کاربردی Web HyperText) انجام می شود.

یک نکته بزرگ درد در توسعه دهنده یک درخواست به ظاهر ساده است: توانایی سبک کردن منوهای کشویی (عنصر انتخاب). در حالی که به نظر می رسد روی سطح ساده است ، این یک مشکل پیچیده است ، و بسیاری از قطعات سکو را لمس می کند. از چیدمان و رندر ، گرفته تا پیمایش و تعامل ، از یک ظاهر طراحی شده کاربر و خصوصیات CSS و حتی تغییر در خود HTML.

تجزیه قطعات انتخابی

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

• اتصال صفحه کلید (برای وارد کردن/خروج از تعامل)
• برای برکناری کلیک کنید
• مدیریت فعال Popover (نزدیک سایر پاپ ها هنگام باز شدن)
• مدیریت تمرکز برگه
• تجسم مقدار گزینه انتخاب شده
• سبک تعامل فلش
• مدیریت دولت (باز/بسته)

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

Popover API

ابتدا ما یک ویژگی جهانی به نام popover را ارسال کردیم که من از اینکه چند هفته پیش به وضعیت تازه موجود در ابتدا رسیده ام ، هیجان زده ام.

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

• 114
• 114
• 125
• 17

منبع

عناصر Popover با display: none تا زمانی که با یک دکمه مانند یک دکمه یا با JavaScript باز نشوند. برای ایجاد یک Popover اساسی ، ویژگی Popover را روی عنصر تنظیم کرده و شناسه آن را با استفاده از popovertarget به یک دکمه پیوند دهید. اکنون ، دکمه Invoker است ،

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

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

با فعال شدن ویژگی Popover ، مرورگر بسیاری از رفتارهای کلیدی را بدون هیچ گونه اسکریپت اضافی از جمله:

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

نکته مهم: ویژگی Popover ذاتاً حاوی معنای معنایی نیست ، بنابراین شما هنوز هم باید از HTML یا ARIA مناسب استفاده کنید تا معنای متنی تری را به عنصر پوپور ارائه دهید. علاوه بر این ، Popover بقیه صفحه را بی اثر نمی کند تا آن را غیر متقابل یا تله تمرکز کند. اگر می خواهید آن نوع تجربه ، یک عنصر <dialog> احتمالاً مناسب تر است.

منو در صفحه اصلی GitHub .

شما حتی ممکن است امروز از این API POPOVER استفاده کنید بدون اینکه متوجه شوید. Github Popover را در منوی "جدید" صفحه اصلی خود و در نمای کلی بررسی درخواست خود اجرا کرد. آنها با استفاده از Popover Polyfill ، ساخته شده توسط Oddbird با پشتیبانی قابل توجهی از Keith Cirkel خود Github ، برای پشتیبانی از مرورگرهای قدیمی تر ، این ویژگی را با استفاده از Popover Polyfill ساخته شده اند.

وی گفت: "ما با مهاجرت به پوپور توانستیم به معنای واقعی کلمه 1000 خط کد کد را کاهش دهیم. پوپور با از بین بردن نیاز به مبارزه با شماره های Z-index به ما کمک می کند ... داشتن رابطه صحیح درختی که با رفتار دکمه اعلامی ایجاد شده است ، و رفتارهای تمرکز ایجاد شده در سیستم طراحی ما به طور قابل توجهی آسانتر می شود تا الگوهای را به روش صحیح اجرا کند .- Keith Cirkel ، مهندس نرم افزار ، Github "

انیمیشن جلوه های ورود و خروج

هنگامی که Popovers دارید ، احتمالاً می خواهید تعامل را اضافه کنید. چهار ویژگی تعامل جدید وجود دارد که در یک سال گذشته برای حمایت از انیمیشن پوپورها به زمین نشست. این موارد عبارتند از:

امکان تحریک display و content-visibility در یک جدول زمانی KeyFrame.

خاصیت transition-behavior با کلمه کلیدی allow-discrete برای فعال کردن انتقال خصوصیات گسسته مانند display .

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

• 117
• 117
• 129
• 17.4

منبع

قانون @starting-style برای تحریک جلوه های ورود از display: none و به لایه بالایی .

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

• 117
• 117
• 129
• 17.5

منبع

خاصیت پوشش برای کنترل رفتار لایه بالا در طی یک انیمیشن.

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

• 117
• 117
• x
• x

منبع

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

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

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

ابتدا ، @starting-style تنظیم کنید ، به طوری که مرورگر می داند چه سبک هایی را برای تحریک این عنصر در DOM از آن قرار می دهد. این کار هم برای گفتگو و هم برای پس زمینه انجام می شود. سپس حالت باز را هم برای گفتگو و هم برای پس زمینه سبک کنید. برای یک گفتگو ، این از ویژگی open و برای یک پوپور ، ::popover-open Pseue-Element استفاده می کند. سرانجام ، با استفاده از کلید واژه allow-discrete ، opacity ، display و overlay را تحریک کنید تا حالت انیمیشن را فعال کنید که در آن خصوصیات گسسته بتوانند انتقال پیدا کنند.

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

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

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

• 125
• 125
• x
• x

منبع

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

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

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

با استفاده از ویژگی anchor-name در عنصر لنگرگاه (در این مورد دکمه) و خاصیت position-anchor در عنصر موقعیت یابی (در این حالت ، ابزار ابزار) یک رابطه قرار داده شده در CSS ایجاد کنید. سپس با استفاده از عملکرد anchor() موقعیت یابی مطلق یا ثابت را نسبت به لنگر اعمال کنید. کد زیر قسمت بالای ابزار را به پایین دکمه قرار می دهد.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

از طرف دیگر ، از نام لنگر مستقیم در عملکرد لنگر استفاده کنید و از ویژگی position-anchor استفاده کنید. این می تواند هنگام لنگر انداختن به چندین عنصر مفید باشد.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

در آخر ، از کلمه کلیدی جدید anchor-center برای ویژگی های justify و align استفاده کنید تا عنصر موقعیت یافته را به لنگر خود متمرکز کنید.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

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

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

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

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

موقعیت یابی inset-area

علاوه بر موقعیت پیش فرض جهت مطلق پیش فرض که احتمالاً قبلاً از آن استفاده کرده اید ، یک مکانیزم طرح جدید وجود دارد که به عنوان بخشی از API موقعیت یابی لنگر به نام inset reast فرود آمده است. منطقه Inset قرار دادن عناصر موقعیتی نسبت به لنگرهای مربوطه را آسان می کند و روی یک شبکه 9 سلولی با عنصر لنگرگاه در مرکز کار می کند. به عنوان مثال ، inset-area: top عنصر موقعیتی را در قسمت بالا قرار می دهد و inset-area: bottom عنصر موقعیتی را در پایین قرار می دهد.

یک نسخه ساده از نسخه ی نمایشی لنگر اول با inset-area به نظر می رسد:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

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

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

موقعیت های لنگر پویا با position-try-options

منوها و ناوبری های زیرمنو با ترکیبی از موقعیت یابی پوور و لنگر بسیار ساده تر هستند. و ، هنگامی که با عنصر لنگرگاه خود به لبه منظره برخورد کردید ، می توانید به مرورگر اجازه دهید که موقعیت یابی را برای شما نیز انجام دهد. شما می توانید این کار را به چند روش انجام دهید. اولین مورد ایجاد قوانین موقعیت یابی خود است. در این حالت ، زیرمنو در ابتدا در سمت راست دکمه "فروشگاه" قرار می گیرد. اما می توانید یک بلوک @position-try را ایجاد کنید زیرا فضای کافی در سمت راست منو وجود ندارد ، و به آن شناسه سفارشی از --bottom می دهد. سپس ، شما این بلوک @position-try را با استفاده position-try-options به لنگر وصل می کنید.

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

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

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

برای یک تجربه تلنگر ساده ، از این مقادیر کلمات کلیدی تلنگر استفاده کنید و از نوشتن یک تعریف position-try در کل استفاده کنید. بنابراین اکنون می توانید یک عنصر با لنگرگاه پاسخگو به موقعیت مکانی کاملاً کاربردی با فقط چند خط CSS داشته باشید.

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

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

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

آینده UI لایه بندی شده

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

علاوه بر این ، یکی دیگر از برنامه های عمومی Invoker ( invoketarget ) در آینده برای آزمایش در قناری به لطف کار دو توسعه دهنده شخص ثالث ، کیت سیرکل و لوک وارلو وجود دارد. invoketarget از تجربه توسعه دهنده اعلامی پشتیبانی می کند که popovertarget popovers را فراهم می کند ، که برای همه عناصر تعاملی نرمال می شود ، از جمله <dialog> ، <details> ، <video> ، <input type="file"> و موارد دیگر.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

SELECT قابل انتخاب

این تیم با استفاده از popover و anchor در کنار هم پیشرفت کرده است و در نهایت امکان پذیرش یک کشویی انتخابی قابل تنظیم را فراهم می کند. خبر خوب این است که پیشرفت زیادی داشته است. خبر بد این است که این API در حال حاضر هنوز در یک وضعیت آزمایشی قرار دارد. با این حال ، من هیجان زده ام که برخی از نسخه های نمایشی زنده و به روزرسانی های خود را به اشتراک بگذارم و امیدوارم برخی از بازخورد شما را بدست آورم. اول ، پیشرفت در نحوه انتخاب کاربران به تجربه جدید و قابل تنظیم انتخاب شده است. روش فعلی و کار در حال پیشرفت برای انجام این کار ، استفاده از یک ویژگی ظاهر در CSS است که appearance: base-select . پس از تنظیم ظاهر ، شما به یک تجربه انتخاب جدید و قابل تنظیم انتخاب می کنید.

select {
  appearance: base-select;
}

توجه: به خاطر داشته باشید ، این یک API آزمایشی در این مرحله است و بنابراین احتمالاً این نحو تغییر می کند.

علاوه بر appearance: base-select ، چند به روزرسانی جدید HTML وجود دارد. این موارد شامل امکان بسته بندی گزینه های شما در یک datalist برای شخصی سازی و امکان اضافه کردن محتوای غیر تعاملی دلخواه مانند تصاویر در گزینه های شما است. همچنین به یک عنصر جدید ، <selectedoption> دسترسی خواهید داشت ، که محتوای گزینه ها را به خودی خود منعکس می کند ، که می توانید پس از آن به نیازهای خود سفارشی کنید. این عنصر واقعاً مفید است.

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

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

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

کد زیر سفارشی سازی <selectedoption> را در UI Gmail نشان می دهد ، جایی که یک نماد بصری نشان دهنده نوع پاسخ انتخاب شده برای صرفه جویی در فضا است. برای تمایز یک ظاهر طراحی شده گزینه از یک ظاهر طراحی پیش نمایش می توانید از سبک های نمایشی اصلی در selectedoption استفاده کنید. در این حالت ، متن ، که در این گزینه نشان داده شده است می تواند از نظر بصری در selectedoption پنهان شود.

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

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

selectedoption .text {
  display: none;
}

یکی از بزرگترین مزایا در استفاده مجدد از عنصر <select> برای این API سازگاری به عقب است. در این کشور انتخاب می کنید ، می توانید یک UI سفارشی با تصاویر پرچم را در گزینه هایی برای استفاده آسان تر کاربر از محتوا مشاهده کنید. از آنجا که مرورگرهای غیر پشتیبانی شده خطوطی را که نمی فهمند نادیده می گیرند ، مانند دکمه سفارشی ، دیتاشال ، SelectedOption و تصاویر موجود در گزینه ها ، بازپرداخت مشابه UI پیش فرض فعلی خواهد بود.

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

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

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

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

آکاردئون منحصر به فرد

حل یک ظاهر طراحی شده انتخاب (و تمام قطعاتی که با آن همراه هستند) تنها مؤلفه UI نیست که تیم Chrome روی آن تمرکز کرده است. اولین به روزرسانی مؤلفه اضافی امکان ایجاد آکاردئونهای اختصاصی است که در آن فقط یکی از موارد موجود در آکاردئون می تواند در یک زمان باز شود

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

• 120
• 120
• 130
• 17.2

روش فعال کردن این امر ، استفاده از همان مقدار نام برای عناصر چند جزئیات است ، از این رو ایجاد یک گروه از جزئیات متصل ، دقیقاً مانند گروهی از دکمه های رادیویی

نسخه ی نمایشی آکاردئون اختصاصی

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid و :user-invalid

یکی دیگر از پیشرفت های مؤلفه UI عبارتند از :user-valid و :user-invalid . پایدار در کلیه مرورگرها اخیراً ، :user-valid :user-invalid به طور مشابه با :valid و :invalid رفتار می کنند ، اما کنترل فرم را فقط پس از اینکه کاربر به طور قابل توجهی با ورودی تعامل دارد ، مطابقت می دهد. This means significantly less code is needed to determine if a form value has been interacted with, or has become “dirty”, which can be very useful for providing user feedback, and reduces a lot of scripting that would be necessary to do this in the گذشته

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

• 119
• 119
• 88
• 16.5

منبع

Demo Screencast

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Learn more about using user-* form validation pseudo-elements .

field-sizing: content

Another handy component update that has landed recently is field-sizing: content , which can be applied to form controls like inputs and textareas. This enables the size of the input to grow (or shrink) depending on its contents. field-sizing: content can be particularly handy for textareas, as you no longer are resolved to fixed sizes where you may need to scroll up to see what you wrote in the earlier parts of your prompt in a too-small input box.

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

• 123
• 123
• x
• x

منبع

Demo Screencast

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

textarea, select, input {
  field-sizing: content;
}

Learn more about field sizing .

<hr> in <select>

The ability to enable the <hr> , or horizontal rule element in selects is another small but useful component feature. While this doesn't have much semantic use, it does help you nicely separate content within a select list, especially content that you might not necessarily want to group with an optgroup, like a placeholder value.

Select Screenshot

Select Live Demo

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Learn more about using using hr in select

Quality-of-life improvements

We're constantly iterating, and it's not just for interactions and components. There are many other quality of life updates that have landed in the past year.

Nesting with lookahead

Native CSS nesting landed in all browsers last year, and has since improved to support lookahead, which means the & before element names is no longer a requirement. This makes nesting feel so much more ergonomic and similar to what I have been used to in the past.

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

• 120
• 120
• 117
• 17.2

منبع

One of my favorite things about CSS nesting is that it enables you to visually block components, and within those components include states and modifiers, such as container queries and media queries. Previously, I was in the habit of grouping all of these queries at the bottom of the file for specificity purposes. Now, you can write them in a way that makes sense, right next to the rest of your code

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Align-content for block layout

Another really nice change is the ability to use centering mechanisms like align-content in block layout. This means you can now do things like vertical centering within a div without needing to apply flex or grid layout, and without side effects like preventing margin-collapse, that you may not want from those layout algorithms.

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

• 123
• 123
• 125
• 17.4

اسکرین شات

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

div {
  align-content: center;
}

Text-wrap: balance and pretty

Speaking of layout, text layout got a nice improvement with the addition of text-wrap: balance and pretty . text-wrap: balance is used for a more uniform block of text, while text-wrap: pretty focuses on reducing singletons on the last line in the text.

Demo Screencast

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

In the following demo you can compare by dragging the slider, the effects of balance and pretty on a heading and a paragraph. Try translating the demo into another language!

h1 {
  text-wrap: balance;
}

Learn more about text-wrap: balance .

International typography updates

Typographic layout updates for CJK text features got a lot of nice updates in the past year, like the word-break: auto-phrase feature that wraps the line at the natural phrase boundary.

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

• 119
• 119
• x
• x

Comparison of word-break: normal and word-break: auto-phrase

And text-spacing-trim , which applies kerning between punctuation characters to improve the readability of Chinese, Japanese, and Korean typography for more visually pleasing results.

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

• 123
• 123
• x
• x

منبع

When punctuation characters appear in a row, the right-half of the CJK period should be removed.

Relative color syntax

In the world of color theming, we saw a big update with relative color syntax.

In this example, the colors here use Oklch-based theming. As the hue-value adjusts based on the slider, the entire theme changes. This can be achieved with relative color syntax. The background uses the primary color, based on the hue, and adjusts the lightness, chroma, and hue channels to adjust its value. --i is the sibling index in the list for the gradation of values, showing how you can combine stepping with custom properties and relative color syntax to build themes.

Demo Screencast

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

In the following demo you can compare by dragging the slider, the effects of balance and pretty on a heading and a paragraph. Try translating the demo into another language!

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

تابع light-dark()

Along with the light-dark() function, theming has become much more dynamic and simplified.

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

• 123
• 123
• 120
• 17.5

منبع

The light-dark() function is an ergonomic improvement that simplifies color theming options so that you can write theme styles in a more concise way, as demonstrated so nicely in this visual diagram by Adam Argyle. Before, you would need two different blocks of code, (your default theme and a user preference query), to set up theme options. Now, you can write these style options for both light and dark themes in the same line of CSS using the light-dark() function.

Visualization of light-dark() . See demo for more.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

If the user selected a light theme, the button will have a light blue background. If the user selected a dark theme, the button will have a dark blue background.

:has() selector

And I would be remiss to talk about modern UI without mentioning one of the most impactful interop highlights from the past year, which has to be the :has() selector, landing across browsers in December of last year. This API is a game-changer for writing logical styles.

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

• 105
• 105
• 121
• 15.4

منبع

The :has() selector enables you to check if a child element has specific children, or if those children are in a specific state, and essentially can function as a parent selector as well.

Demo of has() being used to style comparison blocks on Tokopedia .

:has() has already shown to be particularly useful for many companies , including PolicyBazaar, who use :has() to style blocks based on their interior content, such as in the compare section, where the style adjusts if there is a plan to compare in the block, or if its empty.

“With the :has() selector, we were able to eliminate JavaScript based validation of the user's selection and replace it with a CSS solution which is working seamlessly for us with the same experience as before.–Aman Soni, Tech Lead, PolicyBazaar”

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

Another key addition to the web that is now newly available and growing in usage is container queries, which enable the ability to query an element parent's intrinsic size to apply styles: a much more fine-toothed comb than media queries, which only query the viewport اندازه

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

• 105
• 105
• 110
• 16

منبع

Angular recently launched a beautiful new documentation site on angular.dev using container queries to style the header blocks based on their available space on the page. So even if the layout changes, and goes from a multicolumn sidebar layout to a single-column layout, the header blocks can self-adjust.

Angular.dev site showcasing container queries in the header cards.

Without container queries, doing something like this was quite hard to achieve, and damaging for performance, requiring resize observers and element observers. Now, it's trivial to style an element based on its parent size.

Demo Screencast

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

Recreating the Angular header card container query.

@property

And finally very soon, we are excited to see @property land in Baseline. This is a key feature for providing semantic meaning to CSS custom properties (also known as CSS variables), and enables a slew of new interaction features. @property also enables contextual meaning, typechecking, defaults, and fallback values in CSS. Opening the doors for even more robust features like range style queries. This is a feature that was never possible before, and now provides so much depth to the language of CSS.

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

• 85
• 85
• 128
• 16.4

منبع

Demo Screencast

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

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

نتیجه گیری

With all of these new powerful UI capabilities landing across browsers, the possibilities are endless. Novel interactive experiences with scroll-driven animations and view transitions make the web more fluid and interactive in ways we've never seen before. And next level UI components make it easier than ever to build robust, beautifully customized components without ripping out the entire native experience. And finally, quality of life improvements in architecture, layout, typography, and responsive design not only solve the little big things, but also give developers the tools they need to build complex interfaces that work on a variety of devices, form factors, and user نیاز دارد.

These new features you should be able to remove third-party scripting for performance-heavy features like scrollytelling and tethering elements to each other with anchor positioning, build fluid page transitions, finally style dropdowns, and improve the overall structure of your code natively.

It's never been a better time to be a web developer. There hasn't been so much energy and excitement since the announcement of CSS3. Features we've needed but have only dreamed of actually landing in the past, are finally becoming a reality and a part of the platform. And it's because of your voice that we're able to prioritize and finally bring these capabilities to life. We're working on making it easier to do the hard, tedious stuff natively so you can spend more time building the things that matter–like the core features and design details that set your brand apart.

To learn more about these new features as they land, follow along at developer.chrome.com and web.dev, where our team shares the latest news in web technologies. Try out scroll driven animations, view transitions, anchor positioning, or even the stylable select, and let us know what you think. We're here to listen and we're here to help.