وضعیت CSS 2022

ویژگی‌های طراحی وب امروز و فردا، همانطور که در Google IO 2022 دیده می‌شود، به‌علاوه برخی موارد اضافی.

Adam Argyle

سال 2022 قرار است یکی از بهترین سال‌های CSS باشد، هم از نظر ویژگی‌ها و هم در انتشار ویژگی‌های مرورگر مشترک، با هدف مشترک برای پیاده‌سازی 14 ویژگی!

نمای کلی

این پست فرم مقاله سخنرانی ارائه شده در Google IO 2022 است. قرار نیست راهنمای عمیقی در مورد هر ویژگی باشد، بلکه مقدمه و مروری مختصر برای برانگیختن علاقه شماست و به جای عمق، وسعت ارائه می دهد. اگر علاقه شما برانگیخته شده است، انتهای یک بخش را برای پیوندهای منابع به اطلاعات بیشتر بررسی کنید.

فهرست مطالب

از لیست زیر برای رفتن به موضوعات مورد علاقه استفاده کنید:

سازگاری مرورگر

دلیل اصلی که بسیاری از ویژگی‌های CSS برای انتشار مشترک تنظیم شده‌اند، به دلیل تلاش‌های Interop 2022 است. قبل از مطالعه تلاش های Interop، مهم است که به تلاش های Compat 2021 نگاه کنید.

Compat 2021

اهداف سال 2021، با توجه به بازخورد توسعه‌دهندگان از طریق نظرسنجی‌ها، تثبیت ویژگی‌های فعلی، بهبود مجموعه آزمایشی و افزایش امتیازات قبولی مرورگرها برای پنج ویژگی بود:

1. موقعیت sticky
2. اندازه aspect-ratio
3. طرح flex
4. چیدمان grid
5. transform موقعیت و انیمیشن

نمرات آزمون در سراسر هیئت مدیره افزایش یافت، که ثبات و قابلیت اطمینان ارتقا یافته را نشان داد. تبریک بزرگ به تیم های اینجا!

اینتروپ 2022

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

1. @layer
2. فضاهای رنگی و عملکردها
3. مهار
4. <dialog>
5. سازگاری فرم
6. پیمایش
7. زیرشبکه
8. تایپوگرافی
9. واحدهای نما
10. سازگار با وب

این یک لیست هیجان انگیز و جاه طلبانه است که من نمی توانم منتظر بمانم تا آشکار شود.

تازه برای سال 2022

جای تعجب نیست که وضعیت CSS 2022 به طور چشمگیری تحت تأثیر کار Interop 2022 قرار گرفته است.

لایه های آبشاری

قبل از @layer ، ترتیب کشف شده شیوه نامه های بارگذاری شده بسیار مهم بود، زیرا سبک هایی که آخرین بارگذاری شده اند می توانند سبک های بارگذاری شده قبلی را بازنویسی کنند. این منجر به شیوه‌نامه‌های ورودی با مدیریت دقیق شد، جایی که توسعه‌دهندگان باید ابتدا سبک‌های مهم‌تر و بعداً سبک‌های مهم‌تر را بارگذاری کنند. متدولوژی های کاملی برای کمک به توسعه دهندگان در مدیریت این اهمیت وجود دارد، مانند ITCSS .

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

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

Chrome DevTools برای تجسم سبک‌هایی که از کدام لایه‌ها می‌آیند مفید است:

منابع

• مشخصات CSS Cascade 5
• توضیح دهنده لایه های آبشاری
• لایه های آبشاری روی MDN
• Una Kravets : لایه های آبشاری
• احمد شادید : سلام، CSS Cascade Layers

زیرشبکه

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

بعد از subgrid ، یک فرزند یک شبکه می‌تواند ستون‌ها یا ردیف‌های والدینش را به عنوان ستون‌های خود بپذیرد و خود یا فرزندان را با آنها تراز کند!

