چه چیزهای جدیدی در رابط کاربری وب وجود دارد؟

براموس
اونا کراوتس

منتشر شده: ۱ ژوئیه ۲۰۲۶

در کنفرانس Google I/O 2026، ما شاهد مجموعه‌ای از به‌روزرسانی‌ها در پلتفرم رابط کاربری وب بودیم. از احترام به ترجیحات کاربر گرفته تا پیاده‌سازی تعاملات طبیعی، هدایت ناوبری، کاهش شلوغی و سازگاری با فرم‌فکتورهای مختلف، وب مدرن ابزارهای فوق‌العاده قدرتمندی را برای توسعه‌دهندگان فراهم می‌کند تا تجربیات کاربری با کیفیت بالا و قابل لمس بسازند.

در اینجا خلاصه‌ای جامع از تمام ویژگی‌های ذکر شده در جلسه «ویژگی‌های جدید رابط کاربری وب» ارائه شده است که توسط مجموعه اصلی اصول UX ما ساختار یافته است.

بخش اول: به ترجیحات کاربر احترام بگذارید

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

۱. contrast-color()

تابع contrast-color() در CSS یک رنگ ورودی را دریافت می‌کند و بسته به اینکه کدام یک کنتراست بالاتری نسبت به رنگ ورودی دارد (بر اساس الگوریتم حداقل کنتراست WCAG AA)، به طور خودکار black یا white را برمی‌گرداند. این امر خوانایی را بدون نیاز به حفظ دستی جفت‌های رنگ متن-پس‌زمینه تضمین می‌کند.

Browser Support

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

Source

درباره contrast-color() بیشتر بدانید

۲. light-dark()

تابع light-dark() در CSS به شما امکان می‌دهد دو مقدار مختلف (رنگ یا تصویر) را برای یک ویژگی، یکی برای حالت روشن و دیگری برای حالت تاریک، در یک اعلان واحد تعیین کنید. مرورگر به طور خودکار رنگ کنتراست صحیح را بر اساس color-scheme فعال (که باید روی :root یا والد روی light ، dark یا light dark تنظیم شود) انتخاب می‌کند.

Browser Support

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

Source

نکته‌ی جدید در مورد light-dark() این است که دیگر فقط به مقادیر رنگی محدود نمی‌شود. از کروم ۱۵۰ به بعد، این تابع دو مقدار تصویر را نیز می‌پذیرد.

Browser Support

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

۳. توابع سفارشی CSS ( @function )

تابع @function at-rule به شما امکان می‌دهد توابع سفارشی و قابل استفاده مجدد را مستقیماً در CSS بومی تعریف کنید. این تابع می‌تواند ویژگی‌های سفارشی با دامنه محلی را به عنوان آرگومان بپذیرد، محاسبات را انجام دهد و با استفاده از توصیفگر result ، مقادیر را برگرداند و نیاز به پیش‌پردازنده‌ها را کاهش دهد.

Browser Support

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

Source

با ترکیب کوئری‌های استایل کانتینر و تابع if() در CSS ، می‌توانید یک تابع --light-dark() سفارشی ایجاد کنید که با هر نوع مقداری کار می‌کند، همانطور که در این دمو نشان داده شده است:

۴. کوئری‌های سبک کانتینر

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

Browser Support

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

در این نسخه آزمایشی، از کوئری‌های استایل برای تنظیم رنگ‌ها بر اساس ویژگی سفارشی --theme استفاده می‌شود. 

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

درباره کوئری‌های استایل بیشتر بدانید

۵. تابع if() در CSS

تابع if() در CSS، منطق شرطی درون‌خطی را مستقیماً به مقادیر ویژگی‌های CSS می‌آورد. این تابع مجموعه‌ای از شرط‌های جدا شده با نقطه‌ویرگول (پرس‌وجوهای سبک، پرس‌وجوهای رسانه یا پرس‌وجوهای ویژگی) را ارزیابی می‌کند و به شما امکان می‌دهد مقادیر مختلفی را که با اولین شرط درست مرتبط هستند، با یک else جایگزین اختیاری، تنظیم کنید.

Browser Support

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

Source

در دموی قبلی، از تابع if() برای ایجاد یک رنگ کنتراست تم‌بندی‌شده بر اساس خروجی تابع contrast-color() استفاده شد.

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

۶. @supports at-rule()

