این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

پرش به محتوا:

مبانی معماری
توابع مثلثاتی
انتخاب پیچیده nth-*
دامنه
لانه سازی

تایپوگرافی
حرف اول
توازن بسته بندی متن/زیبا

رنگ
سطح رنگ 4
عملکرد ترکیب رنگ
نحو نسبی رنگ

طراحی واکنشگرا
پرس و جوهای کانتینر
پرس و جوهای سبک
:دارای انتخابگر
درخواست رسانه را به روز کنید
پرس و جو رسانه اسکریپت
پرسش رسانه شفافیت

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

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

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

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

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

مبانی معماری

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

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

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

منبع

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

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

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

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

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

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

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

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

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

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

دامنه

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

منبع

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 خواهید آموخت.

لانه سازی

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

منبع

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

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

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

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

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

زیرشبکه

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

منبع

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

Subgrid Screencast

Subgrid Live Demo

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

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

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

تایپوگرافی

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

حرف اول

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

منبع

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

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

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

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

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

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

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

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

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

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

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

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

رنگ

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

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

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

منبع

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

منبع

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

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

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

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

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

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

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

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

منبع

ترکیب رنگ یک کار کلاسیک است و در سال 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() از مؤلفه‌هایی پشتیبانی می‌کند که دارای استایل پاسخگو و منطقی بر اساس اندازه والدینشان و همچنین حضور یا وضعیت هر یک از فرزندانشان هستند. این بدان معناست که در نهایت می‌توانید طرح‌بندی سطح صفحه را از طرح‌بندی در سطح مؤلفه جدا کنید و یک بار منطق را بنویسید تا از مؤلفه خود در همه جا استفاده کنید!

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

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

منبع

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

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

@container Screencast

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

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

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

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

منبع

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

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

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

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

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

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

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

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

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

منبع

تقریباً 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() بیشتر بیاموزید.

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

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

منبع

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

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

به روز رسانی Screencast

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

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

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

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

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

منبع

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

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

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

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

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

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

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

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

منبع

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

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

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

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

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

تعامل

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

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

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

منبع

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

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

VT Screencast

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

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

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

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

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

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

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

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

Screencast با کاهش خطی

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

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

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

اسکرول پایان

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

منبع

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

Scrollend Screencast

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

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

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

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

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

منبع

انیمیشن‌های اسکرول‌مدار یک ویژگی هیجان‌انگیز در 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 بازدید کنید که شامل دموهای زیادی است.

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

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

منبع

هنگام استفاده از یک انیمیشن اسکرول محور از طریق 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

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

منبع

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

@Starting-style Screencast

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

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

پوشش

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

منبع

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

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

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

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

اجزاء

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

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

منبع

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

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

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

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

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

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

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

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

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

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

منبع

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

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

:user-* Screencast

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

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

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

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

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

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

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

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

نتیجه گیری

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

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

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

Una Kravets

Bramus

Adam Argyle

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

پرش به محتوا:

مبانی معماری
توابع مثلثاتی
انتخاب پیچیده nth-*
دامنه
لانه سازی

تایپوگرافی
حرف اول
توازن بسته بندی متن/زیبا

رنگ
سطح رنگ 4
عملکرد ترکیب رنگ
نحو نسبی رنگ

طراحی واکنشگرا
پرس و جوهای کانتینر
پرس و جوهای سبک
:دارای انتخابگر
درخواست رسانه را به روز کنید
پرس و جو رسانه اسکریپت
پرسش رسانه شفافیت

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

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

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

مبانی معماری

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

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

منبع

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

عملکردهای مثلثاتی نسخه ی نمایشی

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

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

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

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

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

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

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

در مورد انتخاب های پیچیده Nth-* اطلاعات بیشتری کسب کنید.

دامنه

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

منبع

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

یک زیر زمینی Scoped توسط یک ریشه Scoping (مرز فوقانی) و یک محدوده Scoping اختیاری (مرز پایین) تعریف می شود.

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

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

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

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

تصویر نمایشی دامنه

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

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

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

لانه سازی

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

منبع

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

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 */
}

صفحه نمایش لانه سازی

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

انتخاب کننده لانه سازی آرام را تغییر دهید تا برنده مسابقه شود

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

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

زیرشبکه

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

منبع

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

صفحه نمایش زیر شبکه

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

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

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

درباره Subgrid بیشتر بدانید.

تایپوگرافی

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

با طرح اولیه

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

منبع

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

تصویر برگه اولیه

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

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

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

متن نوشتن: تعادل و زیبا

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

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

صفحه متن چاپ متن

نسخه ی نمایشی زنده متن چاپ

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

در مورد متن متن: تعادل بیشتر بدانید.

رنگ

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

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

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

منبع

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

منبع

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

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

رنگ 4 صفحه

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

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

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

تابع رنگ

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

منبع

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

رنگ مخلوط () صفحه نمایش

رنگ آمیزی () نسخه ی نمایشی

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

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

درباره رنگ آمیزی () بیشتر بدانید.

نحو رنگ نسبی

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

صفحه نمایش RCS

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

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

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

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

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

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

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

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

منبع

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

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

صفحه نمایش container

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

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

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

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

منبع

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

تصویر پرس و جو سبک

تصویر نسخه ی نمایشی برای کارتهای آب و هوایی سبک های سبک

نسخه نمایشی پرس و جو سبک

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

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

: دارای () انتخاب کننده است

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

منبع

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

: HAS () تصویر نسخه ی نمایشی

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

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

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

: دارای () صفحه نمایش

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

CSS :has() نسخه ی نمایشی: حوض

درباره CSS :has() انتخاب کنید .

پرس و جو رسانه ای را به روز کنید

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

