تاريخ الانتهاء من إعداد خدمة مقارنة الأسعار (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

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

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: 146.
  • 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()

يتيح لك Demo اختيار لونَين باستخدام أداة اختيار الألوان ومساحة الألوان ومقدار اللون الذي يجب أن يكون بارزًا في المزيج.

يمكنك التفكير في 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: 151.
  • 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، يمكن الانتقال إلى أعلى شجرة نموذج العناصر في المستند، بالإضافة إلى إجراء عمليات اختيار جانبية. على سبيل المثال، سيؤدي li:has(+ li:hover) إلى تحديد العنصر <li> الذي يسبق العنصر <li> الذي يتم التمرير فوقه حاليًا.

‫:has() Screencast

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

عرض توضيحي لخدمة مقارنة الأسعار (CSS) :has(): 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"

إنشاء تسجيل رقمي للشاشة باستخدام البرمجة النصية

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

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

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

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

Browser Support

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

Source

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

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

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

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

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

التفاعل

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

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

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

VT Screencast

VT Demo

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

تم إطلاق واجهة برمجة التطبيقات View Transitions لتطبيقات الصفحة الواحدة في الإصدار 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: 26.2.

Source

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

Scrollend Screencast

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

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

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

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

Browser Support

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

Source

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

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

SDA Screencast

عرض توضيحي للإعلانات الديناميكية على شبكة البحث

عرض توضيحي للصور المتحركة المستندة إلى الانتقال في 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 في CSS إلى عملية الانتقال لتفعيل العناصر التي تتضمّن أنماط الطبقة العلوية، مثل 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 أو أردت فقط تذكيرك بالأساسيات، يمكنك الاطّلاع على دورة Learn CSS المجانية بالإضافة إلى الدورات التدريبية المجانية الأخرى المتوفرة على web.dev.

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

⇾ فريق Chrome UI DevRel،

Una Kravets
Bramus
Adam Argyle