در دمو زیر، عنصر بدنه یک شبکه کلاسیک از سه ستون ایجاد می‌کند: ستون وسط main نامیده می‌شود و ستون‌های چپ و راست خطوط خود را fullbleed نامگذاری می‌کنند. سپس، هر عنصر در بدنه، <nav> و <main> ، خطوط نام‌گذاری شده را از بدنه با تنظیم grid-template-columns: subgrid می‌پذیرد.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

در نهایت، فرزندان <nav> یا <main> می‌توانند با استفاده از ستون‌ها و خطوط fullbleed و main ، خود را تراز یا اندازه کنند.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

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

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

منابع

• مشخصات زیرشبکه
• زیرشبکه در MDN
• Bramus : عملی CSS Subgrid Video Tutorial

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

قبل از @container ، عناصر یک صفحه وب فقط می‌توانستند به اندازه کل viewport پاسخ دهند. این برای طرح‌بندی‌های ماکرو عالی است، اما برای طرح‌بندی‌های میکرو، که محفظه بیرونی آن‌ها تمام نمای دید نیست، تنظیم طرح‌بندی بر اساس آن غیرممکن است.

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

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

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

در اینجا CSS برای پرس و جو از محفظه calendar-day برای اندازه آن، سپس تنظیم طرح و اندازه فونت آمده است:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

در اینجا مثال دیگری وجود دارد: یک جزء کتاب خود را با فضای موجود در ستونی که به آن کشیده شده است، تطبیق می دهد:

یونا در ارزیابی وضعیت به عنوان پاسخگوی جدید درست است. هنگام استفاده از @container تصمیمات طراحی هیجان انگیز و معناداری زیادی وجود دارد.

منابع

• مشخصات پرس و جو کانتینر
• توضیح دهنده پرس و جوهای کانتینر
• پرس و جوهای کانتینر در MDN
• پاسخگوی جدید در web.dev
• نسخه ی نمایشی تقویم توسط Una
• مجموعه پرس و جوهای کانتینر عالی
• چگونه Designcember را در web.dev ساختیم
• احمد شادید : به پرسش های کانتینر CSS سلام کنید

accent-color

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

بعد از accent-color ، یک خط CSS یک رنگ نام تجاری را به اجزای داخلی می آورد. علاوه بر رنگ، مرورگر به طور هوشمندانه رنگ‌های متضاد مناسب را برای قسمت‌های فرعی جزء انتخاب می‌کند و با طرح‌های رنگی سیستم (روشن یا تیره) سازگار می‌شود.

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

برای کسب اطلاعات بیشتر در مورد accent-color ، پست من در web.dev را بررسی کنید ، جایی که من جنبه های بیشتری از این ویژگی مفید CSS را بررسی می کنم.

منابع

• مشخصات لهجه-رنگ
• لهجه-رنگ در MDN
• accent-color در web.dev
• Bramus : کنترل‌های رابط کاربری رنگی با CSS accent-color

سطح رنگ 4 و 5

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

اما نه در سال 2022 - CSS دارای تعدادی عملکرد و فضاهای رنگی جدید است: - رنگ هایی که به قابلیت های رنگ HD نمایشگرها می رسند. - فضاهای رنگی که با یک هدف مطابقت دارند، مانند یکنواختی ادراکی. - فضاهای رنگی برای شیب هایی که نتایج درون یابی را به شدت تغییر می دهند. - عملکردهای رنگی برای کمک به ترکیب و کنتراست و انتخاب فضایی که کار را انجام می دهید.

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

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

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

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

با استفاده از این تابع رنگ، رنگ هایی از فضای رنگی sRGB، مانند HSL و RGB، ایجاد می شود. از نظر جدید بودن برای سال 2022، این رنگ های جدیدی به شما نمی دهد، اما ممکن است برخی از کارها را برای طرفداران نحو و مدل ذهنی آسان تر کند.

منابع

• مشخصات HWB
• HWB در MDN
• استفان جودیس : hwb() – نماد رنگی برای انسان ها؟

فضاهای رنگی

