حالة خدمة مقارنة الأسعار (CSS) لعام 2022

ميزات تصميم الويب الحالية والغد، كما هو موضّح في طلب الإدراج من Google لعام 2022، بالإضافة إلى بعض الميزات الإضافية

Adam Argyle

من المقرّر أن يكون عام 2022 من أفضل السنوات التي تشهدها خدمة مقارنة الأسعار (CSS) على مستوى كل من الميزات وإصدارات ميزات المتصفّح التعاوني، ونهدف من خلال التعاون إلى تبسيط 14 ميزة.

نظرة عامة

هذه المشاركة هي نموذج المقالة للمحادثات التي تم تناولها في مؤتمر Google IO لعام 2022. لا يعني ذلك أن تكون دليلاً متعمقًا حول كل ميزة، بل مقدمة ونظرة عامة موجزة لإثارة اهتمامك، وتوفير اتساع بدلاً من العمق. إذا شعرت انزعاجك من ذلك، فراجع نهاية القسم للحصول على روابط موارد لمزيد من المعلومات.

جدول المحتويات

يمكنك استخدام القائمة أدناه للانتقال إلى المواضيع التي تهمّك:

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

يرجع السبب الرئيسي وراء طرح العديد من ميزات CSS بشكل تعاوني إلى الجهود المبذولة في عملية Interop 2022. قبل دراسة جهود إمكانية التشغيل التفاعلي، من المهم الاطّلاع على جهود Compat 2021.

اختبار 2021

كانت الأهداف لعام 2021، استنادًا إلى ملاحظات المطوّرين التي قدّموها عبر الاستطلاعات، هي تثبيت الميزات الحالية وتحسين مجموعة الاختبار وزيادة درجات النجاح في المتصفحات لخمس ميزات:

1. موضع "sticky"
2. مقاس aspect-ratio
3. التنسيق flex
4. التنسيق grid
5. تحديد الموضع والصور المتحركة لميزة "transform"

تمت زيادة درجات الاختبار على مستوى جميع الأجهزة، ما يدل على موثوقية وثبات تم تحسينهما. تهانينا للفريقَين هنا!

إمكانية التشغيل التفاعلي لعام 2022

هذا العام، اجتمعت المتصفحات معًا لمناقشة الميزات والأولويات التي تنوي العمل عليها، وتوحيد جهودها. لقد خططت لتقديم ميزات الويب التالية للمطورين:

1. @layer
2. مسافات الألوان والدوال
3. الاحتواء
4. <dialog>
5. توافق النموذج
6. الانتقال
7. الشبكة الفرعية
8. فن الطباعة
9. وحدات إطار العرض
10. التوافق على الويب

إنّها قائمة رائعة وطموحة لا يسعنا الانتظار لرؤيتها.

خلفيات جديدة للعام 2022

من غير المفاجئ أنّ حالة خدمة CSS لعام 2022 تأثّرت بشكل كبير بأعمال التشغيل التفاعلي في 2022.

تتالي الطبقات

قبل @layer، كان الترتيب الذي تم اكتشافه لأوراق الأنماط المحملة أمرًا مهمًا للغاية، لأن الأنماط التي تم تحميلها في آخر مرة يمكن أن تحلّ محلّ الأنماط التي تم تحميلها في وقت سابق. وقد أدّى ذلك إلى إدارة أوراق أنماط الإدخال بدقة، حيث احتاج المطوّرون إلى تحميل أنماط أقل أهمية أولاً وأنماطًا أكثر أهمية لاحقًا. وتتوفر منهجيات كاملة لمساعدة المطورين في إدارة هذه الأهمية، مثل ITCSS.

باستخدام @layer، يمكن لملف الإدخال تحديد الطبقات وترتيبها مسبقًا. وبعد ذلك، عند تحميل الأنماط أو تحميلها أو تحديدها، يمكن وضعها داخل طبقة، ما يسمح بالحفاظ على أهمية النمط بدون الحاجة إلى تنسيق التحميل المُدار بدقة.

يوضّح الفيديو الطريقة التي تتيح بها الطبقات المتتالية المحدّدة عملية كتابة وتحميل أكثر حرية، مع الحفاظ على الشلال حسب الحاجة.

إنّ "أدوات مطوري البرامج في Chrome" مفيدة في تصور الأنماط التي تأتي من والطبقات:

المراجِع

• مواصفات CSS Cascade 5
• شرح الطبقات المتتالية
• الطبقات المتتالية على MDN
• Una Kravets: طبقات تتالي
• أحمد شديد: مرحبًا، طبقات CSS المتتالية

الشبكة الفرعية

قبل subgrid، كانت شبكة داخل شبكة أخرى لا يمكن أن تتم محاذاتها مع الخلايا الرئيسية أو خطوط الشبكة. كان كل تخطيط شبكة فريدًا من نوعه. يضع العديد من المصممين شبكة واحدة على تصميمهم بالكامل ويمحاذاةون العناصر بداخله باستمرار، وهو ما لا يمكن القيام به في CSS.

بعد subgrid، يمكن لجهة فرعية في الشبكة اعتماد الأعمدة أو الصفوف التابعة لها كعناصر خاصة بها، ومحاذاة نفسها أو الصفوف الفرعية معها.

في العرض التوضيحي التالي، ينشئ عنصر body شبكة كلاسيكية من ثلاثة أعمدة: يُعرف العمود الأوسط باسم main، ويُطلق على العمودين الأيسر والأيمن تسمية الخطوط fullbleed. بعد ذلك، يستخدم كل عنصر في النص الأساسي، <nav> و<main>، الأسطر المسماة من النص من خلال ضبط grid-template-columns: subgrid.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

أخيرًا، يمكن للعناصر الثانوية في <nav> أو <main> محاذاة أو ضبط حجمها باستخدام العمودين والخطوطين fullbleed وmain.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

يمكن أن تساعدك أدوات مطوّري البرامج في رؤية الخطوط والشبكات الفرعية (Firefox فقط في الوقت الحالي). في الصورة التالية، تمت إضافة الشبكة الرئيسية والشبكات الفرعية. إنه يشبه الآن كيف كان يفكر المصممون في التخطيط.

في لوحة عناصر أدوات مطوّري البرامج، يمكنك معرفة العناصر التي هي شبكات وشبكات فرعية، وهو أمر مفيد للغاية في تصحيح الأخطاء أو التحقّق من صحة التنسيق.

المراجِع

• مواصفات الشبكة الفرعية
• الشبكة الفرعية على MDN
• Bramus: فيديوهات تعليمية عملية حول لغة CSS الفرعية

طلبات البحث عن الحاويات