منبع

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

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

صفحه نمایش به روزرسانی

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

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

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

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

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

منبع

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

بیاموزید که چگونه JavaScript را در صفحه ای برای آزمایش از طریق Devtools Chrome در اینجا فعال و غیرفعال کنید .

صفحه نمایش اسکریپت

نسخه نمایشی

یک سوئیچ موضوع را در یک وب سایت در نظر بگیرید ، پرس و جو رسانه ای اسکریپت می تواند در ساخت سوئیچ در برابر اولویت سیستم کمک کند زیرا هیچ جاوا اسکریپت در دسترس نیست. یا یک مؤلفه سوئیچ را در نظر بگیرید - اگر JavaScript در دسترس است ، می توان به جای اینکه فقط روشن و خاموش شود ، سوئیچ را با یک ژست بکشید. در صورت عدم دسترسی به یک تجربه پایه و اساس معنی دار در صورت غیرفعال کردن اسکریپت ، بسیاری از فرصت های عالی برای به روزرسانی UX در صورتی که یک تجربه بنیاد معنی دار در دسترس باشد.

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

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

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

منبع

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

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

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

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

در مورد Media بیشتر بدانید (ترجیح می دهد که از بین برود) .

تعامل

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

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

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

منبع

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

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

صفحه نمایش VT

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

نمایش نسخه ی نمایشی انتقال

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

تابع خطی

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

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

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

صفحه نمایش خطی

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

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

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

پایان پیمایش

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

منبع

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

صفحه نمایش پیمایش

نسخه آزمایشی

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

درباره Scrollend بیشتر بدانید.

انیمیشن های محور پیمایش

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

منبع

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

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

صفحه نمایش SDA

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

نمایشی انیمیشن های محور CSS: Timeline Scroll

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

صفحه نمایش نمایشی SDA

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

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

از آنجا که انیمیشن های محور پیمایش با انیمیشن های CSS و API انیمیشن های وب کار می کنند ، می توانید از تمام مزایایی که این API ها به ارمغان می آورند بهره مند شوید. این شامل توانایی اجرای این انیمیشن ها از موضوع اصلی است. اکنون می توانید انیمیشن های صاف ابریشمی داشته باشید ، که توسط پیمایش رانده می شوند ، فقط با چند خط کد اضافی ، موضوع اصلی را خاموش می کنند - چه چیزی را دوست ندارد؟

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

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

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

منبع

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

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

صفحه نمایش آزمایشی

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

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

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

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

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

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

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

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

@starting-style

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

منبع

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

@Screencast به سبک شروع

@نسخه ی نمایشی به سبک شروع

در مورد @startlay و سایر انیمیشن های ورودی اطلاعات بیشتری کسب کنید.

پوشش

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

منبع

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

صفحه نمایش روکش

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

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

اجزاء

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

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

منبع

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

ارتقاء به لایه بالا. Popovers در یک لایه جداگانه در بالای بقیه صفحه ظاهر می شود ، بنابراین لازم نیست با Z-Index بازی کنید.
عملکرد نور دیسمیس. با کلیک بر روی خارج از منطقه پوپور ، تمرکز پاپور و بازگشت به شما بسته می شود.
مدیریت تمرکز پیش فرض. باز کردن Popover باعث می شود که برگه بعدی در داخل پوپور متوقف شود.
اتصال صفحه کلید در دسترس. ضربه زدن به کلید esc یا Double Toggling باعث می شود که Popover بسته شود و تمرکز خود را برگرداند.
اتصالات مؤلفه در دسترس. اتصال یک عنصر پوپور به یک محرک پوپور از نظر معنایی.

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

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

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

تصویر HR در انتخاب با تم سبک و تاریک در Chrome

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

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

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

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

منبع

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

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

: کاربر-* صفحه نمایش

: کاربر-* نسخه ی نمایشی زنده

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

آکاردئون منحصر به فرد

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

یک الگوی UI مشترک در وب یک مؤلفه آکاردئون است. برای اجرای این الگوی ، شما چند عنصر <details> را با هم ترکیب می کنید ، که اغلب آنها را به صورت بصری گروه بندی می کنید تا نشان دهند که آنها در کنار هم هستند.

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

نسخه ی نمایشی آکاردئون اختصاصی

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

نتیجه گیری

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

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

team the chrome ui devrel ،

Una Kravets

Bramus

Adam Argyle

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

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

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

Scope Live Demo

Nesting Screencast

Nesting Live Demo

Subgrid Screencast

Subgrid Live Demo

تایپوگرافی

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

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

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

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

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

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

color-mix() Screencast

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

RCS Screencast

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

@container Screencast

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

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

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

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

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

:has() Screencast

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

به روز رسانی Screencast

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

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

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

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

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

VT Screencast

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

Screencast با کاهش خطی

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

Scrollend Screencast

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

SDA Screencast

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

SDA Demo Screencast

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

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

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

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

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

@Starting-style Screencast

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

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

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

فیلم Popover Screencast

Popover Live Demo

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

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

:user-* Screencast

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

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

تصویر نمایشی دامنه

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

صفحه نمایش لانه سازی

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

صفحه نمایش زیر شبکه

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

تایپوگرافی

تصویر برگه اولیه

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

صفحه متن چاپ متن

نسخه ی نمایشی زنده متن چاپ

رنگ 4 صفحه

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

رنگ مخلوط () صفحه نمایش

رنگ آمیزی () نسخه ی نمایشی

صفحه نمایش RCS

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

صفحه نمایش container

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

تصویر پرس و جو سبک

نسخه نمایشی پرس و جو سبک

: HAS () تصویر نسخه ی نمایشی