موارد جدید در رابط کاربری وب: خلاصه I/O 2025

اونا کراوتس

منتشر شده: ۱۴ آگوست ۲۰۲۵

با نزدیک شدن به پایان فصل رویدادهای Google I/O، این پست خلاصه‌ای از مهم‌ترین نکات برجسته CSS و رابط کاربری وب که در رویدادهای امسال ما به اشتراک گذاشته شده است را ارائه می‌دهد.

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

تیم کروم، با همکاری سایر فروشندگان مرورگر، نهادهای استاندارد مانند CSSWG و WHATWG و گروه‌های اجتماعی مانند Open UI، بر روی ساده‌سازی پیاده‌سازی این الگوهای اساسی رابط کاربری تمرکز دارد.

منوهای انتخابی قابل تنظیم

عنصر <select> برای فرم‌ها ضروری است، اما ساختار داخلی آن از گذشته توسط مرورگر محافظت شده است، که این امر، استایل‌دهی CSS منسجم و جامع را تقریباً غیرممکن می‌کند. برای ساخت یک <select> بهتر، نیاز به درک بلوک‌های سازنده آن - API Popover و API موقعیت‌یابی لنگر CSS - است.

API مربوط به Popover: اکنون در حالت پایه

یک منوی کشویی سفارشی به یک کادر شناور از گزینه‌ها نیاز دارد که بالاتر از سایر عناصر رابط کاربری ظاهر شود، نادیده گرفتن آن آسان باشد و فوکوس را به درستی مدیریت کند. API Popover همه این موارد را مدیریت می‌کند و از امسال، به وضعیت Baseline Newly available رسیده است، به این معنی که در هر مرورگر اصلی پایدار است.

Browser Support

  • کروم: ۱۱۴.
  • لبه: ۱۱۴.
  • فایرفاکس: ۱۲۵.
  • سافاری: ۱۷.

Source

ایجاد یک popover به دو بخش نیاز دارد: یک عنصر trigger (مانند <button> ) و خود عنصر popover. آن‌ها را با دادن یک id به popover و ویژگی [popover] به هم متصل کنید و سپس آن id را در ویژگی [popovertarget] دکمه ارجاع دهید.

API مربوط به Popover کل چرخه حیات عنصر را مدیریت می‌کند و موارد زیر را ارائه می‌دهد:

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

عنصر <dialog> ارتقا می‌یابد

اگرچه popover قدرتمند است، اما همیشه انتخاب درستی نیست. برای مثال، در تعاملات مسدود کردن صفحه که نیاز به بازخورد کاربر دارند، یک <dialog> مودال مناسب‌تر است.

از نظر تاریخی، <dialog> فاقد برخی از امکانات [popover] بود، اما این وضعیت در حال تغییر است. با ویژگی جدید closedby="any" ، پنجره‌های محاوره‌ای مودال اکنون از قابلیت حذف آسان پشتیبانی می‌کنند و هنگامی که کاربر خارج از کادر کلیک می‌کند یا کلید Escape را فشار می‌دهد، بسته می‌شوند.

Browser Support

  • کروم: ۱۳۴.
  • لبه: ۱۳۴.
  • فایرفاکس: ۱۴۱.
  • سافاری: پشتیبانی نمی‌شود.

Source

علاوه بر این، فراخوانی‌کننده‌های فرمان ( [command] و [commandfor] ) روشی اعلانی و بدون جاوا اسکریپت برای اتصال یک دکمه به یک عمل، مانند باز کردن یک کادر محاوره‌ای با command="show-modal" فراهم می‌کنند.

Browser Support

  • کروم: ۱۳۵.
  • لبه: ۱۳۵.
  • فایرفاکس: ۱۴۴.
  • پیش‌نمایش فناوری سافاری: پشتیبانی می‌شود.

Source