نحوه نمایش رنگ ها با یک فضای رنگی انجام می شود. هر فضای رنگی ویژگی ها و مبادلات مختلفی را برای کار با رنگ ارائه می دهد. برخی ممکن است همه رنگ های روشن را با هم ترکیب کنند. برخی ممکن است ابتدا آنها را بر اساس سبکی آنها ردیف کنند.

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

color-mix()

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

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

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

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

و اگر می‌خواهید آن رنگ‌ها را در فضای رنگی متفاوتی مانند srgb ترکیب کنید، آن را تغییر دهید:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

در اینجا یک نسخه ی نمایشی تم با استفاده از color-mix() ارائه می شود. رنگ برند را تغییر دهید و به‌روزرسانی تم را تماشا کنید:

از ترکیب رنگ ها در فضاهای رنگی مختلف در استایل شیت های خود در سال 2022 لذت ببرید!

منابع

• مشخصات color-mix()
• color-mix() در MDN
• نسخه ی نمایشی تم
• یک نسخه ی نمایشی تم دیگر
• Fabio Giolito : با این ویژگی های CSS آینده یک تم رنگی ایجاد کنید

color-contrast()

قبل از color-contrast() ، نویسندگان stylesheet نیاز داشتند که رنگ های قابل دسترس را زودتر بشناسند. اغلب یک پالت متن سیاه یا سفید را روی یک نمونه رنگی نشان می دهد تا به کاربر سیستم رنگی نشان دهد که کدام رنگ متن برای کنتراست مناسب با آن نمونه مورد نیاز است.

پس از color-contrast() نویسندگان stylesheet می توانند کار را به طور کامل در مرورگر بارگذاری کنند. نه تنها می‌توانید از مرورگر برای انتخاب خودکار یک رنگ سیاه یا سفید استفاده کنید، بلکه می‌توانید فهرستی از رنگ‌های مناسب سیستم طراحی را به آن بدهید و از آن بخواهید اولین رنگی را انتخاب کند که نسبت کنتراست مورد نظر شما را پاس می‌کند.

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

اصول سینتکس به این صورت است، جایی که خاکستری به تابع منتقل می شود و مرورگر تعیین می کند که سیاه یا سفید بیشترین کنتراست را دارند:

color: color-contrast(gray);

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

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

در نهایت، در صورتی که ترجیح داده شود بیشترین رنگ متضاد را از لیست انتخاب نکنید، نسبت کنتراست هدف را می توان ارائه کرد و اولین رنگی که از آن عبور می کند انتخاب می شود:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

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

منابع

• مشخصات ()color-contrast
• color-contrast() در MDN
• نسخه ی نمایشی

نحو نسبی رنگ

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

پس از نحو نسبی رنگ، هر رنگی در هر فضایی را می توان ساختارشکنی کرد، تغییر داد و به عنوان یک رنگ برگرداند، همه در یک خط CSS. دیگر محدودیتی برای HSL وجود ندارد - دستکاری‌ها را می‌توان در هر فضای رنگی دلخواه انجام داد، و برای تسهیل آن باید ویژگی‌های سفارشی کمتری ایجاد کرد.

در مثال دستوری زیر یک هگز پایه ارائه شده و دو رنگ جدید نسبت به آن ایجاد می شود. اولین رنگ --absolute-change یک رنگ جدید در LCH از رنگ پایه ایجاد می کند، سپس به جایگزینی روشنایی رنگ پایه با 75% می شود و رنگ ( c ) و رنگ ( h ) را حفظ می کند. رنگ دوم --relative-change یک رنگ جدید در LCH از رنگ پایه ایجاد می کند، اما این بار کروما ( c ) را 20% کاهش می دهد.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

در نسخه ی نمایشی زیر از دستور رنگ نسبی برای ایجاد انواع روشن تر و تیره تر از رنگ پایه استفاده کرده ام و از color-contrast() برای اطمینان از تضاد مناسب برچسب ها استفاده کرده ام:

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

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

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

منابع

• مشخصات نحو نسبی رنگ
• ساخت پالت های رنگی با نحو نسبی رنگ
• ساخت انواع رنگ با نحو نسبی رنگ

