5 مقتطفات CSS يجب أن يعرفها كل مطوّر واجهة أمامية في 2024

أدوات CSS فعّالة وثابتة ومناسبة للاستخدام اليوم

Adam Argyle

أعتقد أنّ كل مطوّر واجهة أمامية يجب أن يعرف أنّ :has() أكثر من مجرد "أداة اختيار للعنصر الرئيسي"، وطريقة استخدام subgrid وسببه، وكيفية التداخل مع بنية CSS المدمجة، وكيفية السماح للمتصفّح بالتوازن بين لفّ نص العنوان وكيفية استخدام وحدات طلبات البحث للحاويات.

هذه المشاركة هي تتمة لمشاركة 6 مقتطفات CSS لعام 2022 يجب أن يعرفها كل مطوّر واجهة أمامية.

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

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

تم طرح الإصدار :has() على جميع المتصفحات الرئيسية في نهاية عام 2023. يبدو هذا العنصر الاختياري الجديد صغيرًا وبسيطًا، ولكن ستتفاجأ بجميع حالات الاستخدام التي يمكنه توفيرها: الألعاب والتفاعل والتنسيق المراعي للمحتوى والمكونات الذكية، و المزيد من الحالات التي تم استكشافها جيدًا في هذه المقالة التي كتبها "جيه".

4 لوحات معروضة، كلّ منها تتضمّن صورة وتعليقًا تعرض كل صورة دماغًا ينشط قدراته بشكل متزايد. تعرض اللوحة الأولى العبارة ‎ :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() مع طلبات بحث الكمية، وطلبات بحث الحاوية لإنشاء تنسيق شبكة قادر على عرض عناصر من 1 إلى 12 بشكل أنيق في الاتجاهات العمودية أو الأفقية:

التجربة على Codepen

إنشاء شبكة فرعية

subgrid

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

لعدّة سنوات، طلب منتدى الويب للواجهة الأمامية إضافة شبكة فرعية للمساعدة في إكمال محرك تنسيق شبكة 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

nesting

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

أصبح تداخل 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;
  }
}

السماح للمتصفّح بموازنة العناوين

balance

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari Technology Preview: supported.

Source

بدون text-wrap: balance، يعتمد المطوّرون وكتاب النصوص على نصائح فاصل الأسطر مثل عناصر <wbr> أو &shy;. إنّ هذه المحاولة غالبًا ما تكون خاسرة، لأنّه بعد ترجمة المحتوى أو تكبيره أو تعديله بأي شكل من الأشكال، لا يمكن ضمان أن تكون اقتراحات التفاف المحتوى في المكان الصحيح للعرض الجديد للمحتوى.

باستخدام ميزة "التفاف النص" المتوازن، يمكنك ترك هذا العمل للمتصفّح. يمكنك الاطّلاع على مقارنة في Codepen التالي.

استخدام وحدات طلبات البحث عن الحاويات

cqw

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

اقترحت المشاركة التي نشرناها العام الماضي أن يعرف كل مطوّر واجهة أمامية كيفية كتابة طلب بحث حاوية. إذا لم تكن قد تعلمت كيفية استخدامها بعد، اجعل عام 2024 هو العام الذي تبدأ فيه باستخدامها، واطّلِع أيضًا على وحدات طلبات بحث الحاوية. في ما يلي نظرة عامة: pennedكتب أحمد شادي مقالة رائعة عن وحدات طلبات البحث عن الحاويات في عام 2021.

هناك ست وحدات جديدة لطلبات البحث عن حاويات:

  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.