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

Una Kravets

Bramus

Adam Argyle

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

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

• طلبات البحث في الحاويات
• طلبات البحث المتعلقة بالأسلوب
• أداة اختيار :has()
• بنية nth الصغيرة
• 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 ومكان بدء نطاق الألوان الأوسع.

تتوفّر أدوات أخرى كثيرة للألوان. لا تفوِّت أيضًا كل التحسينات الرائعة على التدرّجات اللونية. أنشأ "آدم آرجايل" أداة جديدة لمساعدتك في تجربة أداة اختيار ألوان جديدة على الويب وأداة إنشاء تدرّجات، ويمكنك تجربتها على 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.

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

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

صفحات 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().

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