5 قطعه CSS که هر توسعه دهنده فرانت اند در سال 2024 باید بداند

CSS ارزشمند، قدرتمند و پایداری که امروزه می توانید از آن استفاده کنید.

Adam Argyle

من معتقدم که هر توسعه‌دهنده فرانت‌اند باید بداند :has() چیزی بیش از یک «انتخاب‌کننده والد»، چگونگی و چرایی یک subgrid ، نحوه تودرتو کردن با سینتکس داخلی CSS، چگونگی ایجاد تعادل به مرورگر در بسته بندی متن سرفصل است. و نحوه استفاده از واحدهای جستجوی ظرف.

این پست ادامه 6 قطعه CSS سال گذشته است که هر توسعه دهنده فرانت اند در سال 2023 باید بداند .

CSS:has(.potential-beyond-being-a-parent-selector)

:has() در پایان سال 2023 در تمام مرورگرهای اصلی فرود آمد! این انتخابگر جدید کوچک و بی‌گناه به نظر می‌رسد، اما از تمام موارد استفاده‌ای که می‌تواند قفل آن را باز کند شگفت‌زده خواهید شد: بازی‌ها، واکنش‌پذیری، چیدمان آگاه از محتوا، اجزای هوشمند و موارد دیگر که در این مقاله توسط Jhey به خوبی بررسی شده‌اند .

در اینجا چند مثال از استفاده از :has() به عنوان انتخابگر والد آورده شده است. این نام را به این دلیل گرفته است که معمولاً موضوع انتخابگر در انتهای آن قرار دارد، مانند ul li ، جایی که li موضوع است و سبک ها را دریافت می کند. با :has() عنصر در ابتدای انتخابگر می تواند به موضوع تبدیل شود. در مثال زیر، اگر عنصری با کلاس .icon وجود داشته باشد، دکمه دارای شکاف است. اگر تصویری درون آن باشد، جهت کارت تغییر می کند.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

انتخابگر مورد نظر طولانی مدت این است که یک طرح بندی را بر اساس تعداد آیتم های آن تغییر دهید. اکنون این کار با :has() امکان پذیر است زیرا می تواند در حین پرس و جو کردن تعداد فرزندان، ظرف را به عنوان موضوع نگه دارد.

main:has(> :nth-child(5)) {…}

مثال سطح بالاتر دیگری، تغییر سبک‌های تنظیم شده در کل سند زمانی که یک چک باکس خاص در صفحه فعال است:

html:has(#dark-mode:checked) {…}

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

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

form:has(:user-invalid) .error {
  display: block;
}

هنگامی که یک sidenav کلاسی از .--is-open داشته باشد، این قسمت از قسمت محتوای اصلی خارج می شود:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

در اینجا یک نسخه نمایشی سرگرم کننده وجود دارد که از :has() به عنوان انتخابگر والد، :has() با پرس و جوهای کمیت و پرس و جوهای کانتینری برای ایجاد یک طرح بندی شبکه ای استفاده می کند که قادر است 1-12 عنصر را به زیبایی در جهت های عمودی یا افقی نمایش دهد:

یک زیرشبکه ایجاد کنید

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

اگر می‌خواهید یک مرور کلی داشته باشید، درباره زیرشبکه در اینجا بیشتر بیاموزید .

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

تودرتو به روش CSS

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

برای همه جزئیات، می توانید یک نمای کلی از نحو تودرتو CSS را در اینجا بیابید. مثال کد زیر یک مثال نحوی را نشان می دهد.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

اجازه دهید مرورگر سرفصل ها را متعادل کند

بدون text-wrap: balance ، توسعه‌دهندگان و کپی‌نویس‌ها به نکات شکست خط مانند عناصر <wbr> یا ­ . این بیشتر یک نبرد باخت است زیرا به محض ترجمه، بزرگنمایی یا اصلاح محتوا به هر طریقی، هیچ تضمینی وجود ندارد که آن نکات بسته بندی در مکان مناسبی برای ارائه جدید محتوا باشد.

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

از واحدهای جستجوی کانتینر استفاده کنید

پست سال گذشته پیشنهاد کرد که هر توسعه‌دهنده فرانت‌اند باید بداند که چگونه یک پرس و جوی کانتینر بنویسد. اگر هنوز یاد نگرفته‌اید، سال 2024 را به سالی تبدیل کنید که باید به آن توجه کنید و واحدهای جستجوی کانتینر را نیز بررسی کنید. به عنوان یک نمای کلی، احمد شادید یک مقاله عالی در مورد واحدهای جستجوی کانتینر در سال 2021 نوشت .

شش واحد جدید c ontainer q uery وجود دارد:

1. یک نوع درون خطی cqi .
2. یک نوع عرض cqw .
3. یک نوع بلوک cqb .
4. یک نوع ارتفاع cqh .
5. یک نوع برای هر طولی که cqmin کوچکتر باشد.
6. یک نوع برای هر طولی که cqmax بزرگتر باشد.

سناریویی را برای انیمیشن های نسبی و درونی یک ظرف در نظر بگیرید. یک عنصر فرزند که با استفاده از 100cqi کاملاً از ظرف خود خارج می‌شود - که 100٪ اندازه درون خطی ظرف است.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

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

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

اگر این واحدها برای شما جدید هستند، احتمالاً ایده خوبی است که همه واحدهای موجود در سال 2024 را مرور کنید .