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

اطّلِع على آخر المعلومات حول بعض الميزات المشوّقة في CSS الحديثة.

Adam Argyle

Una Kravets

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

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

المحتويات

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

التمرير السريع

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

يُنشئ نموذج الرمز البرمجي هذا ميزة الانتقال الأفقي في عنصر <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-reduced-motion
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-transparency
• forced-colors
• inverted-colors

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

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

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

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

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

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

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، لا داعي للقلق بشأن الهوامش على العناصر الفرعية التي تتسبب في ظهور مسافات بيضاء غير مرغوب فيها حول حواف العنصر الذي يحتوي على العناصر الفرعية:

لدينا خبر سارّ آخر: ستتوفّر gap في Flexbox، ما يمنح جميع مزايا المسافة نفسها التي توفّرها الشبكة:

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

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

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

CSS Houdini

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

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

Houdini هو اسم شامل لعدة واجهات برمجة تطبيقات. إذا أردت الحصول على مزيد من المعلومات عن هذه الميزات وحالتها الحالية، يمكنك الاطّلاع على المقالة هل أصبحت ميزة Houdini جاهزة؟ في محادثتنا، غطّينا واجهتَي برمجة التطبيقات Properties and Values 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 واسترداد عنصر غني يسهل تنفيذ العمليات عليه.