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

رأس ملف CSS

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

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

ممتاز كان 2023 عامًا حافلاً بخدمة مقارنة الأسعار (CSS).

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

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

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

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

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

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

  • 111
  • 111
  • 108
  • 15.4

المصدر

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

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

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

اختيار ترتيب معقّد*

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

  • 111
  • 111
  • 113
  • 9

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

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

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

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

اطّلِع على مزيد من المعلومات عن الاختيارات معقّدة **.

المستوى

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

  • 118
  • 118
  • x
  • 17.4

أضاف Chrome 118 الدعم لـ @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

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

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

يمكنك الاطّلاع على مزيد من المعلومات عن @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 */
}

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

عرض توضيحي مباشر لدمج Nest

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

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

مزيد من المعلومات عن الدمج.

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

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

  • 117
  • 117
  • 71
  • 16

المصدر

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

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

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

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

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

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

فن الطباعة

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

الحرف الأول من اسمك

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

  • 110
  • 110
  • x
  • 9

المصدر

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

لقطة شاشة من الحرف الأوليّ

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

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

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

تعرَّف على المزيد من المعلومات عن الحرف الأولي.

التفاف النص: التوازن والجمال

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

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

تسجيل رقمي للشاشة أثناء التفاف النص

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

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

اطّلِع على مزيد من المعلومات عن ميزة التفاف النص: التوازن.

اللون

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

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

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

  • 111
  • 111
  • 113
  • 15

المصدر

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

  • 111
  • 111
  • 113
  • 15

المصدر

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

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

تسجيل رقمي للشاشة ذات اللون 4

عرض توضيحي للألوان 4

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

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

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

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

  • 111
  • 111
  • 113
  • 16.2

المصدر

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

color-mix() Screencast

عرض توضيحي لـ 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 (يمثّل حجم الحاوية المضمّنة) لتحديد حجم عنوان البطاقة.

@Contain Screencast

عرض توضيحي للحاويات @container

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

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

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

  • 111
  • 111
  • x
  • x

المصدر

تم تنفيذ طلبات البحث المرتبطة بالأنماط مع تنفيذ جزئي في Chrome 111. باستخدام طلبات البحث عن الأنماط حاليًا، يمكنك الاستعلام عن قيمة السمات المخصّصة في عنصر رئيسي عند استخدام @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() عرض توضيحي مباشر

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

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

:has() Screencast

عرض توضيحي لـ :has()

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

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

تعديل الاستعلام عن الوسائط

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

  • 113
  • 113
  • 102
  • 17

المصدر

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

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

تحديث Screencast

تحديث الإصدار التجريبي

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

يمكنك الاطّلاع على مزيد من المعلومات عن @media (update).

طلب بحث عن الوسائط البرمجية

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

  • 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
  • x

المصدر

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

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

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

إصدار تجريبي من VT

الاطّلاع على العرض التوضيحي لعمليات النقل

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

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

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

  • 113
  • 113
  • 112
  • 17.2

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

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

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

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

عرض تجريبي للتخفيف الخطي

الإصدار التجريبي من خدمة مقارنة الأسعار (CSS) linear()
.

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

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

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

  • 114
  • 114
  • 109
  • x

المصدر

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

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

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

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

مزيد من المعلومات حول ميزة التمرير

الصور المتحركة التي تعتمد على الانتقال

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

  • 115
  • 115
  • x

المصدر

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

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

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

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

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

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

التسجيل الرقمي للشاشة التجريبي من SDA

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

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

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

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

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

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

  • 116
  • 116
  • x
  • x

المصدر

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

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

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

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

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

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

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

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

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

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

رسوم متحركة منفصلة. تجريبي

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

@starting-style

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

  • 117
  • 117
  • x
  • x

المصدر

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

@starting-style Screencast

عرض توضيحي لـ @starting-style

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

محتوى مركّب

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

  • 117
  • 117
  • x
  • x

المصدر

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

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

عرض توضيحي على سطح الصفحة

تعرّف على المزيد من المعلومات حول التراكب والرسوم المتحركة الأخرى للخروج.

المكوّنات

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

نافذة منبثقة

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

  • 114
  • 114
  • 17

المصدر

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

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

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

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

القواعد الأفقية في الإعدادات المحدَّدة

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

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

لقطة شاشة للساعة المحدَّدة مع مظهر فاتح وداكن في Chrome

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

مزيد من المعلومات حول استخدام استخدام الساعات في الإعداد المحدَّد

:فئات المستخدمين الزائفة الصالحة وغير الصالحة

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

  • 119
  • 119
  • 88
  • 16.5

المصدر

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

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

:user-* Screencast

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

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

قائمة أكورديون حصرية

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

  • 120
  • 120
  • x
  • 17.2

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

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

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

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

الخاتمة

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

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

⇾ فريق مطوّر برامج واجهة مستخدم Chrome،

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub