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

أداة CSS فعّالة ومستقرة يمكنك استخدامها اليوم

Adam Argyle

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

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

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

:has()

Browser Support

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

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

  • 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.

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: 26.

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

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

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

cqw

Browser Support

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

Source

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

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

  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.