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

Una Kravets

Bramus

Adam Argyle

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

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

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

الإصدار الجديد المتجاوب

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

طلبات البحث الخاصة بالحاويات

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

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

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

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

استعلامات الأنماط

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

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

إذا كنت تستخدم العنصر العادي "الطفل رقم n"، مثل :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. تعرَّف على مساحات ألوان الويب الجديدة وغير ذلك من خلال دليل الألوان العالية الدقة.

يمكنك الاطّلاع على الفور في DevTools على مدى توسُّع نطاق الألوان، مع تحديد هذا الخط الأبيض لمكان انتهاء نطاق 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" اليوم من خلال رمز مخطّط Venn البياني المخصّص لمعاينة التصاميم في لوحة الأنماط.

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

اطّلِع على المقالة حول الدوال المثلثية للحصول على معلومات أكثر تفصيلاً حول هذا الموضوع.

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

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

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

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

نافذة منبثقة

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

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

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

.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 إلى display: none والعكس.

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

في العرض التوضيحي التالي للنوافذ المنبثقة، يحرّك نوافذ منبثقة داخل وخارج باستخدام :popover-open للحالة المفتوحة، و@starting-style للحالة "قبل الفتح"، ويطبّق قيمة تحويل على العنصر مباشرةً في الحالة "after-open-is-closed". لضمان توافق كل هذه العناصر مع الإعلانات الصورية، يجب إضافتها إلى السمة 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 API الحالية، ما يعني أنّها تستفيد من مزايا واجهات برمجة التطبيقات هذه. ويشمل ذلك إمكانية تشغيل هذه الصور المتحركة خارج سلسلة التعليمات الرئيسية. نعم، لقد قرأت هذا بشكل صحيح: يمكنك الآن إنشاء صور متحركة سلسة، يتم تشغيلها من خلال الانتقال للأعلى أو للأسفل، وتعمل خارج سلسلة التعليمات الرئيسية، وذلك باستخدام بضعة أسطر من الرموز الإضافية فقط. ما الذي لا يعجبك؟

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

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

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

يمكن استخدام "عمليات انتقال العرض" كميزة تحسين تدريجي: استخدِم الرمز الذي يعدّل DOM بأي طريقة ولفّه في واجهة برمجة التطبيقات الخاصة بميزة "انتقال العرض" مع توفير بديل للمتصفّحات التي لا تتيح هذه الميزة.

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) من Chrome 111. يجري العمل حاليًا على إتاحة تطبيقات من صفحات متعددة. لمزيد من المعلومات، يمكنك الاطّلاع على دليل الانتقالات بين المشاهد الكامل للتعرّف على كل التفاصيل.

الخاتمة

يمكنك الاطّلاع على آخر الصفحات المقصودة في CSS وHTML على developer.chrome.com، والاطّلاع على فيديوهات I/O للحصول على المزيد من الصفحات المقصودة على الويب.