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

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

آدام آرگایل

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

این پست ادامه‌ی ۶ قطعه کد CSS سال گذشته است که هر توسعه‌دهنده‌ی فرانت‌اند باید در سال ۲۰۲۳ بداند .

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

:has()

Browser Support

  • کروم: ۱۰۵.
  • لبه: ۱۰۵.
  • فایرفاکس: ۱۲۱.
  • سافاری: ۱۵.۴.

Source

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

۴ پنل نشان داده شده است که هر کدام دارای یک تصویر و عنوان هستند. هر تصویر مغزی را نشان می‌دهد که قدرت مغز را بیشتر و بیشتر فعال می‌کند. پنل اول می‌گوید: :has(). پنل دوم می‌گوید: figure:has(caption) به عنوان یک انتخابگر والد. پنل سوم می‌گوید: .layout:has(> :nth-child(5)) به عنوان یک انتخابگر کمیت. پنل چهارم می‌گوید: html:has(#checked).new-subject به عنوان یک انتخابگر تغییر دهنده موضوع شرطی.

در اینجا چند مثال از استفاده از :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;
}

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

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

در اینجا یک دموی جالب وجود دارد که از :has() به عنوان انتخابگر والد، :has() به همراه کوئری‌های مقدار و کوئری‌های کانتینر برای ایجاد یک طرح‌بندی شبکه‌ای استفاده می‌کند که قادر است عناصر ۱ تا ۱۲ را به زیبایی در جهت‌های عمودی یا افقی نمایش دهد:

کدپن را امتحان کنید

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

subgrid

Browser Support

  • کروم: ۱۱۷.
  • لبه: ۱۱۷.
  • فایرفاکس: ۷۱.
  • سافاری: ۱۶.

Source

سال‌های زیادی بود که جامعه‌ی وبِ front-end از subgrid برای تکمیل و توسعه‌ی موتور چیدمانِ بسیار محبوب و قدرتمندِ CSS grid درخواست کمک می‌کرد. اکنون این ابزار در هر سه موتور اصلی موجود است.

اگر مایل به کسب اطلاعات بیشتر در مورد subgrid هستید، اینجا را کلیک کنید .

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

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

روش CSS تو در تو

nesting

Browser Support

  • کروم: ۱۲۰.
  • لبه: ۱۲۰.
  • فایرفاکس: ۱۱۷.
  • سافاری: ۱۷.۲.

Source

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

برای مشاهده‌ی تمام جزئیات، می‌توانید نمای کلی از سینتکس تودرتوی 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;
  }
}

بگذارید مرورگر تیترها را متعادل کند

balance

Browser Support

  • کروم: ۱۱۴.
  • لبه: ۱۱۴.
  • فایرفاکس: ۱۲۱.
  • سافاری: ۱۷.۵

Source

pretty

Browser Support

  • کروم: ۱۱۷.
  • لبه: ۱۱۷.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: ۲۶.

Source

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

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

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

cqw

Browser Support

  • کروم: ۱۰۵.
  • لبه: ۱۰۵.
  • فایرفاکس: ۱۱۰.
  • سافاری: ۱۶.

Source

پست سال گذشته پیشنهاد کرد که هر توسعه‌دهنده‌ی front-end باید بداند چگونه یک پرس‌وجوی کانتینر بنویسد. اگر هنوز یاد نگرفته‌اید، سال ۲۰۲۴ را سال شروع این کار قرار دهید و واحدهای پرس‌وجوی کانتینر را نیز بررسی کنید. به عنوان یک مرور کلی، احمد شدید مقاله‌ی خوبی در مورد واحدهای پرس‌وجوی کانتینر در سال ۲۰۲۱ نوشت .

شش واحد پرس‌وجوی کانتینر جدید وجود دارد:

  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;
    }
  }
}

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