CSS بسته بندی شده: 2023!، CSS بسته بندی شده: 2023!، CSS بسته بندی شده: 2023!

هدر CSS Wrapped

CSS بسته بندی شده: 2023!

عجب! 2023 سال بزرگی برای CSS بود!

از #Interop2023 تا بسیاری از فرودهای جدید در فضای CSS و UI که قابلیت هایی را برای توسعه دهندگان که زمانی در پلتفرم وب غیرممکن می پنداشتند را قادر می سازد. اکنون، هر مرورگر مدرنی از پرس‌و‌جوهای کانتینر، زیرشبکه، انتخابگر :has() و تعداد زیادی از فضاهای رنگی و توابع جدید پشتیبانی می‌کند. ما در Chrome از انیمیشن‌های اسکرول مبتنی بر CSS و متحرک سازی هموار بین نماهای وب با انتقال مشاهده پشتیبانی می‌کنیم. و برای تکمیل همه چیز، بسیاری از موارد اولیه اولیه وجود دارند که برای تجربه‌های بهتر توسعه‌دهندگان مانند تودرتوی CSS و سبک‌های دامنه‌دار به دست آمده‌اند.

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

مبانی معماری

بیایید با به‌روزرسانی‌های زبان اصلی و قابلیت‌های CSS شروع کنیم. اینها ویژگی هایی هستند که برای نحوه نگارش و سازماندهی سبک ها اساسی هستند و قدرت زیادی را به دست توسعه دهندگان می آورند.

توابع مثلثاتی

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 108.
  • سافاری: 15.4.

منبع

کروم 111 پشتیبانی از توابع مثلثاتی sin() , cos() , tan() , asin() , acos() , atan() و atan2() اضافه کرد و آنها را در همه موتورهای اصلی در دسترس قرار داد. این توابع برای اهداف انیمیشن و چیدمان بسیار مفید هستند. به عنوان مثال، اکنون بسیار ساده تر است که عناصر را روی یک دایره در اطراف یک مرکز انتخاب شده قرار دهید.

دمو توابع مثلثاتی

درباره توابع مثلثاتی در CSS بیشتر بدانید.

انتخاب پیچیده nth-*

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 9.

با انتخابگر شبه کلاس :nth-child() امکان انتخاب عناصر در DOM بر اساس شاخص آنها وجود دارد. با استفاده از میکروسینتکس An+B ، کنترل خوبی بر روی عناصری که می خواهید انتخاب کنید، بدست می آورید.

به طور پیش فرض شبه های :nth-*() همه عناصر فرزند را در نظر می گیرند. از Chrome 111 می‌توانید به صورت اختیاری، فهرست انتخابگر را به :nth-child() و :nth-last-child() ارسال کنید. به این ترتیب شما می توانید لیست فرزندان را قبل از اینکه An+B کار خود را انجام دهد، از قبل فیلتر کنید.

در نسخه ی نمایشی زیر، منطق 3n+1 فقط برای عروسک های کوچک با استفاده of .small از پیش فیلتر کردن آنها اعمال می شود. از منوهای کشویی برای تغییر پویا انتخابگر استفاده شده استفاده کنید.

نسخه ی نمایشی انتخاب پیچیده nth-*

درباره انتخاب های پیچیده nth-* بیشتر بیاموزید.

دامنه

پشتیبانی مرورگر

  • کروم: 118.
  • لبه: 118.
  • فایرفاکس: پشت پرچم
  • سافاری: 17.4.

منبع

Chrome 118 پشتیبانی از @scope را اضافه کرد، یک قانون at-قاعده که به شما امکان می‌دهد انتخابگر محدوده مطابق با زیردرخت خاصی از سند باشد. با استایل‌بندی محدوده‌ای، می‌توانید در مورد عناصری که انتخاب می‌کنید، بدون نیاز به نوشتن انتخابگرهای خیلی خاص یا اتصال محکم آنها به ساختار DOM، کاملاً مشخص باشید.

یک زیردرخت دامنه دار با یک ریشه محدوده (مرز بالایی) و یک محدودیت دامنه اختیاری (مرز پایین) تعریف می شود.

@scope (.card) {  } /* scoping root */
@scope (.card) to (.card__content) {  } /* scoping root + scoping limit*/