فضاهای رنگی گرادیان

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

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

افزودن نحو بعد از جهت گرادیان می رود، از new in نحو استفاده می کند و اختیاری است:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

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

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

برای کاوش های عمیق تر، مثال ها و نظرات، این موضوع توییتر را بخوانید.

منابع

• مشخصات درونیابی گرادیان
• نسخه ی نمایشی مقایسه گرادیان ها در فضاها
• نوت بوک قابل مشاهده مقایسه گرادیان ها

inert

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

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

یک مثال خوب از این تابع alert() JavaScript است:

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

در اینجا یک نمونه کد کوچک برای نشان دادن نحوه عملکرد آن وجود دارد:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

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

منابع

• مشخصات بی اثر
• بی اثر در MDN
• توسعه دهندگان کروم: معرفی بی اثر

فونت های COLRv1

قبل از فونت‌های COLRv1، وب دارای فونت‌های OT-SVG بود، همچنین یک فرمت باز برای فونت‌هایی با گرادیان و رنگ‌ها و جلوه‌های داخلی. اگرچه اینها می توانند بسیار بزرگ شوند، و در حالی که اجازه ویرایش متن را می دادند، فضای زیادی برای سفارشی سازی وجود نداشت.

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

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

فونت‌های آیکون می‌توانند کارهای شگفت‌انگیزی با این فرمت انجام دهند، پالت‌های رنگی دوتایی سفارشی و موارد دیگر را ارائه دهند. بارگذاری یک فونت COLRv1 درست مانند هر فایل فونت دیگری است:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

سفارشی‌سازی فونت COLRv1 با @font-palette-values ​​انجام می‌شود، یک قانون ویژه CSS برای گروه‌بندی و نام‌گذاری مجموعه‌ای از گزینه‌های سفارشی‌سازی در یک بسته برای ارجاع بعدی. توجه داشته باشید که چگونه یک نام سفارشی را دقیقاً مانند یک ویژگی سفارشی تعیین می کنید و با -- :

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

با --colorized به عنوان نام مستعار برای سفارشی‌سازی‌ها، آخرین مرحله اعمال پالت به عنصری است که از خانواده فونت رنگ استفاده می‌کند:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

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

منابع

• مشخصات Colrv1 در Github
• توسعه دهندگان کروم: قلم های Colrv1
• ویدیوی توضیح دهنده توسعه دهنده BlinkOn

واحدهای نما

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

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

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

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

در اینجا لیست کاملی از تمام گزینه‌های واحد نمای جدید ارائه شده با انواع نمای جدید موجود است:

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

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

منابع

• مشخصات واحدهای نسبی Viewport
• براموس : نماهای بزرگ، کوچک و پویا

:has()

قبل از :has() موضوع یک انتخابگر همیشه در پایان بود. به عنوان مثال، موضوع این انتخابگر یک آیتم لیست است: ul > li . انتخابگرهای شبه می توانند انتخابگر را تغییر دهند اما موضوع را تغییر نمی دهند: ul > li:hover یا ul > li:not(.selected) .

بعد از :has() ، یک موضوع بالاتر در درخت عنصر می تواند در حالی که یک پرس و جو در مورد فرزندان ارائه می دهد، موضوع باقی بماند: ul:has(> li) . به راحتی می توان فهمید که چگونه :has() نام مشترک "انتخاب کننده والد" را به دست آورد، زیرا موضوع انتخابگر اکنون در این مورد والد است.

در اینجا یک مثال ساده نحوی وجود دارد که در آن کلاس .parent موضوع باقی می ماند اما تنها در صورتی انتخاب می شود که عنصر فرزند دارای کلاس .child باشد:

.parent:has(.child) {...}

در اینجا مثالی وجود دارد که در آن عنصر <section> موضوع است، اما انتخابگر تنها در صورتی مطابقت دارد که یکی از فرزندان :focus-visible :

section:has(*:focus-visible) {...}

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

a:has(> img) {...}