تابع at-rule() در CSS برای استفاده با @supports به توسعه‌دهندگان اجازه می‌دهد تا تشخیص دهند که آیا مرورگر یک at-rule خاص، مانند @starting-style یا @view-transition تشخیص می‌دهد یا خیر.

برای مثال، برای بررسی پشتیبانی از @function ، از آن به صورت زیر استفاده کنید:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

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

درباره @supports at-rule بیشتر بدانید

۷. <meta name="text-scale">

متا تگ text-scale HTML، صفحه را طوری تنظیم می‌کند که مقیاس اندازه فونت اولیه عنصر ریشه <html> متناسب با تنظیمات مقیاس متن در سطح سیستم عامل و مرورگر باشد، که این امر به ویژه برای پلتفرم‌های موبایل بسیار مهم است.

Browser Support

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

Source

وقتی این ویژگی اعمال شود، اندازه فونت روی عنصر html توسط سیستم عامل تعیین می‌شود، بنابراین نیازی به تنظیم font-size پایه نیست. اگر از طول‌ها با واحدهای نسبی مانند em و rem استفاده کنید، مقادیر پیکسل محاسبه شده بر اساس آن اندازه فونت پایه محاسبه می‌شوند.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

از تب رندرینگ در DevTools می‌توانید اندازه فونت دلخواه را شبیه‌سازی کنید. از منوی کشویی برای تغییر مقدار استفاده کنید.

درباره <meta name=text-scale> بیشتر بدانید

بخش ۲: تعاملات طبیعی را پیاده‌سازی کنید

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

۸. تابع کاهش linear()

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

Browser Support

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

Source

در دموی زیر، linear() برای ایجاد یک حالت طبیعی برای نمایش یا پنهان کردن کادر محاوره‌ای استفاده شده است.

درباره linear() بیشتر بدانید

۹. @starting-style

دستور at-rule در CSS @starting-style ، مقادیر اولیه برای ویژگی‌های عنصری را تعریف می‌کند که می‌خواهید از زمانی که عنصر برای اولین بار در DOM رندر می‌شود یا زمانی که display آن از none به مقدار قابل مشاهده تغییر می‌کند، از آن عبور کنید تا انتقال‌های ورودی روان انجام شود.

Browser Support

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

Source

در دموی قبلی، از این برای متحرک‌سازی <dialog> هنگام نمایش اولیه آن استفاده شد.

۱۰. transition-behavior: allow-discrete

ویژگی transition-behavior (که اغلب به صورت allow-discrete در اختصار transition استفاده می‌شود) به شما امکان می‌دهد تا ویژگی‌های گسسته transition مانند display یا overlay را تغییر دهید و مطمئن شوید که عناصر در طول انیمیشن‌های خروج قبل از پنهان شدن، قابل مشاهده باقی می‌مانند.

Browser Support

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

Source

۱۱. sibling-index() و sibling-count()

توابع sibling-index() و sibling-count() در CSS اعداد صحیحی را برمی‌گردانند که به ترتیب نشان‌دهنده موقعیت یک عنصر بر اساس ۱ در بین هم‌نیاهای آن و تعداد کل هم‌نیاها هستند. این توابع برای محاسبه تأخیرهای انیمیشن متناوب به صورت پویا در CSS بدون جاوا اسکریپت عالی هستند.

Browser Support

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

Source

Browser Support

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

Source

در این دمو، محتویات کادر محاوره‌ای با استفاده از sibling-index() در animation-delay به صورت پلکانی نمایش داده می‌شوند.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

۱۲. دیالوگ با نور بسته می‌شود (ویژگی closedby )

ویژگی closedby در عنصر <dialog> (با مقدار any ) به شما امکان می‌دهد از رفتار اعلانی "light dismiss" استفاده کنید و به طور خودکار پنجره‌های محاوره‌ای را هنگام کلیک کردن در خارج از آنها یا فشار دادن ESC ، بدون نیاز به جاوا اسکریپت سفارشی، ببندید.

Browser Support

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

Source

می‌توانید آن را در دموی قبلی امتحان کنید.

۱۳. corner-shape

ویژگی آزمایشی مختصرنویسی corner-shape به توسعه‌دهندگان اجازه می‌دهد گوشه‌های گرد (از border-radius ) را تغییر دهند تا شکل‌های بصری سفارشی مانند bevel ، scoop ، notch یا squircle (از طریق superellipse() ) ایجاد کنند. حاشیه‌ها، سایه‌ها و خطوط فوکوس به طور خودکار با شکل مطابقت پیدا می‌کنند.

Browser Support

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

Source