قوانین سبکی که در داخل یک بلوک scope قرار می‌گیرند، فقط عناصر درون زیردرخت حک شده را هدف قرار می‌دهند. به عنوان مثال، قانون سبک محدوده زیر فقط عناصر <img> را هدف قرار می دهد که بین عنصر .card و هر جزء تو در تو که با انتخابگر [data-component] مطابقت دارد قرار می گیرد.

@scope (.card) to ([data-component]) {
  img {  }
}

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

اسکرین شات نسخه نمایشی محدوده

Reference screenshot for the @scope demo

Scope Live Demo

نسخه ی نمایشی CSS @scope

در مقاله «نحوه استفاده از @scope برای محدود کردن دسترسی انتخابگرها» درباره @scope بیشتر بیاموزید. در این مقاله در مورد انتخابگر :scope ، نحوه رسیدگی به ویژگی‌ها، دامنه‌های بدون پیش درآمد، و چگونگی تأثیر آبشار توسط @scope خواهید آموخت.

لانه سازی

پشتیبانی مرورگر

  • کروم: 120.
  • لبه: 120.
  • فایرفاکس: 117.
  • سافاری: 17.2.

منبع

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Nesting Screencast

Nesting Live Demo

انتخابگر آشیانه آرام را تغییر دهید تا برنده مسابقه را تعیین کنید

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

درباره لانه سازی بیشتر بدانید.

زیرشبکه

پشتیبانی مرورگر

  • کروم: 117.
  • لبه: 117.
  • فایرفاکس: 71.
  • سافاری: 16.

منبع

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

Subgrid Screencast

Subgrid Live Demo

سربرگ، بدنه و پاورقی با اندازه‌های پویا خواهر و برادرشان هماهنگ هستند.

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

درباره زیرشبکه بیشتر بدانید.

تایپوگرافی

تایپوگرافی وب چند به روز رسانی کلیدی را در سال 2023 مشاهده کرد. یکی از بهبودهای پیشرونده بسیار خوب ویژگی text-wrap است. این ویژگی تنظیم طرح تایپوگرافی را فعال می کند که در مرورگر بدون نیاز به اسکریپت اضافی ایجاد شده است. با طول خط های نامناسب خداحافظی کنید و به تایپوگرافی قابل پیش بینی تر سلام کنید!

حرف اول

پشتیبانی مرورگر

  • کروم: 110.
  • لبه: 110.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 9.

منبع

با شروع سال در کروم 110، ویژگی initial-letter یک ویژگی کوچک و در عین حال قدرتمند CSS است که استایلی را برای قرار دادن حروف اولیه تنظیم می کند. می توانید حروف را در حالت افتاده یا برجسته قرار دهید. این ویژگی دو استدلال را می پذیرد: اولی برای اینکه حرف چقدر عمیق در پاراگراف مربوطه رها شود و دوم اینکه چقدر حرف را بالاتر از آن قرار دهیم. حتی می توانید ترکیبی از هر دو را انجام دهید، مانند نسخه ی نمایشی زیر.

تصویر صفحه حرف اول

اسکرین شات نسخه نمایشی حرف اول

نسخه ی نمایشی با حرف اولیه

مقادیر initial-letter را برای عنصر شبه ::first-letter تغییر دهید تا تغییر آن را مشاهده کنید.

درباره حرف اول بیشتر بدانید.

text-wrap: متعادل و زیبا

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

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

متن بسته بندی صفحه نمایش

نسخه نمایشی زنده بسته بندی متن

در دمو زیر می توانید با کشیدن نوار لغزنده، اثرات balance و pretty را روی عنوان و یک پاراگراف مقایسه کنید. سعی کنید نسخه ی نمایشی را به زبان دیگری ترجمه کنید!

درباره text-wrap: balance بیشتر بیاموزید.

رنگ

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

فضاهای رنگی HD (سطح رنگ 4)

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 15.

منبع

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 15.

منبع

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

اکنون CSS و رنگ می‌توانند: - بررسی کنند که آیا سخت‌افزار صفحه‌نمایش کاربران قادر به رنگ‌های HDR با گستره وسیع است یا خیر. - بررسی کنید که آیا مرورگر کاربر نحو رنگی مانند Oklch یا Display P3 را درک می کند یا خیر. - رنگ‌های HDR را در Oklab، Oklch، HWB، Display P3، Rec.2020، XYZ و موارد دیگر مشخص کنید. - ایجاد شیب با رنگ های HDR، - درون یابی گرادیان ها در فضاهای رنگی جایگزین. - رنگ ها را با color-mix() مخلوط کنید. - ایجاد انواع رنگ با نحو نسبی رنگ.

