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

ميزات تصميم الويب الحالية والمستقبلية، كما تم عرضها في مؤتمر Google IO 2022، بالإضافة إلى بعض الإضافات

Adam Argyle

من المخطّط أن يكون عام 2022 من أعظم أعوام CSS، سواء من حيث الميزات أو إصدارات الميزات التعاونية للمتصفّح، وذلك بهدف تعاوني يقضي بتنفيذ 14 ميزة.

نظرة عامة

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

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

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

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

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

Compat 2021

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

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

تم تحسين نتائج الاختبار على جميع المستويات، ما يشير إلى ثبات محسّن وموثوقية أفضل. تهانينا للفرق هنا.

Interop 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: Cascade Layers
• أحمد شاكر: مرحبًا، CSS Cascade Layers

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

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

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

في العرض التقديمي التالي، ينشئ عنصر النصّ شبكة كلاسيكية من ثلاثة أعمدة: يُسمى العمود الأوسط 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 Subgrid

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

قبل @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
• عرض توضيحي عن "تقويم Google" من Una
• مجموعة رائعة من طلبات البحث عن الحاويات
• كيفية إنشاء 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 المفيدة هذه.

الموارد

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

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

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

لم يحدث ذلك في العام 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
• Stefan Judis: 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
• العرض التوضيحي

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

قبل استخدام بنية الألوان النسبية، كان يجب وضع قنوات الألوان بشكلٍ فردي في السمات المخصّصة لاحتساب اللون وإجراء التعديلات. جعل هذا القيد أيضًا وظيفة اللون الأساسية لمعالجة الألوان لأن تدرج اللون أو التشبع أو الإضاءة يمكن تعديلها بطريقة مباشرة باستخدام 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
);

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

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

لمزيد من الاستكشافات والأمثلة والتعليقات المتعمّقة، يمكنك قراءة سلسلة التغريدات التالية على Twitter .

الموارد

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

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 at-rule خاصة لتجميع مجموعة من خيارات التخصيص وتسميتها في حِزمة لاستخدامها في وقت لاحق. لاحظ كيف يمكنك تحديد اسم مخصّص تمامًا مثل السمة المخصّصة، بدءًا من --:

@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 Fonts
• فيديو توضيحي للمطوّرين حول ميزة 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;
}

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

الموارد

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

: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>. في المثال التالي، يتم اختيار الأشكال التي تحتوي على figcaptions ثم الصور ضمن هذا السياق. يتم استخدام :has() ولا يؤدي ذلك إلى تغيير الهدف، لأنّ الهدف الذي نستهدفه هو الصور وليس الأرقام:

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

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

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

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

الموارد

• مواصفات دالة has()‎
• ‎:has() on MDN
• إنّ أداة اختيار :has() في CSS هي أكثر بكثير من "أداة اختيار الأب".

2022 وما بعده

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

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

الخصائص المخصّصة ذات النوع غير المحدّد بدقة

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

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

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

يعمل هذا الإجراء بشكل جيد إلى أن يتم تغيير أيّ من السمات إلى قيمة لا تقبلها Cascading Style Sheets (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 المكتوبة يمكنها إبلاغ المتصفّح بقصد المطوّر داخل عملية interpolated معقدة للغاية. ويحدّ ذلك بشكل أساسي من نطاق الاحتمالات إلى حدّ أنّه يمكن للمتصفّح أن يُضفي الحيوية على جوانب من التصميم لم يكن بإمكانه ذلك من قبل.

راجِع هذا المثال التجريبي الذي يتم فيه استخدام تدرج شعاعي لإنشاء جزء من الصورة المتراكبة، ما يؤدي إلى إنشاء تأثير تركيز ضوء مسلّط. تضبط 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 on MDN
• @property على web.dev
• الإصدار التجريبي لميزة "التركيز" في Zoom
• حيل CSS: استكشاف @property وميزاته المخصّصة للرسوم المتحرّكة

كان في 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‏ Open 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 specification
• @nest PostCSS plugin
• Bramus: مستقبل CSS: دمج أدوات الاختيار

إنّ تحديد أنماط النطاق أمر صعب للغاية.

قبل @scope، كانت هناك العديد من الاستراتيجيات لأنّ الأنماط في 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 explainer

لا تتوفّر طريقة 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: تنسيق "العرض على شكل كتل" للعناصر باستخدام CSS المدمجة مع CSS Grid

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

قبل طلب الوسائط 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 كيلوبايت من الموارد. وهذا يعني توفير نصف ميغابايت، ولم ينتقل المستخدم حتى إلى أي من الوسائط، وفي هذه المرحلة، لا يتم تقديم أي طلبات إضافية.

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

الموارد

• يفضّل مواصفات البيانات المخفّضة
• prefers-reduced-data on MDN
• يفضل البيانات المخفّضة في تحدي واجهة المستخدم الرسومية
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Study

ميزات المحاذاة للتمرير محدودة جدًا

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

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

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

الموارد

• مسودة ملف spec المتعلقة بميزة "التمرير السريع" في الإصدار 2
• فيديوهات توضيحية حول ميزة "العرض على الشاشة" 2
• الإصدارات التجريبية من Snap

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

قبل 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 مع تفعيل ميزة web experiments. ننصحك بالانتباه إلى عناصر محددة قابلة للتخصيص في القائمة في العام 2023 والسنوات اللاحقة.

الموارد

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

ربط عنصر بعنصر آخر

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

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

يتضمّن الشرح بعض الأمثلة الرائعة وعينات الرموز، إذا أردت معرفة المزيد.

الموارد

• Anchor() الشرح