تاريخ الانتهاء من إعداد خدمة مقارنة الأسعار (CSS): 2023
الانتقال إلى المحتوى:
- التصميم سريع الاستجابة
- طلبات البحث عن الحاويات
- طلبات البحث عن الأنماط
- :مُحدِّد
- تعديل الاستعلام عن الوسائط
- طلب بحث عن الوسائط البرمجية
- طلب بحث عن وسائط الشفافية
ممتاز كان 2023 عامًا حافلاً بخدمة مقارنة الأسعار (CSS).
بدءًا من #Interop2023 إلى العديد من عمليات الوصول المقصودة الجديدة في CSS وواجهة المستخدم، ما أتاح للمطوّرين إمكانات كان يعتقد أنها مستحيلة على منصة الويب. والآن، يدعم كل متصفح حديث طلبات البحث المتعلقة بالحاويات والشبكة الفرعية وأداة الاختيار :has()
ومجموعة كبيرة من مساحات الألوان والدوال الجديدة. نوفّر في Chrome الصور المتحركة التي تعتمد على التمرير في CSS فقط، فضلاً عن الصور المتحركة بسلاسة بين طرق عرض الويب باستخدام تأثيرات الانتقال بين طرق العرض. فضلاً عن ذلك، هناك العديد من الأساسيات الجديدة التي وصلت إلى تجارب أفضل للمطوّرين، مثل تداخل CSS وأنماط النطاق.
لقد كان هذا العام الماضي. لهذا السبب، نودّ أن نتخلّص من هذا العام التاريخي للاحتفال بجهود مطوّري البرامج ومنتدى الويب الجهود الكبيرة التي بذلها مطوّرو البرامج ومنتدى الويب.
الأساس المعمارية
لنبدأ بالتحديثات التي طرأت على لغة CSS الأساسية وإمكاناتها. هذه هي الميزات التي تشكّل الأساس في طريقة كتابة الأنماط وتنظيمها، كما أنّها تضفي فائدة كبيرة على المطوّرين.
الدوال المثلثية
أتاح Chrome 111 الدوال المثلثية sin()
وcos()
وtan()
وasin()
وacos()
وatan()
وatan2()
، ما يجعلها متوفّرة على جميع المحرّكات الرئيسية. هذه الدوال مفيدة جدًا لأغراض الرسوم المتحركة والتخطيط. على سبيل المثال، أصبح وضع العناصر على دائرة حول مركز محدد أسهل بكثير.
اختيار ترتيب معقّد*
التوافق مع المتصفح
- 111
- 111
- 113
- 9
باستخدام أداة اختيار الفئة الزائفة :nth-child()
، يمكن اختيار العناصر في نموذج العناصر في المستند (DOM) حسب الفهرس. باستخدام البنية الدقيقة An+B
يمكنك التحكم بشكل جيد في العناصر التي تريد تحديدها.
تأخذ الصور الزائفة :nth-*()
في الاعتبار تلقائيًا جميع العناصر الفرعية. بدءًا من الإصدار 111 من Chrome، يمكنك تمرير قائمة أداة اختيار إلى :nth-child()
و:nth-last-child()
، إذا رغبت في ذلك. بهذه الطريقة، يمكنك فلترة قائمة الأطفال مسبقًا قبل أن ينفّذ An+B
المهمة المطلوبة.
في العرض التوضيحي التالي، لا يتم تطبيق منطق 3n+1
إلا على الدمى الصغيرة من خلال فلترتها مسبقًا باستخدام of .small
. استخدِم القوائم المنسدلة لتغيير أداة الاختيار المستخدَمة ديناميكيًا.
اطّلِع على مزيد من المعلومات عن الاختيارات معقّدة **.
المستوى
التوافق مع المتصفح
- 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
للحد من مدى وصول أدوات الاختيار". في هذه المقالة، ستتعرّف على أداة اختيار :scope
وكيفية التعامل مع الخصوصية والنطاقات التي لا يتم استهلالها وكيفية تأثُّر سلسلة الإجراءات @scope
.
الدمج
قبل الدمج، يجب الإعلان عن كل أداة اختيار بشكل صريح، بشكل منفصل عن بعضها البعض. ويؤدي هذا إلى التكرار وتجميع أوراق الأنماط وتجربة المؤلفين. أما الآن، فيمكن استخدام أدوات الاختيار مع قواعد الأنماط ذات الصلة المجمَّعة داخلها.
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
ويمكن أن يقلّل التداخل من حجم ورقة الأنماط، ويقلّل من أعباء أدوات الاختيار المتكرّرة، ويتيح تمركز أنماط المكوّنات. تم إصدار البنية في البداية مع قيود كانت تتطلّب استخدام &
في أماكن مختلفة، ولكن تمت إزالتها بعد ذلك من خلال تعديل البنية السهلة المُدمَجة.
مزيد من المعلومات عن الدمج.
الشبكة الفرعية
تتيح لك خدمة CSS subgrid
إنشاء شبكات أكثر تعقيدًا مع محاذاة أفضل بين التنسيقات الفرعية. تسمح لشبكة موجودة داخل شبكة أخرى باعتماد صفوف وأعمدة الشبكة الخارجية على أنها خاصة بها، باستخدام subgrid
كقيمة لصفوف الشبكة أو الأعمدة.
التسجيل الرقمي للشاشة الفرعية
عرض توضيحي مباشر لشبكة Subgrid
تعد Subgrid مفيدة بشكل خاص لمواءمة الأشقاء مع المحتوى الديناميكي لبعضهم البعض. يتيح هذا لمؤلفي الإعلانات وكاتبي تجربة المستخدم والمترجمين من محاولة إنشاء نسخة مشروع "تناسب" التخطيط. باستخدام الشبكة الفرعية، يمكن ضبط التخطيط ليلائم المحتوى.
يمكنك الاطّلاع على مزيد من المعلومات عن الاشتراك.
فن الطباعة
شهدت ميزة "أسلوب الخط على الويب" بعض التعديلات الرئيسية في 2023. إنّ ميزة text-wrap
هي التحسين التدريجي الرائع بشكلٍ خاص. تتيح هذه الخاصية تعديل تخطيط الطباعة، ويتم إنشاؤه في المتصفح بدون الحاجة إلى نصوص برمجية إضافية. وداعًا لأطوال الخطوط المحرجة ومرحبًا أسلوب الخط الذي يمكن التنبؤ به بشكل أكبر!
الحرف الأول من اسمك
بعد الوصول إلى الإصدار 110 من متصفِّح Chrome في بداية العام، تُعدّ السمة initial-letter
ميزة CSS صغيرة ولكنّها فعّالة تُحدّد نمطًا لموضع الأحرف الأولى من عبارة البحث. يمكنك وضع الأحرف إما بالحالة "مسقط الرأس" أو "مرتفع". تقبل السمة وسيطتَين: الأولى لمعرفة مدى عمق إفلات الحرف في الفقرة المقابلة، والثانية لمعرفة مقدار الحرف الذي يجب رفعه فوقه. يمكنك أيضًا الجمع بين الخيارين، كما هو الحال في العرض التوضيحي التالي.
لقطة شاشة من الحرف الأوليّ
عرض توضيحي للحرف الأولي
تعرَّف على المزيد من المعلومات عن الحرف الأولي.
التفاف النص: التوازن والجمال
بصفتك مطورًا، لا تعرف الحجم النهائي أو حجم الخط أو حتى لغة العنوان أو الفقرات. تتوفر في المتصفح جميع المتغيرات اللازمة للتعامل الفعال والجمالي مع التفاف النص. وبما أنّ المتصفّح يعرف جميع العوامل، مثل حجم الخط واللغة والمنطقة المخصّصة، فإنّه يجعله مرشحًا رائعًا للتعامل مع تنسيق النص المتقدّم والعالي الجودة.
هنا يأتي دور أسلوبين جديدين لإحاطة النص، أحدهما يسمى balance
والآخر pretty
. تهدف القيمة balance
إلى إنشاء جزء متناغم من النص، بينما يسعى pretty
إلى منع الوصول إلى الصفحات المعزولة وضمان استخدام واصلة سليمة. يتم تنفيذ هاتين المهمتين عادةً بشكل يدوي، ومن الرائع أن يتم توفير المهمة للمتصفح وأن يعمل مع أي لغة مترجمة.
تسجيل رقمي للشاشة أثناء التفاف النص
عرض توضيحي مباشر التفاف النص
اطّلِع على مزيد من المعلومات عن ميزة التفاف النص: التوازن.
اللون
كان 2023 هو عام الألوان لمنصة الويب. بفضل مساحات الألوان والدوال الجديدة التي تتيح استخدام المظاهر الديناميكية للألوان، يمكنك إنشاء المظاهر الرائعة بألوان زاهية التي يستحقها المستخدمون ويمكن تخصيصها أيضًا.
مساحات الألوان العالية الدقة (مستوى اللون 4)
من الأجهزة إلى البرامج، وCSS إلى الأضواء الوامضة؛ يتطلب الأمر الكثير من العمل لأجهزة الكمبيوتر الخاصة بنا لمحاولة تمثيل الألوان الجيدة كما ترى أعيننا البشرية. في عام 2023، لدينا ألوان جديدة ومزيد من الألوان ومساحات ألوان جديدة ودوال ألوان وإمكانات جديدة.
يمكن الآن استخدام لغة CSS والألوان:
- التأكّد مما إذا كانت أجهزة شاشة المستخدم قادرة على استخدام ألوان نطاق عالي الديناميكية (HDR) بنطاق واسع
- تحقق مما إذا كان متصفح المستخدم يفهم بنية الألوان مثل Oklch أو Display P3.
- حدِّد ألوان النطاق العالي الديناميكية في Oklab وOklch وHWB وDisplay P3 وRec.2020 وXYZ وغيرها.
- إنشاء تدرجات باستخدام ألوان النطاق العالي الديناميكية
- دمج التدرجات في مساحات الألوان البديلة
- يمكنك مزج الألوان مع "color-mix()
".
- إنشاء متغيرات الألوان باستخدام بنية اللون النسبية.
تسجيل رقمي للشاشة ذات اللون 4
عرض توضيحي للألوان 4
اطّلِع على المزيد من المعلومات عن اللون 4 ومساحات الألوان.
دالة مزج الألوان
يعدّ مزج الألوان مهمة كلاسيكية ويمكن 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()
المكونات التي تتميّز بتصميمها السريع الاستجابة والمنطقي استنادًا إلى حجم العنصر الرئيسي، بالإضافة إلى توفّر أي عنصر من عناصره الثانوية أو حالته. هذا يعني أنه يمكنك أخيرًا فصل التخطيط على مستوى الصفحة عن التخطيط على مستوى المكون، وكتابة المنطق مرة واحدة لاستخدام المكون الخاص بك في كل مكان!
طلبات البحث عن حاوية الحجم
بدلاً من استخدام معلومات الحجم العامة لإطار العرض لتطبيق أنماط CSS، تتيح طلبات البحث في الحاويات إمكانية طلب البحث عن عنصر رئيسي داخل الصفحة. هذا يعني أنه يمكن تصميم المكونات بطريقة ديناميكية عبر تخطيطات متعددة وفي طرق عرض متعددة. أصبحت طلبات بحث الحاوية عن الحجم مستقرة في جميع المتصفحات الحديثة في عيد الحب من هذا العام (14 شباط/ فبراير).
لاستخدام هذه الميزة، عليك أولاً إعداد الاحتواء على العنصر الذي تبحث عنه، وبعد ذلك، كما هو الحال مع الاستعلام عن الوسائط، استخدِم @container
مع مَعلمات الحجم لتطبيق الأنماط. وبالإضافة إلى طلبات البحث عن الحاويات، يمكنك الحصول على أحجام طلبات البحث في الحاويات. في العرض التوضيحي التالي، تمّ استخدام حجم طلب بحث الحاوية cqi
(يمثّل حجم الحاوية المضمّنة) لتحديد حجم عنوان البطاقة.
@Contain Screencast
عرض توضيحي للحاويات @container
اطّلِع على مزيد من المعلومات عن استخدام طلبات البحث عن الحاويات.
طلبات بحث حاويات الأنماط
تم تنفيذ طلبات البحث المرتبطة بالأنماط مع تنفيذ جزئي في Chrome 111. باستخدام طلبات البحث عن الأنماط حاليًا، يمكنك الاستعلام عن قيمة السمات المخصّصة في عنصر رئيسي عند استخدام @container style()
. على سبيل المثال، يمكنك الاستعلام عن توفّر قيمة للخاصية المخصّصة، أو ضبطها على قيمة معيّنة، مثل @container style(--rain: true)
.
لقطة شاشة لطلب البحث عن النمط
عرض توضيحي لطلب البحث عن النمط
على الرغم من أن هذا يبدو مشابهًا لاستخدام أسماء الفئات في CSS، إلا أن استعلامات الأنماط لها بعض المزايا. الطريقة الأولى هي أنه باستخدام استعلامات النمط، يمكنك تحديث القيمة في CSS حسب الحاجة للحالات الزائفة. وفي الإصدارات المستقبلية من عملية التنفيذ، ستتمكّن من الاستعلام عن نطاقات القيم لتحديد النمط المطبَّق، مثل style(60 <= --weather <= 70)
، والنمط استنادًا إلى أزواج الخاصية/القيمة مثل style(font-style: italic)
.
اطّلِع على مزيد من المعلومات عن استخدام طلبات البحث المتعلقة بالنمط.
:has() أداة الاختيار
على مدار 20 عامًا تقريبًا، طلب المطوّرون "أداة اختيار رئيسية" في CSS. أصبحت هذه العملية ممكنة الآن باستخدام أداة الاختيار :has()
التي تم شحنها في الإصدار 105 من Chrome. على سبيل المثال، سيؤدي استخدام .card:has(img.hero)
إلى اختيار عناصر .card
التي تحتوي على صورة جزء رئيسي في مرحلة الطفولة.
لقطة شاشة للعرض التوضيحي لـ :has()
:has() عرض توضيحي مباشر
بما أنّ :has()
تقبل قائمة محدّدات نسبية كوسيطة لها، يمكنك اختيار أكثر من العنصر الرئيسي. باستخدام العديد من مُدمجات CSS، من الممكن ليس فقط الانتقال إلى أعلى شجرة DOM، ولكن أيضًا إجراء تحديدات جانبية. على سبيل المثال، سيختار li:has(+ li:hover)
العنصر <li>
الذي يسبق عنصر <li>
الذي تم تمرير مؤشر الماوس فوقه حاليًا.
:has() Screencast
عرض توضيحي لـ :has()
مزيد من المعلومات عن أداة اختيار :has()
لخدمة مقارنة الأسعار
تعديل الاستعلام عن الوسائط
يتيح لك الاستعلام عن الوسائط update
طريقة لتعديل واجهة المستخدم مع معدّل إعادة تحميل الجهاز. يمكن أن تُبلِغ هذه الميزة عن قيمة fast
أو slow
أو none
ترتبط بإمكانيات الأجهزة المختلفة.
من المرجح أن يكون لدى معظم الأجهزة التي تصمم من أجلها معدل تحديث سريع. ويشمل ذلك أجهزة الكمبيوتر المكتبي ومعظم الأجهزة الجوّالة، وقد يكون معدّل التحديث بطيء لأجهزة القراءة الإلكترونية والأجهزة، مثل أنظمة الدفع المنخفضة الطاقة. في حال معرفة أنّ الجهاز لا يمكنه معالجة الصور المتحركة أو التحديثات المتكررة، يمكنك توفير استهلاك البطارية أو تحديثات العرض الخاطئة.
تحديث Screencast
تحديث الإصدار التجريبي
يمكنك الاطّلاع على مزيد من المعلومات عن @media (update).
طلب بحث عن الوسائط البرمجية
يمكن استخدام استعلام وسائط البرمجة النصية للتحقق مما إذا كانت لغة JavaScript متوفرة أم لا. هذا جيد جدًا للتحسين التدريجي. قبل هذا الاستعلام عن الوسائط، كانت إحدى الاستراتيجيات لرصد ما إذا كانت لغة JavaScript متاحة من خلال وضع فئة nojs
في ملف HTML وإزالتها باستخدام JavaScript. يمكن إزالة هذه النصوص البرمجية نظرًا لاحتواء CSS الآن على طريقة لاكتشاف JavaScript وتعديلها وفقًا لذلك.
تعرَّف على كيفية تفعيل JavaScript وإيقافها على صفحة للاختبار من خلال "أدوات مطوري البرامج في Chrome" من هنا.
التسجيل الرقمي للشاشة أثناء النص البرمجي
عرض توضيحي للنصوص البرمجية
بالنظر إلى تبديل مظهر على موقع ويب، يمكن أن يساعد استعلام وسائط البرمجة النصية في جعل التبديل يعمل وفقًا لتفضيلات النظام نظرًا لعدم توفر JavaScript. أو يمكنك استخدام مكوِّن مفتاح تحكّم، فإذا كانت لغة JavaScript متاحة، يمكن تمرير مفتاح التبديل بإيماءة بدلاً من تفعيل أو إيقاف. الكثير من الفرص الرائعة لترقية تجربة المستخدم إذا كانت البرمجة النصية متاحة مع توفير تجربة أساسية مفيدة في حال إيقاف البرمجة النصية.
تعرَّف على المزيد من المعلومات عن النص البرمجي.
طلب بحث عن الوسائط بشفافية مخفّضة
يمكن أن تسبب الواجهات غير الباهتة صداعًا أو تؤدي إلى صعوبة بصرية لأنواع مختلفة من قصور الرؤية. ولهذا السبب، لدى Windows وmacOS وiOS إعدادات مفضّلة للنظام يمكنها تقليل الشفافية أو إزالتها من واجهة المستخدم. يتوافق طلب البحث عن الوسائط هذا الذي يخصّ prefers-reduced-transparency
بشكل جيد مع الطلبات الأخرى المتعلّقة بالوسائط المفضّلة، ما يتيح لك أن تكون مبدعًا في الوقت نفسه مع تعديل المستخدمين.
التسجيل الرقمي للشاشة بالشفافية المنخفضة
عرض توضيحي للشفافية المنخفضة
في بعض الحالات، يمكنك توفير تنسيق بديل لا يحتوي على محتوى متراكب على محتوى آخر. في حالات أخرى، يمكن ضبط مدى تعتيم اللون ليكون معتمًا أو معتمًا تقريبًا. تحتوي منشور المدونة التالي على عروض توضيحية أكثر إلهامًا تتكيف مع ما يفضله المستخدم، وامنحها نظرة إذا كنت مهتمًا بمعرفة الأوقات التي يكون فيها الاستعلام عن الوسائط هذا مفيدًا.
يمكنك الاطّلاع على مزيد من المعلومات حول @media (prefers-reduced-transparency).
التفاعل
إنّ التفاعل هو حجر الزاوية للتجارب الرقمية. تساعد المستخدمين في الحصول على ملاحظات حول ما نقروا عليه ومكان تواجدهم في مساحة افتراضية. هذا العام، كانت هناك العديد من الميزات المشوّقة التي ساهمت في تسهيل إنشاء التفاعلات وتنفيذها، ما يوفّر رحلات سلسة للمستخدمين وتجربة ويب أكثر دقة.
عرض عمليات النقل
تؤثر انتقالات المشاهدة بشكل كبير في تجربة مستخدم الصفحة. باستخدام واجهة برمجة التطبيقات 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()
، يمكن تقريب هذه التخفيفات من خلال تبسيطها إلى سلسلة من النقاط، ثم إدخال الاستكمال الخطي بين هذه النقاط.
التسجيل الرقمي للشاشة للتخفيف الخطي
عرض تجريبي للتخفيف الخطي
اطّلِع على مزيد من المعلومات حول linear()
. ولإنشاء منحنيات linear()
، استخدِم أداة إنشاء التخفيف الخطي.
نهاية التمرير
تتضمّن العديد من الواجهات تفاعلات التمرير، وفي بعض الأحيان تحتاج الواجهة إلى مزامنة المعلومات ذات الصلة بموضع التمرير الحالي أو استرجاع البيانات استنادًا إلى الحالة الحالية. قبل حدث scrollend
، كان عليك استخدام طريقة مهلة غير دقيقة يمكن أن تنشط عندما يكون إصبع المستخدم ثابتًا على الشاشة. في حدث "scrollend
"، يتوفّر لديك حدث تمرير على الشاشة في وقت مناسب لتحديد ما إذا كان المستخدم لا يزال ينفّذ إيماءة في منتصف الشاشة أم لا.
التسجيل الرقمي للشاشة في نهاية الشاشة
عرض توضيحي لالتمرير
وكان ذلك مهمًا للمتصفِّح نظرًا لأن JavaScript لا يمكنه تعقب وجود الأصابع على الشاشة أثناء التمرير، فالمعلومات تكون غير متاحة. يمكن الآن حذف مقاطع رمز محاولة نهاية التمرير غير الدقيقة واستبدالها بحدث عالي الدقة يملكه متصفّح.
مزيد من المعلومات حول ميزة التمرير
الصور المتحركة التي تعتمد على الانتقال
تُعد الرسوم المتحركة التي تعتمد على التمرير ميزة شيّقة متوفرة في Chrome 115. وهي تتيح لك استخدام صورة متحرّكة CSS أو صورة متحركة تم إنشاؤها باستخدام Web Animations API، مع إقرانها بإزاحة التمرير في شريط التمرير. أثناء التمرير للأعلى وللأسفل أو لليسار واليمين في شريط أفقي، يتم تحريك الصورة المتحركة المرتبطة للأمام والخلف كاستجابة مباشرة.
باستخدام ScrollTimeline، يمكنك تتبُّع مستوى التقدّم بشكل عام في استخدام شريط التمرير، كما هو موضّح في العرض التوضيحي التالي. أثناء الانتقال إلى نهاية الصفحة، يكشف النص عن نفسه حرفًا تلو الآخر.
التسجيل الرقمي للشاشة في SDA
عرض توضيحي لـ SDA
باستخدام ViewTimeline، يمكنك تتبع عنصر أثناء عبوره منفذ التمرير. يعمل هذا بشكل مشابه للطريقة التي يتتبّع بها IntersectionObserver أحد العناصر. في العرض التوضيحي التالي، تكشف كل صورة عن نفسها من لحظة دخولها إلى منفذ التمرير حتى تكون في المنتصف.
التسجيل الرقمي للشاشة التجريبي من SDA
عرض توضيحي مباشر لـ SDA
نظرًا لأن الصور المتحركة التي تعتمد على التمرير تعمل مع الصور المتحركة في CSS وWeb Animations API، يمكنك الاستفادة من جميع المزايا التي توفرها واجهات برمجة التطبيقات هذه. ويشمل ذلك إمكانية تشغيل هذه الرسوم المتحركة في سلسلة التعليمات الرئيسية. يمكنك الآن الحصول على رسوم متحركة متّسقة ومتحركة بالتمرير وخارج سلسلة التعليمات الرئيسية باستخدام بضعة أسطر من الرموز الإضافية. ما الذي لا يعجبك؟
لمعرفة المزيد حول الرسوم المتحركة التي تعتمد على التمرير راجع هذه المقالة التي تحتوي على جميع التفاصيل أو انتقِل إلى Scroll- الإشعارات-animations.style التي تتضمّن العديد من العروض التوضيحية.
مرفق بمخطط زمني مؤجل
عند تطبيق رسم متحرك يستند إلى التمرير عبر CSS، فإن آلية البحث للعثور على أداة التمرير المتحكّم تسير دائمًا صعودًا على شجرة DOM، ما يجعلها تقتصر على الكيانات الأصلية للتمرير فقط. على الرغم من ذلك، في كثير من الأحيان، فإن العنصر الذي يحتاج إلى رسوم متحركة ليس عنصرًا ثانويًا في شريط التمرير ولكنه عنصر موجود في شجرة فرعية مختلفة تمامًا.
للسماح للعنصر المتحرّك بالعثور على مخطط زمني للتمرير لجهة غير تابعة لجهة خارجية، استخدِم السمة timeline-scope
في عنصر رئيسي مشترك. يتيح هذا الإجراء إرفاق scroll-timeline
أو view-timeline
المحدّدة بهذا الاسم، ما يمنحها نطاقًا أوسع. بعد تفعيل ذلك، يمكن لأي طفل من أحد الوالدَين المشتركَين استخدام المخطط الزمني باستخدام هذا الاسم.
تسجيل رقمي للشاشة
عرض توضيحي مباشر
اطّلِع على مزيد من المعلومات حول timeline-scope
.
الصور المتحركة للخصائص المنفصلة
ميزة جديدة أخرى متاحة في عام 2023 هي إمكانية إنشاء صور متحرّكة منفصلة، مثل الصور المتحركة من "display: none
" وإليها. بدءًا من الإصدار 116 من Chrome، يمكنك استخدام display
وcontent-visibility
في قواعد الإطارات الرئيسية. يمكنك أيضًا انتقال أي عقار منفصل عند نقطة 50٪ بدلاً من نقطة 0٪. ويمكن تحقيق ذلك من خلال السمة transition-behavior
باستخدام الكلمة الرئيسية allow-discrete
أو في السمة transition
كاختصار.
رسوم متحركة منفصلة. التسجيل الرقمي للشاشة
رسوم متحركة منفصلة. تجريبي
@starting-style
تعتمد قاعدة @starting-style
في CSS على إمكانيات جديدة على الويب تتيح لك إنشاء تأثيرات حركية من وإلى display: none
. توفر هذه القاعدة طريقة لمنح عنصر نمط "قبل الفتح" الذي يمكن للمتصفح البحث عنه قبل فتح العنصر على الصفحة. ويكون هذا مفيدًا جدًا في الرسوم المتحركة للإدخال، ولالرسوم المتحركة في عناصر مثل النافذة المنبثقة أو مربع الحوار. يمكن أن يكون مفيدًا أيضًا في أي وقت تقوم فيه بإنشاء عنصر وتريد منحه القدرة على الحركة. إليك المثال التالي الذي يحرّك سمة popover
(راجِع القسم التالي) ليتم عرضه وفي الطبقة العلوية بسلاسة من خارج إطار العرض.
@starting-style Screencast
عرض توضيحي لـ @starting-style
يمكنك الاطّلاع على مزيد من المعلومات حول @starting-style وغير ذلك من الصور المتحركة للإدخال.
محتوى مركّب
يمكن إضافة خاصية CSS overlay
الجديدة إلى طبقة الانتقال لتفعيل العناصر ذات أنماط الطبقة العليا، مثل popover
وdialog
، لتحريك الطبقة العلوية بسلاسة. إذا لم تنقل العنصر المركّب، سيعود العنصر فورًا ليتم اقتصاصه وتحويله وحجبه، ولن تلاحظ حدوث الانتقال. وبالمثل، تتيح السمة overlay
لـ ::backdrop
إمكانية الحركة بسلاسة عند إضافتها إلى عنصر من الطبقة العليا.
تسجيل رقمي للشاشة
عرض توضيحي على سطح الصفحة
تعرّف على المزيد من المعلومات حول التراكب والرسوم المتحركة الأخرى للخروج.
المكوّنات
كان 2023 عامًا حافلاً بالجمع بين مكوّنات النمط ومكوّن HTML، حيث تم إجراء popover
وتمت بذل الكثير من الجهد بشأن تحديد موضع الإرساء ومستقبل القوائم المنسدلة للتصميم. تسهّل هذه المكونات إنشاء أنماط شائعة لواجهة المستخدم بدون الحاجة إلى الاعتماد على مكتبات إضافية أو إنشاء أنظمة إدارة الحالة الخاصة بك من الألف إلى الياء في كل مرة.
نافذة منبثقة
تساعدك Popover API في إنشاء عناصر تظهر فوق باقي الصفحة. يمكن أن يشمل ذلك القوائم والاختيار وتلميحات التلميحات. يمكنك إنشاء نافذة منبثقة بسيطة عن طريق إضافة السمة popover
والسمة id
إلى العنصر الذي ينبثق، وربط السمة id
بزر الاستدعاء باستخدام popovertarget="my-popover"
. تتيح واجهة برمجة التطبيقات Popover API ما يلي:
- عرض الترويج في الطبقة العليا: ستظهر النوافذ المنبثقة على طبقة منفصلة فوق بقية الصفحة، بحيث لا تحتاج إلى التلاعب بالفهرس z.
- وظيفة الإطفاء الخفيف: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاق النافذة المنبثقة وإعادة التركيز.
- إدارة التركيز التلقائية: يؤدي فتح النافذة المنبثقة إلى توقف علامة التبويب التالية داخل النافذة المنبثقة.
- روابط لوحة المفاتيح سهلة الاستخدام سيؤدي الضغط على مفتاح
esc
أو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز. - عمليات ربط المكوّنات التي يسهل الوصول إليها: ربط عنصر منبثق بمشغل نافذة منبثقة بشكل دلالي.
تسجيل رقمي للشاشة المنبثقة
عرض توضيحي مباشر في نافذة منبثقة
القواعد الأفقية في الإعدادات المحدَّدة
هناك تغيير بسيط آخر في ترميز HTML تم إطلاقه في Chrome وSafari هذا العام، وهو إمكانية إضافة عناصر القاعدة الأفقية (علامات <hr>
) إلى عناصر <select>
للمساعدة في تقسيم المحتوى مرئيًا. في السابق، لم يكن يتم عرض علامة <hr>
في علامة اختيار. وفي هذا العام، يتيح كلّ من Safari وChrome استخدام هذه الميزة، ما يتيح فصل المحتوى بشكل أفضل ضمن عناصر <select>
.
اختيار لقطة شاشة
اختيار عرض توضيحي مباشر
مزيد من المعلومات حول استخدام استخدام الساعات في الإعداد المحدَّد
:فئات المستخدمين الزائفة الصالحة وغير الصالحة
يعمل كل من :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،