الجيل التالي من أنماط الويب

يمكنك الاطّلاع على بعض الميزات المشوّقة في إصدار CSS الحديث.

Adam Argyle

Una Kravets

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

تركز هذه المشاركة على الميزات التي يمكنك استخدامها اليوم، لذا احرص على مشاهدة الحديث للحصول على مناقشة أعمق للميزات القادمة مثل Houdini. يمكنك أيضًا العثور على عروض توضيحية لجميع الميزات التي نناقشها على صفحة CSS@CDS.

الفهرس

• محاذاة التمرير
• :focus-within
• المستوى 5 من طلبات البحث عن الوسائط
• الخصائص المنطقية
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS هوديني
• تجاوز

إبزيم التمرير

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

يعمل نموذج الرمز هذا على إعداد التمرير الأفقي في عنصر <section> مع نقاط انطباق بمحاذاة الجوانب اليسرى لعناصر <picture> الثانوية:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

إليك آلية العمل:

• في العنصر <section> الرئيسي،
  • تم ضبط overflow-x على auto لإتاحة التمرير الأفقي.
  • تم ضبط overscroll-behavior-x على contain لمنع أي عناصر رئيسية من التمرير عندما يصل المستخدم إلى حدود منطقة التمرير الخاصة بالعنصر <section>. (هذا ليس ضروريًا تمامًا للالتقاط، ولكنه عادةً ما يكون فكرة جيدة).
  • ويتم ضبط scroll-snap-type على x عند الالتقاط الأفقي، وعلى mandatory لضمان ضبط إطار العرض دائمًا عند أقرب نقطة محاذاة.
• في عناصر <picture> الثانوية، يتم ضبط scroll-snap-align على البدء، ما يضبط نقاط الانطباق على الجانب الأيسر من كل صورة (بافتراض ضبط direction على ltr).

وإليك عرض توضيحي مباشر:

يمكنك أيضًا الاطّلاع على العروض التوضيحية لكل من لقطة تمرير عمودي ومحاذاة تمرير المصفوفة.

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

:focus-within

تعالج :focus-within مشكلة طويلة الأمد بشأن تسهيل الاستخدام: هناك العديد من الحالات التي يجب أن يؤثر فيها التركيز على عنصر ثانوي في عرض العنصر الرئيسي حتى يتمكن مستخدمو التكنولوجيا المساعِدة من الوصول إلى واجهة المستخدم.

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

تطلب السمة :focus-within من المتصفِّح تطبيق نمط عندما يكون التركيز على أي عنصر ثانوي ضمن عنصر محدّد. بالرجوع إلى مثال القائمة، يمكنك التأكّد من بقاء العنصر مرئيًا عندما يكون التركيز على عنصر في القائمة من خلال ضبط :focus-within:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

حاوِل التنقل بين العناصر التي يمكن التركيز عليها في العرض التوضيحي أدناه. ستلاحظ أن القوائم تظل مرئية عندما تركِّز على عناصر القائمة:

المستوى 5 من "طلبات الوسائط"

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

في ما يلي طلبات البحث الجديدة التي نعتقد أنّ المطوّرين سيثيرون حماستهم:

• يفضل-الحركة المنخفضة
• تفضيل-color-scheme
• تباين التفضيل
• يفضل-الشفافية المخفّضة
• ألوان مفروضة
• ألوان مقلوبة

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

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

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

ملاحظة: في Chrome Canary، يمكنك اختبار لغة CSS التي تستخدم prefers-reduced-motion أو prefers-color-scheme من خلال اختيار الإعدادات المناسبة في درج العرض في أدوات مطوّري البرامج. للوصول إلى العرض، افتح قائمة الأوامر وشغِّل الأمر Show Rendering.

الخصائص المنطقية

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

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

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

• تكون سمة الحظر عمودية على تدفق النص في السطر. (في اللغة الإنجليزية، يمكن استخدام block-size نفسها في height.)
• السمة المضمّنة هي موازية لتدفق النص في السطر. (في اللغة الإنجليزية، يمكن استخدام inline-size نفسها في width.)

