تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

أدوات CSS قوية وثابتة ومناسبة للاستخدام اليوم

Adam Argyle

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

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

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

:has()

توافق المتصفّح

المصدر

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

التجربة على Codepen

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

subgrid

توافق المتصفّح

المصدر

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

توافق المتصفّح

المصدر

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

توافق المتصفّح

المصدر

pretty

توافق المتصفّح

المصدر

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

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

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

cqw

توافق المتصفّح

المصدر

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

تتوفّر ست وحدات جديدة لطلبات البحث عن حاويات:

سعر متغير مضمّن cqi
سمة عرض cqw
أحد أشكال الحظر cqb
سمة ارتفاع cqh
قيمة متغيرة لأي طول أصغر cqmin
سعر متغير لأي طول أكبر 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.