قبل @container، كانت عناصر صفحة الويب تستجيب فقط لحجم إطار العرض الكامل. وهذا أمرٌ مثالي للتخطيطات الكبيرة، ولكن بالنسبة إلى التخطيطات الصغيرة، حيث لا تكون حاويتها الخارجية هي إطار العرض بأكمله، فمن المستحيل ضبط التنسيق وفقًا لذلك.

بعد @container، ستستجيب العناصر لحجم الحاوية الرئيسية أو نمطها. والتنبيه الوحيد هو أنّ الحاويات يجب أن تعلن عن نفسها كأهداف محتملة لطلبات البحث، وهو شرط بسيط لتحقيق فائدة كبيرة.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

وهذه الأنماط هي ما يجعل أعمدة "الاثنين" و"الثلاثاء" و"الأربعاء" و"الخميس" و"الجمعة" في الفيديو التالي يمكن الاستعلام عنها من خلال عناصر الحدث.

في ما يلي لغة CSS لطلب بحث في حاوية calendar-day عن حجمها، ثم ضبط التنسيق وأحجام الخط:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

في ما يلي مثال آخر: يتكيف أحد مكونات الكتاب مع المساحة المتاحة في العمود الذي تم سحبه إليه:

أونا صحيحة في تقييم الموقف على أنه مستجيب الجديد. هناك العديد من القرارات المشوّقة والمفيدة التي يجب اتخاذها بشأن التصميم عند استخدام @container.

المراجِع

• مواصفات طلبات البحث عن الحاويات
• شرح لطلبات البحث عن الحاوية
• طلبات بحث الحاوية على MDN
• تطبيق الويب السريع الاستجابة الجديد على web.dev
• عرض توضيحي عن التقويم من "أونا"
• مجموعة رائعة من طلبات البحث عن الحاويات
• الطريقة التي ابتكرنا بها Designcember على web.dev
• أحمد شديد: الترحيب بطلبات البحث في حاوية CSS

accent-color

قبل accent-color، عندما أردت الحصول على نموذج بألوان مطابقة للعلامات التجارية، كان من الممكن أن ينتهي بك الأمر إلى إنشاء مكتبات أو حلول CSS معقدة التي صار من الصعب إدارتها بمرور الوقت. بينما قدموا لك جميع الخيارات، ونأمل أن يتضمنوا إمكانية الوصول، إلا أن خيار استخدام المكونات المضمنة أو اعتمادك يصبح مملاً لمواصلة الاختيار.

بعد accent-color، يضيف أحد سطور CSS لون العلامة التجارية إلى المكونات المضمَّنة. وبالإضافة إلى التلوين الخفيف، يختار المتصفح بذكاء الألوان المتباينة المناسبة للأجزاء الإضافية من المكون ويتكيف مع مخططات ألوان النظام (الفاتح أو الداكن).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

للحصول على مزيد من المعلومات حول accent-color، يمكنك الاطّلاع على مشاركتي على web.dev حيث يمكنك الاطّلاع على جوانب إضافية عديدة من سمة CSS المفيدة هذه.

المراجِع

• مواصفات ألوان التمييز
• لون التمييز على MDN
• accent-color on web.dev
• Bramus: ضبط ألوان عناصر التحكّم في واجهة المستخدم باستخدام CSS accent-color

مستوى اللون 4 و5

هيمنت نماذج sRGB على الويب على مدى العقود الماضية، إلا أن sRGB لا تكفي في عالمنا الرقمي الواسع من الشاشات عالية الدقة والأجهزة المحمولة المجهزة مسبقًا بشاشات OLED أو QLED. علاوة على ذلك، من المتوقع حدوث الصفحات الديناميكية التي تتكيف مع تفضيلات المستخدم، وتنال إدارة الألوان اهتمامًا متزايدًا للمصممين وأنظمة التصميم والقائمين على صيانة الرموز.

تجدر الإشارة إلى أنّ ذلك لن يتوفّر في عام 2022، فخدمة مقارنة الأسعار (CSS) تتضمّن عددًا من دوال الألوان والمساحات الجديدة، ومنها: - الألوان التي تتيح استخدام الألوان العالية الدقة للشاشات - مساحات اللون التي تتطابق مع غرض، مثل التوحيد الحسي. - مساحات اللون للتدرجات التي تغير نتائج الاستيفاء جذريًا. - دوال اللون لمساعدتك في المزج والتباين، واختيار المساحة التي تريد إنجاز العمل فيها.

قبل كل ميزات الألوان هذه، كانت أنظمة التصميم بحاجة إلى إجراء حساب مسبق للألوان المتباينة، وضمان لوحات نابضة بالحياة بشكل مناسب، وكل ذلك في حين أن المعالجات المسبقة أو JavaScript قد بذلت مجهودًا كبيرًا.

بعد كل ميزات الألوان هذه، يمكن للمتصفّح وCSS تنفيذ كل الإجراءات، ديناميكيًا وفي الوقت المناسب. بدلاً من إرسال العديد من وحدات الكيلوبايت من CSS وJavaScript إلى المستخدمين لتمكين ألوان التصميم وتصور البيانات، يمكن لـ CSS إجراء التنظيم والعمليات الحسابية. وكذلك، تم تجهيز CSS بشكل أفضل للتحقق من الدعم قبل الاستخدام أو التعامل مع العناصر الاحتياطية بسلاسة.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

الاختصار HWB يعني تدرج اللون والأبيض والأسود. وهي تقدم نفسها على أنها طريقة ملائمة للإنسان للتعبير عن اللون، كمجرد تدرج وكمية من اللون الأبيض أو الأسود لتفويت أو تعتيم. قد يجد الفنانون الذين يمزجون الألوان مع الأبيض أو الأسود أنهم يقدرون إضافة بناء جملة اللون هذه.

ينتج عن استخدام دالة الألوان هذه ألوانًا من مساحة اللون sRGB، تمامًا مثل HSL وRGB. وفي ما يتعلّق بحداثة 2022، لا يمنحك ذلك ألوانًا جديدة، لكنه قد يسهّل بعض المهام لمحبّي ألعاب بناء الجملة والنموذج العقلي.

المراجِع

• مواصفات HWB
• HWB على MDN
• ستيفان جوديس: hwb() – هل هو رمز لوني للبشر؟

مساحات الألوان

طريقة تمثيل الألوان يتم إجراؤها باستخدام مساحة اللون. تقدم كل مساحة لون ميزات ومقايضات متنوعة للعمل على اللون. قد يجمع البعض كل الألوان الزاهية معًا؛ وقد يصطفها البعض أولاً بناءً على درجة السطوع.

تم إعداد CSS لعام 2022 لتوفير 10 مساحات ألوان جديدة، يتضمّن كلّ منها ميزات فريدة لمساعدة المصممين والمطوّرين في عرض الألوان واختيارها ومزجها. في السابق، كانت تقنية sRGB هي الخيار الوحيد لاستخدام الألوان، أما الآن فأصبحت تتيح CSS إمكانية استخدام إمكانيات جديدة ومساحة لون تلقائية جديدة، وهي LCH.

