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

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

توفّر أداة Toolbelt خدمة CSS فعّالة وفعالة وثابتة والتي يمكنك استخدامها اليوم.

Adam Argyle

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

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

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

:has()

دعم المتصفح

المصدر

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

يتم عرض 4 لوحات، يتضمّن كلّ منها صورة وشرح.
تُظهر كل صورة دماغًا ينشط المزيد والمزيد من القوة الذهنية. اللوحة الأولى هي
يقول :has(). اللوحة الثانية تعرض shape: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

دعم المتصفح

المصدر

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

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 هو العام الذي تنطلق فيه، ونتحقق من وحدات استعلام الحاوية أيضًا. وكنظرة عامة، كتب أحمد شادي مقالة رائعة حول وحدات طلب البحث في الحاويات في عام 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