همه اینها نمونه هایی بوده اند که :has() فقط شبیه انتخابگر والد است. در صورتی که شکل دارای یک <figcaption> باشد، استفاده از تصاویر داخل عناصر <figure> و تنظیم سبک‌ها را در تصاویر در نظر بگیرید. در مثال زیر، شکل‌هایی با عناوین شکلی و سپس تصاویر درون آن زمینه انتخاب می‌شوند. :has() استفاده می شود و موضوع را تغییر نمی دهد، زیرا موضوع مورد نظر ما تصاویر است نه شکل:

figure:has(figcaption) img {...}

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

بررسی پشتیبانی با @supports و تابع selector() آن ساده می شود، که بررسی می کند آیا مرورگر قبل از استفاده از نحو آن را درک می کند یا خیر:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

منابع

• مشخصات :has()
• :has() در MDN
• انتخابگر CSS :has() بسیار بیشتر از انتخابگر والد است.

2022 و پس از آن

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

نتیجه بخش‌های بعدی باید راحت باشد که مشکلات ذکر شده باعث شده افراد زیادی از بسیاری از شرکت‌ها به دنبال حل باشند – نه اینکه این راه‌حل‌ها در سال 2023 منتشر شوند.

ویژگی های سفارشی با تایپ آزاد

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

سناریویی را در نظر بگیرید که در آن یک box-shadow از ویژگی های سفارشی برای مقادیر خود استفاده می کند:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

همه اینها به خوبی کار می کند تا زمانی که یکی از ویژگی ها به مقداری تبدیل شود که CSS آن را نمی پذیرد، مانند --x: red . اگر هر یک از متغیرهای تودرتو از بین رفته باشد یا روی یک نوع مقدار نامعتبر تنظیم شود، کل سایه می شکند.

اینجاست که @property وارد می‌شود: --x می‌تواند به یک ویژگی سفارشی تایپ‌شده تبدیل شود، دیگر شل و انعطاف‌پذیر نیست، اما با برخی از مرزهای مشخص امن است:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

اکنون، وقتی box-shadow از var(--x) و بعد از آن --x: red استفاده می کند، red نادیده گرفته می شود زیرا یک <length> نیست. این بدان معناست که سایه به کار خود ادامه می‌دهد، حتی اگر مقدار نامعتبری به یکی از ویژگی‌های سفارشی آن داده شده باشد. به جای شکست، به initial-value خود یعنی 0px باز می گردد.

انیمیشن

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

این مثال نمایشی را در نظر بگیرید، که در آن از یک گرادیان شعاعی برای ایجاد بخشی از یک پوشش استفاده می‌شود و یک جلوه تمرکز نور ایجاد می‌کند. جاوا اسکریپت x و y ماوس را با فشار دادن کلید alt/opt تنظیم می‌کند و سپس اندازه کانونی را به مقدار کوچک‌تری مانند 25% تغییر می‌دهد و دایره تمرکز نور را در موقعیت ماوس ایجاد می‌کند:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

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

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

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

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

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

منابع

• مشخصات @property
• @property در MDN
• @property در web.dev
• دمو فوکوس بزرگنمایی
• ترفندهای CSS: کاوش ویژگی های @ و قدرت های متحرک آن

در min-width یا max-width بود

قبل از محدوده پرس و جو رسانه، یک پرس و جو رسانه CSS min-width و max-width برای بیان بیش از حد و تحت شرایط استفاده می کند. ممکن است به این شکل باشد:

@media (min-width: 320px) {
  …
}

پس از محدوده های پرس و جو رسانه، همان پرس و جو رسانه می تواند به شکل زیر باشد:

@media (width >= 320px) {
  …
}

یک درخواست رسانه CSS با استفاده از min-width و max-width ممکن است به این صورت باشد:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

پس از محدوده های پرس و جو رسانه، همان پرس و جو رسانه می تواند به شکل زیر باشد:

@media (320px <= width <= 1280px) {
  …
}

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

منابع