color-mix()

قبل color-mix()، كان المطوّرون والمصممون بحاجة إلى معالجات أولية، مثل Sass، لمزج الألوان قبل استخدامها في المتصفّح. لم توفر معظم وظائف مزج الألوان أيضًا خيارًا لتحديد مساحة اللون التي يجب القيام بها للمزج، مما يؤدي في بعض الأحيان إلى نتائج مربكة.

بعد color-mix()، أصبح بإمكان المطوّرين والمصممين مزج الألوان في المتصفّح، إلى جانب جميع الأنماط الأخرى، بدون تشغيل عمليات التصميم أو تضمين JavaScript. بالإضافة إلى ذلك، يمكنهم تحديد مساحة اللون التي يجب استخدامها للمزج أو استخدام مساحة لون المزج الافتراضية لـ LCH.

غالبًا ما يتم استخدام لون العلامة التجارية كأساس ويتم إنشاء متغيرات منه، مثل الألوان الأفتح أو الأغمق لأنماط التمرير. إليك كيف تبدو هذه العملية عند استخدام color-mix():

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

وإذا أردت مزج هذه الألوان في مساحة لونية مختلفة، مثل srgb، فغيّرها:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

في ما يلي عرض توضيحي للمواضيع باستخدام color-mix(). حاول تغيير لون العلامة التجارية وشاهد تحديث المظهر:

استمتِع بمزج الألوان في مساحات ألوان مختلفة في أوراق الأنماط في عام 2022.

المراجِع

• مواصفات color-mix()
• color-mix() على MDN
• العرض التوضيحي للموضوع
• عرض توضيحي آخر للمواضيع
• Fabio Giolito: يمكنك إنشاء مظهر ملوّن باستخدام هذه الميزات القادمة في CSS.

color-contrast()

قبل color-contrast()، كان مؤلفو ورقة الأنماط بحاجة إلى معرفة الألوان التي يمكن الوصول إليها في وقت مبكر. غالبًا ما تعرض لوحة الألوان نصًا باللون الأسود أو الأبيض على عينة الألوان، للإشارة إلى مستخدم نظام الألوان إلى لون النص المطلوب للتباين بشكل صحيح مع نموذج الألوان هذا.

بعد color-contrast()، يمكن لمؤلفي ورقة الأنماط تفريغ المهمة بالكامل إلى المتصفّح. لا يقتصر الأمر على استخدام المتصفح لاختيار اللون الأسود أو الأبيض تلقائيًا، بل يمكنك تخصيصه لقائمة من الألوان المناسبة لنظام التصميم وجعله يختار أول خيار لتمرير نسبة التباين المطلوبة.

في ما يلي لقطة شاشة لنموذج تجريبي لمجموعة ألوان HWB حيث يتم اختيار ألوان النص تلقائيًا من خلال المتصفّح استنادًا إلى لون العينة:

تبدو أساسيات بناء الجملة على هذا النحو، حيث يتم تمرير اللون الرمادي إلى الدالة ويحدد المتصفح ما إذا كان اللون الأسود أو الأبيض أكثر تباينًا:

color: color-contrast(gray);

يمكن أيضًا تخصيص الدالة باستخدام قائمة من الألوان، واختيار اللون الأعلى تباينًا من الاختيار:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

أخيرًا، إذا كان من الأفضل عدم اختيار اللون الأعلى تباينًا من القائمة، يمكن توفير نسبة تباين مستهدفة، واختيار أول لون يجتازه:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

يمكن استخدام هذه الدالة لأكثر من مجرد لون النص، على الرغم من أنني أقدر أن تكون حالة الاستخدام الأساسية لها. فكر في مدى سهولة تقديم واجهات يسهل الوصول إليها ومقروءة بعد دمج اختيار الألوان المتباينة المناسبة في لغة CSS نفسها.

المراجِع

• مواصفات color-contrast()
• color-contrast() على MDN
• العرض التوضيحي

بنية اللون النسبية

قبل بناء جملة اللون النسبي، لحساب اللون وإجراء التعديلات، يجب وضع قنوات الألوان بشكل فردي في خصائص مخصصة. بالإضافة إلى ذلك، جعل HSL هو وظيفة اللون الأساسية لمعالجة الألوان لأنّه يمكن تعديل تدرج اللون أو التشبّع أو الإضاءة بطريقة مباشرة ومباشرة باستخدام calc().

بعد بناء جملة اللون النسبي، يمكن تفكيك أي لون في أي مساحة وتعديله وإعادته كلون، كل ذلك في سطر واحد من CSS. ليس هناك المزيد من القيود على HSL، إذ يمكن إجراء المعالجة في أي مساحة لون مطلوبة، ويجب إنشاء العديد من الخصائص المخصصة الأقل لتسهيل ذلك.

في مثال بناء الجملة التالي، يتم توفير النظام السداسي العشري للقاعدة وإنشاء لونين جديدين بالنسبة إليه. ينشئ اللون الأول --absolute-change لونًا جديدًا في LCH من اللون الأساسي، ثم ينتقل بعد ذلك إلى استبدال إضاءة اللون الأساسي بـ 75%، مع الحفاظ على الكروما (c) وتدرج اللون (h). ويقوم اللون الثاني --relative-change بإنشاء لون جديد في LCH من اللون الأساسي، ولكن هذه المرة تقلل من الكروما (c) بنسبة 20٪.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

في العرض التوضيحي التالي، استخدمت بناء جملة لون نسبي لإنشاء متغيرات أفتح وأغمق من اللون الأساسي، واستخدمت color-contrast() لضمان تباين التصنيفات بشكل مناسب:

يمكن استخدام هذه الدالة أيضًا لإنشاء لوحة الألوان. فيما يلي عرض توضيحي يتم فيه إنشاء لوحات كاملة من لون أساسي متوفر. تعمل هذه المجموعة من صفحات CSS على جميع لوحات الألوان المختلفة، وكل لوحة ألوان توفر قاعدة مختلفة. كمكافأة، نظرًا لأنني استخدمت LCH، انظر إلى أي مدى تبدو نظريًا حتى لوحات الألوان - لا تظهر بقع ساخنة أو ميتة، وذلك بفضل مساحة اللون هذه.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

نأمل الآن أن تتمكن من معرفة كيف يمكن استخدام مساحات الألوان ودوال الألوان المختلفة لأغراض مختلفة، بناءً على نقاط القوة والضعف فيها.

المراجِع

• مواصفات بنية اللون النسبية
• بناء لوحات ألوان باستخدام بنية ألوان نسبية
• إنشاء خيارات مختلفة للألوان باستخدام بنية ألوان نسبية