بخش ۳: ارائه ناوبری هدایت‌شده

هدایت مسیر کاربر به حفظ زمینه و درک جریان برنامه کمک می‌کند و بارگذاری‌های مجدد گیج‌کننده را از بین می‌برد. می‌توانید این کار را از چند طریق انجام دهید، از جمله با انتقال‌های نما، که اخیراً چند به‌روزرسانی دریافت کرده‌اند.

۱۴. انتقال نمای سند یکسان

بخشی از رابط برنامه‌نویسی کاربردی انتقال نما (View Transition API) ، انتقال‌های سند یکسان (same-document transitions) مکانیزمی برای انیمیشن‌سازی بین حالت‌های DOM در برنامه‌های تک‌صفحه‌ای (SPA) با گرفتن عکس‌های فوری (snapshots) و انتقال آنها با استفاده از CSS فراهم می‌کند.

Browser Support

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

Source

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

۱۵. انتقال نمای بین اسنادی

رابط برنامه‌نویسی کاربردی انتقال نما (View Transition API) را به برنامه‌های چندصفحه‌ای (MPA) گسترش می‌دهد و به شما امکان می‌دهد هنگام پیمایش بین اسناد مختلف، با تطبیق عناصری با view-transition-name یکسان در صفحات مختلف، انتقال‌های یکپارچه و انیمیشنی ایجاد کنید.

Browser Support

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

Source

درباره انتقال نمای بین اسناد بیشتر بدانید

۱۶. انتقال‌های نمای محدود به عنصر

انتقال‌های نمای محدود به عنصر که در کروم ۱۴۷ معرفی شدند، به شما این امکان را می‌دهند که یک انتقال نمای را فقط روی یک زیردرخت خاص DOM (با استفاده از element.startViewTransition() ) اجرا کنید، در حالی که بقیه صفحه فعال و تعاملی باقی می‌ماند.

Browser Support

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

هنگام شروع یک گذار نمای محدود به عنصر، به صورت ایزوله اجرا می‌شود: فقط آن زیردرخت را برای عناصری با view-transition-name اسکن می‌کند و شبه ::view-transition به ریشه خودِ دامنه تزریق می‌شود. این ایزوله‌سازی به لطف کاربرد خودکار view-transition-scope: all امکان‌پذیر است.

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

علاوه بر این، شبه‌گروه‌ها به طور خودکار تودرتو می‌شوند و سرریز شبه‌گروه-فرزندانِ دربرگیرنده در صورت نیاز حذف می‌شود.

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

درباره انتقال‌های نمای محدود به عنصر بیشتر بدانید

۱۷. انتقال نمای دو مرحله‌ای

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

درباره انتقال نمای دو مرحله‌ای بیشتر بدانید

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

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

Browser Support

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

Source

۱۹. انیمیشن‌های اسکرول شونده

انیمیشن‌های اسکرول-تریگر (scroll- triggered animations) جدید در کروم هستند. انیمیشن‌های اسکرول-تریگر ، یک انیمیشن استاندارد CSS مبتنی بر زمان را هنگام عبور از مرز اسکرول (scroll border) فعال می‌کنند (با استفاده از timeline-trigger برای تعریف تریگر و animation-trigger برای پخش آن)، که یک جایگزین اعلانی برای IntersectionObserver ارائه می‌دهد.

Browser Support

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

مکانیزم اساسی برای انیمیشن‌های اسکرولی، تریگرهای تایم‌لاین هستند که یا فعال هستند یا غیرفعال.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

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

درباره انیمیشن‌های اسکرول شونده بیشتر بدانید

۲۰. scroll-target-group: auto

اکنون می‌توانید یک scroll-spy بومی CSS بسازید که به طور خودکار پیوندهای ناوبری را بر اساس موقعیت پیمایش کاربر برجسته می‌کند. با تنظیم scroll-target-group: auto در یک لیست ناوبری، مرورگر به طور خودکار aria-current="true" را تنظیم کرده و کلاس کاذب :target-current به پیوند فعال اعمال می‌کند. سپس می‌توان :target-current برای استایل‌دهی بیشتر به پیوندهای فعال استفاده کرد.

Browser Support

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

Source

Browser Support

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

Source

درباره scroll-spy در CSS با scroll-target-group بیشتر بدانید

۲۱. گزینه‌ی کانتینر scrollIntoView()