رنگی 4 صفحه نمایش

نسخه نمایشی رنگ 4

در دمو زیر می‌توانید با کشیدن نوار لغزنده، اثرات «تعادل» و «زیبا» را روی یک عنوان و یک پاراگراف مقایسه کنید. سعی کنید نسخه ی نمایشی را به زبان دیگری ترجمه کنید!

درباره رنگ 4 و فضاهای رنگی بیشتر بیاموزید.

عملکرد ترکیب رنگ

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 16.2.

منبع

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

color-mix() Screencast

نسخه ی نمایشی color-mix().

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

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

درباره color-mix() بیشتر بیاموزید.

نحو نسبی رنگ

نحو نسبی رنگ (RCS) یک روش مکمل برای color-mix() برای ایجاد انواع رنگ است. این کمی قدرتمندتر از color-mix() است، اما همچنین یک استراتژی متفاوت برای کار با رنگ است. color-mix() ممکن است با رنگ سفید ترکیب شود تا یک رنگ روشن شود، جایی که RCS دسترسی دقیقی به کانال روشنایی و توانایی استفاده از calc() در کانال برای کاهش یا افزایش روشنایی به صورت برنامه‌ریزی می‌کند.

RCS Screencast

نسخه ی نمایشی زنده RCS

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

RCS به شما اجازه می دهد تا دستکاری های نسبی و مطلق را روی یک رنگ انجام دهید. یک تغییر نسبی تغییری است که در آن مقدار فعلی اشباع یا سبکی را می گیرید و آن را با calc() تغییر می دهید. تغییر مطلق تغییری است که در آن یک مقدار کانال را با یک مقدار کاملاً جدید جایگزین کنید، مانند تنظیم opacity روی 50%. این نحو ابزارهای معنی‌داری برای قالب‌بندی، انواع به موقع و موارد دیگر به شما می‌دهد.

درباره نحو نسبی رنگ بیشتر بیاموزید.

طراحی واکنشگرا

طراحی واکنش گرا در سال 2023 تکامل یافت. این سال پیشگامانه ویژگی های جدیدی را فعال کرد که به طور کامل نحوه ایجاد تجربیات پاسخگوی وب را تغییر داد و مدل جدیدی از طراحی واکنشگرا مبتنی بر مؤلفه را به وجود آورد. ترکیبی از پرس‌و‌جوهای کانتینر و :has() از مؤلفه‌هایی پشتیبانی می‌کند که دارای استایل پاسخگو و منطقی بر اساس اندازه والدینشان و همچنین حضور یا وضعیت هر یک از فرزندانشان هستند. این بدان معناست که در نهایت می‌توانید طرح‌بندی سطح صفحه را از طرح‌بندی در سطح مؤلفه جدا کنید و یک بار منطق را بنویسید تا از مؤلفه خود در همه جا استفاده کنید!

درخواست اندازه ظرف

پشتیبانی مرورگر

  • کروم: 105.
  • لبه: 105.
  • فایرفاکس: 110.
  • سافاری: 16.

منبع

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

برای استفاده از این ویژگی، ابتدا Containment را روی عنصری که در حال پرس و جو هستید تنظیم کنید، و سپس، مشابه یک درخواست رسانه، از @container با پارامترهای اندازه برای اعمال استایل ها استفاده کنید. همراه با پرس و جوهای کانتینر، اندازه های پرس و جوی کانتینر را دریافت می کنید. در نسخه ی نمایشی زیر، اندازه پرس و جوی کانتینر cqi (نماینده اندازه ظرف درون خطی)، برای اندازه هدر کارت استفاده می شود.

@container Screencast

نسخه نمایشی @container

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

پرس و جوهای ظرف سبک

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 18.

منبع

درخواست‌های سبک با اجرای جزئی در Chrome 111 وارد شدند. در حال حاضر با جستجوهای سبک، می‌توانید هنگام استفاده از @container style() مقدار ویژگی‌های سفارشی را در یک عنصر والد پرس‌وجو کنید. به عنوان مثال، اگر مقدار خاصیت سفارشی وجود دارد، یا روی مقدار خاصی تنظیم شده است، پرس و جو کنید، مانند @container style(--rain: true) .

اسکرین شات پرس و جوی سبک

اسکرین شات نمایشی برای کارت‌های آب و هوای درخواست‌های ظرف سبک