مساحات اللون المتدرجة

قبل استخدام مساحات الألوان المتدرجة، كانت sRGB هي مساحة اللون التلقائية المستخدمة. وتُعدّ sRGB موثوقًا بها بشكل عام، ولكن بها بعض نقاط الضعف مثل المنطقة الرمادية الميتة.

بعد تدرج مساحات اللون، أطلع المتصفح على مساحة اللون المراد استخدامها لاستيفاء الألوان. يمنح هذا المطورين والمصممين القدرة على اختيار التدرج الذي يفضلونه. تتغير مساحة اللون الافتراضية أيضًا إلى LCH بدلاً من sRGB.

تتبع إضافة البنية بعد اتجاه التدرج، وتستخدم بنية in الجديدة، وهي اختيارية:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

إليك التدرج الأساسي والأساسي من الأسود إلى الأبيض. انظر إلى نطاق النتائج في كل مساحة لون. يصل بعضها إلى اللون الأسود الداكن قبل البعض الآخر، والبعض يتلاشى إلى اللون الأبيض بعد فوات الأوان.

في هذا المثال التالي، يتحول اللون الأسود إلى اللون الأزرق لأنه يمثل مساحة معروفة للتدرج. تزحف معظم مساحات الألوان إلى اللون الأرجواني أثناء استيفاء الألوان أو، كما أحب أن أفكر فيها، حيث تنتقل الألوان داخل مساحة الألوان من النقطة أ إلى النقطة ب. ونظرًا لأن التدرج سيأخذ خطًا مستقيمًا من النقطة أ إلى النقطة ب، فإن شكل مساحة اللون يغير بشكل كبير نقاط التوقف التي يتخذها المسار على طول الطريق.

للاطّلاع على مزيد من الاستكشافات والأمثلة والتعليقات، يُرجى الاطّلاع على سلسلة المحادثات هذه على Twitter.

المراجِع

• مواصفات الاستيفاء المتدرج
• عرض توضيحي للمقارنة بين التدرجات في المساحات
• دفتر ملاحظات لمقارنة التدرجات

inert

قبل inert، كان توجيه تركيز المستخدم إلى مناطق في الصفحة أو التطبيق تحتاج إلى اهتمام فوري. أصبحت استراتيجية التركيز الموجهة هذه تُعرف باسم فخ التركيز لأن المطورين سيركزون على مساحة تفاعلية، ويستمعون إلى أحداث تغيير التركيز، وإذا غادر التركيز المساحة التفاعلية، فتم إجباره على العودة إليه. يتم توجيه مستخدمي لوحات المفاتيح أو برامج قراءة الشاشة إلى المساحة التفاعلية لضمان اكتمال المهمة قبل المتابعة.

بعد inert، لن تكون هناك حاجة إلى رصد الصور لأنّه يمكنك تجميد أو حماية أقسام بأكملها من الصفحة أو التطبيق. تكون محاولات تغيير التركيز والنقرات غير متاحة عندما تكون هذه الأجزاء من المستند غير نشِطة. يمكن للمرء أن يفكّر أيضًا في هذا مثل الحراس بدلاً من الفخ، حيث لا يهتم "inert" بالبقاء في مكان ما، بدلاً من جعل أماكن أخرى غير متاحة.

وخير مثال على ذلك هو دالة alert() في JavaScript:

لاحظ في الفيديو السابق كيف كان بالإمكان الوصول إلى الصفحة باستخدام الماوس ولوحة المفاتيح حتى تم استدعاء alert(). عند عرض النافذة المنبثقة لمربع حوار التنبيه، تم تجميد باقي الصفحة، أو inert. يتم وضع تركيز المستخدمين داخل مربع حوار التنبيه ولا يمكن الانتقال إليه. وبمجرد تفاعل المستخدم وإكمال طلب وظيفة التنبيه، تصبح الصفحة تفاعلية مرة أخرى. وتتيح inert للمطوّرين الاستفادة من تجربة التركيز الموجَّهة نفسها بسهولة.

في ما يلي نموذج لرمز برمجي صغير لتوضيح آلية عمل هذه الأداة:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

ويُعدّ مربّع الحوار مثالًا رائعًا، إلا أنّ السمة inert تكون مفيدة أيضًا في بعض الحالات، مثل تجربة المستخدم في القائمة الجانبية من الشريحة. عندما ينزل المستخدم من القائمة الجانبية، ليس من المقبول السماح للماوس أو لوحة المفاتيح بالتفاعل مع الصفحة خلفها؛ وهو أمر صعب بعض الشيء للمستخدمين. بدلاً من ذلك، عندما تظهر القائمة الجانبية، اجعل الصفحة غير مرتبة، ويجب على المستخدمين الآن الإغلاق أو التنقل داخل تلك القائمة الجانبية، ولن يجدوا أنفسهم أبدًا تائهين في مكان آخر في الصفحة باستخدام قائمة مفتوحة.

المراجِع

• مواصفات الفاصل
• مدة الصلاحية على MDN
• المطوّرون في Chrome: لمحة عن inert

خطوط COLRv1

قبل استخدام خطوط COLRv1، كانت هناك خطوط OT-SVG على الويب، وهي أيضًا تنسيق مفتوح للخطوط ذات التدرجات والألوان والتأثيرات المضمّنة. ومع ذلك يمكن أن يزداد حجم هذه العناصر بشكل كبير جدًا، وعلى الرغم من أنها تسمح بتحرير النص، لم يكن هناك مجال كبير للتخصيص.

بعد استخدام خطوط COLRv1، أصبح للويب خطوط أصغر حجمًا وخطوطًا متّجهة قابلة لتغيير موضعها وقابلة لتغيير موضعها وذات وضع تدرّج ووضع المزج، وتقبل المعلَمات لتخصيص الخط حسب حالة الاستخدام أو لمطابقة علامة تجارية.

في ما يلي مثال من مشاركة مدونة مطوّري Chrome حول الرموز التعبيرية. ربما لاحظت أنه إذا قمت بتكبير حجم الخط على رمز تعبيري، فإنه لا يظل واضحًا. إنه صورة وليس فن متجه. وغالبًا ما يتم استبدال الرمز التعبيري بمادة عرض عالية الجودة في التطبيقات المستخدَمة باستخدام خطوط COLRv1، تكون الرموز التعبيرية متجهة وجميلة:

يمكن لخطوط الأيقونات أن تفعل بعض الأشياء الرائعة مع هذا التنسيق، حيث تقدم لوحات ألوان ثنائية الألوان مخصصة، وأكثر من ذلك. يشبه تحميل خط COLRv1 تمامًا أي ملف خط آخر:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

