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

عنوان CSS Wrapped

‫CSS Wrapped: 2023

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

رائع! كان عام 2023 عامًا حافلاً بالإنجازات في CSS.

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

يا له من عام! لذا، نودّ أن نختتم هذا العام المميّز بالاحتفال بجميع الجهود التي بذلها مطوّرو المتصفّحات ومنتدى الويب والتي أتاحت تحقيق هذا الإنجاز.

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

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

عرض توضيحي للدوال المثلثية

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

اختيار nth-* المعقّد

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

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

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

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

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

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

المستوى

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

أضاف الإصدار 118 من Chrome إمكانية استخدام @scope، وهي قاعدة at تتيح لك تحديد نطاق مطابقة المحدّدات لشجرة فرعية معيّنة من المستند. باستخدام التنسيق المحدد النطاق، يمكنك تحديد العناصر التي تريدها بدقة بدون الحاجة إلى كتابة أدوات اختيار مفرطة التحديد أو ربطها بإحكام ببنية نموذج المستند (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

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

العرض التوضيحي لخدمة @scope CSS

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

التداخل

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

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

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 */
}

دمج Screencast

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

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

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

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

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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

Subgrid Screencast

Subgrid Live Demo

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

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

مزيد من المعلومات حول الشبكة الفرعية

فن الطباعة

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

Initial-letter

Browser Support

  • Chrome: 110.
  • Edge: 110.
  • Firefox: not supported.
  • Safari: 9.

Source

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

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

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

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

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

مزيد من المعلومات عن initial-letter

text-wrap: balance and pretty

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

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

Text-wrap Screencast

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

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

مزيد من المعلومات حول text-wrap: balance

Color

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

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

Color 4 Screencast

Color 4 Demo

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Source

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

‫Screencast حول الدالة color-mix()

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

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

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

مزيد من المعلومات عن color-mix()‎

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

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

‫Screencast في خدمات الاتصالات التفاعلية (RCS)

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

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

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

مزيد من المعلومات حول بنية الألوان النسبية

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

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

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

‫@container Screencast

‫@container Demo

مزيد من المعلومات حول استخدام طلبات البحث في الحاويات

تنسيق طلبات الحاوية

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

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

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

لقطة شاشة للعرض التوضيحي لبطاقات الطقس التي تستخدم طلبات البحث في حاويات الأنماط

عرض توضيحي لطلب بحث حسب الأسلوب

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

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

مزيد من المعلومات عن استخدام طلبات البحث المتعلقة بالأسلوب

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

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

لقطة شاشة مرجعية للعرض التوضيحي الخاص بالدالة ‎ :has()‎

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

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

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

‫:has() Screencast

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

العرض التوضيحي :has() لخدمة CSS: Dock

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

تعديل طلب البحث عن الوسائط

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

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

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

تحديث تطبيق Screencast

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

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

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

كتابة نص برمجي لطلب وسائط

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 113.
  • Safari: 17.

Source

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

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

كتابة نص برمجي لتطبيق Screencast

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

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

مزيد من المعلومات عن النص

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

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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

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

Reduced Transparency Demo

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

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

التفاعل

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

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

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

VT Screencast

VT Demo

عرض توضيحي للانتقالات المرئية

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

دالة التباطؤ والتسارع الخطي

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

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

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

رسم بياني لمنحنى تباطؤ الارتداد مع إضافة عدة نقاط إليه
يتم تبسيط منحنى الارتداد الأصلي باللون الأزرق من خلال مجموعة من النقاط الرئيسية المعروضة باللون الأخضر. تستخدم الدالة linear() هذه النقاط وتجري استيفاءً خطيًا بينها.

Linear-easing Screencast

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

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

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

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

Scrollend Screencast

Scrollend Demo

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

مزيد من المعلومات عن scrollend

الصور المتحركة المستندة إلى التمرير

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

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

‫SDA Screencast

SDA Demo

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

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

SDA Demo Screencast

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

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

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

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

مرفق المخطّط الزمني المؤجّل

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: not supported.
  • Safari: 26.

Source

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

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

تصور لشجرة فرعية من نموذج المستند (DOM) مع نطاق المخطط الزمني المستخدَم في عنصر رئيسي مشترك
عند تعريف timeline-scope في العنصر الرئيسي المشترَك، يمكن العثور على scroll-timeline المعرَّف في أداة التمرير من خلال العنصر الذي يستخدمه كـ animation-timeline

عرض توضيحي باستخدام تطبيق Screencast

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

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

مزيد من المعلومات عن timeline-scope

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

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

Discrete Anim. التسجيل الرقمي للشاشة

Discrete Anim. عرض توضيحي

مزيد من المعلومات حول الانتقال بين الرسوم المتحركة المنفصلة

@starting-style

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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

‫@starting-style Screencast

@starting-style Demo

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

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

تراكب تطبيق Screencast

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

مزيد من المعلومات حول التراكب وغيرها من الرسوم المتحركة للخروج

المكوّنات

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

Popover

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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

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

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

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

قواعد أفقية في عنصر select

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

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

لقطة شاشة لعنصر hr في أداة الاختيار مع مظهر فاتح ومظهر داكن في Chrome

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

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

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

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Source

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

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

:user-* Screencast

:user-* عرض توضيحي مباشر

مزيد من المعلومات عن استخدام عناصر زائفة للتحقّق من صحة النموذج user-*

الأكورديون الحصري

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

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

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

عرض توضيحي حصري للأكورديون

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

الخاتمة

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

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

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

Una Kravets
Bramus
Adam Argyle