منتشر شده: ۱۹ مه ۲۰۲۶
این یک لیست تولید شده از تمام موارد استفاده موجود در راهنمای وب مدرن است.
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
دادههای زمانی را که نباید بر اساس موقعیت مکانی کاربر تغییر کنند، مانند تاریخ تولد، هشدارهای دورهای یا تعطیلات ملی، ثبت کنید.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
carousel-slide-effects
یک اسلایدشو با تصاویر یا سایر عناصر بصری ایجاد کنید، که در آن هر اسلاید با ورود/مرکز شدن/خروج از اسکرول خود، متحرک شود. به عنوان مثال، اسلایدها ممکن است محو شوند/محو شوند، بچرخند، بزرگتر یا کوچکتر شوند و غیره.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
carousel-snap-highlights
آیتم غیرتعاملی که در حال حاضر در اسلایدشوها، گالریها یا تجربههای کشیدن تمام صفحه نمایش داده میشود را به صورت بصری برجسته کنید. به عنوان مثال، باز کردن یک کارت هنگام نمایش یا آشکار کردن محتوای پنهان.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
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> ، حالت انیمیشن/انتقال و غیره، جابجا یا والدسازی کنید.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
navigation-drawer
یک کامپوننت کشوی ناوبری ایجاد کنید که وقتی از طریق یک دکمه منو فعال میشود، از سمتی که روی محتوای صفحه موجود قرار دارد، به داخل میلغزد و هنگام بسته شدن (با کشیدن انگشت به سمت خارج، ضربه زدن به بیرون یا فشردن کلید escape) به بیرون میلغزد.
ویژگیهای مورد استفاده:
-
inert -
intersection-observer -
popover -
registered-custom-properties -
scroll-driven-animations -
scroll-initial-target -
scroll-snap
مشاهده مورد استفاده در گیتهاب
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
به کاربران اجازه دهید با یک حرکت افقی روی موارد موجود در یک لیست (حذف، بایگانی، علامتگذاری به عنوان خوانده شده و غیره) عمل کنند، بنابراین میتوانند ورودیها را بدون لمس یک کنترل جداگانه به سرعت پردازش کنند.
ویژگیهای مورد استفاده:
-
scroll-snap -
scroll-initial-target -
overscroll-behavior -
scrollbar-width -
intersection-observer -
mutationobserver -
resize-observer -
web-animations
مشاهده مورد استفاده در گیتهاب
visually-stable-font-fallbacks
سبکهای فونت را طوری تعریف کنید که در صورت تعویض فونت مورد نظر و یکی از فونتهای جایگزین (یا برعکس)، متن خوانا و از نظر بصری ثابت بماند.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
visually-stable-mixed-fonts
سبکهای فونت را طوری تعریف کنید که متن در موقعیتهایی که از چندین فونت برای رندر یک بلوک متن استفاده میشود، خوانا و از نظر بصری سازگار باقی بماند.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
visually-texture-content
الگوهای واقعگرایانه آب و هوا و بافت را به عناصر اعمال کنید تا ظاهری ارگانیک، قدیمی یا فیزیکی به آنها بدهید.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
webmcp
agentic-forms
با حاشیهنویسی فرمهای استاندارد HTML با ویژگیهای WebMCP، قابلیتهای سمت کلاینت را به عنوان ابزاری در اختیار عوامل هوش مصنوعی قرار دهید.
ویژگیهای مورد استفاده:
مشاهده مورد استفاده در گیتهاب
agentic-javascript-tools
توابع جاوا اسکریپت سمت کلاینت را به صورت برنامهنویسی شده به عنوان ابزاری برای عاملهای هوش مصنوعی با استفاده از WebMCP Imperative API ثبت کنید.
ویژگیهای مورد استفاده: