كانت الأشهر القليلة الماضية قد بدأت عصرًا ذهبيًا في واجهة مستخدم الويب. وقد أصبحت إمكانات الأنظمة الأساسية الجديدة متاحة الآن على نطاق واسع من خلال الاعتماد على المتصفحات المختلفة، ما يتيح استخدام المزيد من إمكانات الويب وميزات التخصيص أكثر من أي وقت مضى.
في ما يلي 20 ميزة من أكثر الميزات إثارة وتأثيرًا تم توفيرها مؤخرًا أو التي ستتوفر قريبًا:
- طلبات البحث عن الحاويات
- طلبات البحث عن الأنماط
- أداة اختيار
:has() - بناء الجملة المجهري
text-wrap: balanceinitial-letter- وحدات إطار العرض الديناميكي
- مساحات الألوان ذات النطاق الواسع
color-mix()- الدمج
- الطبقات المتتالية
- أنماط النطاق
- الدوال المثلثية
- مواقع التحويل الفردية
- نافذة منبثقة
- تحديد موضع الإعلان الثابت
- selectList
- عمليات نقل المواقع المنفصلة
- الصور المتحركة التي تعتمد على الانتقال
- عرض عمليات النقل
التصميم الجديد المتجاوب
لنبدأ ببعض إمكانات التصميم سريع الاستجابة الجديدة. تتيح لك الميزات الجديدة للنظام الأساسي إنشاء واجهات منطقية باستخدام مكونات تمتلك معلومات التصميم سريعة الاستجابة، وإنشاء واجهات تستفيد من إمكانات النظام لتقديم المزيد من واجهات المستخدم ذات التصميم الأصلي، والسماح للمستخدم بأن يصبح جزءًا من عملية التصميم من خلال طلبات البحث المفضَّلة للمستخدم من أجل تخصيص كامل.
طلبات البحث عن الحاوية
أصبحت طلبات بحث الحاويات مستقرة مؤخرًا عبر جميع المتصفحات الحديثة. وهي تسمح لك بالاستعلام عن حجم ونمط العنصر الأصلي لتحديد الأنماط التي يجب تطبيقها على أي من عناصره الثانوية. يمكن للاستعلامات عن الوسائط الوصول إلى المعلومات من إطار العرض والاستفادة منها فقط، ما يعني أنها لا يمكنها العمل إلا على العرض الماكرو لتنسيق الصفحة. من ناحية أخرى، تعد استعلامات الحاوية أداة أكثر دقة يمكنها دعم أي عدد من التخطيطات أو التخطيطات داخل التخطيطات.
في مثال البريد الوارد التالي، يمثّل كل من الشريط الجانبي البريد الوارد الأساسي والمفضلة حاويات. تضبط رسائل البريد الإلكتروني الموجودة داخلها تنسيق الشبكة الخاص بها وتُظهر أو تخفي الطابع الزمني للبريد الإلكتروني بناءً على المساحة المتاحة. هذا هو المكون نفسه داخل الصفحة، ويظهر فقط في طرق عرض مختلفة
نظرًا لأن لدينا استعلام حاوية، فإن أنماط هذه المكونات ديناميكية. إذا قمت بضبط حجم الصفحة والتخطيط، تستجيب المكونات للمساحة المخصصة لها بشكل فردي. يصبح الشريط الجانبي شريطًا علويًا مع مساحة أكبر، ونرى أن التنسيق يبدو أشبه بالبريد الوارد الأساسي. وعندما تكون المساحة محدودة، يتم عرض كليهما بتنسيق مكثف.
اطّلِع على مزيد من المعلومات عن طلبات البحث عن الحاويات والمكوّنات المنطقية في هذه المشاركة.
طلبات البحث عن التصاميم
كما تسمح لك مواصفات طلب بحث الحاوية أيضًا بالاستعلام عن قيم نمط الحاوية الرئيسية. وقد تم تنفيذ ذلك حاليًا جزئيًا في 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
التوافق مع المتصفح
- 111
- 111
- 113
- 9
تحتوي منصة الويب الآن على خيارات أكثر تقدّمًا لاختيار العناصر الفرعية التابعة. يعطي بناء الجملة الفرعي nth-الخاص كلمة رئيسية جديدة ("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" هنا.
وحدات إطار العرض الديناميكي
التوافق مع المتصفح
- 108
- 108
- 101
- 15.4
إحدى المشاكل الشائعة التي يواجهها مطوِّرو برامج الويب اليوم هي ضبط حجم إطار العرض الكامل بدقة ومتسقة، خاصةً على الأجهزة الجوّالة. بصفتك من المطوّرين، تريد أن تعني 100vh (100% من ارتفاع إطار العرض) "أنّ طول إطار العرض" (vh)، إلا أنّ وحدة 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" اليوم من خلال رمز مخطّط بياني جميل جدًا للمعاينة في لوحة الأنماط.
شاهد المزيد من الأمثلة والتفاصيل في مشاركة المدونة حول تشكيل الألوان أو جرّب هذا playground 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 محدّد
التوافق مع المتصفح
- 118
- 118
- x
- 17.4
تتيح الأنماط المستندة إلى CSS للمطوّرين تحديد الحدود التي تنطبق عليها أنماط معيّنة، ما يؤدي في الأساس إلى توفير مساحة أصلية للأسماء في CSS. في السابق، اعتمد مطوّرو البرامج على البرمجة النصية التابعة لجهات خارجية لإعادة تسمية الصفوف أو اصطلاحات تسمية محدّدة لمنع تعارض الأنماط، ولكن سرعان ما أصبح بإمكانك استخدام @scope.
سنغيّر نطاق عنصر .title إلى .card. وسيمنع ذلك عنصر العنوان هذا من التعارض مع أي عناصر .title أخرى على الصفحة، مثل عنوان مشاركة المدوّنة أو عنوان آخر.
@scope (.card) {
.title {
font-weight: bold;
}
}
يمكنك مشاهدة @scope مع حدود النطاق مع @layer في هذا العرض التوضيحي المباشر:
تعرَّف على مزيد من المعلومات عن @scope في مواصفات css-calcade-6.
الدوال المثلثية
جزء آخر من بنية CSS الجديدة هو الدوال المثلثية التي تتم إضافتها إلى الدوال الحسابية في CSS الحالية. هذه الدوال مستقرة الآن في جميع المتصفحات الحديثة، وتتيح لك إنشاء المزيد من التخطيطات المجانية على النظام الأساسي للويب. أحد الأمثلة الرائعة على ذلك هو تنسيق القائمة الشعاعي هذا، الذي يمكن الآن تصميمه وتحريكه باستخدام الدالتَين sin() وcos().
في العرض التوضيحي أدناه، تدور النقاط حول نقطة مركزية. وبدلاً من تدوير كل نقطة حول مركزها الخاص ثم تحريكها للخارج، تتم ترجمة كل نقطة على المحورين "س" و"ص". يتم تحديد المسافات على المحورين "س" و"ص" من خلال وضع 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 وقد حدّدنا ثلاثة حلول نبدأ بها:
- وظيفة نافذة منبثقة مضمَّنة مع معالِجات الأحداث وبنية DOM التعريفية والإعدادات التلقائية التي يمكن الوصول إليها
- واجهة برمجة تطبيقات CSS لربط عنصرين ببعضهما البعض لتفعيل تحديد موضع الارتساء.
- مكوِّن قائمة منسدلة قابل للتخصيص، عندما تريد تصميم محتوى داخل جزء محدد.
نافذة منبثقة
توفر واجهة برمجة التطبيقات المنبثقة عناصر رائعة لدعم المتصفح، مثل:
- دعم للطبقة العليا، بحيث لا تحتاج إلى إدارة
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.
كجزء من العمل لتمكين انتقالات لطيفة للنوافذ المنبثقة والقوائم المحددة وحتى العناصر الموجودة مثل مربعات الحوار أو المكونات المخصصة، فإن المتصفحات تمكن سباكة جديدة لدعم هذه الرسوم المتحركة.
في العرض التوضيحي المنبثق التالي، يتم تحريك النوافذ المنبثقة وخارجها باستخدام :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، مرِّر المثيل 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;
}
كما هو موضّح في هذا العرض التوضيحي الرائع من إعداد ماكسي فيريرا، تواصل التفاعلات الأخرى مع الصفحة، مثل تشغيل الفيديو، العمل أثناء حدوث نقل المشاهدة.
تعمل عمليات النقل حاليًا مع التطبيقات ذات الصفحة الواحدة من الإصدار Chrome 111. يجري العمل حاليًا على إتاحة التطبيق المتعدد الصفحات. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على دليل عمليات الانتقال إلى طريقة العرض الكامل لإرشادك إلى كل ذلك.
الخلاصة
يمكنك متابعة أحدث عمليات الانتقال إلى CSS وHTML هنا على developer.chrome.com والاطّلاع على فيديوهات مؤتمر I/O لمزيد من الصفحات المقصودة على الويب.