دمو پرس و جوی سبک

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

در حالی که این شبیه به استفاده از نام کلاس ها در CSS است، پرس و جوهای سبک دارای مزایایی هستند. اولین مورد این است که با کوئری های سبک، می توانید مقدار را در CSS در صورت نیاز برای حالت های کاذب به روز کنید. همچنین، در نسخه‌های بعدی پیاده‌سازی، می‌توانید محدوده‌هایی از مقادیر را برای تعیین سبک اعمال شده جستجو کنید، مانند style(60 <= --weather <= 70) و سبک بر اساس جفت‌های ویژگی-مقدار مانند style(font-style: italic) .

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

انتخابگر :has().

پشتیبانی مرورگر

  • کروم: 105.
  • لبه: 105.
  • فایرفاکس: 121.
  • سافاری: 15.4.

منبع

تقریباً 20 سال است که توسعه دهندگان درخواست یک "انتخاب کننده والد" در CSS داشتند. با انتخابگر :has() که در کروم 105 ارسال شده است، اکنون این امکان وجود دارد. به عنوان مثال، با استفاده از .card:has(img.hero) عناصر .card را انتخاب می کنیم که در کودکی تصویر قهرمان دارند.

:has() اسکرین شات دمو

Reference screenshot for the :has() demo

:has() نسخه نمایشی زنده

CSS :has() دمو: کارت بدون/با تصویر

از آنجا که :has() یک لیست انتخابگر نسبی را به عنوان آرگومان خود می پذیرد، می توانید خیلی بیشتر از عنصر والد انتخاب کنید. با استفاده از ترکیب‌کننده‌های مختلف CSS، نه تنها می‌توان از درخت DOM بالا رفت، بلکه انتخاب‌های جانبی را نیز انجام داد. به عنوان مثال، li:has(+ li:hover) عنصر <li> را که قبل از عنصر <li> شناور فعلی قرار دارد انتخاب می کند.

:has() Screencast

نسخه نمایشی :has()

CSS :has() دمو: داک

درباره انتخابگر CSS :has() بیشتر بیاموزید.

درخواست رسانه را به روز کنید

پشتیبانی مرورگر

  • کروم: 113.
  • لبه: 113.
  • فایرفاکس: 102.
  • سافاری: 17.

منبع

درخواست رسانه update راهی به شما می دهد تا رابط کاربری را با نرخ تازه سازی دستگاه تطبیق دهید. این ویژگی می‌تواند مقدار fast ، slow یا none را گزارش کند که به قابلیت‌های دستگاه‌های مختلف مربوط می‌شود.

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

به روز رسانی Screencast

نسخه ی نمایشی را به روز کنید

یک مقدار سرعت به‌روزرسانی را شبیه‌سازی کنید (با انتخاب یک گزینه رادیویی) و ببینید که چگونه روی اردک تأثیر می‌گذارد.

درباره رسانه @ (به روز رسانی) بیشتر بیاموزید.

پرس و جو رسانه اسکریپت

پشتیبانی مرورگر

  • کروم: 120.
  • لبه: 120.
  • فایرفاکس: 113.
  • سافاری: 17.

منبع

پرس و جو رسانه اسکریپت را می توان برای بررسی اینکه آیا جاوا اسکریپت در دسترس است یا نه استفاده می شود. این برای بهبود پیشرونده بسیار خوب است. قبل از این پرسش رسانه ای، یک استراتژی برای تشخیص موجود بودن جاوا اسکریپت، قرار دادن یک کلاس nojs در HTML و حذف آن با جاوا اسکریپت بود. این اسکریپت ها را می توان حذف کرد زیرا CSS اکنون راهی برای شناسایی جاوا اسکریپت و تنظیم بر اساس آن دارد.

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

فیلمنامه نویسی Screencast

نسخه ی نمایشی اسکریپت

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

درباره اسکریپت بیشتر بیاموزید.

درخواست رسانه با شفافیت کاهش یافته

پشتیبانی مرورگر

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

منبع

رابط های غیر شفاف می توانند باعث سردرد یا مبارزه بصری برای انواع مختلف کمبود بینایی شوند. به همین دلیل است که Windows، macOS و iOS تنظیمات برگزیده سیستمی دارند که می تواند شفافیت را از رابط کاربری کاهش دهد یا حذف کند. این پرس و جو رسانه ای برای prefers-reduced-transparency به خوبی با دیگر پرس و جوهای رسانه ترجیحی مطابقت دارد، که به شما امکان می دهد در عین حال برای کاربران خلاق باشید.

