موارد استفاده از راهنمای وب مدرن

منتشر شده: ۱۹ مه ۲۰۲۶

این یک لیست تولید شده از تمام موارد استفاده موجود در راهنمای وب مدرن است.

accessibility

accessible-error-announcement

حالت‌های دسترسی‌پذیری برنامه‌نویسی‌شده (مانند aria-invalid) را با حالت visual :user-invalid همگام‌سازی کنید تا مطمئن شوید کاربران صفحه‌خوان فقط پس از تعامل، بازخورد خطا را دریافت می‌کنند و تجربه بصری را منعکس می‌کنند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

built-in-ai

language-detection

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

language-model

با استفاده از Prompt API، استنتاج زبان طبیعی روی دستگاه را در مرورگر اجرا کنید، به همراه خروجی استریمینگ، پاسخ‌های ساختاریافته JSON و مدیریت جلسه چند نوبتی.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

summarizer

محتوای متن را با استفاده از رابط برنامه‌نویسی کاربردی خلاصه‌ساز (Summarizer API) روی دستگاه خلاصه کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

translator

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

css

highlight-text-ranges

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

forms

animated-select-picker

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

autofill-address-form

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

autofill-highlight-inputs

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

autofill-payment-form

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

autofill-sign-in-form

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

autofill-sign-up-form

یک فرم ثبت نام با مقادیر صحیح تکمیل خودکار و پشتیبانی از تکمیل خودکار بسازید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

brand-consistent-forms

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

branded-select-styling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

custom-select-picker-layouts

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

form-fields-automatically-fit-contents

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

required-field-feedback

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

rich-media-picker

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

select-menu-interaction

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

validate-input-after-interaction

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

passkeys

passkey-authentication

برای ورود اولیه، کاربر بازگشتی را با یک کلید عبور تأیید کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

passkey-conditional-create

پس از ورود موفقیت‌آمیز با رمز عبور، به‌طور مخفیانه یک رمز عبور برای کاربر موجود ثبت کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

passkey-management

به کاربران اجازه دهید رمزهای عبور ثبت شده در حساب خود را مشاهده و مدیریت کنند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

passkey-reauthentication

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

passkey-registration

یک رمز عبور برای حساب کاربری موجود ثبت کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

performance

batch-analytics-events

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

break-up-long-tasks

پردازش‌های همزمان سنگین (محاسبات پیچیده و/یا حلقه‌های طولانی) یا به‌روزرسانی‌های DOM را بشکنید تا مرورگر بتواند ورودی کاربر را مدیریت کرده و صفحه را دوباره رنگ‌آمیزی کند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

calculate-total-foreground-time

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

conditional-async-dependencies

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

defer-rendering-heavy-content

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

defer-work-until-scroll-ends

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

deprioritize-background-fetches

اولویت واکشی داده‌های پس‌زمینه که با استفاده از Fetch API انجام می‌شود را کاهش دهید تا از تداخل شبکه با درخواست‌های آغاز شده توسط کاربر جلوگیری شود.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

detect-initial-visibility-state

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

efficient-background-processing

با متوقف کردن اجرای جاوا اسکریپت در پس‌زمینه (مانند انیمیشن‌های <canvas> ، رندرینگ WebGL یا نظرسنجی داده‌های WebSocket با فرکانس بالا) هنگامی که کامپوننت خارج از صفحه نمایش است و سپس از سرگیری آنها درست به موقع هنگامی که به حالت نمایش برمی‌گردند، منابع سیستم و عمر باتری را حفظ کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

faster-spa-view-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

full-session-analytics

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

identify-heavy-scripts

اسکریپت‌هایی که بیشترین نقش را در فریم‌های انیمیشن طولانی دارند را شناسایی کنید

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

identify-inp-causes

جاوا اسکریپت کندی که بر معیار INP تأثیر می‌گذارد را شناسایی کنید

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

improve-next-page-load-performance

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

interactions-in-complex-layouts

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

optimize-image-priority

اولویت بارگذاری تصاویر کاندید Largest Contentful Paint (LCP) را بهینه کنید و تصاویر غیر بحرانی را از اولویت خارج کنید تا تأخیرهای بارگذاری منابع حیاتی کاهش یابد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

optimize-preload-priority

اولویت نسبی محتوای از پیش بارگذاری شده را بهینه کنید تا تأخیرهای بارگذاری منابع حیاتی کاهش یابد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

optimize-script-priority

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

resolution-optimized-pseudo-elements

از تصاویر با وضوح بهینه شده در شبه عناصر CSS (مانند ::before و ::after ) برای کاهش تعداد گره‌های DOM استفاده کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

schedule-tasks-by-priority

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

sequence-distributed-events

عملیات ثبت و توالی‌یابی در میکروسرویس‌های توزیع‌شده یا محیط‌های ردیابی با توان عملیاتی بالا با ثبت مهرهای زمانی با وضوح نانوثانیه.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

user-experience

adapt-scrollbar-to-contrast-preferences

افزایش قابلیت مشاهده اسکرول بار برای کاربرانی که رابط‌های کاربری با کنتراست بالا را ترجیح می‌دهند

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

anchor-positioning-tab-underline

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

animate-element-entry-exit

عناصر را همزمان با اضافه/حذف شدن از DOM یا تغییر مقادیر نمایش آنها، به آرامی پنهان/نمایش دهید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

animate-to-from-top-layer

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

animate-to-intrinsic-sizes

اجزای تعاملی (مانند آکاردئون‌ها، منوها و کارت‌های در حال گسترش) را به آرامی به ابعاد طبیعی خود و از آنها متحرک کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

apply-webgl-shaders

جلوه‌های بصری سفارشی را با سایه‌زن‌های WebGL به محتوای HTML اعمال کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

calculate-event-differentials

مدت زمان و زمان باقی مانده بین تاریخ‌ها و زمان‌ها را محاسبه کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

calculate-with-intrinsic-sizes

اندازه یک عنصر را بر اساس اندازه ذاتی آن محاسبه کنید، ضمن اینکه مطمئن شوید که با محدودیت‌های طراحی داده شده مطابقت دارد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

capture-location-agnostic-data

داده‌های زمانی را که نباید بر اساس موقعیت مکانی کاربر تغییر کنند، مانند تاریخ تولد، هشدارهای دوره‌ای یا تعطیلات ملی، ثبت کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

یک اسلایدشو با تصاویر یا سایر عناصر بصری ایجاد کنید، که در آن هر اسلاید با ورود/مرکز شدن/خروج از اسکرول خود، متحرک شود. به عنوان مثال، اسلایدها ممکن است محو شوند/محو شوند، بچرخند، بزرگتر یا کوچکتر شوند و غیره.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

child-state-based-styling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

complex-shapes

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

component-specific-light-dark-theme

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

consistent-cross-document-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

content-based-styling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

coordinate-global-events

جلسات یا رویدادهای آینده را با اتصال صریح آنها به یک منطقه زمانی جغرافیایی IANA برنامه‌ریزی کنید تا زمان رویدادها صرف نظر از انتقال ساعت تابستانی (DST)، ساعات "حذف شده" یا "تکرار شده" در طول تغییرات ساعت، دقیق باقی بمانند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

cross-document-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

customize-scrollbar-color-and-thickness

رنگ یا ضخامت نوار پیمایش را سفارشی کنید

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

dark-mode

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

declarative-button-actions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

declarative-dialog-popover-control

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

deliver-optimized-decorative-images

با ارائه همزمان فرمت‌های تصویری نسل بعدی (مانند AVIF یا WebP) در کنار تراکم پیکسل‌های متعدد (مانند ۱x و ۲x)، تصاویر تزئینی بهینه‌شده (مانند پس‌زمینه‌ها، آیکون‌های رابط کاربری یا ماسک‌های پیچیده) را ارائه دهید تا مرورگر بتواند به صورت پویا بهترین ترکیب اندازه فایل و کیفیت بصری را برای قابلیت‌های دستگاه کاربر انتخاب کند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

design-token-reactivity

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

directional-navigation-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

dynamic-sibling-animations

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

dynamic-sibling-styling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

export-html-media-from-canvas

محتوای HTML پویا را به صورت تصاویر یا فریم‌های ویدیویی از داخل canvas ضبط و صادر کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

expose-canvas-content-to-browser-features

محتوای رندر شده در یک بوم را در معرض ویژگی‌های مرورگر مانند فناوری‌های کمکی، ترجمه یا حالت مطالعه قرار دهید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

flicker-free-client-side-ab-testing

تست‌های A/B، تست‌های چند متغیره یا سایر آزمایش‌ها را با استفاده از جاوا اسکریپت سمت کلاینت برای تغییر یا تزریق HTML، CSS و جاوا اسکریپت بدون نمایش محتوای اصلی قبل از چشمک زدن یا سوسو زدن برای نمایش محتوای آزمایش، ارائه و رندر کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

fluid-scaling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

format-human-readable-durations

زمان یا مدت زمان سپری‌شده را در قالبی خوانا و بومی‌سازی‌شده به کاربران ارائه دهید، با این قابلیت که بسته به زمینه، تفکیک دقیق واحدها (مثلاً «۱ ساعت و ۳۰ دقیقه») یا تعداد کل واحدها (مثلاً «۹۰ دقیقه») را نمایش دهد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

group-element-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

improve-text-layout-and-legibility

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

individual-transform-properties

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

interactive-content-in-3d-scenes

عناصر HTML تعاملی را در یک صحنه سه‌بعدی ادغام کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

interactive-content-reveal

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

interest-triggered-action-previews

پیش‌نمایش زنده‌ای از تأثیر دکمه را هنگام ابراز علاقه کاربر (مثلاً نگه داشتن ماوس، فوکوس یا فشار طولانی) اما قبل از کلیک کردن، نمایش دهید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

interest-triggered-tooltips

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

light-dismiss-a-dialog

یک پنجره محاوره‌ای ایجاد کنید که بتوان آن را با استفاده از یک کلیک یا ضربه زدن در خارج از پنجره، بست.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

manage-recurring-intervals

