الميزات الجديدة في CSS وواجهة المستخدم: إصدار مؤتمر I/O 2023

Una Kravets

Bramus

Adam Argyle

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

في ما يلي 20 من الميزات الأكثر إثارة وتأثيرًا التي تم إطلاقها مؤخرًا أو سيتم إطلاقها قريبًا:

• طلبات البحث في الحاويات
• طلبات البحث المتعلقة بالأسلوب
• :has() أداة الاختيار
• بنية nth-of
• text-wrap: balance
• initial-letter
• وحدات عرض نافذة التطبيق الديناميكية
• مساحات الألوان ذات التدرج اللوني الواسع
• color-mix()
• التداخل
• طبقات متتالية
• الأنماط المحدودة النطاق
• الدوال المثلثية
• خصائص التحويل الفردية
• popover
• تحديد موضع التثبيت
• selectmenu
• عمليات الانتقال بين المواقع المنفصلة
• الصور المتحركة المستندة إلى الانتقال
• انتقالات العرض

The New Responsive

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

طلبات البحث في الحاويات

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

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

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

مزيد من المعلومات حول طلبات البحث في الحاويات وإنشاء مكوّنات منطقية في هذه المشاركة

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

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

يستخدم المثال التالي خصائص الطقس المخزّنة في قيم السمات المخصّصة، مثل ممطر ومشمس وغائم، لتصميم خلفية البطاقة ورمز المؤشر.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

يمكنك الاطّلاع على مزيد من المعلومات ومشاهدة المزيد من العروض التوضيحية في مشاركة المدونة حول طلبات البحث المتعلقة بالأسلوب.

:has()

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

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

لكنّ واجهة برمجة التطبيقات هذه لا تقتصر على اختيار الوالدَين. يمكنك أيضًا تصميم أي عناصر فرعية داخل العنصر الرئيسي. على سبيل المثال، يظهر العنوان بخط غليظ عندما يتضمّن العنصر عنصر النجمة. يتم ذلك باستخدام .item:has(.star) .title. يتيح لك استخدام أداة الاختيار :has() الوصول إلى العناصر الرئيسية والعناصر الفرعية وحتى العناصر الشقيقة، ما يجعل هذه الواجهة مرنة للغاية، مع ظهور حالات استخدام جديدة كل يوم.

يمكنك الاطّلاع على المزيد من المعلومات واستكشاف المزيد من العروض التوضيحية في منشور المدونة هذا الذي يتناول :has().

بنية nth-of

تتضمّن منصة الويب الآن خيارًا أكثر تقدّمًا لاختيار nth-child. توفّر بنية nth-child المتقدّمة كلمة رئيسية جديدة ("of")، ما يتيح لك استخدام البنية المصغّرة الحالية An+B، مع مجموعة فرعية أكثر تحديدًا للبحث فيها.

إذا كنت تستخدم nth-child العادي، مثل :nth-child(2) في الفئة الخاصة، سيختار المتصفّح العنصر الذي تم تطبيق الفئة الخاصة عليه، وهو أيضًا العنصر الثانوي الثاني. يختلف ذلك عن :nth-child(2 of .special) الذي سيقوم أولاً بفلترة جميع عناصر .special مسبقًا، ثم اختيار العنصر الثاني من تلك القائمة.

يمكنك الاطّلاع على المزيد من المعلومات حول هذه الميزة في المقالة حول بنية nth-of.

text-wrap: balance

لا يقتصر استخدام المنطق في الأنماط على أدوات الاختيار وطلبات البحث عن الأنماط، بل يشمل أيضًا الطباعة. بدءًا من الإصدار 114 من Chrome، يمكنك استخدام ميزة "موازنة التفاف النص" للعناوين، وذلك باستخدام السمة text-wrap مع القيمة balance.

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

يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في هذه المقالة.

initial-letter

من التحسينات الرائعة الأخرى على الطباعة على الويب initial-letter، وهي إحدى خصائص CSS التي تمنحك تحكّمًا أفضل في تصميم الأحرف الاستهلالية المضمّنة.

يمكنك استخدام initial-letter في العنصر الزائف :first-letter لتحديد: حجم الحرف استنادًا إلى عدد الأسطر التي يشغلها. إزاحة الحرف عن الكتلة، أو "موضع" الحرف

intial-letter مزيد من المعلومات حول استخدام

وحدات إطار العرض الديناميكية

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

لحلّ هذه المشكلة، تتوفّر الآن قيم وحدات جديدة على منصة الويب، بما في ذلك: - ارتفاع وعرض إطار العرض الصغير (أو svh وsvw)، اللذان يمثّلان أصغر حجم لإطار العرض النشط. - ارتفاع وعرض كبيران لإطار العرض (lvh وlvw)، ما يمثّل الحجم الأكبر ‫- ارتفاع إطار العرض وعرضه الديناميكيَّان (dvh وdvw)

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

لمزيد من المعلومات عن هذه الوحدات الجديدة، يمكنك الاطّلاع على وحدات عرض إطار الصفحة الكبيرة والصغيرة والديناميكية.

مساحات الألوان ذات التدرج اللوني الواسع

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

