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

إنّها لغة CSS فعّالة ومستقرة ومناسبة للاستخدام اليومي.

Adam Argyle

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

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

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

:has()

Browser Support

Source

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

يتم عرض 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

Browser Support

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

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

Source

pretty

Browser Support

Source

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

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

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

cqw

Browser Support

Source

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

تتوفّر ست وحدات container query جديدة:

تمثّل هذه السمة صيغة مضمّنة 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.

5 مقتطفات CSS يجب أن يعرفها كل مطوّر واجهة أمامية في 2024 تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

التداخل بطريقة CSS

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

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

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