<dialog> عنصر + closedby=any + فراخوانی‌کننده‌های فرمان ویژگی [popover]
کاربرد اولیه تعامل مودال (توافق‌نامه‌های کاربر، بازدیدهای دوره‌ای و غیره) رابط کاربری گذرا (منوها، راهنماهای ابزار، کارت‌ها، هشدارهای تست)
قابلیت حذف نور بله بله
تله‌ها تمرکز بله خیر
صفحه بی‌اثرها بله خیر
فعال‌سازی اعلانی بله بله
پیاده‌سازی عنصر ویژگی
رندرها در لایه بالایی بله بله
کاملاً قابل استایل‌دهی بله بله

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

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

از کروم ۱۲۵، می‌توانید از API موقعیت‌یابی لنگر CSS استفاده کنید. این قابلیت جدید به صورت اعلانی یک عنصر را به عنصر دیگر متصل می‌کند و وقتی به لبه صفحه نزدیک می‌شود، به طور خودکار تغییر موقعیت آن را مدیریت می‌کند. این ویژگی بخشی از Interop 2025 است، یک ابتکار عمل بین مرورگری برای دستیابی به ویژگی‌های بسیار درخواستی، به این معنی که می‌توانیم انتظار داشته باشیم که تا پایان سال ۲۰۲۵ در همه مرورگرهای اصلی وجود داشته باشد.

Browser Support

  • کروم: ۱۲۵.
  • لبه: ۱۲۵.
  • پیش‌نمایش فناوری فایرفاکس: پشتیبانی می‌شود.
  • سافاری: ۲۶.

Source

نشان دادن اینکه چگونه بخش‌های مختلف موقعیت‌یابی لنگر با کد مرتبط هستند، مانند اینکه لبه بالایی لنگر، anchor(top) و لبه سمت راست، anchor(right) است.
نموداری که موقعیت‌یابی لنگرهای CSS را نشان می‌دهد.

در حالی که می‌توانید عناصر را به طور صریح با ویژگی‌های anchor-name و position-anchor پیوند دهید، به‌روزرسانی در مشخصات و در کروم ۱۳۳ یک رابطه لنگر ضمنی بین یک <popover> و <button> فراخوانی‌کننده آن ایجاد می‌کند. این کد را بسیار ساده می‌کند و به این معنی است که اکنون می‌توانید popover را با یک خط CSS، مانند: position-area: bottom span-left ، قرار دهید.

ابزار anchor از chrome.dev به شما نشان می‌دهد که چگونه position-area برای بدست آوردن محل مورد نظر خود استفاده کنید:

یک قدم فراتر بروید و با تعریف fallbackها با position-try-fallbacks ، کاری کنید که مرورگر موقعیت anchorهای شما را تغییر دهد و از خارج شدن آنها از صفحه جلوگیری کند. دموی زیر یک popover را نشان می‌دهد که از این ویژگی برای منطق تغییر موقعیت داخلی استفاده می‌کند:


یک <select> واقعاً قابل تنظیم

با وجود این بلوک‌های سازنده در نسخه‌های قبلی، استایل‌دهی وب-بومی برای عناصر <select> بالاخره در کروم ۱۳۴ از راه رسیده است. این شامل یک ویژگی جدید appearance ، شبه عناصر جدید و عنصر <selectedcontent> می‌شود.

برای باز کردن قفل سفارشی‌سازی، appearance: base-select; را به عنصر <select> و شبه عنصر جدید آن ::picker(select) اعمال کنید که لیست کشویی گزینه‌ها را هدف قرار می‌دهد. این کار بخش‌های داخلی جدیدی را برای استایل‌بندی در معرض نمایش قرار می‌دهد، از جمله:

  • <selectedcontent> : محتوای گزینه انتخاب شده نشان داده شده در دکمه را نشان می‌دهد.
  • ::picker-icon : آیکون فلش کشویی
  • <option>:checked و ::checkmark : برای استایل‌دهی به گزینه انتخاب شده و نشانگر تیک آن
نموداری که بخش‌های جدید select، مانند ::picker-icon، selectedcontent و ::picker(select) را نشان می‌دهد.
بخش‌هایی از انتخاب قابل تنظیم.