• مشخصات نحو محدوده پرس و جو رسانه
• نحو محدوده پرس و جو رسانه در MDN
• پلاگین سینتکس محدوده پرس و جو رسانه PostCSS

هیچ متغیر پرس و جو رسانه ای وجود ندارد

قبل از @custom-media ، کوئری‌های رسانه باید بارها و بارها تکرار می‌شدند، یا برای تولید خروجی مناسب بر اساس متغیرهای استاتیک در طول زمان ساخت، به پیش‌پردازنده‌ها تکیه می‌کردند.

پس از @custom-media ، CSS اجازه می‌دهد تا پرس‌و‌جوهای رسانه‌ای و ارجاع به آن‌ها را مانند یک ویژگی سفارشی با نام مستعار قرار دهید.

نام‌گذاری چیزها بسیار مهم است: می‌تواند هدف را با نحو هماهنگ کند و اشتراک‌گذاری چیزها را آسان‌تر و در تیم‌ها آسان‌تر استفاده کند. در اینجا چند پرسش رسانه ای سفارشی وجود دارد که من را در بین پروژه ها دنبال می کند:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

اکنون که آنها تعریف شده اند، می توانم یکی از آنها را به این صورت استفاده کنم:

@media (--OSdark) {
  :root {
    …
  }
}

فهرست کاملی از پرس و جوهای رسانه سفارشی را که در کتابخانه اموال سفارشی CSS خود استفاده می کنم، Open Props پیدا کنید.

منابع

• مشخصات درخواست رسانه سفارشی
• پلاگین درخواست های رسانه ای سفارشی PostCSS

انتخابگرهای تودرتو خیلی خوب است

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

بعد از @nest ، تکرار از بین می رود. تقریباً تمام ویژگی‌های تودرتوی دارای پیش‌پردازنده، به‌صورت داخلی در CSS در دسترس خواهند بود.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

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

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

یک کودک مؤلفه را در نظر بگیرید که می خواهد خود را تنظیم کند ، در حالی که در یک زمینه والدین متفاوت است ، برخلاف والدین که دارای سبک و تغییر کودک است:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest به طور کلی با سازمان سبک سالم ، تمرکز و مالکیت کمک می کند. مؤلفه ها می توانند به جای اینکه آنها را در بین بلوک های سبک دیگر گسترش دهند ، سبک های خود را گروه بندی و در اختیار داشته باشند. ممکن است در این مثالها کوچک به نظر برسد ، اما می تواند تأثیرات بسیار زیادی داشته باشد ، هم برای راحتی و هم برای خوانایی.

منابع

• مشخصات nest
• nest postcss افزونه
• BRAMUS : آینده CSS: انتخاب کننده های لانه سازی

سبک های scoping واقعاً سخت است

قبل از @scope ، بسیاری از استراتژی ها وجود داشته اند زیرا سبک های موجود در CSS Cascade ، وراثت و به طور پیش فرض در سطح جهان قرار دارند. این ویژگی های CSS برای بسیاری از موارد بسیار مناسب است ، اما برای سایت ها و برنامه های پیچیده ، با سبک های مختلف و بسیاری از اجزای مختلف ، فضای جهانی و ماهیت آبشار می تواند سبک ها را احساس کند که در حال نشت هستند.

بعد از @scope ، نه تنها می توان سبک ها را فقط در یک متن مانند یک کلاس قرار داد ، مانند یک کلاس ، آنها همچنین می توانند در جایی که سبک ها به پایان می رسند بیان کنند و همچنان به آبشار یا وراثت ادامه ندهند.

در مثال زیر ، اسکوپینگ کنوانسیون نام BEM را می توان به هدف واقعی معکوس کرد. انتخاب کننده BEM در تلاش است تا رنگ یک عنصر header را به یک کانتینر .card با کنوانسیون های نامگذاری محدود کند. این امر مستلزم آن است که هدر این نام کلاس را روی آن قرار دهد و هدف را تکمیل کند. با استفاده از @scope ، برای تکمیل همان هدف بدون علامت گذاری عنصر هدر ، هیچ کنوانسیون نامگذاری لازم نیست:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