تم تخصيص خط COLRv1 باستخدام @font-palette-values، وهي CSS خاصة ضمن القاعدة لتجميع مجموعة من خيارات التخصيص وتسميتها في حزمة للرجوع إليها لاحقًا. لاحِظ كيفية تحديد اسم مخصّص مثل خاصية مخصّصة، بدءًا من --:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

باستخدام --colorized كاسم مستعار للتخصيصات، فإن الخطوة الأخيرة هي تطبيق لوحة الألوان على عنصر يستخدم مجموعة خطوط الألوان:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

مع توفر المزيد والمزيد من الخطوط المتغيرة والخطوط الملونة، يصبح أسلوب الخط على الويب في مسار رائع نحو التخصيص الغني والتعبير الإبداعي.

المراجِع

• مواصفات Colrv1 على GitHub
• مطوّرو Chrome: خطوط Colrv1
• فيديو توضيحي لمطوّر البرامج في BlinkOn

وحدات إطار العرض

قبل المتغيرات الجديدة لإطار العرض، كانت الويب تقدم وحدات مادية للمساعدة في ملاءمة إطارات العرض. كان هناك واحد للارتفاع والعرض وأصغر حجم (vmin) وأكبر جانب (vmax). وقد نجحت هذه الطريقة في التعامل مع العديد من الأمور، ولكن المتصفحات المخصصة للأجهزة الجوّالة أحدثت تعقيدًا.

على الأجهزة الجوّالة، عند تحميل صفحة، يظهر شريط الحالة مع عنوان URL، ويستهلك هذا الشريط جزءًا من مساحة إطار العرض. بعد بضع ثوانٍ وإجراء بعض التفاعل، قد ينزلق شريط الحالة بعيدًا لتوفير تجربة إطار عرض أكبر للمستخدم. ولكن عندما ينزلق هذا الشريط للخارج، يتغير ارتفاع إطار العرض، وتتغير بيانات أي وحدات vh ويتغير حجمها مع تغيير الحجم المستهدف. وفي السنوات اللاحقة، كانت وحدة vh بحاجة تحديدًا إلى تحديد حجم إطار العرض الذي سيتم استخدامه من بين حجمَي إطار العرض، وذلك لأنّها تسبّبت في حدوث مشاكل مزعجة في التصميم المرئي على الأجهزة الجوّالة. تم تحديد أن vh سيمثل دائمًا أكبر إطار عرض.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

بعد أشكال إطار العرض الجديدة، يتم توفير وحدات إطار عرض صغيرة وكبيرة وديناميكية، مع إضافة معادلات منطقية إلى المتغيرات المادية. الفكرة هي منح المطورين والمصممين القدرة على اختيار الوحدة التي يريدون استخدامها لسيناريو معين. ربما لا يكون هناك مشكلة في أن يكون هناك تغيير بسيط في التصميم عند اختفاء شريط الحالة، ولذلك قد يتم استخدام dvh (ارتفاع إطار العرض الديناميكي) بدون القلق.

في ما يلي قائمة كاملة بجميع خيارات وحدة إطار العرض الجديدة التي تم توفيرها مع متغيرات إطار العرض الجديدة:

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

نأمل أن يمنح ذلك المطورين والمصممين المرونة اللازمة لتحقيق تصميماتهم سريعة الاستجابة لإطار العرض.

المراجِع

• مواصفات الوحدات النسبية الخاصة بإطار العرض
• الإطارات: إطارات العرض الكبيرة والصغيرة والديناميكية

:has()

قبل :has()، كان يتم دائمًا الردّ على موضوع أداة الاختيار في النهاية. على سبيل المثال، موضوع أداة الاختيار هذه هو عنصر قائمة: ul > li. يمكن أن تؤدي أدوات الاختيار الزائفة إلى تغيير أداة الاختيار، ولكنها لا تغيّر الموضوع: ul > li:hover أو ul > li:not(.selected).

بعد :has()، يمكن أن يظل موضوع أعلى في شجرة العناصر هو الموضوع مع تقديم طلب بحث عن الأطفال: ul:has(> li). من السهل فهم كيفية حصول :has() على اسم شائع لـ "أداة الاختيار الرئيسية"، لأنّ موضوع أداة الاختيار هو الآن العنصر الرئيسي في هذه الحالة.

في ما يلي مثال على البنية الأساسية حيث تظل الفئة .parent هي الموضوع ولكن يتم اختيارها فقط إذا كان العنصر الفرعي يتضمّن الفئة .child:

.parent:has(.child) {...}

في ما يلي مثال حيث يكون عنصر <section> هو الموضوع، ولكن أداة الاختيار لا تتطابق إلا إذا كان أحد العناصر الثانوية يتضمّن :focus-visible:

section:has(*:focus-visible) {...}

بدأت أداة اختيار :has() في أن تصبح أداة فعّالة بعد ظهور حالات استخدام عملية أكثر. على سبيل المثال، لا يمكن حاليًا اختيار علامات <a> عند لفّ الصور، ما يجعل من الصعب تعليم علامة الارتساء كيفية تغيير أنماطها في حالة الاستخدام هذه. ويمكن استخدام هذه الميزة مع :has() على الرغم من أنّ:

a:has(> img) {...}

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

figure:has(figcaption) img {...}

تبدو هذه المجموعات لا حصر لها. يمكنك دمج :has() مع طلبات البحث عن الكمية، وضبط تنسيقات شبكة CSS استنادًا إلى عدد العناصر الثانوية. يمكنك دمج :has() مع حالات الفئات الزائفة التفاعلية وإنشاء تطبيقات تستجيب بطرق إبداعية جديدة.

أصبح البحث عن الدعم أكثر سهولة من خلال استخدام @supports ووظيفة selector() التي تختبر ما إذا كان المتصفّح يفهم البنية قبل استخدامها:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

المراجِع

• :has() مواصفات
• :has() على MDN
• أداة اختيار لغة CSS :has() هي أكثر بكثير من مجرد "أداة اختيار رئيسية"

2022 وما بعده

لا يزال هناك عدد من الأمور التي سيكون من الصعب القيام بها بعد ظهور كل هذه الميزات المذهلة في عام 2022. ويلقي القسم التالي نظرة على بعض المشاكل المتبقية والحلول التي يتم تطويرها باستمرار لحلّها. هذه الحلول تجريبية، على الرغم من أنها قد تكون محددة أو متاحة خلف علامات في المتصفحات.

تشير الأقسام التالية إلى أنّ المشاكل المُشار إليها تتضمّن عددًا كبيرًا من الأشخاص من العديد من الشركات الذين يسعون للحصول على حلّ، وليس أنّ هذه الحلول سيتم إطلاقها في عام 2023.

السمات المخصّصة المكتوبة بدون أخطاء