کاهش شفافیت صفحه نمایش

نمایش شفافیت کاهش یافته است

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

درباره @media (prefers-reduced-transparency) بیشتر بیاموزید.

تعامل

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

مشاهده انتقال

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 18.

منبع

انتقال مشاهده تاثیر زیادی بر تجربه کاربری یک صفحه دارد. با View Transitions API، می‌توانید انتقال‌های بصری بین دو حالت صفحه برنامه Single Page خود ایجاد کنید. این انتقال‌ها می‌توانند انتقال کامل صفحه یا چیزهای کوچک‌تر در یک صفحه مانند افزودن یا حذف یک مورد جدید به یک لیست باشند.

در هسته View Transitions API تابع document.startViewTranstion است. تابعی را بفرستید که DOM را به حالت جدید به روز می کند و API همه چیز را برای شما انجام می دهد. این کار را با گرفتن یک عکس فوری قبل و بعد و سپس انتقال بین این دو انجام می دهد. با استفاده از CSS می توانید آنچه را که گرفته می شود کنترل کنید و به صورت اختیاری نحوه متحرک شدن این عکس های فوری را سفارشی کنید.

VT Screencast

نسخه ی نمایشی VT

نمایش نسخه ی نمایشی Transitions

View Transitions API برای برنامه‌های یک صفحه در Chrome 111 ارسال شده است. درباره View Transitions بیشتر بدانید.

تابع تسهیل خطی

پشتیبانی مرورگر

  • کروم: 113.
  • لبه: 113.
  • فایرفاکس: 112.
  • سافاری: 17.2.

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

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

Chart of a bounce easing curve with several dots added to it
منحنی پرش اصلی به رنگ آبی با مجموعه ای از نقاط کلیدی که به رنگ سبز نشان داده شده اند، ساده شده است. تابع linear() از این نقاط استفاده می کند و به صورت خطی بین آنها درون یابی می کند.

Screencast با کاهش خطی

نسخه ی نمایشی ساده سازی خطی

نسخه ی نمایشی linear() CSS.

درباره linear() بیشتر بیاموزید. برای ایجاد منحنی های linear() از مولد آسان سازی خطی استفاده کنید.

اسکرول پایان

پشتیبانی مرورگر

  • کروم: 114.
  • لبه: 114.
  • فایرفاکس: 109.
  • سافاری: پشتیبانی نمی شود.

منبع

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

Scrollend Screencast

اسکرولند نسخه ی نمایشی

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

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

انیمیشن های اسکرول محور

پشتیبانی مرورگر

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

منبع

انیمیشن‌های اسکرول‌مدار یک ویژگی هیجان‌انگیز در Chrome 115 هستند. این ویژگی‌ها به شما امکان می‌دهند یک انیمیشن CSS موجود یا یک انیمیشن ساخته شده با Web Animations API را بگیرید و آن را به افست اسکرول یک اسکرول متصل کنید. همانطور که به بالا و پایین پیمایش می کنید – یا به چپ و راست در یک پیمایش افقی – انیمیشن پیوند داده شده در پاسخ مستقیم به جلو و عقب حرکت می کند.

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

SDA Screencast

نسخه ی نمایشی SDA

دمو انیمیشن های اسکرول محور CSS: جدول زمانی اسکرول

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

SDA Demo Screencast

نسخه نمایشی زنده SDA

دمو انیمیشن های اسکرول محور CSS: جدول زمانی را مشاهده کنید

از آنجایی که انیمیشن های اسکرول محور با انیمیشن های CSS و Web Animations API کار می کنند، می توانید از تمام مزایای این API ها بهره مند شوید. این شامل توانایی این است که این انیمیشن ها از موضوع اصلی خارج شوند. اکنون می‌توانید انیمیشن‌های صاف ابریشمی داشته باشید که با اسکرول هدایت می‌شوند و تنها با چند خط کد اضافی از رشته اصلی خارج می‌شوند – چه چیزی را دوست ندارید؟

برای کسب اطلاعات بیشتر در مورد انیمیشن های اسکرول محور ، این مقاله را با تمام جزئیات بررسی کنید یا از scroll-driven-animations.style بازدید کنید که شامل دموهای زیادی است.

پیوست جدول زمانی معوق

پشتیبانی مرورگر

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

منبع

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