در اینجا یک مثال دیگر ، کمتر از مؤلفه های خاص و بیشتر در مورد ماهیت دامنه جهانی CSS وجود دارد. مضامین تاریک و سبک باید در یک صفحه شیوه ای همزیستی باشد ، جایی که سفارش در تعیین یک سبک برنده اهمیت دارد. معمولاً این بدان معنی است که سبک های تم تاریک پس از موضوع نور می آیند. این نور را به عنوان پیش فرض و تاریک به عنوان سبک اختیاری تعیین می کند. از سفارش و نبرد با دامنه با @scope خودداری کنید:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

برای تکمیل داستان در اینجا ، @scope همچنین اجازه می دهد تا جایی که دامنه سبک به پایان می رسد. این کار با هر کنوانسیون نامگذاری یا پیش پردازنده انجام نمی شود. این خاص و فقط کاری است که CSS در مرورگر می تواند انجام دهد. در مثال زیر ، سبک های img و .content منحصراً اعمال می شوند که فرزند یک .media-block یک خواهر و برادر یا والدین .content است:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

منابع

• مشخصات Scope
• scope توضیح دهنده

هیچ راه CSS برای طرح سنگ تراشی وجود ندارد

قبل از CSS سنگ تراشی با شبکه ، JavaScript بهترین راه برای دستیابی به یک طرح سنگ تراشی بود ، زیرا هر یک از روش های CSS با ستون ها یا Flexbox به طور نادرست سفارش محتوا را نشان می دهد.

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

نسخه ی نمایشی قبلی با CSS زیر حاصل می شود:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

راحت است بدانید که این در رادار به عنوان یک استراتژی چیدمان گمشده است ، به علاوه می توانید امروز آن را در Firefox امتحان کنید .

منابع

• مشخصات طرح سنگ تراشی
• طرح سنگ تراشی در MDN
• مجله Smashing: طرح سنگ تراشی CSS بومی با شبکه CSS

CSS نمی تواند به کاربران کمک کند تا داده ها را کاهش دهند

قبل از پرس و جو رسانه ای prefers-reduced-data ، JavaScript و یک سرور می توانند رفتار خود را بر اساس سیستم عامل کاربر یا گزینه "Data Saver" مرورگر تغییر دهند ، اما CSS نتوانست.

پس از پرس و جو رسانه ای prefers-reduced-data ، CSS می تواند به تقویت تجربه کاربر بپیوندد و نقش خود را در ذخیره داده ها ایفا کند.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

CSS قبلی در این مؤلفه پیمایش رسانه استفاده می شود و پس انداز می تواند بسیار زیاد باشد. بسته به اینکه نمای بازدید کننده چقدر بزرگ است ، پس انداز بیشتری در بار صفحه نیز وجود دارد. پس انداز با تعامل کاربران با پیمایشگران رسانه ادامه می یابد. تصاویر همه دارای ویژگی های loading="lazy" بر روی آنها هستند و این ، همراه با CSS که عنصر را به طور کامل پنهان می کند ، به معنای درخواست شبکه برای تصویر نیست.

برای آزمایش من ، در دیدگاه متوسط ​​، 40 درخواست و 700 کیلوبایت منابع در ابتدا بارگیری شد. همانطور که کاربر انتخاب رسانه را پیمایش می کند ، درخواست ها و منابع بیشتری بارگیری می شوند. با CSS و کاهش پرس و جو رسانه ای داده ، 10 درخواست و 172 کیلوبایت منابع بارگیری می شود. این نیمی از مگابایت پس انداز است و کاربر حتی هیچ یک از رسانه ها را پیمایش نکرده است ، در این مرحله هیچ درخواست اضافی ارائه نشده است.

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

منابع

• مشخصات داده های کاهش یافته
• مطالب کاهش یافته در MDN را ترجیح می دهد
• در یک چالش رابط کاربری گرافیکی ، داده های کاهش یافته را ترجیح می دهد
• مجله Smashing: بهبود ویتام های اصلی وب ، یک مطالعه موردی مجله Smashing

