ملخص CSS: 2023
الانتقال إلى المحتوى:
- التصميم سريع الاستجابة
- طلبات البحث في الحاوية
- طلبات البحث حول التصاميم
- :has أداة اختيار
- تعديل الاستعلام عن الوسائط
- برمجة الاستعلام عن الوسائط
- طلب بحث عن وسائط الشفافية
ممتاز. كان 2023 عامًا رائعًا بالنسبة إلى CSS.
من #Interop2023 إلى العديد من عمليات الانتقال الجديدة في CSS ومساحة واجهة المستخدم التي تتيح لمطوّري الإمكانات ما كان يظن أنّه مستحيل على منصة الويب والآن، يدعم كل متصفح حديث طلبات البحث في الحاويات، والشبكة الفرعية، وأداة اختيار :has()
، ومجموعة كاملة من مساحات الألوان والدوال الجديدة. يتوفّر لدينا في Chrome الصور المتحركة التي تعتمد على التمرير في CSS فقط، بالإضافة إلى إمكانية تحريك الصور بسلاسة بين طرق عرض الويب باستخدام انتقالات العرض. والأهم من ذلك، هناك الكثير من الأساسيات الجديدة التي تم اعتمادها لتحسين تجارب المطوّرين، مثل تداخل CSS والأنماط النطاق.
لم يكن هذا العام عاديًا ونودّ أن نختم هذا العام المميّز ونحتفل بالجهود الكبيرة التي بذلها مطوِّرو المتصفحات ومنتدى الويب لتحقيق كل هذه الجهود.
أسس معمارية
لنبدأ بالتعديلات على لغة CSS الأساسية وإمكاناتها. تُعدّ هذه الميزات أساسية للطريقة التي تعتمدها في كتابة الأنماط وتنظيمها، وتمنح المطوّرين عملاً خارقًا.
الدوال المثلّثية
أتاح الإصدار Chrome 111 استخدام الدوال المثلثية sin()
وcos()
وtan()
وasin()
وacos()
وatan()
وatan2()
، ما يجعلها متاحة على جميع المحرّكات الرئيسية. هذه الدوال مفيدة جدًا لأغراض الرسوم المتحركة والتخطيط. على سبيل المثال، أصبح الآن تخطيط العناصر على دائرة حول مركز محدد أسهل بكثير.
اختيار nth-* معقد
دعم المتصفح
- 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 من Chrome دعمًا لـ @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](https://developer.chrome.com/static/blog/css-wrapped-2023/image/at-scope.png?authuser=6&hl=ar)
عرض توضيحي مباشر حول النطاق
@scope
لخدمة مقارنة الأسعار (CSS)يمكنك الاطّلاع على مزيد من المعلومات عن @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 */
}
تضمين التسجيل الرقمي للشاشة
عرض توضيحي مباشر للدمج
يمكن أن يقلل التداخل من حجم ورقة الأنماط، ويقلل من أعباء المحددات المتكررة، وتركيز أنماط المكونات. تم إصدار البنية في البداية مع وجود قيد يتطلب استخدام &
في أماكن مختلفة، ولكن تم تحسينها منذ ذلك الحين من خلال تعديل الدمج البسيط للبنية.
الشبكة الفرعية
تتيح لك لغة CSS subgrid
إنشاء شبكات أكثر تعقيدًا مع محاذاة أفضل بين التنسيقات الفرعية. تسمح للشبكة الموجودة داخل شبكة أخرى، باستخدام صفوف وأعمدة الشبكة الخارجية باعتبارها خاصة بها، وذلك باستخدام subgrid
كقيمة لصفوف أو أعمدة الشبكة.
تسجيل رقمي للشاشة من نوع Subgrid
عرض توضيحي مباشر لـ Subgrid
تعد الشبكة الفرعية مفيدة بشكل خاص لمواءمة الأشقاء مع المحتويات الديناميكية لبعضهم البعض. يتيح ذلك لمؤلفي الإعلانات ومؤلفي تجربة المستخدم والمترجمين محاولة إنشاء نسخة مشروع "تناسب" في التخطيط. باستخدام الشبكة الفرعية، يمكن تعديل التخطيط ليلائم المحتوى.
اطّلِع على مزيد من المعلومات عن subgrid.
فن الطباعة
أجرينا بعض التعديلات الأساسية على أسلوب الخط على الويب في 2023. يُعدّ التحسين التدريجي الرائع سمة text-wrap
. تتيح هذه السمة تعديل التصميم المطبعي، والذي يتم إنشاؤه في المتصفّح بدون الحاجة إلى نصوص برمجية إضافية. وداعًا لأطوال الأسطر المحرجة ومرحبًا بأسلوب الخط الذي يمكن التنبؤ به بشكل أكبر!
الحرف الأول من اسمك
عند الوصول إلى السمة initial-letter
في بداية العام في الإصدار 110 من Chrome، فإنّها عبارة عن ميزة CSS صغيرة وفعّالة تضبط الأنماط لظهور الأحرف الأولية. يمكنك وضع الأحرف في حالة إسقاط أو رفع. تقبل السمة وسيطتين: الأولى لمدى عمق إسقاط الحرف في الفقرة المقابلة، والثانية تمثل مقدار رفع الحرف فوقه. يمكنك أيضًا الجمع بين الخيارين، كما هو الحال في العرض التوضيحي التالي.
لقطة شاشة للأحرف الأولى
![لقطة شاشة للعرض التوضيحي بالأحرف الأولى](https://developer.chrome.com/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=6&hl=ar)
عرض توضيحي بالأحرف الأولى
initial-letter
للعنصر الزائف ::first-letter
لمراقبة هذا التغيير.تعرَّف على المزيد من المعلومات عن الحرف الأول من اسمك.
التفاف النص: التوازن والفعالية
كمطور، لا تعرف الحجم النهائي أو حجم الخط أو حتى لغة العنوان أو الفقرة. توجد جميع المتغيرات اللازمة للمعالجة الفعالة والجمالية لالتفاف النص في المتصفح. وبما أنّ المتصفّح يعرف جميع العوامل، مثل حجم الخط واللغة والمنطقة المخصّصة، فهو مناسب جدًا للتعامل مع تنسيق النص المتقدّم والعالي الجودة.
وهنا يظهر أسلوبان جديدان لإحاطة النص، إحداهما باسم balance
والأخرى pretty
. تهدف قيمة balance
إلى إنشاء كتلة نصية متناغمة، فيما تسعى pretty
إلى منع الأشخاص الأيتام وضمان استخدام واصلة صحيحة. فقد كانت هاتان المهمتان يتم تنفيذهما يدويًا في العادة، ومن الرائع أن تولّد هذه المهمة إلى المتصفح وأن تعمل مع أي لغة مترجمة.
تسجيل رقمي للشاشة بالتفاف النص
عرض توضيحي مباشر حول التفاف النص
balance
وpretty
على عنوان وفقرة. جرِّب ترجمة العرض التوضيحي إلى لغة أخرى.تعرَّف على مزيد من المعلومات عن التفاف النص: الرصيد.
اللون
كان 2023 هو عام الألوان التي شهدتها منصة الويب. بفضل المساحات اللونية والدوال الجديدة التي تمكّن مواضيع الألوان الديناميكية، لن تمنعك من إنشاء مظاهر زاهية الألوان وغنية بالألوان التي يستحقها المستخدمون، ما يجعلها قابلة للتخصيص أيضًا.
مساحات الألوان العالية الدقة (مستوى اللون 4)
من الأجهزة إلى البرامج، CSS إلى الأضواء الوامضة؛ قد يتطلب الأمر الكثير من العمل لأجهزة الكمبيوتر لتجربة الألوان وتمثيل الألوان بأفضل جودة يمكن أن تراها أعيننا. في عام 2023، طرحنا ألوانًا جديدة ومزيدًا من الألوان ومساحات ألوان جديدة ووظائف ألوان وإمكانات جديدة.
يمكن لـ CSS واللون الآن:
- التحقق مما إذا كان جهاز شاشة المستخدمين قادرًا على عرض ألوان HDR ذات نطاق عريض.
- تحقق مما إذا كان متصفح المستخدم يفهم بناء جملة الألوان مثل Oklch أو Display P3.
- تحديد ألوان النطاق العالي الديناميكية (HDR) ضمن اللغات Oklab وOklch وHWB وDisplay P3 وRec.2020 وXYZ وغيرها
- أنشئ تدرجات باستخدام ألوان HDR،
- دمج التدرجات في مسافات الألوان البديلة.
- يمكنك مزج الألوان مع السمة color-mix()
.
- إنشاء متغيرات للألوان باستخدام بنية ألوان نسبية.
التسجيل الرقمي للشاشة باللون 4
عرض توضيحي للون 4
تعرَّف على مزيد من المعلومات حول اللون 4 ومساحات الألوان.
دالة مزيج الألوان
مزج الألوان هو مهمة كلاسيكية، وفي عام 2023 يمكن لـ CSS تنفيذ ذلك أيضًا. لا يمكنك مزج الأبيض أو الأسود مع اللون فحسب، بل يمكنك أيضًا مزج الشفافية، والقيام بكل ذلك بأي مساحة لون من اختيارك. وهي في الوقت نفسه ميزة لون أساسية وميزة ألوان متقدمة.
color-mix() Screencast
color-mix() Demo
يمكنك اعتبار 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
(الذي يمثّل حجم الحاوية المضمّنة) لتحديد حجم رأس البطاقة.
@container Screencast
@container Demo
اطّلِع على مزيد من المعلومات عن استخدام طلبات البحث في الحاوية.
طلبات البحث في حاوية الأنماط
وصلت طلبات البحث إلى الأنماط مع تنفيذ جزئي في Chrome 111. في الوقت الحالي، يمكنك الاستعلام عن قيمة الخصائص المخصّصة في عنصر رئيسي عند استخدام @container style()
. على سبيل المثال، يمكنك إجراء طلب بحث لمعرفة ما إذا كانت هناك قيمة خاصية مخصّصة، أو تم ضبطها على قيمة معيّنة، مثل @container style(--rain: true)
.
لقطة شاشة لطلب البحث عن النمط
![لقطة شاشة توضيحية لطلبات البحث في حاويات الأنماط](https://developer.chrome.com/static/blog/css-wrapped-2023/image/stylecq.png?authuser=6&hl=ar)
عرض توضيحي لطلب النمط
بينما يبدو هذا مشابهًا لاستخدام أسماء الفئات في CSS، فإن استعلامات الأنماط لها بعض المزايا. الأول هو أنه باستخدام استعلامات النمط، يمكنك تحديث القيمة في CSS حسب الحاجة للحالات الزائفة. في الإصدارات المستقبلية من التنفيذ، ستتمكّن من الاستعلام عن نطاقات القيم لتحديد النمط المطبَّق، مثل style(60 <= --weather <= 70)
، والنمط استنادًا إلى أزواج الخاصية والقيمة، مثل style(font-style: italic)
.
تعرّف على مزيد من المعلومات حول استخدام طلبات البحث ذات الأنماط.
أداة اختيار:has()
لمدة 20 عامًا تقريبًا من المطوّرين طلبوا استخدام "أداة اختيار الوالدَين" في CSS. وأصبح من الممكن الآن استخدام أداة اختيار :has()
التي تم شحنها في Chrome 105. على سبيل المثال، سيؤدي استخدام .card:has(img.hero)
إلى اختيار عناصر .card
التي تتضمّن صورة رئيسية كعنصر ثانوي.
:has() لقطة شاشة للعرض التوضيحي
![لقطة شاشة مرجعية للعرض التوضيحي :has() لقطة شاشة مرجعية للعرض التوضيحي :has()](https://developer.chrome.com/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=6&hl=ar)
:has() Live Demo
:has()
: بطاقة بدون/مع صورةنظرًا لأن :has()
يقبل قائمة محددات نسبية كوسيطة، يمكنك تحديد عناصر أكثر بكثير من العنصر الرئيسي. وباستخدام العديد من أدوات تجميع CSS، من الممكن ليس فقط رفع شجرة عناصر DOM، ولكن أيضًا التحديدات الجانبية. على سبيل المثال، سيختار li:has(+ li:hover)
العنصر <li>
الذي يسبق العنصر <li>
الذي يتم تمريره حاليًا.
:has() Screencast
:has() إصدار تجريبي
:has()
: Dockتعديل الاستعلام عن الوسائط
يمنحك الاستعلام عن الوسائط 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، يمكنك إنشاء انتقالات مرئية بين حالتين من تطبيق الصفحة الواحدة. ويمكن أن تكون هذه الانتقالات عبارة عن انتقالات على صفحة كاملة، أو عناصر أصغر على الصفحة مثل إضافة عنصر جديد إلى القائمة أو إزالته.
وتقع الوظيفة document.startViewTranstion
في العنصر الأساسي لواجهة برمجة تطبيقات View Transitions API. مرِّر دالة تُعدِّل DOM إلى الحالة الجديدة، وستعتني واجهة برمجة التطبيقات بكل شيء بالنيابة عنك. ويتم ذلك من خلال أخذ لقطة قبل وبعد، ثم الانتقال بين الاثنين. وباستخدام CSS، يمكنك التحكم في ما يتم تسجيله وتخصيص كيفية تحويل هذه اللقطات إلى صورة متحركة اختياريًا.
تسجيل رقمي للشاشة من VT
إصدار تجريبي من VT
واجهة برمجة التطبيقات View Transitions API لتطبيقات الصفحة الواحدة التي يتم شحنها في Chrome 111. اطّلِع على مزيد من المعلومات عن عرض عمليات النقل.
دالة التخفيف الخطي
دعم المتصفح
- 113
- 113
- 112
- 17.2
لا تدع اسم هذه الدالة يخدعك. تتيح لك الدالة linear()
(يجب عدم الخلط بينها وبين الكلمة الرئيسية linear
الكلمة الرئيسية) إنشاء وظائف تخفيف معقّدة بطريقة بسيطة، مع احتمال فقدان بعض الدقة.
قبل linear()
، والذي تم شحنه في Chrome 113، كان من المستحيل إنشاء تأثيرات مرتدة أو ربيعية في CSS. وبفضل linear()
من الممكن تقريب هذه التخفيفات من خلال تبسيطها إلى سلسلة من النقاط، ثم الاستكمال الخطي بين هذه النقاط.
linear()
هذه النقاط وتقوم خطيًا بينها.التسجيل الرقمي للشاشة بالتخفيف الخطي
إصدار تجريبي للتخفيف الخطي
linear()
لخدمة مقارنة الأسعار (CSS)اطّلِع على مزيد من المعلومات عن linear()
. لإنشاء منحنيات linear()
، استخدِم منشئ التخفيف الخطي.
نهاية التمرير
تتضمن العديد من الواجهات تفاعلات التمرير، وفي بعض الأحيان تحتاج الواجهة إلى مزامنة المعلومات ذات الصلة بموضع التمرير الحالي أو استرجاع البيانات استنادًا إلى الحالة الحالية. قبل حدث scrollend
، كان عليك استخدام طريقة مهلة غير دقيقة يمكن أن يتم تنشيطها مع بقاء إصبع المستخدم على الشاشة. في حال استخدام حدث scrollend
، سيكون لديك حدث تمرير في الوقت المناسب بشكل مناسب يتيح لك معرفة ما إذا كان المستخدم لا يزال في منتصف إيماءة المستخدِم أو لا.
التسجيل الرقمي للشاشة في شريط التمرير
العرض التوضيحي لـ Scrollend
وكان هذا أمرًا مهمًا بالنسبة إلى المتصفّح لأنّ JavaScript لا يمكنها تتبُّع تواجد الأصابع على الشاشة أثناء التنقّل، وبالتالي تكون المعلومات ببساطة غير متاحة. يمكن الآن حذف أجزاء الرمز الذي يحاول بشكل غير دقيق عند محاولة الانتقال إلى نهاية التمرير واستبداله بحدث عالي الدقة يملكه المتصفّح.
الصور المتحركة المستندة إلى التمرير
إنّ الصور المتحركة التي تعتمد على التمرير هي ميزة رائعة متاحة في الإصدار Chrome 115. ويتيح لك ذلك التقاط صورة متحركة بتنسيق CSS أو صورة متحركة تم إنشاؤها باستخدام Web Animations API، وربطها بإزاحة التمرير في شريط التمرير. أثناء التمرير لأعلى ولأسفل - أو لليسار واليمين في شريط تمرير أفقي - سيتم تقديم الرسوم المتحركة المرتبطة للأمام وللخلف في الاستجابة المباشرة.
باستخدام ScrollTimeline، يمكنك تتبع التقدم الكلي لشريط التمرير، كما هو موضح في العرض التوضيحي التالي. أثناء التمرير إلى نهاية الصفحة، يكشف النص عن نفسه حرفًا بحرف.
التسجيل الرقمي للشاشة على SDA
عرض توضيحي لـ SDA
باستخدام ViewTimeline، يمكنك تتبُّع عنصر أثناء عبوره لشريط التمرير. ويعمل هذا بشكل مشابه لكيفية تتبع IntersectionObserver لأحد العناصر. في العرض التوضيحي التالي، تكشف كل صورة عن نفسها من اللحظة التي تدخل فيها إطار التمرير حتى تكون في المنتصف.
التسجيل الرقمي للشاشة من SDA
عرض توضيحي مباشر لـ SDA
نظرًا لأن الرسوم المتحركة المستندة إلى التمرير تعمل مع الرسوم المتحركة في CSS وواجهة برمجة تطبيقات Web Animations، يمكنك الاستفادة من جميع المزايا التي تجلبها واجهات برمجة التطبيقات هذه. يتضمن ذلك إمكانية تشغيل هذه الصور المتحركة خارج سلسلة التعليمات الرئيسية. يمكنك الآن استخدام الصور المتحركة المتجانسة التي يمكن تحريكها من خلال الانتقال للأعلى أو للأسفل في سلسلة التعليمات الرئيسية، وذلك بعد إضافة بضعة أسطر من الرموز البرمجية الإضافية. ما الذي لا يعجبك؟
لمعرفة المزيد من المعلومات عن الصور المتحركة التي تعتمد على التمرير، يُرجى الاطّلاع على هذه المقالة التي تتضمّن كل التفاصيل أو الانتقال إلى scroll-based-animations.style الذي يتضمّن العديد من العروض التوضيحية.
مرفق مؤجل للمخطط الزمني
عند تطبيق رسم متحرك من خلال CSS، فإن آلية البحث للعثور على شريط التمرير المتحكم تعرض دائمًا شجرة DOM مما يجعلها تقتصر على الكيانات الأصلية للتمرير فقط. ومع ذلك، في كثير من الأحيان، لا يكون العنصر الذي يحتاج إلى رسم متحرك عنصرًا ثانويًا لشريط التمرير، ولكنه عنصر موجود في شجرة فرعية مختلفة تمامًا.
للسماح للعنصر الذي يضم الصورة المتحركة بالعثور على جدول زمني مُسمّى للتمرير الخاص بشخص غير تابع، يمكنك استخدام السمة timeline-scope
على عنصر رئيسي مشترك. ويتيح ذلك إرفاق السمة scroll-timeline
أو view-timeline
المحدّدة بهذا الاسم، ما يتيح إمكانية الوصول إلى نطاق أوسع. ومع وضع ذلك، يمكن لأي فرع لأحد الوالدَين المشترَك استخدام المخطط الزمني بهذا الاسم.
![عرض مرئي لشجرة فرعية بتنسيق DOM مع نطاق المخطط الزمني المستخدَم على عنصر رئيسي مشترك عرض مرئي لشجرة فرعية بتنسيق DOM مع نطاق المخطط الزمني المستخدَم على عنصر رئيسي مشترك](https://developer.chrome.com/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=6&hl=ar)
timeline-scope
في العنصر الرئيسي المشترَك، يمكن العثور على scroll-timeline
الذي تم تعريفه في شريط التمرير من خلال العنصر الذي يستخدمه على أنّه animation-timeline
.العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
اطّلِع على مزيد من المعلومات عن timeline-scope
.
الصور المتحركة للسمات المنفصلة
تتوفّر في عام 2023 ميزة جديدة أخرى، وهي القدرة على إنشاء صور متحركة منفصلة، مثل إضافة تأثيرات متحركة من وإلى "display: none
". من الإصدار 116 من Chrome، يمكنك استخدام display
وcontent-visibility
في قواعد الإطارات الرئيسية. يمكنك أيضًا نقل أي خاصية منفصلة عند نقطة 50% بدلاً من نقطة 0%. ويمكن تحقيق ذلك من خلال استخدام السمة transition-behavior
مع الكلمة الرئيسية allow-discrete
أو في السمة transition
كاختصار.
الرسوم المتحركة المنفصلة. التسجيل الرقمي للشاشة
الرسوم المتحركة المنفصلة. عرض توضيحي
اطّلِع على المزيد من المعلومات عن نقل الصور المتحركة المنفصلة.
@starting-style
تستند قاعدة CSS @starting-style
إلى إمكانيات الويب الجديدة لإنشاء الصور المتحركة من وإلى display: none
. توفر هذه القاعدة طريقة لمنح أحد العناصر "قبل الفتح" الذي يمكن أن يبحث عنه المتصفح قبل فتح العنصر على الصفحة. هذا مفيد جدًا لرسوم الدخول المتحركة، وللتحريك في عناصر مثل النافذة المنبثقة أو مربع الحوار. يمكن أن يكون مفيدًا أيضًا في أي وقت تقوم فيه بإنشاء عنصر وتريد منحه القدرة على الحركة فيه. يمكنك الاطّلاع على المثال التالي الذي يحرّك سمة popover
(راجِع القسم التالي) ووضعه في الطبقة العلوية بسلاسة من خارج إطار العرض.
@starting-style Screencast
@starting-style عرض توضيحي
اطّلِع على مزيد من المعلومات عن @starting-style والصور المتحركة الأخرى للإدخال.
محتوى مركّب
يمكن إضافة سمة overlay
الجديدة في CSS إلى العنصر الانتقالي للسماح للعناصر ذات الأنماط من الطبقة العليا، مثل popover
وdialog
، بتحريكها خارج الطبقة العليا بسلاسة. وإذا لم تنقل التراكب، فسيعود العنصر على الفور إلى اقتصاصه وتحويله وتغطيته، ولن تلاحظ حدوث الانتقال. وبالمثل، تتيح السمة overlay
لـ ::backdrop
تحريك الصورة بسلاسة عند إضافتها إلى عنصر من الطبقة العليا.
تسجيل رقمي للشاشة يظهر على سطح الفيديو
عرض توضيحي مباشر يظهر على سطح الفيديو
تعرّف على مزيد من المعلومات حول التراكب والرسوم المتحركة الأخرى للخروج.
المكوّنات
كان عام 2023 عامًا حافلاً بالجمع بين عناصر النمط وHTML، مع تحقيق أهداف popover
وبذل الكثير من الجهود بشأن تحديد موضع الارتساء ومستقبل القوائم المنسدلة للتصميم. تسهل هذه المكونات إنشاء أنماط واجهة مستخدم مشتركة دون الحاجة إلى الاعتماد على مكتبات إضافية أو إنشاء أنظمة إدارة الحالة الخاصة بك من الألف إلى الياء في كل مرة.
النافذة المنبثقة
تساعدك Popover API في إنشاء عناصر تظهر في أعلى باقي الصفحة. يمكن أن تتضمن القوائم والخيارات وتلميحات الأدوات. يمكنك إنشاء نافذة منبثقة بسيطة من خلال إضافة السمة popover
والسمة id
إلى العنصر الذي ينبثق وربط سمة id
الخاصة بها بزر استدعاء باستخدام popovertarget="my-popover"
. تتيح واجهة برمجة التطبيقات Popover API ما يلي:
- الترقية إلى الطبقة العليا ستظهر النوافذ المنبثقة على طبقة منفصلة فوق بقية الصفحة، لذا لن تحتاج إلى تغيير مؤشر z.
- وظيفة الإغلاق الخفيف: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاق النافذة المنبثقة وإعادة التركيز.
- إدارة التركيز التلقائي: يؤدي فتح النافذة المنبثقة إلى توقف علامة التبويب التالية داخل النافذة المنبثقة.
- أربطة لوحة مفاتيح يمكن الوصول إليها: وسيؤدي الضغط على مفتاح
esc
أو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز. - عمليات ربط المكوّنات التي يمكن الوصول إليها: توصيل عنصر منبثق بمشغل منبثق دلاليًا.
تسجيل رقمي للشاشة منبثق
عرض توضيحي لـ Popover Live
القواعد الأفقية في مجموعة محددة
هناك تغيير بسيط آخر طرأ على ترميز HTML في Chrome وSafari هذا العام، وهو إمكانية إضافة عناصر قواعد أفقية (علامات <hr>
) إلى عناصر <select>
للمساعدة في تقسيم المحتوى بشكل مرئي. في السابق، لم يكن بالإمكان عرض علامة <hr>
في علامة محدّدة. ومع ذلك، يوفّر كل من متصفّح Safari وChrome هذه الميزة هذا العام، ما يسمح بفصل المحتوى بشكل أفضل ضمن عناصر <select>
.
اختيار لقطة شاشة
![لقطة شاشة لساعة محددة مع المظهر الفاتح والداكن في Chrome](https://developer.chrome.com/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=6&hl=ar)
اختيار عرض توضيحي مباشر
:فئات زائفة غير صالحة وصالحة للمستخدم
ثابت في جميع المتصفّحات هذا العام، تعمل :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،