تنطبق أسماء السمات هذه على جميع خصائص التنسيق المنطقي. على سبيل المثال، في اللغة الإنجليزية، يتطابق block-start مع top، وinline-end هو نفسه right.

باستخدام الخصائص المنطقية، يمكنك تحديث التنسيق تلقائيًا للغات الأخرى عن طريق تغيير السمتين writing-mode وdirection لصفحتك بدلاً من تحديث عشرات خصائص التنسيق في العناصر الفردية.

يمكنك الاطّلاع على طريقة عمل الخصائص المنطقية في العرض التوضيحي أدناه من خلال ضبط السمة writing-mode في العنصر <body> على قيم مختلفة:

position: sticky

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

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

حزمة لاصقة

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

زحليقة ثابتة

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

ستيكي ديسبيرادو

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

backdrop-filter

تتيح لك السمة backdrop-filter تطبيق تأثيرات رسومية على المنطقة خلف العنصر بدلاً من العنصر نفسه. ونتج عن ذلك العديد من التأثيرات الرائعة التي كانت قابلة للتنفيذ في السابق فقط باستخدام عمليات اختراق CSS وJavaScript المعقدة في سطر واحد من CSS.

على سبيل المثال، يستخدم هذا العرض التوضيحي backdrop-filter للوصول إلى التمويه بنمط نظام التشغيل:

لقد نشرنا مشاركة رائعة حول backdrop-filter، لذا يمكنك الانتقال إلى الصفحة للاطّلاع على المزيد من المعلومات.

:is()

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

وفي ما يلي مثال بسيط:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

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

نحمل لك أخبارًا أفضل: سيتوفّر تطبيق "gap" على شكل flexbox، مع توفير كل مزايا المسافات نفسها التي تتوفر في الشبكة:

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

يعرض الفيديو التالي مزايا استخدام سمة gap واحدة لعنصرَين، أحدهما بتنسيق الشبكة والآخر بتصميم مرن:

في الوقت الحالي، لا يمكن استخدام التنسيق gap إلا مع FireFox فقط، لكن يمكنك تجربة هذا العرض التوضيحي للتعرف على طريقة عمله:

هوديني CSS

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

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

Houdini هو اسم شامل لواجهات برمجة تطبيقات متعدّدة. إذا أردت الحصول على المزيد من المعلومات عنه وحالته الحالية، يمكنك الاطّلاع على مقالة هل Houdini جاهزة بعد؟. تناولنا في حديثنا واجهة برمجة التطبيقات Properties and Value API وPaint API وAnimation Worklet لأنها الأكثر استخدامًا في الوقت الحالي. ويمكننا تخصيص مشاركة كاملة لكل واجهة من واجهات برمجة التطبيقات المثيرة للاهتمام هذه، ولكن، في الوقت الحالي، اطلع على حديثنا للحصول على نظرة عامة وبعض العروض التوضيحية الرائعة التي بدأت في تعريفك بما يمكنك فعله باستخدام واجهات برمجة التطبيقات.

القائمة الكاملة

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

• size: خاصية تتيح لك ضبط الارتفاع والعرض في الوقت نفسه.
• aspect-ratio: خاصية تحدد نسبة العرض إلى الارتفاع للعناصر التي ليس لها عنصر في الأساس
• min() وmax() وclamp(): الدوال التي تتيح لك ضبط قيود رقمية على أي خاصية CSS، وليس فقط العرض والارتفاع
• list-style-type هو موقع حالي، ولكنّه سيتيح قريبًا مجموعة أكبر من القيم، بما في ذلك الرموز التعبيرية وملفات SVG.
• display: outer inner: ستقبل السمة display قريبًا مَعلمتَين، ما سيسمح لك بتحديد التنسيقَين الخارجي والداخلي بشكل صريح بدلاً من استخدام كلمات رئيسية مركّبة مثل inline-flex.
• مناطق CSS: ستتيح لك ملء مساحة محددة غير مستطيلة يمكن أن يتدفق فيها المحتوى من وإلى خارجه
• وحدات CSS: ستتمكن لغة JavaScript من طلب وحدة CSS والحصول على عنصر منسّق يسهل تنفيذ العمليات عليه