فواصل زمانی تکرارشونده برای صورتحساب‌های اشتراک یا چرخه‌های حقوق و دستمزد را محاسبه کنید و به‌طور خودکار برای موارد خاص مانند انتقال‌های پایان ماه (مثلاً اضافه کردن یک ماه به ۳۱ ژانویه) تنظیم کنید تا از محاسبات دقیق دوره اطمینان حاصل شود.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

model-partial-time-concepts

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

move-dom-element-without-losing-state

یک عنصر DOM را بدون از دست دادن حالت‌های مهم عنصر، مانند حالت‌های تعاملی (:focus/:active)، حالت بارگذاری <iframe> ، حالت انیمیشن/انتقال و غیره، جابجا یا والدسازی کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

overflow-clipping-control

مرز برش قابل مشاهده یک عنصر را تنظیم کنید تا با لبه محتوا، لبه حاشیه یا لبه حاشیه - یا یک فاصله مشخص از هر یک از این موارد - هم‌تراز شود و کنترل دقیق‌تری بر نحوه برش محتوا ارائه دهد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

parallax-scroll-effects

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

persistent-app-tours

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

persistent-toast-notifications

اعلان‌های Toast و Overlay غیر مزاحم برای پیام‌رسانی و ارتباط وضعیت پایدار و قابل انباشت ایجاد کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

persistent-top-layer-ui

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

physics-based-easing

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

platform-controls-dismiss-dialog

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

position-aware-tooltips

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

precise-text-alignment

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

prevent-text-wrapping

مطمئن شوید که مرورگر خط جدیدی به متن اضافه نمی‌کند و اجازه می‌دهد متن از محدوده‌ی خود سرریز شود.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

pull-to-reveal

یک ویژگی کشیدن برای نمایش ایجاد کنید که به کاربر امکان دهد صفحه را به پایین بکشد تا محتوای بیشتری مانند نوار جستجو را نشان دهد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

reduce-style-repetition

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

resilient-context-menus-and-nested-dropdowns

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

same-document-transitions

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-entry-exit-effects

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-position-aware-elements

دکمه‌ها یا ویجت‌های شناور (برگشت به بالا، اسکرول به پایین، لانچرهای چت و غیره) بسازید که بسته به اینکه کاربر اصلاً اسکرول کرده یا نه، ظاهر و ناپدید شوند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-progress-indicator

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-snap-realtime-feedback

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-snap-state-sync

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scroll-target-on-load

یک لیست قابل اسکرول از عناصر (مثلاً یک چرخ فلک از تصاویر یا یک رشته مکالمه چت) بسازید که بتواند با اسکرول کردن یک عنصر خاص در رندر اولیه نمایش داده شود.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scrollability-affordance-hints

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

scrollytelling

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

search-hidden-content

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

shaped-cutouts

چندین شکل را برای ایجاد برش‌های پیچیده یا جلوه‌های «حذفی» در عناصر، مانند اضافه کردن یک بریدگی به یک عنصر، ترکیب کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

shrinking-header-on-scroll

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

size-aware-styling

کامپوننتی بسازید که استایل‌های آن بتوانند به صورت شرطی به عرض یا ارتفاع خودشان وابسته باشند، نه به عرض یا ارتفاع viewport. برای مثال، یک کامپوننت کارت که بتواند طرح‌بندی‌هایش را بسته به اندازه‌اش تغییر دهد، یا یک دکمه فراخوان که بتواند به صورت شرطی متن کمکی را بر اساس عرضش نمایش دهد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

soft-edge-content-fade

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

stabilize-reactive-state

مدیریت مهلت‌ها یا برنامه‌های کاری در نماهای داده‌محور بدون عوارض جانبی غیرمنتظره از وضعیت تغییرپذیر مشترک.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

stack-drill-down

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

style-parent-with-has

استایل‌دهی به عناصر والد یک فیلد فرم (مثلاً برچسب‌ها یا مجموعه فیلدها) در صورتی که فیلد نامعتبر باشد.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

support-global-calendar-systems

نمایش و محاسبه دقیق تاریخ‌ها در سیستم‌های تقویم غیر میلادی (مثلاً اسلامی، عبری یا چینی) برای کاربران بین‌المللی.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

swipe-to-remove

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

visually-stable-font-fallbacks

سبک‌های فونت را طوری تعریف کنید که در صورت تعویض فونت مورد نظر و یکی از فونت‌های جایگزین (یا برعکس)، متن خوانا و از نظر بصری ثابت بماند.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

visually-stable-mixed-fonts

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

visually-texture-content

الگوهای واقع‌گرایانه آب و هوا و بافت را به عناصر اعمال کنید تا ظاهری ارگانیک، قدیمی یا فیزیکی به آنها بدهید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

webmcp

agentic-forms

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

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب

agentic-javascript-tools

توابع جاوا اسکریپت سمت کلاینت را به صورت برنامه‌نویسی شده به عنوان ابزاری برای عامل‌های هوش مصنوعی با استفاده از WebMCP Imperative API ثبت کنید.

ویژگی‌های مورد استفاده:

مشاهده مورد استفاده در گیت‌هاب