تاريخ الانتهاء من إعداد خدمة مقارنة الأسعار (CSS) لعام 2023

CSS Wrapped: 2023

الانتقال إلى المحتوى:

• الأُسس المعمارية
• الدوال المثلثية
• اختيار معقد من النوع n*
• المستوى
• التداخل

• أسلوب الخط
• الحرف الأول
• التوازن/التنسيق الجميل للتفاف النص

• اللون
• مستوى اللون 4
• دالة مزج الألوان
• بنية الألوان النسبية

• التصميم السريع الاستجابة
• طلبات البحث عن الحاويات
• طلبات البحث عن الأنماط
• :has selector
• تعديل طلب الوسائط
• طلب الوسائط البرمجي
• طلب شفافية الوسائط

• التفاعل
• عرض الانتقالات
• دالة التخفيف الخطي
• Scrollend
• الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل
• مرفق الجدول الزمني المؤجّل
• عمليات النقل المنفصلة للموقع
• قاعدة النمط الأوّلي
• الصور المتحركة التي تظهر على سطح الفيديو

• المكوّنات
• النافذة المنبثقة
• الساعة في الخيار
• الفئات الزائفة الصالحة/غير الصالحة للمستخدم
• Accordion حصري

ممتاز. كان عام 2023 عامًا هامًا لخدمة CSS.

من ‎#Interop2023 إلى العديد من الصفحات الجديدة في مجال CSS وواجهة المستخدم التي تتيح إمكانات كان المطوّرون يعتقدون في السابق أنّها مستحيلة على منصة الويب. يتيح الآن كل متصفّح حديث طلبات البحث عن الحاويات والشبكة الفرعية وعنصر الاختيار :has() ومجموعة كبيرة من مساحات الألوان والدوالّ الجديدة. تتوفّر في Chrome الرسوم المتحرّكة المستندة إلى الانتقال باستخدام CSS فقط، بالإضافة إلى الرسوم المتحرّكة بسلاسة بين طرق عرض الويب باستخدام عمليات انتقال العرض. بالإضافة إلى ذلك، هناك العديد من العناصر الأساسية الجديدة التي تم طرحها لتوفير تجارب أفضل للمطوّرين، مثل تداخل CSS والأنماط ذات النطاق.

يا له من عام! لذلك، نريد إنهاء هذا العام الرائع بالاحتفال بالعمل الجاد الذي بذله مطوّرو المتصفّحات ومجتمع الويب الذي ساهم في تحقيق كل هذا.

ابحث عن شارات Baseline الجديدة بجانب رؤوس الميزات. مزيد من المعلومات

• = متاح حديثًا في جميع الإصدارات الثابتة من المتصفّحات الرئيسية.

• = توفّر جزئي في المتصفّحات الرئيسية

الأُسس المعمارية

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

الدوال المثلثية

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

• 111
• 111
• 108
• 15.4

المصدر

أضاف الإصدار 111 من Chrome وظائف حساب المثلثات sin() وcos() وtan() وasin() وacos() وatan() وatan2()، ما جعله متاحًا في جميع المحرّكات الرئيسية. تكون هذه الدوال مفيدة جدًا لأغراض الرسوم المتحركة والتنسيق. على سبيل المثال، أصبح من الأسهل الآن ترتيب العناصر في دائرة حول مركز محدّد.

الإصدار التجريبي للدوالّ المثلثية

مزيد من المعلومات عن الدوالّ المثلثية في CSS

اختيار معقد للعنصر n-*

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

• 111
• 111
• 113
• 9

باستخدام محدد الفئة الزائفة :nth-child()، من الممكن اختيار عناصر في نموذج DOM حسب فهرسها. باستخدام An+B microsyntax، يمكنك التحكّم بدقة في العناصر التي تريد اختيارها.

تأخذ العناصر المصطنعة :nth-*() تلقائيًا جميع العناصر الفرعية في الاعتبار. اعتبارًا من الإصدار 111 من Chrome، يمكنك اختياريًا تمرير قائمة أدوات اختيار إلى :nth-child() و:nth-last-child(). وبهذه الطريقة، يمكنك تصفية قائمة الأطفال مسبقًا قبل أن تُجري An+B عملها.