برای اینکه عنصر متحرک بتواند یک خط زمانی اسکرول نامگذاری شده از یک غیر اجداد را پیدا کند، از ویژگی timeline-scope در والد مشترک استفاده کنید. این اجازه می دهد تا scroll-timeline یا view-timeline تعریف شده با آن نام به آن متصل شود و دامنه وسیع تری به آن بدهد. با این کار، هر فرزند آن والدین مشترک می‌تواند از جدول زمانی با آن نام استفاده کند.

Visualization of a DOM subtree with timeline-scope used on a shared parent
با اعلان‌شده timeline-scope بر روی والد مشترک، scroll-timeline اعلام‌شده در پیمایشگر را می‌توان توسط عنصری که از آن به‌عنوان animation-timeline استفاده می‌کند پیدا کرد.

نمایش نمایش نسخه ی نمایشی

نسخه نمایشی زنده

نسخه ی نمایشی انیمیشن های پیمایش محور CSS: پیوست جدول زمانی معوق

درباره timeline-scope بیشتر بیاموزید.

انیمیشن های دارایی گسسته

یکی دیگر از قابلیت‌های جدید در سال 2023، امکان متحرک کردن انیمیشن‌های مجزا، مانند متحرک سازی به و از display: none . از Chrome 116، می‌توانید display و content-visibility در قوانین فریم کلیدی استفاده کنید. همچنین می توانید هر ویژگی گسسته را در نقطه 50% به جای 0% انتقال دهید. این امر با ویژگی transition-behavior با استفاده از کلمه کلیدی allow-discrete یا در ویژگی transition به عنوان مختصر به دست می آید.

انیمیشن گسسته. پخش صفحه نمایش

انیمیشن گسسته. نسخه ی نمایشی

درباره انتقال انیمیشن های مجزا بیشتر بیاموزید.

@starting-style

پشتیبانی مرورگر

  • کروم: 117.
  • لبه: 117.
  • فایرفاکس: 129.
  • سافاری: 17.5.

منبع

قانون CSS @starting-style بر اساس قابلیت‌های جدید وب برای متحرک سازی به و از display: none . این قانون راهی برای دادن یک عنصر به سبک "قبل از باز کردن" ارائه می دهد که مرورگر می تواند قبل از باز شدن عنصر در صفحه جستجو کند. این برای انیمیشن های ورودی و برای انیمیشن سازی در عناصری مانند پاپاور یا دیالوگ بسیار مفید است. همچنین می‌تواند برای هر زمانی که یک عنصر را ایجاد می‌کنید و می‌خواهید به آن امکان متحرک سازی را بدهید، مفید باشد. مثال زیر را در نظر بگیرید که یک ویژگی popover (به بخش بعدی را ببینید) به صورت هموار از خارج از قسمت مشاهده و وارد لایه بالایی می‌کند. درگاه دید

@Starting-style Screencast

@starting-style نسخه ی نمایشی

درباره @starting-style و سایر انیمیشن های ورودی بیشتر بیاموزید.

پوشش

پشتیبانی مرورگر

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

منبع

ویژگی جدید overlay CSS را می‌توان به انتقال شما اضافه کرد تا عناصر با سبک‌های لایه بالا - مانند popover و dialog - را فعال کند تا به راحتی از لایه بالایی متحرک شوند. اگر همپوشانی انتقال را انجام ندهید، عنصر شما فوراً به حالت بریده شدن، تبدیل شدن و پوشاندن برمی‌گردد و شما شاهد وقوع این انتقال نخواهید بود. به طور مشابه، overlay ::backdrop قادر می‌سازد تا وقتی به یک عنصر لایه بالایی اضافه می‌شود، به آرامی متحرک شود.

پخش روی صفحه نمایش

روکش نمایش زنده

درباره همپوشانی و سایر انیمیشن های خروجی بیشتر بیاموزید.

اجزاء

سال 2023 سال بزرگی برای تلاقی مولفه های سبک و HTML بود، با فرود popover و کارهای زیادی که در مورد موقعیت لنگر و آینده استایل کشویی انجام شد. این مؤلفه‌ها ساختن الگوهای رابط کاربری مشترک را بدون نیاز به تکیه بر کتابخانه‌های اضافی یا ساختن سیستم‌های مدیریت دولتی خود از ابتدا آسان‌تر می‌کنند.

پاپاور

پشتیبانی مرورگر

  • کروم: 114.
  • لبه: 114.
  • فایرفاکس: 125.
  • سافاری: 17.

