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

Una Kravets

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

تجربیات تعاملی نوین

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

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

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

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

مشابه نحوه‌ی عملکرد انیمیشن‌های مبتنی بر زمان در پلتفرم، اکنون می‌توانید از پیشرفت اسکرول یک اسکرولر برای شروع، مکث و معکوس کردن یک انیمیشن استفاده کنید. بنابراین وقتی به جلو اسکرول می‌کنید، پیشرفت انیمیشن را خواهید دید و وقتی به عقب اسکرول می‌کنید، برعکس عمل می‌کند. این به شما امکان می‌دهد تا جلوه‌های بصری جزئی یا تمام صفحه را با عناصری که به داخل و داخل پنجره‌ی نمایش متحرک می‌شوند، که به عنوان 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%;
}

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

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

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

«ما موفق شدیم تا ۸۰٪ از خطوط کد خود را در مقایسه با استفاده از رویدادهای اسکرول مرسوم جاوااسکریپت کاهش دهیم و مشاهده کردیم که میانگین استفاده از CPU هنگام اسکرول از ۵۰٪ به ۲٪ کاهش یافته است.» - اندی ویهالیم، مهندس ارشد نرم‌افزار، توکوپدیا

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

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

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

همچنین می‌توانید بر اساس این، یک انتخابگر را به صورت بلادرنگ با رویداد scrollsnapchanging جاوا اسکریپت به‌روزرسانی کنید.

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

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

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

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

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

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

راه فعال‌سازی سریع انتقال نماها در برنامه تک‌صفحه‌ای شما به سادگیِ قرار دادن یک تعامل با استفاده از 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;
}

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

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

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

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

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

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

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

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

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

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

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

@view-transition {
  navigation: auto;
}

برای جلوه‌ای سفارشی‌تر، می‌توانید با استفاده از شنونده‌های رویداد جدید pageswap یا pagereveal ، جاوا اسکریپت را وارد کنید که به شما امکان دسترسی به شیء گذار نما را می‌دهد.

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

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

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

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

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

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

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

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

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

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

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

API مربوط به Popover

ابتدا یک ویژگی سراسری به نام popover ارسال کردیم که با کمال افتخار اعلام می‌کنم چند هفته پیش به وضعیت پایه (Baseline) رسید و به تازگی در دسترس قرار گرفته است.

عناصر Popover با استفاده از display: none پنهان می‌شوند تا زمانی که با یک فراخوانی‌کننده مانند یک دکمه یا با جاوا اسکریپت باز شوند. برای ایجاد یک popover ساده، ویژگی popover را روی عنصر تنظیم کنید و شناسه آن را با استفاده از 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 را به تریگر آن متصل می‌کند.

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

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

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

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

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

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

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

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

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

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 استفاده می‌شود. در نهایت، با استفاده از کلمه کلیدی allow-discrete ، opacity ، display و overlay را متحرک کنید تا حالت انیمیشن فعال شود، جایی که ویژگی‌های گسسته می‌توانند تغییر مکان دهند.

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

پاپ‌اوور تازه شروع داستان بود. یک به‌روزرسانی بسیار هیجان‌انگیز این است که پشتیبانی از موقعیت‌یابی لنگر اکنون از کروم ۱۲۵ در دسترس است.

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

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

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

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

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

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

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 موقعیت‌یابی لنگر (anchor positioning API) به نام inset area ارائه شده است. Inset area قرار دادن عناصر موقعیت‌یابی شده نسبت به لنگرهای مربوطه را آسان می‌کند و روی یک شبکه ۹ خانه‌ای با عنصر لنگر در مرکز کار می‌کند. به عنوان مثال، inset-area: top عنصر موقعیت‌یابی شده را در بالا قرار می‌دهد و inset-area: bottom عنصر موقعیت‌یابی شده را در پایین قرار می‌دهد.

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

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

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

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

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

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

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

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

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

به عنوان گام بعدی برای 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>