ولكن لدينا الآن مجموعة من مساحات الألوان الجديدة على منصة الويب، بما في ذلك REC2020 وP3 وXYZ وLAB وOKLAB وLCH وOKLCH. يمكنك التعرّف على مساحات الألوان الجديدة على الويب والمزيد في دليل ألوان النطاق الديناميكي العالي.

ويمكنك على الفور ملاحظة في "أدوات مطوري البرامج" كيف تم توسيع نطاق الألوان، مع تحديد الخط الأبيض لمكان انتهاء نطاق sRGB ومكان بدء نطاق الألوان الأوسع.

تتوفّر المزيد من الأدوات للألوان، ولا تفوّت أيضًا جميع التحسينات الرائعة على التدرّجات اللونية. هناك أيضًا أداة جديدة تمامًا أنشأها Adam Argyle لمساعدتك في تجربة أداة اختيار ألوان جديدة على الويب وأداة إنشاء تدرّجات لونية، يمكنك تجربتها على gradient.style.

color-mix()

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

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

توفّر الدالة color-mix() إمكانية مطلوبة منذ فترة طويلة، وهي الحفاظ على قيم الألوان المعتمة مع إضافة بعض الشفافية إليها. يمكنك الآن استخدام متغيّرات ألوان علامتك التجارية أثناء إنشاء أشكال مختلفة من هذه الألوان بدرجات عتامة مختلفة. يمكنك إجراء ذلك عن طريق مزج لون مع لون شفاف. عند مزج اللون الأزرق الخاص بعلامتك التجارية مع نسبة% 10 من اللون الشفاف، ستحصل على لون علامة تجارية معتم بنسبة% 90. يمكنك الاطّلاع على كيفية إتاحة ذلك لك إنشاء أنظمة ألوان بسرعة.

يمكنك الاطّلاع على هذا الإجراء في "أدوات مطوّري البرامج في Chrome" اليوم باستخدام رمز تخطيط فنّي جميل للمعاينة في لوحة الأنماط.

يمكنك الاطّلاع على المزيد من الأمثلة والتفاصيل في مشاركة المدونة حول color-mix أو تجربة ساحة الألعاب هذه الخاصة بـ color-mix().

أساسيات CSS

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

الدمج

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

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

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

يحدث تعديل التنسيق إلى flex عندما يحتوي الحاوية على 480px أو أكثر من المساحة المتاحة المضمّنة. سيطبّق المتصفّح ببساطة نمط العرض الجديد هذا عند استيفاء الشروط.

لمزيد من المعلومات والأمثلة، يمكنك الاطّلاع على منشورنا حول التداخل في CSS.

طبقات متتالية

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

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

مزيد من المعلومات حول كيفية استخدام الطبقات المتتالية في هذه المقالة

نطاق CSS

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

في هذا المثال، نحدّد نطاق عنصر .title ضمن .card. سيؤدي ذلك إلى منع عنصر العنوان من التعارض مع أي عناصر .title أخرى على الصفحة، مثل عنوان مشاركة في مدوّنة أو عنوان آخر.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

يمكنك الاطّلاع على @scope مع حدود النطاق بالإضافة إلى @layer في هذا العرض التوضيحي المباشر:

يمكنك الاطّلاع على مزيد من المعلومات حول @scope في مواصفات css-cascade-6.

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

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

في العرض التوضيحي أدناه، تدور النقاط حول نقطة مركزية. بدلاً من تدوير كل نقطة حول مركزها ثم تحريكها إلى الخارج، يتم نقل كل نقطة على المحورَين X وY. يتم تحديد المسافات على المحورين X وY من خلال أخذ cos() وsin() من --angle في الاعتبار على التوالي.

يمكنك الاطّلاع على مقالتنا حول الدوال المثلثية للحصول على مزيد من المعلومات التفصيلية حول هذا الموضوع.

خصائص التحويل الفردية

تستمر تحسينات بيئة العمل الخاصة بالمطوّرين من خلال وظائف التحويل الفردية، وقد أصبحت هذه الوظائف متاحة على جميع المتصفحات الحديثة منذ آخر مؤتمر I/O.

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

يمكنك الآن الحصول على كل هذه التفاصيل في حركات CSS من خلال فصل أنواع عمليات التحويل وتطبيقها بشكلٍ فردي.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

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

لمزيد من المعلومات، يُرجى الاطّلاع على هذه المشاركة حول دوال التحويل الفردية.

المكوّنات القابلة للتخصيص

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

1. وظيفة النوافذ المنبثقة المضمّنة مع معالجات الأحداث وبنية DOM تعريفية والإعدادات التلقائية التي يمكن الوصول إليها
2. واجهة برمجة تطبيقات CSS لربط عنصرَين ببعضهما البعض من أجل تفعيل تحديد موضع العنصر الثابت
3. عنصر قائمة منسدلة قابل للتخصيص، وذلك عندما تريد تصميم المحتوى داخل عنصر select.

نافذة منبثقة

تمنح واجهة برمجة التطبيقات Popover API العناصر بعض الميزات المضمّنة المتوافقة مع المتصفّح، مثل:

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