متد scrollIntoView() یک گزینه کانتینر ( container ) اضافه می‌کند. تنظیم target.scrollIntoView({container: 'nearest'}) اسکرول را به نزدیکترین اسکرولر والد محدود می‌کند، به جای اینکه اسکرول را به صورت حبابی به سمت بالا نگه دارد و از اسکرول کردن نامنظم در سطح صفحه جلوگیری کند.

Browser Support

  • کروم: ۱.
  • لبه: ۷۹.
  • فایرفاکس: ۱.
  • سافاری: ۳.

Source

برای خاموش و روشن کردن این گزینه، از کادر انتخاب موجود در این نسخه آزمایشی استفاده کنید:

درباره container: "nearest"

۲۲. پیمایش برنامه‌ریزی‌شده‌ی قابل انتظار

تمام متدهای اسکرول برنامه‌ریزی‌شده (مانند scroll() ، scrollTo() و scrollIntoView() ) اکنون یک Promise برمی‌گردانند. این به توسعه‌دهندگان اجازه می‌دهد تا قبل از اجرای منطق بعدی (مانند اضافه کردن یک جلوه هایلایت)، await تکمیل انیمیشن‌های اسکرول روان باشند.

Browser Support

  • کروم: ۱.
  • لبه: ۷۹.
  • فایرفاکس: ۱.
  • سافاری: ۳.

Source

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

بخش ۴: محتوا را به حداکثر برسانید، نویز را کاهش دهید

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

۲۳. کوئری‌های اسکرول-استیت ( scrolled )

بخشی از کوئری‌های کانتینر CSS، کوئری‌های scroll-state به شما امکان می‌دهند تا بر اساس وضعیت اسکرول یک کانتینر (با container-type: scroll-state ) به فرزندان استایل دهید. کوئری scrolled (برای مثال، scroll-state(scrolled: bottom) ) جهت جدیدترین اسکرول نسبی را تشخیص می‌دهد و الگوهایی مانند "Hidey Bar" را فعال می‌کند.

Browser Support

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

درباره الگوی "Hidey Bar" بیشتر بدانید

۲۴. پرس‌وجوهای کانتینر لنگر انداخته شده

موقعیت‌یابی لنگر در CSS شامل کوئری‌های کانتینر لنگردار است که به شما امکان می‌دهد بررسی کنید کدام موقعیت جایگزین (مثلاً fallback: bottom یا fallback: flip-block ) در حال حاضر روی یک عنصر با موقعیت لنگر فعال است و به‌روزرسانی‌های پویا را برای استایل‌بندی یک عنصر با موقعیت لنگردار (مانند فلش‌های راهنمای ابزار) امکان‌پذیر می‌کند.

Browser Support

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

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

۲۵. border-shape در CSS

ویژگی border-shape به شما امکان می‌دهد حاشیه‌های غیرمستطیلی را با استفاده از همان سینتکس shape مانند clip-path تعریف کنید. برخلاف clipping، border-shape حاشیه‌ها، خطوط بیرونی و سایه‌ها را از نظر بصری با شکل سفارشی هم‌تراز نگه می‌دارد. همچنین از قابلیت‌های corner-shape فراتر می‌رود، زیرا border-shape بسیار انعطاف‌پذیرتر است.

Browser Support

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

۲۶. تابع shape() در CSS

تابع shape() در CSS به شما امکان می‌دهد مسیرهای هندسی پیچیده را به صورت درون‌خطی در CSS تعریف کنید. این تابع می‌تواند با ویژگی‌هایی مانند clip-path ، border-shape یا shape-outside برای ایجاد اشکال ارگانیک و غیرمستطیلی که محتوا می‌تواند در مقابل آنها شناور شود، استفاده شود.

Browser Support

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

Source

۲۷. موقعیت‌یابی چسبنده در هر محور

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

Browser Support

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

این ویژگی برای آزمایش در کروم ۱۴۸ با فعال بودن پرچم «ویژگی‌های پلتفرم وب آزمایشی» در دسترس است.

درباره position: sticky در هر محور

بخش ۵: با فرم فاکتور سازگار شوید

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

۲۸. حرکات پیمایش (مناطق قابل کشیدن)

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

تیم کروم در حال کار بر روی یک راه‌حل پیشنهادی اعلامی است که با گروه اجتماعی OpenUI در حال مذاکره است و به شما امکان می‌دهد با استفاده از overscrollcontainer و فراخوانی‌کننده‌های فرمان، نواحی قابل کشیدن بومی و مبتنی بر حرکت (مثلاً فهرست‌های Gmail قابل کشیدن یا منوهای کناری با کشیدن) ایجاد کنید که با لمس و پیمایش طبیعی کار می‌کنند.