این امکان محتوای غنی در گزینه‌ها و کنترل دقیق بر روی نمایش را فراهم می‌کند. برای مثال، می‌توانید یک آیکون و زیرنویس را در لیست گزینه‌ها نمایش دهید اما با استفاده display: none within selectedcontent آنها را در حالت بسته پنهان کنید.


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

چرخ و فلک‌ها

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

شروع کار با اسکرولرها

برای ساخت یک چرخ و فلک، با لیستی از آیتم‌ها شروع می‌کنید که از کانتینر خود سرریز می‌شوند. برای پنهان کردن نوار پیمایش افقی در عین حال که محتوا قابل پیمایش است، scrollbar-width: none استفاده کنید. علاوه بر این، برای اینکه پیمایشگر "سریع" به نظر برسد، scroll-snap-type و scroll-snap-align استفاده کنید، که تضمین می‌کند آیتم‌ها با پیمایش کاربر در جای خود قرار می‌گیرند.

قبلی و بعدی با دکمه ::scroll-button

Browser Support

  • کروم: ۱۳۵.
  • لبه: ۱۳۵.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

شبه عنصر جدید ::scroll-button() که در کروم ۱۳۵ قرار گرفت، به مرورگر می‌گوید دکمه‌های "بعدی" و "قبلی" با قابلیت دسترسی و حالت‌دهی ایجاد کند. مرورگر به طور خودکار نقش‌های صحیح ARIA و ترتیب تب‌ها را مدیریت می‌کند و حتی دکمه‌ها را هنگام رسیدن به ابتدا یا انتهای صفحه غیرفعال می‌کند - همه این‌ها بدون هیچ جاوا اسکریپت اضافه‌ای انجام می‌شود.

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

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}
تصویر چرخ فلک با دکمه‌های چپ و راست
تصویر دکمه اسکرول ساده در دموی قبلی.

این دکمه‌ها را استایل‌دهی کنید و با استفاده از CSS anchor positioning، موقعیت آنها را نسبت به چرخ فلک والدشان تنظیم کنید، که روش پیشنهادی برای انجام این کار است.

پیمایش مستقیم با ::scroll-marker

Browser Support

  • کروم: ۱۳۵.
  • لبه: ۱۳۵.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

برای نشانگرهای نقطه‌ای یا تصاویر بندانگشتی، شبه‌عناصر ::scroll-marker و ::scroll-marker-group نشانگرهای ناوبری را مستقیماً با آیتم‌های موجود در ظرف پیمایش شما مرتبط می‌کنند. مرورگر با این گروه مانند یک tablist رفتار می‌کند و ناوبری صفحه‌کلید را مدیریت می‌کند.

مشابه دکمه‌های اسکرول، نشانگرهای اسکرول را با انتخاب ویژگی content آغاز کنید و یک برچسب قابل دسترس ارائه دهید. در مثال زیر، از یک ویژگی داده برای تنظیم برچسب برای نشانگر اسکرول استفاده شده است. علاوه بر این، با استفاده از ویژگی scroll ::scroll-marker-group scroll-marker-group قرار دهید. در نهایت، نشانگر فعال را با استفاده از شبه کلاس جدید :target-current استایل دهید. در اینجا مثالی از اینکه این برای یک چرخ فلک ساده چگونه به نظر می‌رسد، آورده شده است:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}
تصویر چرخ فلک با نشانگرهای نقطه‌ای در پایین
تصویری از نشانگر پیمایش اولیه در نسخه آزمایشی قبلی.

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