السمات المخصصة في CSS مذهلة. وتسمح بتخزين جميع أنواع الأشياء داخل متغير معين، والذي يمكن بعد ذلك تمديده وحسابه ومشاركته والمزيد. في الواقع، إنهم مرونون للغاية، وسيكون من الجيد أن يكون لديهم البعض أقل مرونة.

ضَع في اعتبارك سيناريو يستخدم فيه box-shadow خصائص مخصّصة لقيمه:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

كل ذلك يعمل بشكل جيّد إلى أن يتم تغيير أي سمة من السمات إلى قيمة لا يقبلها CSS، مثل --x: red. ينكسر الظل بأكمله إذا كان أي من المتغيرات المتداخلة مفقودًا أو تم تعيينه على نوع قيمة غير صالح.

وهنا يأتي دور @property: يمكن أن يصبح --x خاصية مخصّصة مكتوبة، ولم يعد حرًا ومرنًا، ولكنه آمن مع بعض الحدود المحددة:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

الآن، عند محاولة استخدام السمة box-shadow للسمة var(--x) والسمة --x: red اللاحقة، سيتم تجاهل السمة red لأنّها ليست <length>. هذا يعني أن الظل يستمر في العمل، على الرغم من إعطاء قيمة غير صالحة لأحد خصائصه المخصصة. بدلاً من تعذُّر إكمال العملية، ستتم العودة إلى القيمة التي تبلغ initial-value لـ 0px.

Animation

بالإضافة إلى نوع الأمان، فإنها تفتح آفاقًا جديدة للصور المتحركة. تجعل مرونة بنية CSS رسم بعض الأشياء مستحيلة، مثل التدرجات. تساعدك السمة @property في ذلك لأنّ سمة CSS المكتوبة يمكنها إبلاغ المتصفّح بقصد مطوّر البرامج في عملية الاستيفاء بطريقة معقدة للغاية. إنّها تحدّ بشكل أساسي من نطاق الاحتمالية إلى حدّ يتيح للمتصفح إضافة تأثيرات حركية إلى جوانب من نمط مختلف عن المعتاد.

بالنظر إلى هذا المثال التوضيحي، حيث يتم استخدام تدرج شعاعي لعمل جزء من تراكب، مما يؤدي إلى إنشاء تأثير تركيز بارز. يضبط JavaScript الماوس x وy عند الضغط على مفتاح alt/opt، ثم يغيّر الحجم البؤري إلى قيمة أصغر مثل 25%، ما يؤدي إلى إنشاء دائرة تركيز تسليط الضوء في موضع الماوس:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

على الرغم من ذلك، لا يمكن إضافة تأثيرات متحركة إلى التدرجات. إنها مرنة جدًا ومعقدة للغاية بحيث لا يتمكن المتصفح فقط من "استنتاج" الطريقة التي تريد استخدامها لتحريكها. باستخدام السمة @property، يمكن كتابة سمة واحدة وتحريكها في معزولة منفصلاً، ما يتيح للمتصفّح فهم الغرض من استخدامها بسهولة.

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

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

يستطيع المتصفح الآن تحريك حجم التدرج لأننا قلّلنا مساحة سطح التعديل إلى خاصية واحدة فقط وكتابةنا القيمة لكي يتمكن المتصفح من إضافة الأطوال بذكاء.

بإمكان "@property" تقديم الكثير من الميزات، غير أنّ هذه التحسينات الصغيرة يمكنها تحقيق تقدّم كبير.

المراجِع

• @property specification
• @property على MDN
• @property على web.dev
• عرض توضيحي للتركيز على التكبير أو التصغير
• حيل CSS: استكشاف @propertys وقدراتها المتحركة

كانت في min-width أو max-width

قبل نطاقات الاستعلام عن الوسائط، يستخدم الاستعلام عن الوسائط في CSS min-width وmax-width للتوضيح وفقًا للشروط. قد يبدو كالتالي:

@media (min-width: 320px) {
  …
}

بعد نطاقات الاستعلام عن الوسائط، يمكن أن يبدو الاستعلام عن الوسائط نفسه على النحو التالي:

@media (width >= 320px) {
  …
}

قد يبدو الاستعلام عن وسائط CSS باستخدام كل من min-width وmax-width كما يلي:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

بعد نطاقات الاستعلام عن الوسائط، يمكن أن يبدو الاستعلام عن الوسائط نفسه على النحو التالي:

@media (320px <= width <= 1280px) {
  …
}

بناءً على خلفية التعليمات البرمجية لديك، سيبدو أحدهما أكثر وضوحًا من الآخر. بفضل المواصفات الإضافية، سيتمكن المطوّرون من اختيار المواصفات التي يفضّلونها أو حتى استخدامها بالتبادل.

المراجِع

• مواصفات بنية نطاق الاستعلام عن الوسائط
• بنية نطاق طلب بحث الوسائط على MDN
• المكوّن الإضافي PostCSS لبنية نطاق طلب الوسائط

ما مِن متغيرات للاستعلام عن الوسائط

قبل @custom-media، كانت استعلامات الوسائط تكرر نفسها مرارًا وتكرارًا، أو تعتمد على المعالجات الأولية لإنشاء المخرجات المناسبة بناءً على المتغيرات الثابتة خلال وقت الإنشاء.

بعد @custom-media، تسمح خدمة CSS باستخدام أسماء مستعارة لطلبات البحث عن الوسائط والإشارة إليها تمامًا مثل المواقع المخصَّصة.

تعتبر تسمية الأشياء مهمة جدًا: يمكنها مواءمة الغرض مع بناء الجملة، مما يجعل الأشياء أسهل في المشاركة وأسهل في الاستخدام في الفرق. فيما يلي بعض الاستعلامات عن الوسائط المخصصة التي تتبعني بين المشروعات:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

الآن بعد أن تم تحديدها، يمكنني استخدام واحدة منها على النحو التالي:

@media (--OSdark) {
  :root {
    …
  }
}

ابحث عن قائمة كاملة بطلبات بحث الوسائط المخصصة التي أستخدمها داخل مكتبة المواقع المخصصة في CSS لفتح Props.

المراجِع

• مواصفات طلبات البحث عن الوسائط المخصّصة
• المكوّن الإضافي PostCSS لاستعلامات الوسائط المخصصة

محددات التداخل أمر رائع حقًا

قبل @nest، كان هناك تكرار كبير في أوراق الأنماط. وقد أصبح من الصعب على وجه التحديد عندما كانت أدوات الاختيار طويلة وكانت كل منها تستهدف اختلافات صغيرة. سهولة الدمج هي أحد الأسباب الأكثر شيوعًا لاستخدام معالج أوّلي.

بعد @nest، يختفي التكرار. وستتوفّر تقريبًا كل ميزة من ميزات التداخل المفعَّل مسبقًا في CSS.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

