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

يمكنك الاطّلاع على بعض الميزات الرائعة في CSS الحديثة.

Adam Argyle

Una Kravets

هناك الكثير من الأحداث المشوّقة التي تحدث في CSS حاليًا، فالعديد منها متوفر بالفعل في المتصفحات الحالية! محادثتنا في مؤتمر CDS لعام 2019، والتي يمكنك مشاهدتها أدناه يتناول العديد من الميزات الجديدة والقادمة التي نرى أنها يجب أن تحظى ببعض الاهتمام.

تركز هذه المشاركة على الميزات التي يمكنك استخدامها اليوم، لذا احرص على مشاهدة هذا الحديث لإجراء مناقشة أعمق حول الميزات القادمة مثل هوديني. يمكنك أيضًا العثور على عروض توضيحية لجميع الميزات التي نناقشها على صفحة 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-* من الاستعلامات عن الوسائط:

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

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

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

الحزمة الثابتة

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

شريحة لاصقة

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

Sticky Desperado

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

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 واحدة لعنصرَين، أحدهما بتنسيق الشبكة والآخر بتصميم مرن:

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

هوديني CSS

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

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

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

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

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

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