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

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

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

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

باستخدام محدد الفئة الزائفة :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 كقيمة لصفوف الشبكة أو أعمدةها.

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

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

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

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

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

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

اطّلِع على مزيد من المعلومات عن initial-letter.

text-wrap: balance and pretty

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

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

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

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

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

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

مزيد من المعلومات حول Color 4 ومساحات الألوان

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مزيد من المعلومات عن@media (تعديل)

طلب الوسائط البرمجي

يمكن استخدام طلب البحث عن الوسائط البرمجي للتحقّق مما إذا كانت 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 لتطبيقات الصفحة الواحدة في الإصدار 111 من Chrome. اطّلِع على مزيد من المعلومات عن عمليات انتقال العرض.

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

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

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

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

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

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

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

اطّلِع على مزيد من المعلومات عن scrollend.

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

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

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

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

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

للاطّلاع على مزيد من المعلومات عن الرسوم المتحرّكة المستندة إلى الانتقال إلى الأسفل أو للأعلى، يمكنك الاطّلاع على هذه المقالة التي تتضمّن كل التفاصيل أو الانتقال إلى scroll-driven-animations.style الذي يتضمّن العديد من العروض التوضيحية.

مرفق الجدول الزمني المؤجّل

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

للسماح للعنصر المتحرّك بالعثور على مخطط زمني مُعنوَن للانتقال غير المرتبط بعنصر أصلي، استخدِم السمة 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 والرسوم المتحركة الأخرى للعناصر.

المحتوى المركّب

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

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

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

مزيد من المعلومات عن استخدام hr في select

الفئات الزائفة :user-valid وinvalid

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

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

اطّلِع على مزيد من المعلومات عن استخدام عناصر المحاكاة user-* لتحقق صحة النموذج.

Accordion حصري

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

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

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