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

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

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

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

باستخدام أداة اختيار الفئة الصورية :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 للحدّ من مدى وصول أدوات الاختيار". في هذه المقالة، ستتعرَّف على أداة اختيار :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.

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

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

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

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

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

التفاف النص: التوازن والفعالية

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

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

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

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

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

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

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

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

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

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

تعرَّف على مزيد من المعلومات عن color-mix().

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

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

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

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

طلبات بحث حاوية الحجم

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

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

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

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

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

لقطة شاشة لطلب البحث عن النمط

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

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

تعرّف على مزيد من المعلومات حول استخدام طلبات البحث ذات الأنماط.

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

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

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

:has() Live Demo

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

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

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

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

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

اطّلِع على مزيد من المعلومات عن @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، يمكنك التحكم في ما يتم تسجيله وتخصيص كيفية تحويل هذه اللقطات إلى صورة متحركة اختياريًا.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لمعرفة المزيد من المعلومات عن الصور المتحركة التي تعتمد على التمرير، يُرجى الاطّلاع على هذه المقالة التي تتضمّن كل التفاصيل أو الانتقال إلى scroll-based-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

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

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

محتوى مركّب

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

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

النافذة المنبثقة

تساعدك 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-*.

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

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

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

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