منبع

Popover API به شما کمک می کند تا عناصری را بسازید که در بالای بقیه صفحه قرار دارند. اینها می تواند شامل منوها، انتخاب و نکات ابزار باشد. می‌توانید با افزودن ویژگی popover و یک id به عنصری که ظاهر می‌شود، یک popover ساده ایجاد کنید و با استفاده از popovertarget="my-popover" ویژگی id آن را به یک دکمه فراخوانی متصل کنید. Popover API پشتیبانی می کند:

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

فیلم Popover Screencast

Popover Live Demo

قوانین افقی در انتخاب

یکی دیگر از تغییرات کوچک دیگر در HTML که امسال در کروم و سافاری مشاهده شد، امکان افزودن عناصر قاعده افقی (برچسب‌های <hr> ) به عناصر <select> برای کمک به تقسیم بصری محتوای شما است. قبلاً، قرار دادن تگ <hr> در یک انتخاب به سادگی رندر نمی شد. اما امسال، هم سافاری و هم کروم از این ویژگی پشتیبانی می‌کنند و امکان تفکیک بهتر محتوا در عناصر <select> را فراهم می‌کنند.

اسکرین شات را انتخاب کنید

اسکرین شات ساعت در حالت انتخابی با طرح زمینه روشن و تاریک در کروم

Live Demo را انتخاب کنید

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

:کلاس های شبه کاربر معتبر و نامعتبر

پشتیبانی مرورگر

  • کروم: 119.
  • لبه: 119.
  • فایرفاکس: 88.
  • سافاری: 16.5.

منبع

امسال در همه مرورگرها ثابت است، :user-valid و :user-invalid مشابه کلاس های شبه :valid و :invalid رفتار می کنند، اما تنها پس از اینکه کاربر به طور قابل توجهی با ورودی تعامل داشته باشد، با کنترل فرم مطابقت دارد. یک کنترل فرم که مورد نیاز و خالی است مطابق با :invalid خواهد بود حتی اگر کاربر تعامل با صفحه را شروع نکرده باشد. تا زمانی که کاربر ورودی را تغییر نداده و آن را در حالت نامعتبر رها کند، همان کنترل با :user-invalid مطابقت نخواهد داشت.

با این انتخابگرهای جدید، دیگر نیازی به نوشتن کد حالتی برای پیگیری تغییرات ورودی کاربر نیست.

:user-* Screencast

:user-* نسخه نمایشی زنده

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

آکاردئون انحصاری

پشتیبانی مرورگر

  • کروم: 120.
  • لبه: 120.
  • فایرفاکس: 130.
  • سافاری: 17.2.

یک الگوی رابط کاربری رایج در وب، یک جزء آکاردئونی است. برای پیاده‌سازی این الگو، چند عنصر <details> را ترکیب می‌کنید و اغلب آنها را به صورت بصری گروه‌بندی می‌کنید تا نشان دهند که به یکدیگر تعلق دارند.

جدید در Chrome 120 پشتیبانی از ویژگی name در عناصر <details> است. هنگامی که از این ویژگی استفاده می شود، چندین عنصر <details> که دارای مقدار name یکسانی هستند، یک گروه معنایی را تشکیل می دهند. حداکثر یک عنصر در گروه می تواند به طور همزمان باز شود: وقتی یکی از عناصر <details> را از گروه باز می کنید، عنصری که قبلاً باز شده بود به طور خودکار بسته می شود. این نوع آکاردئون را آکاردئون انحصاری می نامند.

دمو انحصاری آکاردئون

عناصر <details> که بخشی از یک آکاردئون انحصاری هستند لزوماً لازم نیست خواهر و برادر باشند. آنها می توانند در سراسر سند پراکنده شوند.

CSS در چند سال گذشته و به‌ویژه در سال 2023 چنین رنسانسی داشته است. اگر در CSS تازه کار هستید یا فقط می‌خواهید در مورد اصول اولیه تجدید نظر کنید، دوره رایگان Learn CSS ما را همراه با سایر دوره‌های رایگان ارائه شده در وب بررسی کنید. .dev.

ما برای شما فصل تعطیلات خوشی آرزو می کنیم و امیدواریم که به زودی فرصتی برای اضافه کردن برخی از این ویژگی های جدید CSS و UI در کار خود داشته باشید!

⇾ تیم توسعه دهنده Chrome UI،