ما يهمّني في الدمج معي، إلى جانب عدم تكرار علامة article في أداة الاختيار المُدمجة، هو بقاء سياق النمط ضمن كتلة نمط واحدة. بدلاً من الانتقال من أداة اختيار واحدة وأنماطها إلى أداة اختيار أخرى تتضمّن الأنماط (المثال 1)، يمكن للقارئ البقاء ضمن سياق المقالة والاطّلاع على الروابط بداخلها. يتم تجميع العلاقة والهدف من النمط معًا، لذلك يظهر article كما لو كان يمتلك أنماطًا خاصة.

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

ضع في اعتبارك العنصر الفرعي الذي يريد تعديل نفسه عندما يكون في سياق رئيسي مختلف، على عكس الأصل الذي يمتلك النمط وتغيير العنصر الفرعي:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

تساعد @nest بشكل عام في التنظيم والتنظيم والإسناد بطريقة أكثر كفاءة. يمكن للمكونات تجميع أنماطها الخاصة وامتلاكها، بدلاً من توزيعها بين كتل الأنماط الأخرى. قد يبدو صغيرًا في هذه الأمثلة، ولكن يمكن أن يكون له تأثيرات كبيرة جدًا، لكل من الراحة والوضوح.

المراجِع

• مواصفات@nest
• المكوّن الإضافي@nest PostCSS
• Bramus: مستقبل CSS: أدوات الاختيار المتداخلة

تحديد نطاق الأنماط صعب حقًا

قبل @scope، كانت هناك عدّة استراتيجيات ترِد في CSS لأنّ الأنماط في CSS يتم اكتسابها ويتم ضبطها تلقائيًا على نطاق عالمي. هذه الميزات الخاصة بـ CSS ملائمة جدًا للعديد من الأشياء، ولكن بالنسبة إلى المواقع والتطبيقات المعقدة، التي من المحتمل أن تكون بها العديد من الأنماط المختلفة للمكونات، يمكن للمساحة العالمية وطبيعة الشلال أن تجعل الأنماط تبدو وكأنها تتسرب.

بعد @scope، لا يمكن تحديد الأنماط إلا في سياق معيّن فقط، مثل فئة معيّنة، بل يمكن أيضًا توضيح النقطة التي تنتهي عندها الأنماط ولا تستمر في التتالي أو الموروثة.

في المثال التالي، يمكن عكس نطاق اصطلاح التسمية BEM إلى الغرض الفعلي. تحاول أداة اختيار BEM نطاق لون العنصر header إلى حاوية .card باستخدام اصطلاحات تسمية. يتطلب هذا أن يحتوي العنوان على اسم الفئة هذا، لإكمال الهدف. باستخدام @scope، لا يلزم استخدام اصطلاحات تسمية من أجل إكمال نفس الهدف بدون ترميز عنصر العنوان:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

إليك مثالاً آخر، وهو أقل تحديدًا للمكونات وأكثر طبيعة النطاق العام لـ CSS. يجب أن تتداخل المظاهر الداكنة والفاتحة اللون داخل ورقة أنماط، وبالتالي يكون الترتيب مهمًا في تحديد النمط الفائز. يعني ذلك عادة أن أنماط المظهر الداكن تأتي بعد المظهر الفاتح؛ حيث يؤهل ذلك الضوء كنمط افتراضي والداكن كنمط اختياري. تجنُّب التعارض بين الطلبات والنطاق باستخدام @scope:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

لإكمال القصة هنا، تسمح السمة @scope أيضًا بتحديد المكان الذي ينتهي فيه نطاق النمط. ولا يمكن تنفيذ ذلك باستخدام أي اصطلاحات تسمية أو معالِجات أوّلية. يُعدّ ذلك أمرًا خاصًا و لا يمكن لأحد تنفيذه سوى لغة CSS المضمّنة في المتصفح. في المثال التالي، يتم تطبيق النمطين img و.content حصريًا عندما يكون العنصر الثانوي لـ .media-block تابعًا لـ .content أو أصله:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

المراجِع

• مواصفات@scope
• شرح@scope

لا توجد طريقة CSS لتخطيط البناء

قبل تنفيذ CSS باستخدام الشبكة، كانت لغة JavaScript هي أفضل طريقة لتحقيق تخطيط البناء، حيث إن أي طريقة من طرق CSS التي تحتوي على أعمدة أو flexbox كانت تمثل ترتيب المحتوى بشكل غير دقيق.

بعد تنفيذ CSS باستخدام الشبكة، لن تكون هناك حاجة إلى مكتبات JavaScript وسيكون ترتيب المحتوى صحيحًا.

تم إكمال العرض التوضيحي السابق باستخدام خدمة مقارنة الأسعار (CSS) التالية:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

من المريح أن تعرف أن هذه الاستراتيجية غير متوفرة على الشبكة الإعلانية، كما يمكنك تجربتها اليوم في Firefox.

المراجِع

• مواصفات تصميم البناء
• تخطيط المباني على MDN
• Smashing Magazine: Native CSS Masonry Layout باستخدام CSS Grid

لا يمكن لخدمة مقارنة الأسعار أن تساعد المستخدمين في تقليل البيانات.

قبل طلب البحث عن الوسائط prefers-reduced-data، كان بإمكان لغة JavaScript والخادم تغيير سلوكهما استنادًا إلى خيار "توفير البيانات" في نظام التشغيل أو المتصفّح الذي يستخدمه المستخدم، ولكن لم يكن بإمكان CSS إجراء ذلك.

بعد طلب الوسائط prefers-reduced-data، يمكن لخدمة CSS الانضمام إلى عملية تحسين تجربة المستخدم والقيام بدورها في حفظ البيانات.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

تُستخدم لغة CSS السابقة في مكوِّن تمرير الوسائط هذا ويمكن أن يتم توفير مبالغ كبيرة. وبناءً على حجم إطار العرض الذي تتم زيارته، يتم توفير مزيد من التوفير عند تحميل الصفحة. يستمر الحفظ أثناء تفاعل المستخدمين مع برامج تمرير الوسائط. تحتوي جميع الصور على سمات loading="lazy"، ويعني ذلك عند دمجها مع ميزة CSS التي تخفي العنصر تمامًا، عدم تقديم طلب من الشبكة مطلقًا للحصول على الصورة.

بالنسبة للاختبار الذي أجريته، تم مبدئيًا تحميل 40 طلبًا و700 كيلوبايت من الموارد في إطار عرض متوسط الحجم. أثناء قيام المستخدم بالتمرير في تحديد الوسائط، يتم تحميل المزيد من الطلبات والموارد. باستخدام CSS والاستعلام المخفض عن وسائط البيانات، يتم تحميل 10 طلبات و172 كيلوبايت من الموارد. وهذا يساوي نصف ميغابايت من المبالغ التي تم توفيرها، ولم يقم المستخدم بالتمرير في أي من الوسائط، ولم يتم تقديم أي طلبات إضافية بعد ذلك.