ویژگی های Snap Snap خیلی محدود است

قبل از این پیشنهادات SNAP SNAP ، نوشتن JavaScript خود برای مدیریت چرخ فلک ، کشویی یا گالری می تواند به سرعت پیچیده شود ، با تمام ناظران و مدیریت دولت. همچنین ، اگر مراقب نباشید ، سرعت پیمایش طبیعی می تواند با اسکریپت عادی شود و باعث می شود تعامل کاربر کمی غیر طبیعی و بالقوه کاملاً ناخوشایند باشد.

API های جدید

snapChanging()

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

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

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

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

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

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

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

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

پس از این پیشنهادات SNAP SNAP ، ساختن یک کشویی ، چرخ فلک یا گالری بسیار ساده تر است زیرا مرورگر اکنون راحتی را برای این کار ارائه می دهد ، ناظران و کد ارکستراسیون پیمایش را به نفع استفاده از API های داخلی از بین می برد.

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

منابع

• مشخصات پیش نویس SNAP 2 SNAP 2
• SNAP SNAP 2 توضیح دهندگان
• Demos Snap

دوچرخه سواری بین حالتهای شناخته شده

قبل از toggle() ، فقط کشورهایی که در مرورگر ساخته شده اند می توانند برای یک ظاهر طراحی و تعامل از آن استفاده کنند. به عنوان مثال ، ورودی کادر چک ، یک حالت مرورگر داخلی را برای ورودی که CSS قادر به استفاده از آن برای تغییر بصری است ، :checked است.

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

در مثال زیر ، همان تأثیر یک مورد لیست strikethrough در کامل حاصل می شود اما بدون هیچ عناصر کادر انتخاب:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

و سبک های مربوط به CSS toggle() :

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

اگر با ماشین های دولتی آشنا هستید ، ممکن است متوجه شوید که چه مقدار متقاطع در آنجا با toggle() وجود دارد. این ویژگی به توسعه دهندگان اجازه می دهد تا وضعیت بیشتری از کشور خود را در CSS بسازند ، امیدوارم که منجر به روشهای واضح تر و معنایی تر تعامل و حالت ارکستر شود.

منابع

• ضامن () مشخصات پیش نویس
• Bramus : آینده CSS: CSS Toggles

سفارشی کردن عناصر انتخابی

قبل از <selectmenu> ، CSS توانایی شخصی سازی عناصر <option> با HTML غنی را نداشت و یا در مورد نمایش لیستی از گزینه ها چیز زیادی تغییر می داد. این امر باعث شد تا توسعه دهندگان كتابخانه های خارجی را كه بخش اعظم كاركردهای A <select> را بازآفرینی می كردند ، بارگذاری كنند ، كه در نهایت كار زیادی انجام شد.

پس از <selectmenu> ، توسعه دهندگان می توانند HTML غنی را برای عناصر گزینه ها ارائه دهند و آنها را به همان اندازه که نیاز دارند ، سبک کنند ، در حالی که هنوز هم نیازهای دسترسی را برآورده می کنند و HTML معنایی را ارائه می دهند.

در مثال زیر ، که از صفحه توضیحات <selectmenu> گرفته شده است ، یک منوی انتخاب جدید با برخی از گزینه های اساسی ایجاد می شود:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS می تواند قطعات عنصر را هدف قرار دهد و سبک کند:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

با پرچم آزمایش های وب فعال شده می توانید عنصر <selectmenu> را در Chromium در قناری امتحان کنید. در سال 2023 و فراتر از آن مراقب باشید تا عناصر منو را انتخاب کنید.

منابع

• مشخصات Selectmenu
• نسخه ی نمایشی Selectmenu

لنگر انداختن یک عنصر به دیگری

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

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

اگر علاقه مند به یادگیری بیشتر هستید ، توضیح دهنده چند مثال عالی و نمونه های کد ارائه شده است.

منابع

• لنگر () توضیح دهنده