علاوه بر این، به لطف کار دو توسعه‌دهنده شخص ثالث، کیث سیرکل و لوک وارلو، یک فراخوانی‌کننده عمومی دیگر ( invoketarget ) برای آینده وجود دارد که برای آزمایش در Canary در دسترس است. 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 به طور همزمان، تیم در حال پیشرفت در فعال کردن یک منوی کشویی قابل تنظیم برای انتخاب (select) است. خبر خوب این است که پیشرفت زیادی حاصل شده است. خبر بد این است که این API در حال حاضر هنوز در حالت آزمایشی است. با این حال، من مشتاقم که برخی از دموهای زنده و به‌روزرسانی‌ها را در مورد پیشرفت خود به اشتراک بگذارم و امیدوارم از بازخورد شما بهره‌مند شوم. اول، پیشرفت‌هایی در مورد نحوه انتخاب کاربران در تجربه جدید و قابل تنظیم برای انتخاب وجود داشته است. روش فعلی و در حال انجام برای انجام این کار، استفاده از یک ویژگی appearance در CSS است که روی appearance: base-select تنظیم شده است. پس از تنظیم appearance، شما یک تجربه جدید و قابل تنظیم برای انتخاب (select) را انتخاب خواهید کرد.

select {
  appearance: base-select;
}

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

نسخه نمایشی بصری

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

selectedoption .text {
  display: none;
}

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

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

آکاردئون اختصاصی

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

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

<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 -valid و :user-invalid هستند. شبه‌کلاس‌های :user-valid و :user-invalid اخیراً در همه مرورگرها پایدار شده‌اند، رفتاری مشابه شبه‌کلاس‌های :valid و :invalid دارند، اما تنها پس از اینکه کاربر تعامل قابل توجهی با ورودی داشته باشد، با یک کنترل فرم مطابقت پیدا می‌کنند. این بدان معناست که برای تعیین اینکه آیا با مقدار فرم تعامل شده است یا "dirty" شده است، به کد بسیار کمتری نیاز است، که می‌تواند برای ارائه بازخورد به کاربر بسیار مفید باشد و اسکریپت‌نویسی زیادی را که در گذشته برای انجام این کار لازم بود، کاهش می‌دهد.

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(...);
}

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

field-sizing: content

یکی دیگر از به‌روزرسانی‌های مفید کامپوننت که اخیراً ارائه شده است، field-sizing: content است که می‌تواند برای کنترل‌های فرم مانند inputها و textareaها اعمال شود. این قابلیت امکان افزایش (یا کاهش) اندازه input را بسته به محتوای آن فراهم می‌کند. field-sizing: content می‌تواند به ویژه برای textareaها مفید باشد، زیرا دیگر مجبور نیستید اندازه‌های ثابتی را در نظر بگیرید که در آن ممکن است لازم باشد برای دیدن آنچه در قسمت‌های قبلی prompt خود در یک کادر ورودی بسیار کوچک نوشته‌اید، به بالا اسکرول کنید.

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

درباره اندازه فیلد بیشتر بدانید.

<hr> در <select>

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

انتخاب تصویر صفحه

نسخه آزمایشی زنده را انتخاب کنید

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

درباره استفاده از using hr در select بیشتر بدانید

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

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

لانه سازی با نگاه به آینده

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

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

یکی دیگر از تغییرات واقعاً خوب، امکان استفاده از مکانیزم‌های مرکزبندی مانند align-content در طرح‌بندی بلوکی است. این بدان معناست که اکنون می‌توانید کارهایی مانند مرکزبندی عمودی درون یک div را بدون نیاز به اعمال طرح‌بندی flex یا grid و بدون عوارض جانبی مانند جلوگیری از margin-collapse که ممکن است از آن الگوریتم‌های طرح‌بندی نخواهید، انجام دهید.

تصویر صفحه

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

div {
  align-content: center;
}

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

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

h1 {
  text-wrap: balance;
}

درباره text-wrap: balance بیشتر بدانید.

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

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

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

نحو رنگ نسبی

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.

: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() function

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

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.

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.

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.

: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”

Container queries

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

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.

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.

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

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

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.