يعني كل ذلك أنّه يجب كتابة كمية أقل من JavaScript لإنشاء كل هذه الوظائف وتتبُّع كل هذه الحالات.

إنّ بنية DOM الخاصة بالنافذة المنبثقة تعريفية ويمكن كتابتها بوضوح من خلال منح عنصر النافذة المنبثقة id وسمة popover. بعد ذلك، يمكنك مزامنة رقم التعريف هذا مع العنصر الذي سيفتح النافذة المنبثقة، مثل زر يحتوي على السمة popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover هو اختصار لـ popover=auto. سيؤدي العنصر الذي يتضمّن popover=auto إلى إغلاق النوافذ المنبثقة الأخرى بالقوة عند فتحه، وتلقّي التركيز عند فتحه، ويمكن إغلاقه بشكل سريع. في المقابل، لا تؤدي عناصر popover=manual إلى إغلاق أي نوع آخر من العناصر بالقوة، ولا يتم التركيز عليها على الفور، ولا يمكن إغلاقها بسرعة. ويتم إغلاقها من خلال زر تبديل أو إجراء إغلاق آخر.

يمكنك حاليًا الاطّلاع على أحدث المستندات حول النوافذ المنبثقة على MDN.

موضع التثبيت

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

يمكنك إنشاء تلميح أدوات في المنتصف باستخدام الدالة anchor()، وذلك باستخدام العرض من عنصر الربط لتحديد موضع تلميح الأدوات عند% 50 من موضع عنصر الربط على المحور x، ثم استخدام قيم تحديد الموضع الحالية لتطبيق بقية أنماط موضع الإعلان.

ولكن ماذا يحدث إذا لم يتناسب العنصر المنبثق مع مساحة العرض استنادًا إلى طريقة تحديد موضعه؟

لحلّ هذه المشكلة، يتضمّن Anchor Positioning API مواضع احتياطية يمكنك تخصيصها. ينشئ المثال التالي موضعًا احتياطيًا يُسمى "top-then-bottom". سيحاول المتصفّح أولاً وضع تلميح الأدوات في الأعلى، وإذا لم يكن ذلك مناسبًا في إطار العرض، سيضعه المتصفّح أسفل العنصر المثبّت في الأسفل.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

يمكنك الاطّلاع على مزيد من المعلومات حول تحديد موضع الإعلانات الثابتة في منشور المدوّنة هذا.

<selectmenu>

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

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

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

انتقالات المواقع المنفصلة

ولكي يتم الانتقال من وإلى النوافذ المنبثقة بسلاسة، يحتاج الويب إلى طريقة لتحريك الخصائص المنفصلة. هذه هي السمات التي لم يكن من الممكن تحريكها في الماضي، مثل التحريك إلى الطبقة العلوية ومنها والتحريك إلى display: none ومنها.

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

يعرض العرض التوضيحي التالي لنافذة منبثقة، ويحرّك النوافذ المنبثقة للداخل والخارج باستخدام :popover-open للحالة المفتوحة، و@starting-style للحالة قبل الفتح، ويطبّق قيمة تحويل على العنصر مباشرةً للحالة بعد إغلاق النافذة المفتوحة. لكي يعمل كل هذا مع العرض، يجب إضافته إلى السمة transition، كما يلي:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

التفاعلات

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

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

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

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

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

لتشغيل "حركة CSS" من خلال التمرير، استخدِم الخصائص الجديدة scroll-timeline وview-timeline وanimation-timeline. لتشغيل Web Animations API في JavaScript، مرِّر مثيلاً من ScrollTimeline أو ViewTimeline كخيار timeline إلى Element.animate().

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

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

عمليات النقل

تسهّل واجهة برمجة التطبيقات View Transition API تغيير نموذج المستند (DOM) في خطوة واحدة، مع إنشاء انتقال متحرك بين الحالتَين. ويمكن أن تكون هذه الانتقالات بسيطة بين طرق العرض، ولكن يمكنك أيضًا التحكّم في كيفية انتقال الأجزاء الفردية من الصفحة.

يمكن استخدام View Transitions كتحسين تدريجي: خذ الرمز الذي يعدّل نموذج المستند (DOM) بأي طريقة، ثم ضع هذا الرمز في واجهة برمجة التطبيقات View Transitions مع توفير بديل للمتصفحات التي لا تتوافق مع الميزة.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

يتم التحكّم في شكل عملية الانتقال من خلال CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

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

تعمل واجهة برمجة التطبيقات View Transitions حاليًا مع تطبيقات الصفحة الواحدة (SPA) من الإصدار 111 من Chrome. نعمل حاليًا على إتاحة التطبيقات المتعددة الصفحات. لمزيد من المعلومات، يمكنك الاطّلاع على دليل عمليات الانتقال بين طرق العرض الكامل الذي يقدّم لك شرحًا تفصيليًا.

الخاتمة

يمكنك الاطّلاع على جميع أحدث الميزات في CSS وHTML هنا على developer.chrome.com ومشاهدة فيديوهات مؤتمر I/O لمعرفة المزيد من الميزات الجديدة على الويب.