الميزات الجديدة في 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

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

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

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

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

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

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

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

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

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

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

‫Scoped 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 API لربط عنصرَين ببعضهما البعض من أجل تفعيل تحديد موضع الإرساء
3. عنصر قائمة منسدلة قابل للتخصيص، وذلك عندما تريد تصميم المحتوى داخل عنصر select.

نافذة منبثقة

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

• إتاحة الطبقة العليا، لذلك لن تحتاج إلى إدارة 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. بعد ذلك، استخدِم قيم تحديد المواقع الحالية لتطبيق بقية أنماط مواضع الإعلانات.

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

لحلّ هذه المشكلة، تتضمّن واجهة برمجة التطبيقات لتحديد موضع عنصر ثابت مواضع احتياطية يمكنك تخصيصها. ينشئ المثال التالي موضعًا احتياطيًا يُسمى "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. لتشغيل JavaScript Web Animations API، مرِّر مثيلاً من ScrollTimeline أو ViewTimeline كخيار timeline إلى Element.animate().

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

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

عمليات نقل العرض

تسهّل واجهة برمجة التطبيقات 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;
}

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

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

الخاتمة

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