بهترین ویژگی های جدید CSS برای سال ۲۰۲۳

div:has(+ p)

طرح بندی شبکه و زیرشبکه

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

گرید اکنون به طور کامل پشتیبانی و استاندارد شده است در همه مرورگرها.

طرح‌بندی شبکه‌ای با اعلان display: grid نشان داده می‌شود و نوعی پسرعموی Flexbox است، به این ترتیب که به شما امکان می‌دهد طرح‌بندی‌های مستطیلی را تعریف کنید، اما همچنین شبکه خود را در دو بعد کنترل کنید. تحقیقات نشان می‌دهد که اکثر توسعه‌دهندگانی که در CSS دست ما هستند از Grid Layout آگاه هستند و بسیاری از آن استفاده می‌کنند.

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

در زمان نگارش این مقاله، شبکه فرعی در Firefox 71 یا بالاتر و Safari 16 و بالا در نقشه راه گوگل کروم و مایکروسافت اج قرار دارد. مقدار subgrid در آینده یک ویژگی طرح بندی بسیار مفید خواهد بود.

گزینه accent-color

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

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

<style>
input[type="radio"] {
    accent-color: magenta;
}
</style>

<form action="/foo.bar">
  <p>Select your favorite outdoor adventure type</p>
  <input type="radio" id="mountain" name="type" value="mountain">
  <label for="mountain">Mountain</label><br>
  <input type="radio" id="ocean" name="type" value="ocean">
  <label for="ocean">Ocean</label><br>
  <input type="radio" id="desert" name="type" value="desert">
  <label for="desert">Desert</label>
</form>

پیمایش snap

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

نکته جالب این است که تا سال ۲۰۲۲، بیش از یک سوم کاربران CSS هنوز نبودند’ از اسکرول اسنپ آگاه نیست.

فرمان خصوصیات scroll-snap-* راه‌های زیادی برای تنظیم دقیق نحوه عملکرد موقعیت اسکرول در یک ظرف به شما ارائه می‌دهد. توسعه‌دهندگان دقت بیشتری دارند و کاربران نهایی تجربه کاربری روان‌تر و کنترل‌شده‌تری دارند. فهرست ۴ نمونه کوچکی از کنترل اسکرول اسنپ در div را ارائه می دهد (این را نیز ببینید مثال زنده).

<style>
  .scroll-container,
  .scroll-area {
    max-width: 850px;
    height: 300px;
    font-size: 60px;
  }

  .scroll-container {
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 500px;
  }

  .scroll-area {
    scroll-snap-align: start;
  }

  .scroll-container,
  .scroll-area {
    margin: 0 auto;
  }

  .scroll-area {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .scroll-area:nth-of-type(1) {  background: IndianRed; }
  .scroll-area:nth-of-type(2) {  background: Moccasin; }
  .scroll-area:nth-of-type(3) {  background: thistle; }
  .scroll-area:nth-of-type(4) {  background: seagreen; }
</style>

<div class="scroll-container">
	<div class="scroll-area">1</div>
	<div class="scroll-area">2</div>
	<div class="scroll-area">3</div>
	<div class="scroll-area">4</div>
</div>

مهم نیست حرکت اسکرول را در کجا رها کنید، موقعیت اسکرول y در فهرست ۴ به طور خودکار به عنصر فرزند منتقل می‌شود. این به این دلیل است که محفظه اسکرول دارای ویژگی scroll-snap-type است که روی y الزامی تنظیم شده است، و عناصر فرزند دارای scroll-snap-align: start< هستند. /code> اعلامیه.

div {
  border-inline: 10px dashed seagreen;
}

@container (max-width: 650px){ … }