هناك مزايا أكثر لتجربة البيانات المنخفضة هذه من مجرد توفير البيانات. يمكن رؤية المزيد من العناوين ولا توجد صور غلاف مشتِّتة للانتباه لسرقة الانتباه. يتصفح العديد من المستخدمين في وضع توفير البيانات لأنهم يدفعون مقابل كل ميجابايت من البيانات - من الجيد أن ترى CSS قادرة على المساعدة هنا.

المراجِع

• مواصفات البيانات المخفّضة التي تفضّلها
• يفضل البيانات المخفضة على MDN
• يفضل البيانات المخفضة في واجهة المستخدم الرسومية تحدي
• Smashing Magazine: تحسين "مؤشرات أداء الويب الأساسية"، دراسة حالة بعنوان Smashing Magazine

ميزات الانطباق المرتبطة بالتمرير محدودة جدًا.

قبل اقتراحات التمرير السريع هذه، قد تصبح كتابة JavaScript الخاص بك لإدارة عرض دوّار أو شريط تمرير أو معرض أمرًا معقدًا بسرعة، مع جميع المراقبين وإدارة الحالة. بالإضافة إلى ذلك، إذا لم يتم توخي الحذر، يمكن أن تتم تسوية سرعات التمرير الطبيعية باستخدام نص برمجي، ما يجعل تفاعل المستخدم يبدو غير طبيعي قليلاً ومن المحتمل أن يكون غير مستقر.

واجهات برمجة تطبيقات جديدة

snapChanging()

بعد إصدار المتصفح عنصر ثانوي، يتم تنشيط هذا الحدث. ويتيح ذلك لواجهة المستخدم التعبير عن عدم ظهور عنصر انطفائي إضافي وحالة الانطباق غير المحددة لشريط التمرير، إذ يتم استخدامها في الوقت الحالي وستصل إلى مكان جديد.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

وبعد انتقال المتصفح إلى فئة فرعية جديدة والراحة في شريط التمرير، يبدأ هذا الحدث. ويسمح هذا لأي واجهة مستخدم تعتمد على العنصر الثانوي الملتقط بالتحديث وإظهار الاتصال.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

لا يبدأ الانتقال دائمًا من البداية. فكر في مكونات قابلة للتمرير السريع يؤدي فيها التمرير سريعًا لليسار أو اليمين إلى تشغيل أحداث مختلفة، أو أن شريط البحث يكون مخفيًا بشكل مبدئي أثناء تحميل الصفحة إلى أن تمرر إلى الأعلى. تتيح خاصية CSS هذه للمطورين تحديد أنه يجب أن يبدأ شريط التمرير عند نقطة معينة.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

وستطابق أداة اختيار لغة CSS هذه العناصر في حاوية الانطباق التمرير التي يلتقطها المتصفّح حاليًا.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

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

لا تزال ميزات CSS وJS هذه في مراحلها الأولى، لكن يمكنك البحث قريبًا عن رموز polyfill التي يمكن أن تساعد في اعتمادها واختبارها.

المراجِع

• مواصفات مسودة الانتقال للأسفل أو للأعلى
• تفسيرات حول تمرير Snap 2
• التقاط العروض التوضيحية

ركوب الدراجة بين الحالات المعروفة

قبل toggle()، كانت الحالات التي تتوفّر فيها في المتصفّح متاحة فقط للتخطيط والتفاعل. على سبيل المثال، يحتوي إدخال مربّع الاختيار على :checked، وهي حالة متصفّح مُدارة داخليًا للإدخال الذي يمكن لخدمة CSS استخدامه لتغيير العنصر مرئيًا.

بعد toggle()، يمكن إنشاء حالات مخصّصة على أي عنصر في CSS لتغييره واستخدامه في التصميم. فهو يسمح للمجموعات، وركوب الدراجات، والتبديل الموجه، والمزيد.

في المثال التالي، يتحقق نفس تأثير عنصر القائمة الذي يتوسطه خط على الإكمال ولكن بدون أي عناصر مربع اختيار:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

بالإضافة إلى أنماط toggle() CSS ذات الصلة:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

إذا كنت على دراية بالأجهزة التي تعمل بالولاية، قد تلاحظ مقدار تقاطع المؤشر مع toggle(). ستسمح هذه الميزة للمطوّرين بإنشاء المزيد من المحتوى بتنسيق CSS، ما نأمل أن يؤدي إلى إنشاء طرق أوضح وأكثر دلالية لتنظيم التفاعل والوضع.

المراجِع

• مواصفات المسودة (toggle())
• Bramus: مستقبل CSS: تبديلات CSS

تخصيص عناصر التحديد

قبل <selectmenu>، لم يكن بإمكان خدمة مقارنة الأسعار (CSS) تخصيص عناصر <option> باستخدام ترميز HTML المنسَّق أو إجراء تغييرات كثيرة على عرض قائمة الخيارات. وقد دفع ذلك بالمطوّرين إلى تحميل المكتبات الخارجية التي أعادت إنشاء الكثير من وظائف <select>، ما أدّى إلى بذل مجهود كبير.

بعد <selectmenu>، سيتمكّن المطوّرون من توفير رموز HTML منسّقة لعناصر الخيارات وتصميمها بالقدر الذي يحتاجون إليه، مع الاستمرار في استيفاء متطلبات تسهيل الاستخدام وتوفير ترميز HTML دلالي.

في المثال التالي، المأخوذ من صفحة الشرح <selectmenu>، يتم إنشاء قائمة اختيار جديدة تحتوي على بعض الخيارات الأساسية:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

يمكن لـ CSS استهداف أجزاء العنصر وتصميمها:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

يمكنك تجربة العنصر <selectmenu> على Chromium في إصدار Canary مع تفعيل علامة تجارب الويب. ننصحك بمتابعة 2023 وما بعده للحصول على عناصر قائمة مختارة قابلة للتخصيص.

المراجِع

• مواصفات قائمة Select Menu
• عرض توضيحي لقائمة اختيارات

تثبيت عنصر بعنصر آخر

قبل anchor()، كان الموضع المطلق والنسبي هما استراتيجيات تحديد الموضع المتوفّرة للمطوّرين لإتاحة إمكانية تحريك العناصر الثانوية داخل عنصر رئيسي.

بعد anchor()، يمكن للمطوّرين وضع العناصر في عناصر أخرى، بغض النظر عمّا إذا كانت عناصر ثانوية أم لا. كما أنها تسمح للمطورين بتحديد الحافة التي يجب وضعها في مقابل، والأشياء الجيدة الأخرى لإنشاء علاقات منصب بين العناصر.

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

المراجِع

• توضيح anchor()