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

Una Kravets

تاریخ انتشار: 14 آگوست 2025

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

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

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

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

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

Popover API: اکنون در پایه است

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

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

Popover API کل چرخه عمر عنصر را مدیریت می کند و ارائه می دهد:

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

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

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

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

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

CSS Anchor Positioning

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

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

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

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

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

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

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

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

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

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

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

چرخ فلک ها

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

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

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

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

شبه عنصر جدید ::scroll-button() که در کروم 135 فرود آمد، به مرورگر می‌گوید دکمه‌های «بعدی» و «قبلی» حالت‌پذیر، قابل دسترسی ایجاد کند. مرورگر به طور خودکار نقش‌های ARIA، ترتیب برگه‌ها و حتی دکمه‌ها را زمانی که به شروع یا پایان می‌رسید غیرفعال می‌کند—همه اینها بدون هیچ جاوا اسکریپت اضافه شده است.

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

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

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

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

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

مشابه دکمه‌های اسکرول، نشانگرهای اسکرول را با انتخاب ویژگی content شروع کنید و یک برچسب قابل دسترسی ارائه دهید. در مثال زیر، یک ویژگی داده برای تنظیم برچسب برای نشانگر اسکرول استفاده شده است. علاوه بر این، با استفاده از ویژگی ::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() در یک عبارت @container به آنها دسترسی داشت. آنها عبارتند از:

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

همه را با هم جمع کردن

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

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

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

درباره چرخ فلک های CSS بیشتر بیاموزید.

هاورکارت های تعاملی

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

پاپاورهای برانگیخته با علاقه با [interestfor]

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

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

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

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

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

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

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

استایل کردن علاقه مندی ها

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

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

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

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

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

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

آینده اعلامی است

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

منابع بیشتر:

• Popover API
• موقعیت یابی لنگر
• ابزار لنگر
• فراخوان فرمان
• منوهای انتخابی قابل تنظیم (RFC)
• چرخ فلک های CSS
• گالری چرخ فلک CSS
• پیکربندی CSS Carousel
• پرس و جوهای وضعیت اسکرول CSS
• Invokers Interest Explainer