ویژگی‌های جدید CSS مربوط به اسکرول به شما امکان می‌دهد چرخ و فلک‌های پویاتر و تعاملی‌تری ایجاد کنید. کوئری scroll-state یک کوئری رسانه‌ای جدید است که بر اساس وضعیت اسکرول اعمال می‌شود. سه نوع مختلف از کوئری‌های scroll-state وجود دارد که می‌توان با استفاده از scroll-state() در یک دستور @container به آنها دسترسی داشت. آنها عبارتند از:

  • scroll-state(snapped) : با زمانی تطبیق می‌یابد که یک عنصر در موقعیت "snapped" قرار داشته باشد. در carouselها، این زمانی است که عنصری در مرکز carousel قرار دارد.
  • scroll-state(stuck) : به یک عنصر، مانند یک هدر، وقتی والدش چسبنده می‌شود، استایل می‌دهد.
  • scroll-state(scrollable) : نشانگرهای بصری مانند محو شدن را اضافه کنید تا نشان دهید محتوای بیشتری برای پیمایش وجود دارد.

همه چیز را با هم جمع کردن

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


این چرخ فلک تعاملی، کوئری‌های scroll-state() ، ::scroll-button ، ::scroll-marker ، موقعیت‌یابی لنگر CSS و :target-current را ترکیب می‌کند.

علاوه بر این، می‌توانید از یک ویژگی جدید به نام interactivity برای کمک به کاربران در تمرکز بر محتوای فعال استفاده کنید. interactivity: inert به کاربر اجازه می‌دهد تا با استفاده از CSS، inertness را اعمال کند، آیتم‌های چرخ فلک خارج از صفحه را غیرقابل فوکوس کند و آنها را از درخت دسترسی حذف کند.

درباره Carousel های CSS بیشتر بدانید.

کارت‌های شناور تعاملی

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

پاپ‌اوورهای بر اساس علایق با [interestfor]

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

برای تبدیل یک پاپ‌اوور مبتنی بر کلیک به یک پاپ‌اوور مبتنی بر علاقه‌مندی، یک عنصر فراخوانی کننده ایجاد کنید که می‌تواند یک <button> یا یک <a> باشد و به آن یک ویژگی [interestfor] بدهید که برابر با id عنصر [popover] باشد. در HTML به این شکل است:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

مرورگر تمام منطق رویدادهای پیچیده، از جمله موارد زیر را مدیریت می‌کند:

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

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

استایل‌دهی به فراخوان‌های علاقه‌مندی

فراخوانی‌کننده‌های Interest شامل برخی قابلیت‌های جدید هستند. یکی از آنها قابلیت کنترل تأخیرهای ورود و خروج با استفاده از یک ویژگی CSS به نام interest-target-delay است. مورد دیگر قابلیت استایل‌دهی به عنصر فراخوانی‌کننده بر اساس اینکه آیا interest دارد یا خیر، با استفاده از شبه‌کلاس :has-interest .

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}


popover="hint" و رابط کاربری چند منظوره

یک قطعه کلیدی از پازل برای کاربران علاقه‌مند، نوع جدید popover است: popover="hint" . تفاوت اصلی آن با سایر popoverها این است که یک popover اشاره‌ای، هنگام باز شدن، سایر popoverها را نمی‌بندد. این برای راهنماهای ابزار یا کارت‌های پیش‌نمایش که باید بدون بستن یک منو یا پنجره چت از قبل باز شده ظاهر شوند، عالی است.

Browser Support

  • کروم: ۱۳۳.
  • لبه: ۱۳۳.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

popover=auto popover=manual popover=hint
خاموش کردن سبک (از طریق کلیک یا کلید esc ) بله خیر بله
سایر عناصر popover=auto را هنگام باز شدن می‌بندد. بله خیر خیر
هنگام باز شدن، سایر عناصر popover=hint را می‌بندد. بله خیر بله
هنگام باز شدن، سایر عناصر popover=manual را می‌بندد. خیر خیر خیر
می‌توان با استفاده از جاوا اسکریپت ( showPopover() یا hidePopover() ) پنجره‌ی پاپ‌اوور را باز و بسته کرد. بله بله بله
مدیریت فوکوس پیش‌فرض برای توقف تب بعدی بله بله بله
می‌تواند با popovertargetaction پنهان یا تغییر وضعیت دهد بله بله بله
می‌تواند درون popover والد باز شود تا والد باز بماند بله بله بله

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


آینده، توصیفی است

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

منابع بیشتر: