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

Una Kravets

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

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

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

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

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

• 115
• 115
• ایکس

منبع

همانطور که از نام آن مشخص است، 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() با مقادیر پیش‌فرض خود، تصویر را نسبت به اسکرولپورت (که در این مثال، 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٪ در حین پیمایش کاهش می یابد. - اندی ویهالیم، مهندس ارشد نرم افزار، Tokopedia."

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

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

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

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

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

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

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

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

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

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

• 111
• 111
• ایکس
• ایکس

منبع

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;
}

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

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

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

• 125
• 125
• ایکس
• ایکس

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

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

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

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

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

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

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

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

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

• 126
• 126
• ایکس
• ایکس

منبع

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

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

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

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

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

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

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

• 117
• 117
• 17.4

منبع

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

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

• 117
• 117
• ایکس
• 17.5

منبع

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

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

• 117
• 117
• ایکس
• ایکس

منبع

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

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

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

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
• ایکس
• ایکس

منبع

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

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

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

با استفاده از ویژگی 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
• ایکس
• 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
• ایکس
• ایکس

نمایش نمایشی نمایشی

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

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
• ایکس
• ایکس

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

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

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

• 123
• 123
• ایکس
• ایکس

وقتی نویسه‌های نقطه‌گذاری در یک ردیف ظاهر می‌شوند، نیمه سمت راست دوره 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 ، که از آنها استفاده می کنند ، به ویژه مفید است :has() برای بلوک های سبک بر اساس محتوای داخلی خود ، مانند بخش مقایسه ، جایی که سبک در صورت وجود برنامه ای تنظیم می شود در بلوک مقایسه کنید ، یا اگر خالی است.

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

نمایش داده های کانتینر

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

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

• 105
• 105
• 110
• 16

منبع

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

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

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

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

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

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

@property

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

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

• 85
• 85
• 16.4

منبع

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

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

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

نتیجه

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

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

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

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