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

يمكنك الآن استخدام لغة CSS ثابتة والفعّالة في الوقت نفسه من خلال حزمة أدوات متكاملة.

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

هذه المشاركة هي نسخة مكمّلة لمقتطفات CSS التي يبلغ عددها 6 من العام الماضي والتي يجب أن يعرفها كل مطوّري الواجهة الأمامية في عام 2023.

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

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

في ما يلي مثالان على استخدام :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 عنصرًا بأناقة في الاتجاهات العمودية أو الأفقية:

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

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

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

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

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

هناك ست وحدات cناب ربع جديدة:

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.