درباره حرکات پیمایش بیش از حد بیشتر بدانید

۲۹. HTML در بوم نقاشی

رابط برنامه‌نویسی کاربردی HTML-in-Canvas یک تغییر الگوی اساسی است که به توسعه‌دهندگان اجازه می‌دهد عناصر DOM واقعی را درون یک <canvas> قرار دهند (با استفاده از ویژگی layoutsubtree ). این عناصر کاملاً قابل جستجو و در دسترس باقی می‌مانند و از ویژگی‌های مرورگر مانند تکمیل خودکار پشتیبانی می‌کنند، در حالی که به سایه‌زن‌های WebGL/WebGPU اجازه می‌دهند تا به صورت بومی با آنها تعامل داشته باشند.

دور رعد و برق

نگاهی گذرا به برخی دیگر از ویژگی‌های قدرتمند که وب را به جلو می‌رانند.

۳۰. حرکت با حفظ وضعیت DOM ( moveBefore() )

متد moveBefore() DOM به شما امکان می‌دهد گره‌های DOM (مثلاً پخش ویدیو، iframe یا ورودی‌های متمرکز) را بدون از بین بردن وضعیت آنها یا ایجاد بارگذاری مجدد، دوباره والد کنید.

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

Browser Support

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

Source

درباره moveBefore() بیشتر بدانید

۳۱. text-fit CSS

text-fit یک ویژگی آزمایشی CSS است که به صورت پویا اندازه فونت را تغییر می‌دهد تا خطوط متن را دقیقاً با عرض عنصر حاوی آنها تطبیق دهد (برای مثال، text-fit: grow per-line-all ).

درباره text-fit بیشتر بدانید

۳۲. text-box در CSS ( text-box-trim و text-box-edge )

ویژگی text-box (و ویژگی‌های longhand آن یعنی text-box-trim و text-box-edge ) فضای عمودی (leading) بالا و پایین متن را برش می‌دهد و ترازبندی عمودی و مرکزگرایی بی‌نقصی را تضمین می‌کند.

Browser Support

  • کروم: ۱۳۳.
  • لبه: ۱۳۳.
  • فایرفاکس: پشت یک پرچم.
  • سافاری: ۱۸.۲.

Source

درباره text-trim بیشتر بدانید

۳۳. تزئینات شکاف CSS

تزئینات فاصله در CSS، column-rule را به grid و flexbox می‌آورد و ویژگی جدید row-rule معرفی می‌کند که به توسعه‌دهندگان اجازه می‌دهد شیارهای بین ردیف‌ها و ستون‌ها را استایل‌بندی کنند. دیگر لازم نیست برای استایل‌بندی خطوط بین ردیف‌ها و ستون‌ها با borderها یا pseudo-elementها سر و کله بزنید.

Browser Support

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

درباره تزئینات شکاف CSS بیشتر بدانید

۳۴. واحدهای نمایشگر آگاه از نوار پیمایش ( vw ، vh و غیره)

واحدهای نمایشگر مانند vw و vh به طور خودکار اندازه نوارهای پیمایش را کم می‌کنند (در صورت تضمین دیده شدن، با استفاده از overflow-y: scroll یا scrollbar-gutter: stable که روی :root تعریف شده‌اند)، و از سرریز افقی تصادفی هنگام تنظیم عناصر روی 100vw جلوگیری می‌کنند.

Browser Support

  • کروم: ۲۰.
  • لبه: ۱۲.
  • فایرفاکس: ۱۹.
  • سافاری: ۶.

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

۳۵. دسترسی جاوا اسکریپت به شبه عناصر

APIهای وب اکنون شبه‌عناصر CSS (مانند ::before یا ::after ) را در معرض جاوا اسکریپت قرار می‌دهند.

شما می‌توانید یک نمونه CSSPseudoElement را با استفاده از Element.pseudo(type) بازیابی کنید و با استفاده از Event.pseudoTarget بررسی کنید که کدام شبه عنصر باعث ایجاد یک رویداد شده است.

Browser Support

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

درباره CSSPseudoElement بیشتر بدانید

نتیجه‌گیری

خلاصه‌ای از جدیدترین‌های رابط کاربری وب همین بود. امیدواریم از این ویژگی‌ها استفاده کنید و رابط‌های کاربری فوق‌العاده‌ای با آن‌ها بسازید. تا سال آینده!