في العرض الترويجي التالي، لا يتم تطبيق منطق 3n+1 إلا على الدمى الصغيرة من خلال فلترتها مسبقًا باستخدام of .small. استخدِم القوائم المنسدلة لتغيير أداة الاختيار المستخدَمة بشكل ديناميكي.

عرض توضيحي معقد لاختيار nth-*

مزيد من المعلومات حول عمليات الاختيار المعقدة من النوع nth-*

المستوى

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

• 118
• 118
• 
• 17.4

المصدر

أضاف الإصدار 118 من Chrome قاعدة at-rule‏ @scope التي تتيح لك ضبط نطاق مطابقة المحدّد على شجرة فرعية معيّنة من المستند. باستخدام التنسيق على مستوى النطاق، يمكنك تحديد العناصر التي تختارها بدقة شديدة بدون الحاجة إلى كتابة أدوات اختيار دقيقة للغاية أو ربطها بشكل وثيق ببنية DOM.

يتم تحديد شجرة فرعية ذات نطاق من خلال جذر النطاق (الحدّ الأقصى) وحدّ نطاق اختياري (الحدّ الأدنى).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

قواعد الأنماط التي يتم وضعها داخل مجموعة نطاق ستستهدف فقط العناصر ضمن الشجرة الفرعية المُقتطعة. على سبيل المثال، لا تستهدف قاعدة الأنماط على مستوى التطبيق التالية سوى عناصر <img> التي تقع بين عنصر .card وأي مكوّن مُدمَج يتطابق مع المحدّد [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

في العرض الترويجي التالي، لا تتم مطابقة عناصر <img> في مكوّن لوحة العرض الدوّارة بسبب الحدّ الأقصى لتحديد النطاق المطبَّق.

لقطة شاشة للعرض التوضيحي لنطاق الموافقة

عرض Scope المباشر

العرض التوضيحي لخدمة مقارنة الأسعار (CSS) @scope

يمكنك الاطّلاع على مزيد من المعلومات عن @scope في مقالة "كيفية استخدام @scope لتقييد مدى وصول أدوات الاختيار". ستتعرّف في هذه المقالة على أداة اختيار :scope وكيفية التعامل مع النوعية والنطاقات التي لا تحتوي على مقدمة ومدى تأثُّر التسلسل بـ@scope.

التداخل

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

• 120
• 120
• 117
• 17.2

المصدر

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

دمج التسجيل الرقمي للشاشة

عرض توضيحي لميزة "تداخل البث المباشر"

تغيير أداة اختيار التداخل المُرخي لتحديد الفائز في السباق

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

مزيد من المعلومات حول التداخل

شبكة فرعية

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

• 117
• 117
• 71
• 16

المصدر

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

تسجيل رقمي للشاشة في شبكة فرعية

عرض توضيحي مباشر للشبكة الفرعية

تتمّ مواءمة الرأس والنص والتذييل مع الأحجام الديناميكية للعناصر المتشابهة.

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

اطّلِع على مزيد من المعلومات عن الشبكة الفرعية.

فن الطباعة

شهدت الطباعة على الويب بعض التعديلات الرئيسية في عام 2023. من الأمثلة الرائعة على التحسين المتدرّج السمة text-wrap. تتيح هذه السمة تعديل التنسيق الطباعي، الذي يتم إنشاؤه في المتصفّح بدون الحاجة إلى نص برمجي إضافي. ودِّع طول السطور غير الملائم ورحِّب بتنسيقات أكثر قابلية للتنبؤ.

الحرف الأول

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

• 110
• 110
• x
• 9

المصدر

تم طرح سمة initial-letter في بداية العام في الإصدار 110 من Chrome، وهي سمة CSS صغيرة وفعّالة تضبط تنسيق موضع الأحرف الأولى. يمكنك وضع الأحرف في حالة مُسقطة أو مرتفعة. تقبل السمة مَعلمتَين: الأولى لتحديد عمق إسقاط الحرف في الفقرة المقابلة، والثانية لتحديد مقدار رفع الحرف فوقها. يمكنك أيضًا استخدام كليهما معًا، كما هو موضّح في العرض الترويجي التالي.

لقطة شاشة للحرف الأول

عرض توضيحي للحرف الأول

غيِّر قيم initial-letter للعنصر النائب ::first-letter لمشاهدة عملية التحويل.

اطّلِع على مزيد من المعلومات عن initial-letter.

text-wrap: balance and pretty

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

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

تسجيل رقمي للشاشة يتضمّن التفاف النص

عرض توضيحي مباشر لميزة "التفاف النص"

في العرض التقديمي التالي، يمكنك مقارنة تأثيرات balance وpretty على عنوان وبقرة من خلال سحب شريط التمرير. جرِّب ترجمة العرض الترويجي إلى لغة أخرى.

اطّلِع على مزيد من المعلومات عن text-wrap: balance.

اللون

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

مساحات الألوان عالية الدقة (مستوى الألوان 4)

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

• 111
• 111
• 113
• 15

المصدر

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

• 111
• 111
• 113
• 15

المصدر

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

يمكن الآن لـ CSS والألوان تنفيذ ما يلي: - التحقّق مما إذا كانت أجهزة شاشة المستخدمين قادرة على عرض ألوان النطاق العالي الديناميكية (HDR) ذات النطاق الواسع. - تحقَّق مما إذا كان متصفّح المستخدم يفهم بنية الألوان، مثل Oklch أو Display P3. - تحديد ألوان HDR في Oklab وOklch وHWB وDisplay P3 وRec.2020 وXYZ والمزيد - إنشاء تدرّجات باستخدام ألوان النطاق العالي الديناميكية (HDR) - إدراج تدرّجات في مساحات ألوان بديلة - مزج الألوان باستخدام color-mix() - إنشاء خيارات ألوان باستخدام بنية الألوان النسبية

تسجيل رقمي للشاشة بدقة 4 ألوان

عرض توضيحي لتطبيق Color 4

في العرض التقديمي التالي، يمكنك مقارنة تأثيرات "balance" و"pretty" على عنوان وفقرة من خلال سحب شريط التمرير. جرِّب ترجمة العرض الترويجي إلى لغة أخرى.

مزيد من المعلومات حول Color 4 ومساحات الألوان

دالة مزج الألوان

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

• 111
• 111
• 113
• 16.2

المصدر

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

تسجيل رقمي للشاشة حول دالة color-mix()

عرض توضيحي للدالة color-mix()

يتيح لك الخيار "عيّنة" اختيار لونَين باستخدام أداة اختيار الألوان، ومساحة الألوان، ومقدار كل لون يجب أن يكون مهيمنًا في المزيج.

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

اطّلِع على مزيد من المعلومات عن color-mix()‎.

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

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

تسجيل شاشة RCS

عرض توضيحي مباشر لخدمات الاتصالات التفاعلية (RCS)

تغيير اللون وتغيير المَشاهد ويستخدم كلّ منهما بنية ألوان نسبية لإنشاء خيارات لونية مختلفة عن اللون الأساسي.

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

اطّلِع على مزيد من المعلومات حول بنية الألوان النسبية.

التصميم السريع الاستجابة

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

طلبات البحث عن حجم الحاوية

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

• 105
• 105
• 110
• 16

المصدر

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

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

@container Screencast

‎@container Demo

اطّلِع على مزيد من المعلومات عن استخدام طلبات البحث عن الحِزم.

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

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

• 111
• 111
• x
• 18

المصدر

تم طرح طلبات البحث عن الأنماط مع تنفيذ جزئي في الإصدار 111 من Chrome. باستخدام طلبات البحث عن الأنماط حاليًا، يمكنك طلب البحث عن قيمة السمات المخصّصة في عنصر رئيسي عند استخدام @container style(). على سبيل المثال، يمكنك الاستعلام عمّا إذا كانت قيمة خاصية مخصّصة متوفّرة أو تم ضبطها على قيمة معيّنة، مثل @container style(--rain: true).

لقطة شاشة لطلب البحث عن الأنماط

عرض توضيحي لطلب باستخدام نمط

تغيير اللون وتغيير المَشاهد ويستخدم كلّ منهما بنية ألوان نسبية لإنشاء خيارات لونية مختلفة عن اللون الأساسي.

على الرغم من أنّ هذا يبدو مشابهًا لاستخدام أسماء الفئات في CSS، إلا أنّ طلبات الأنماط لها بعض المزايا. أولاً، يمكنك تعديل القيمة في CSS حسب الحاجة للحالات الزائفة باستخدام طلبات البحث عن الأنماط. وفي الإصدارات المستقبلية من عملية التنفيذ، ستتمكّن أيضًا من طلب نطاقات من القيم لتحديد النمط المُطبَّق، مثل style(60 <= --weather <= 70)، والنمط استنادًا إلى أزواج السمة والقيمة، مثل style(font-style: italic).

اطّلِع على مزيد من المعلومات عن استخدام طلبات الأنماط.

أداة الاختيار ‎:has()‎

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

• 105
• 105
• 121
• 15.4

المصدر

على مدار 20 عامًا تقريبًا، طلب المطوّرون "محدِّد العنصر الرئيسي" في CSS. أصبح هذا الإجراء ممكنًا الآن باستخدام أداة الاختيار :has() التي تم تضمينها في الإصدار 105 من Chrome. على سبيل المثال، سيؤدي استخدام .card:has(img.hero) إلى اختيار عناصر .card التي تحتوي على صورة رئيسية كعنصر فرعي.

لقطة شاشة للعرض التوضيحي للدالة ‎:has()

العرض التوضيحي المباشر لدالة :has()

عرض :has() لخدمة مقارنة الأسعار: بطاقة بدون صورة أو بصورة

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

‎:has() Screencast

عرض توضيحي للدالة :has()‎

فيديو توضيحي لخدمة مقارنة الأسعار :has(): تثبيت

مزيد من المعلومات حول أداة اختيار :has() في CSS

تعديل طلب الوسائط

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

• 113
• 113
• 102
• 17

المصدر

تمنحك طلب البحث عن الوسائط update طريقة لتكييف واجهة المستخدم مع معدّل تحديث الشاشة في الجهاز. يمكن أن تُبلغ الميزة عن قيمة fast أو slow أو none ذات صلة بإمكانات الأجهزة المختلفة.

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

تحديث Screencast

تعديل العرض التوضيحي

يمكنك محاكاة قيمة سرعة التحديث (من خلال اختيار خيار من خيارات الراديو) ومحاولة معرفة تأثيرها في البطة.

مزيد من المعلومات عن@media (تعديل)

طلب الوسائط البرمجي

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

• 120
• 120
• 113
• 17

المصدر

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

كيفية تفعيل JavaScript وإيقافه على صفحة للاختبار من خلال "أدوات مطوّري البرامج في Chrome"

تسجيل رقمي للشاشة يتضمن نصًا برمجيًا

عرض توضيحي لكتابة النصوص البرمجية

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

مزيد من المعلومات عن النص البرمجي

طلب الوسائط ذات الشفافية المنخفضة

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

• 118
• 118
• 
• x

المصدر

يمكن أن تتسبب الواجهات غير المعتمة في حدوث صداع أو صعوبة في الرؤية لبعض أنواع ضعف البصر. لهذا السبب، تتضمّن أنظمة التشغيل Windows وmacOS وiOS إعدادات مفضّلة للنظام يمكنها تقليل شفافية واجهة المستخدم أو إزالتها. يتوافق طلب البحث عن الوسائط هذا لـ prefers-reduced-transparency بشكل جيد مع طلبات البحث الأخرى عن الوسائط المفضّلة، ما يتيح لك الإبداع مع إمكانية التعديل أيضًا بما يناسب المستخدمين.

تسجيل شاشة بدرجة شفافية منخفضة

عرض توضيحي لميزة "خفض الشفافية"

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

مزيد من المعلومات حول@media (prefers-reduced-transparency)

التفاعل

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

عرض الانتقالات

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

• 111
• 111
• x
• 18

المصدر

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

تشكّل دالة document.startViewTranstion جوهر View Transitions API. نقْل دالة تعمل على تعديل DOM إلى الحالة الجديدة، وستتولى واجهة برمجة التطبيقات تنفيذ كل الإجراءات نيابةً عنك. ويتم ذلك من خلال التقاط لقطة ما قبل وبعد، ثم الانتقال بين الصورتَين. باستخدام CSS، يمكنك التحكّم في ما يتم تسجيله وتخصيص طريقة عرض اللقطات المتحركة هذه اختياريًا.

تسجيل رقمي للشاشة

VT Demo

عرض الإصدار التجريبي من ميزة "الانتقالات"

تم طرح واجهة برمجة التطبيقات View Transitions API لتطبيقات الصفحة الواحدة في الإصدار 111 من Chrome. اطّلِع على مزيد من المعلومات عن عمليات انتقال العرض.

دالة التخفيف الخطي

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

• 113
• 113
• 112
• 17.2

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

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

يتم تبسيط منحنى الارتداد الأصلي باللون الأزرق من خلال مجموعة من النقاط الرئيسية المعروضة باللون الأخضر. تستخدِم دالة linear() هذه النقاط وتتحقّق من التداخل بشكل خطي بينها.

تسجيل رقمي للشاشة يتضمّن انتقالات سلسة

عرض تجريبي للتأثير الخطي

العرض التوضيحي لخدمة مقارنة الأسعار linear()

اطّلِع على مزيد من المعلومات عن linear(). لإنشاء منحنيات linear()، استخدِم أداة إنشاء التحكّم السلس في السرعة.

نهاية التمرير

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

• 114
• 114
• 109
• x

المصدر

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

تسجيل رقمي للشاشة مزوّد بميزة التمرير

Scrollend Demo

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

اطّلِع على مزيد من المعلومات عن scrollend.

الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل

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

• 115
• 115
• 
• x

المصدر

إنّ الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل هي ميزة مثيرة للاهتمام تتوفّر في الإصدار 115 من Chrome. تتيح لك هذه العناصر استخدام صورة متحركة حالية من CSS أو صورة متحركة تم إنشاؤها باستخدام Web Animations API، وإقرانها بقيمة تمويه التمرير في شريط التمرير. أثناء التمرير للأعلى أو للأسفل أو لليمين أو لليسار في شريط التمرير الأفقي، سيتم تمرير الصورة المتحركة المرتبطة للأمام والخلف استجابةً مباشرةً.

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

تسجيل شاشة SDA

عرض توضيحي لـ SDA

عرض توضيحي للرسوم المتحرّكة المستندة إلى الانتقال في CSS: مخطط زمني للانتقال

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

فيديو توضيحي لميزة "الاستجابة السريعة للطوارئ"

عرض توضيحي مباشر لـ SDA

عرض توضيحي للرسوم المتحرّكة المستندة إلى الانتقال في CSS: عرض المخطط الزمني

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

للاطّلاع على مزيد من المعلومات عن الرسوم المتحرّكة المستندة إلى الانتقال إلى الأسفل أو للأعلى، يمكنك الاطّلاع على هذه المقالة التي تتضمّن كل التفاصيل أو الانتقال إلى scroll-driven-animations.style الذي يتضمّن العديد من العروض التوضيحية.

مرفق الجدول الزمني المؤجّل

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

• 116
• 116
• x
• x

المصدر

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

للسماح للعنصر المتحرّك بالعثور على مخطط زمني مُعنوَن للانتقال غير المرتبط بعنصر أصلي، استخدِم السمة timeline-scope على عنصر أصلي مشترَك. يتيح ذلك إرفاق scroll-timeline أو view-timeline المحدّدَين بهذا الاسم به، ما يمنحه نطاقًا أوسع. بعد تنفيذ ذلك، يمكن لأي حساب فرعي من هذا الحساب الرئيسي المشترَك استخدام المخطط الزمني بهذا الاسم.

بعد الإعلان عن timeline-scope في العنصر الرئيسي المشترَك، يمكن العثور على scroll-timeline المُعلَن عنه في شريط التمرير من خلال العنصر الذي يستخدمه animation-timeline

تسجيل رقمي للشاشة للعرض التوضيحي

عرض توضيحي مباشر

عرض توضيحي للرسوم المتحرّكة المستندة إلى الانتقال في CSS: إرفاق مخطط زمني مؤجّل

اطّلِع على مزيد من المعلومات عن timeline-scope.

صور متحركة منفصلة للعناصر

من الميزات الجديدة الأخرى في 2023 إمكانية إضافة صور متحركة منفصلة، مثل إضافة صور متحركة من display: none إلى display: none والعكس. اعتبارًا من الإصدار 116 من Chrome، يمكنك استخدام display وcontent-visibility في قواعد اللقطات الرئيسية. يمكنك أيضًا نقل أيّ موقع منفصل عند نقطة% 50 بدلاً من نقطة% 0. ويتم تحقيق ذلك باستخدام السمة transition-behavior مع الكلمة الرئيسية allow-discrete، أو في السمة transition كاختصار.

رسوم متحركة منفصلة التسجيل الرقمي للشاشة

رسوم متحركة منفصلة عرض توضيحي

اطّلِع على مزيد من المعلومات عن الانتقال إلى الرسوم المتحرّكة المنفصلة.

@starting-style

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

• 117
• 117
• 129
• 17.5

المصدر

تستند قاعدة CSS الخاصة بـ @starting-style إلى إمكانات الويب الجديدة لإنشاء تأثيرات متحركة من display: none وإليه. توفّر هذه القاعدة طريقة لمنح عنصر أسلوب "قبل الفتح" يمكن للمتصفّح البحث عنه قبل فتح العنصر على الصفحة. وهذا مفيد جدًا للحركات المرسومة عند الدخول، ولإضافة حركة إلى عناصر مثل النافذة المنبثقة أو مربّع الحوار. ويمكن أن يكون مفيدًا أيضًا في أي وقت تريد فيه إنشاء عنصر وتريد منحه إمكانية إضافة تأثيرات متحركة. خذ المثال التالي الذي يُنشئ تأثيرًا متحركًا لسمة popover (راجِع القسم التالي) في العرض وفي الطبقة العليا بسلاسة من خارج إطار العرض.

@starting-style Screencast

@starting-style Demo

اطّلِع على مزيد من المعلومات عن @starting-style والرسومات المتحرّكة الأخرى للعناصر.

المحتوى المركّب

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

• 117
• 117
• x
• x

المصدر

يمكن إضافة سمة CSS الجديدة overlay إلى الانتقال لتفعيل عناصر أنماط الطبقة العليا، مثل popover وdialog، لتحريكها خارج الطبقة العليا بسلاسة. إذا لم تُجري انتقالًا للعنصر المتراكب، سيعود العنصر على الفور إلى أن يكون مُقتطعًا ومُحوَّلًا ومُغطّى، ولن ترى عملية النقل تحدث. وبالمثل، تتيح overlay لعنصر ::backdrop الخروج بسلاسة عند إضافته إلى عنصر في الطبقة العليا.

التسجيل الرقمي للشاشة الذي يظهر فوق المحتوى

عرض توضيحي مباشر للإعلانات التي تظهر على سطح الفيديو

اطّلِع على مزيد من المعلومات عن الصورة التي تظهر على سطح الشاشة والصور المتحركة الأخرى للخروج.

المكوّنات

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

النافذة المنبثقة

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

• 114
• 114
• 125
• 17

المصدر

تساعدك واجهة برمجة التطبيقات Popover API في إنشاء عناصر تقع فوق بقية الصفحة. ويمكن أن تشمل هذه العناصر القوائم والاختيارات ونصائح التلميح. يمكنك إنشاء نافذة منبثقة بسيطة عن طريق إضافة السمة popover وid إلى العنصر المنبثق، وربط سمة id بزر تشغيل باستخدام popovertarget="my-popover". تتيح واجهة برمجة التطبيقات Popover API ما يلي:

• الترقية إلى الطبقة العليا: ستظهر النوافذ المنبثقة في طبقة منفصلة فوق بقية الصفحة، لذا لن يكون عليك تعديل مقياس z-index.
• وظيفة إطفاء الإضاءة سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاقها وإعادة التركيز.
• إدارة التركيز التلقائية: يؤدي فتح النافذة المنبثقة إلى إيقاف علامة التبويب التالية داخل النافذة المنبثقة.
• اختصارات لوحة المفاتيح السهلة الاستخدام: سيؤدي الضغط على مفتاح esc أو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز.
• عمليات ربط المكونات القابلة للوصول ربط عنصر النافذة المنبثقة بعامل تشغيل النافذة المنبثقة بشكل دلالي

تسجيل رقمي للشاشة في نافذة منبثقة

عرض توضيحي مباشر للنوافذ المنبثقة

القواعد الأفقية في أداة الاختيار

من التغييرات الصغيرة الأخرى التي تم إجراؤها على HTML في Chrome وSafari هذا العام هي إمكانية إضافة عناصر الخطوط الأفقية (علامات <hr>) إلى عناصر <select> للمساعدة في تقسيم المحتوى بشكل مرئي. في السابق، لم يكن من الممكن عرض علامة <hr> في عنصر اختيار. ولكن هذا العام، أصبح كل من Safari وChrome يتيحان هذه الميزة، ما يتيح فصل المحتوى بشكل أفضل ضمن عناصر <select>.

اختيار لقطة شاشة

اختيار "العرض التوضيحي المباشر"

مزيد من المعلومات عن استخدام hr في select

الفئات الزائفة:user-valid وinvalid

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

• 119
• 119
• 88
• 16.5

المصدر

إنّ :user-valid و:user-invalid هما فئتان ثابتتان في جميع المتصفّحات هذا العام، وتتصرفان بشكل مشابه للفئات الزائفة :valid و:invalid، ولكنّهما لا تتطابقان مع عنصر تحكّم في النموذج إلا بعد تفاعل المستخدم بشكل كبير مع الإدخال. سيتطابق عنصر التحكّم في النموذج المطلوب والمفرغ مع :invalid حتى إذا لم يبدأ المستخدِم التفاعل مع الصفحة. ولن يتطابق عنصر التحكّم نفسه مع :user-invalid إلى أن يغيّر المستخدم الإدخال ويتركه في حالة غير صالحة.

باستخدام هذه المحدّدات الجديدة، لم تعُد هناك حاجة إلى كتابة رمز برمجي يعتمد على الحالة لتتبُّع الإدخال الذي غيّره المستخدم.

‎:user-* Screencast

:user-* Live Demo

اطّلِع على مزيد من المعلومات عن استخدام عناصر المحاكاة user-* لتحقق صحة النموذج.

Accordion حصري

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

• 120
• 120
• 130
• 17.2

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

من الميزات الجديدة في الإصدار 120 من Chrome إتاحة السمة name في عناصر <details>. عند استخدام هذه السمة، تشكل عناصر <details> متعددة لها قيمة name نفسها مجموعة دلالية. يمكن فتح عنصر واحد في المجموعة كحد أقصى في المرة الواحدة: عند فتح أحد العناصر <details> من المجموعة، سيتم إغلاق العنصر المفتوح سابقًا تلقائيًا. يُعرف هذا النوع من القوائم باسم قائمة حصرية.

الإصدار التجريبي الحصري للجدول ال accordion

لا يلزم أن تكون عناصر <details> التي تشكّل جزءًا من ملف أرشيف أقسام طيّة حصري متسلسلة. ويمكن أن تكون مبعثرة في المستند.

الخاتمة

شهدت CSS عودة قوية في السنوات القليلة الماضية، لا سيما خلال عام 2023. إذا كنت مبتدئًا في CSS أو أردت فقط مراجعة الأساسيات، يمكنك الاطّلاع على الدورة التدريبية المجانية Learn CSS بالإضافة إلى الدورات التدريبية المجانية الأخرى المتوفّرة على web.dev.

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

فريق العلاقات المطوّرين لواجهة مستخدم Chrome

Una Kravets

Bramus

Adam Argyle