يعتمد هذا التطوّر المشوّق على نظام الويب الأساسي، كما يحتوي على ميزات CSS وواجهة المستخدم على الويب. نحن نعيش في عصر ذهبي بالنسبة إلى واجهة المستخدم على الويب، حيث تنتقل ميزات CSS الجديدة عبر المتصفحات بوتيرة لم يسبق لها مثيل، مما يفتح عالمًا من الإمكانات لإنشاء تجارب رائعة وجذابة على الويب. في مؤتمر Google I/O لعام 2024، سنتناول في مشاركة المدونة هذه الوضع الحالي لخدمة مقارنة الأسعار (CSS) من خلال استكشاف بعض الميزات الجديدة الأكثر تغيّرًا في اللعبة والتي تغيّر طريقة تصميم تطبيقات الويب.
تجارب تفاعلية جديدة
تُعد تجربة الويب في الأساس عملية اتصال واستجابة بينك وبين المستخدمين، ولهذا السبب من المهم جدًا الاستثمار في تفاعلات المستخدمين العالية الجودة. ونعمل على إجراء بعض التحسينات الكبيرة حقًا التي من شأنها أن تفتح إمكانات لم يسبق لنا الحصول عليها من قبل على الويب للتنقل داخل صفحات الويب والتنقل بينها.
الصور المتحركة المستندة إلى التمرير
كما يوحي الاسم، تتيح لك واجهة برمجة تطبيقات الصور المتحركة التي تعتمد على التمرير إنشاء صور متحركة ديناميكية مستندة إلى التمرير بدون الاعتماد على أدوات مراقبة التمرير أو نصوص برمجية مكثّفة أخرى.
إنشاء صور متحركة بالتمرير
كما هي الحال في طريقة عمل الصور المتحركة المستندة إلى الوقت على المنصة، يمكنك الآن استخدام مستوى تقدّم الانتقال في شريط التمرير لبدء صورة متحركة أو إيقافها مؤقتًا أو عكسها. لذا عندما تمرر للأمام، سترى تقدم الرسم المتحرك، وعند التمرير للخلف، ستنتقل إلى العكس. ويتيح لك ذلك إنشاء عناصر مرئية جزئية أو كاملة على الصفحة مع عناصر متحركة في إطار العرض وداخله، وتُعرف أيضًا باسم سرد القصص، للحصول على تأثير مرئي ديناميكي.
يمكن استخدام الرسوم المتحركة القائمة على التمرير لإبراز المحتوى المهم أو إرشاد المستخدمين خلال القصة أو ببساطة إضافة لمسة ديناميكية إلى صفحات الويب الخاصة بك.
الصورة المتحركة بالتمرير
عرض توضيحي مباشر
@keyframes appear {
from {
opacity: 0;
scale: 0.8;
}
to {
opacity: 1;
scale: 1;
}
}
img {
animation: appear linear;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
يحدد الرمز السابق حركة بسيطة تظهر في إطار العرض من خلال تغيير مستوى تعتيم الصورة وحجمها. يتم تحريك الصورة المتحركة من خلال موضع التمرير. لإنشاء هذا التأثير، عليك أولاً إعداد الصورة المتحركة في CSS ثم ضبط السمة animation-timeline. في هذه الحالة، تتتبّع الدالة view() بقيمها التلقائية الصورة وفقًا لمنفذ التمرير (وهو في هذه الحالة إطار العرض أيضًا).
من المهم مراعاة دعم المتصفّح وتفضيلات المستخدم، خصوصًا لتلبية احتياجات إمكانية الوصول. وبالتالي، يمكنك استخدام القاعدة @supports للتحقّق مما إذا كان المتصفّح يتيح استخدام الصور المتحركة التي تعتمد على التمرير، والتفاف الصورة المتحركة التي تعتمد على التمرير ضمن طلب البحث المفضّل لدى المستخدم مثل @media (prefers-reduced-motion: no-preference)، وذلك مراعاةً للإعدادات المفضّلة للحركة لدى المستخدمين. بعد إجراء عمليات التحقق هذه، فأنت تعلم أن أنماطك ستعمل، وأن الرسوم المتحركة لا تسبب مشكلة للمستخدم.
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Apply scroll-driven animations here */
}
}
يمكن أن تعني الرسوم المتحركة التي تعتمد على التمرير تجارب سرد التمرير بملء الصفحة، ولكنها يمكن أن تعني أيضًا رسومًا متحركة أكثر دقة مثل شريط عنوان تصغير وإظهار ظل أثناء التمرير في تطبيق الويب.
الصورة المتحركة بالتمرير
عرض توضيحي مباشر
@keyframes shrink-name {
from {
font-size: 2em;
}
to {
font-size: 1.5em;
}
}
@keyframes add-shadow {
from {
box-shadow: none;
}
to {
box-shadow: 0 4px 2px -2px gray;
}
}
header {
animation: add-shadow linear both;
}
h2 {
animation: shrink-name linear both;
}
header, h2 {
animation-timeline: scroll();
animation-range: 0 150px;
}
يستخدم هذا العرض التوضيحي بعض الرسوم المتحركة المختلفة للإطار الرئيسي - العنوان والنص وشريط التنقل والخلفية، ثم يطبق الرسوم المتحركة المعنية التي تعتمد على التمرير على كل منها. بينما يمتلك كل منها نمط رسوم متحركة مختلف، فإنهما جميعًا لديهم نفس الجدول الزمني للرسوم المتحركة وأقرب شريط تمرير ونفس نطاق الرسوم المتحركة - من أعلى الصفحة إلى 150 بكسل.
مزايا الأداء للصور المتحركة التي تعتمد على التمرير
تخفف واجهة برمجة التطبيقات المدمجة هذه من أعباء الرمز الذي يلزمك الحفاظ عليه، سواء كان هذا النص برمجيًا مخصصًا أو تم تضمين تبعية جهة خارجية إضافية. كما أنه يلغي الحاجة إلى شحن العديد من أدوات مراقبة التمرير، مما يعني بعض مزايا الأداء المهمة جدًا. ويرجع ذلك إلى أنّ الصور المتحركة التي تعتمد على التمرير تعمل خارج سلسلة التعليمات الرئيسية عند تحريك الخصائص التي يمكن تحريكها على المُنشئ مثل عمليات التحويل والتعتيم، سواء كنت تستخدم واجهة برمجة التطبيقات الجديدة مباشرةً في CSS أو تستخدم عناصر الجذب بلغة JavaScript.
استخدمت Tokopedia مؤخرًا صورًا متحركة بالتمرير لإظهار شريط تنقّل المنتج أثناء الانتقال للأعلى أو للأسفل. نتج عن استخدام واجهة برمجة التطبيقات هذه بعض الفوائد المهمة، سواء بالنسبة إلى إدارة الرموز البرمجية أو تحسين الأداء.
"لقد تمكّنا من تقليل ما يصل إلى% 80 من سطور الرموز البرمجية مقارنةً باستخدام أحداث تمرير JavaScript التقليدية، ولاحظنا انخفاضًا في متوسط استخدام وحدة المعالجة المركزية (CPU) من 50% إلى 2% أثناء التنقّل. - آندي ويهاليم، كبير مهندسي البرمجيات في شركة Tokopedia"
مستقبل تأثيرات التمرير
ونعلم أن هذه التأثيرات ستستمر في جعل الويب مكانًا أكثر جاذبية، ونحن نفكر بالفعل في ما قد سيأتي بعد ذلك. يتضمن ذلك القدرة على ليس فقط استخدام مخططات زمنية جديدة للصور المتحركة، ولكن أيضًا على استخدام نقطة تمرير لتشغيل بداية الرسوم المتحركة، تسمى الرسوم المتحركة التي يتم تشغيلها بالتمرير.
كما أن هناك المزيد من ميزات التمرير في المتصفحات في المستقبل. يُظهر العرض التوضيحي التالي مجموعة من هذه الميزات المستقبلية. وهي تستخدم لغة CSS scroll-start-target لضبط التاريخ والوقت الأوليَين ضمن أدوات الاختيار، وحدث scrollsnapchange في JavaScript لتعديل تاريخ العنوان، ما يجعل مزامنة البيانات مع الحدث المقطوعة أمرًا بسيطًا.
يمكنك أيضًا الاعتماد على ذلك لتعديل أداة اختيار في الوقت الفعلي باستخدام حدث scrollsnapchanging في JavaScript.
تتوفّر هذه الميزات الخاصة حاليًا في إصدار Canary الذي يمثِّل عَلمًا فقط، ولكنها توفّر إمكانات كان من الممكن أن تكون مستحيلة أو كان من الصعب جدًا تطويرها في المنصة، وتسلّط الضوء على مستقبل التفاعلات المستنِدة إلى التنقّل.
لمعرفة المزيد من المعلومات حول بدء استخدام الصور المتحركة بالتمرير، أطلق فريقنا سلسلة فيديوهات جديدة يمكنك العثور عليها على قناة Chrome للمطوّرين على YouTube. ستتعلّم في هذه الصفحة أساسيات الصور المتحركة التي تعتمد على الانتقال للأعلى أو للأسفل من قناة Bramus VanDme، بما في ذلك طريقة عمل هذه الميزة ومفرداتها وطُرق استخدامها المختلفة لإنشاء مؤثرات، بالإضافة إلى طريقة دمج التأثيرات لابتكار تجارب غنية. إنه سلسلة فيديو رائعة للتحقق منها.
عرض عمليات النقل
لقد تناولنا للتو ميزة جديدة وفعّالة متحركة داخل صفحات الويب، ولكن هناك أيضًا ميزة جديدة قوية تُعرف باسم انتقالات طرق العرض لتحريك بين مشاهدات الصفحة لتقديم تجربة مستخدم سلسة. تقدّم انتقالات العرض مستوى جديدًا من الانسيابية على الويب، ما يتيح لك إنشاء انتقالات سلسة بين طرق العرض المختلفة في صفحة واحدة أو حتى بين صفحات مختلفة.
تُعد Airbnb واحدة من الشركات التي تختبر بالفعل دمج انتقالات طرق العرض في واجهة المستخدم الخاصة بها للحصول على تجربة تنقل سلسة وسلسة على الويب. ويتضمّن ذلك الشريط الجانبي لمحرّر بطاقات البيانات، مباشرة في تعديل الصور وإضافة وسائل الراحة، وكل ذلك ضمن تدفق سلس للمستخدمين.
في حين أن تأثيرات الصفحة الكاملة هذه جميلة وسلسة، يمكنك أيضًا إنشاء تفاعلات دقيقة، مثل هذا المثال حيث يتم تحديث عرض القائمة الخاص بك بشأن تفاعل المستخدم. يمكن تحقيق هذا التأثير بسهولة باستخدام انتقالات العرض.
ويمكن تفعيل انتقالات العرض بسرعة في تطبيق الصفحة الواحدة، تمامًا مثل إحاطة تفاعل باستخدام document.startViewTransition والتأكد من احتواء كل عنصر ينتقل على view-transition-name أو مضمّن أو ديناميكي باستخدام JavaScript أثناء إنشاء عُقد DOM.
العرض التوضيحي المرئي
عرض توضيحي مباشر
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.startViewTransition(() => {
btn.closest('.card').remove();
});
})
});
/* Styles for the transition animation */
::view-transition-old(.card):only-child {
animation: fade-out ease-out 0.5s;
}
عرض الصفوف الانتقالية
يمكن استخدام أسماء انتقالات العرض لتطبيق رسوم متحركة مخصصة على انتقال طريقة العرض، ولكن هذا قد يكون مرهقًا مع انتقال العديد من العناصر. يبسّط التحديث الأول الجديد لعرض الانتقالات هذا العام هذه المشكلة، ويوفر إمكانية إنشاء عرض فئات الانتقال التي يمكن تطبيقها على الصور المتحركة المخصصة.
دعم المتصفح
- 125
- 125
- x
- x
عرض أنواع الانتقالات
هناك تحسين كبير آخر في ما يتعلق بانتقالات العرض وهو دعم أنواع انتقالات العرض. تكون أنواع انتقالات العرض مفيدة عندما تريد نوعًا مختلفًا من الانتقال بين طرق العرض المرئية عند استخدام الرسوم المتحركة من وإلى مشاهدات الصفحة.
على سبيل المثال، قد ترغب في تحريك صفحة رئيسية إلى صفحة مدونة بطريقة مختلفة عن تلك التي تتحركها صفحة المدونة مرة أخرى إلى الصفحة الرئيسية. أو قد ترغب في تبديل الصفحات وإخراجها بطرق مختلفة كما هو الحال في هذا المثال، بالانتقال من اليسار إلى اليمين والعكس بالعكس. كان من الصعب تنفيذ هذا الأمر قبل أن يصبح بإمكانك إضافة فئات إلى نموذج العناصر في المستند (DOM) لتطبيق الأنماط، ويمكنك بعد ذلك إزالة الفئات لاحقًا. تتيح أنواع انتقالات العرض للمتصفح إزالة الانتقالات القديمة بدلاً من أن تطلب منك إجراء ذلك يدويًا قبل بدء عمليات انتقال جديدة، مما يؤدي إلى تنفيذ هذا الإجراء نيابةً عنك.
يمكنك إعداد أنواع داخل دالة document.startViewTransition التي تقبل الآن أحد الكائنات. update هي دالة معاودة الاتصال التي تعدّل DOM، وtypes هي مصفوفة تتضمّن الأنواع.
document.startViewTransition({
update: myUpdate,
types: ['slide', 'forwards']
})
انتقالات العرض متعدد الصفحات
ما يميّز شبكة الويب هو مدى اتساعها، فالعديد من التطبيقات لا تقتصر على صفحة واحدة فقط، بل تشمل أيضًا مجموعة جدارية عالية الجودة تتضمّن عدّة صفحات. ولهذا السبب، يسعدنا الإعلان عن إتاحة عمليات الانتقال في عرض جميع المستندات للتطبيقات المتعددة الصفحات في Chromium 126.
تتضمّن مجموعة الميزات الجديدة المستندة إلى المستندات المتعدّدة تجارب ويب تقع ضمن المصدر نفسه، مثل الانتقال من web.dev إلى web.dev/blog، ولكن لا تشمل الانتقال من نطاقات أخرى، مثل الانتقال من web.dev إلى blog.web.dev أو إلى نطاق آخر، مثل google.com.
أحد الاختلافات الرئيسية في عمليات انتقال عرض المستند نفسه هو أنّك لست بحاجة إلى إكمال عملية النقل باستخدام document.startViewTransition(). بدلاً من ذلك، فعِّل كلا الصفحتَين المرتبطتَين بانتقال العرض باستخدام قاعدة @view-transition لصفحات الأنماط المتتالية (CSS).
@view-transition {
navigation: auto;
}
للحصول على تأثير مخصّص أكثر، يمكنك الجذب في JavaScript باستخدام أدوات معالجة الأحداث الجديدة pageswap أو pagereveal، والتي تمنحك إمكانية الوصول إلى كائن انتقال العرض.
باستخدام "pageswap"، يمكنك إجراء بعض التغييرات في اللحظة الأخيرة على الصفحة الصادرة مباشرةً قبل أخذ اللقطات القديمة، ومن خلال "pagereveal" يمكنك تخصيص الصفحة الجديدة قبل بدء عرضها بعد إعدادها.
window.addEventListener('pageswap', async (e) => {
// ...
});
window.addEventListener('pagereveal', async (e) => {
// ...
});
نخطّط في المستقبل لتوسيع نطاق انتقالات طرق العرض، بما في ذلك:
- عمليات الانتقال على نطاق واسع: يمكنك السماح لك بحصر عملية الانتقال على شجرة فرعية في نموذج العناصر في المستند (DOM)، ما يتيح لك مواصلة التفاعل مع باقي الصفحة، بالإضافة إلى إتاحة انتقالات طرق العرض المتعددة التي يتم تشغيلها في الوقت نفسه.
- عمليات انتقال العرض المستند إلى الإيماءات: يمكنك استخدام إيماءات السحب أو التمرير السريع لبدء الانتقال في عرض المستند إلى عدّة مستندات للحصول على مزيد من التجارب الشبيهة بتجارب الويب على الويب.
- مطابقة التنقل في CSS: يمكنك تخصيص انتقال عرض المستندات المتعددة في CSS مباشرةً كبديل لاستخدام حدثَي
pageswapوpagerevealفي JavaScript. لمزيد من المعلومات عن عمليات انتقال طرق العرض لتطبيقات متعددة الصفحات، بما في ذلك كيفية إعدادها بكفاءة أعلى باستخدام العرض المسبق، يمكنك الاطّلاع على المحادثة التالية التي أجراها "براموس فان دام":
مكونات واجهة المستخدم المستنِدة إلى المحرّكات: تبسيط التفاعلات المعقدة
لا يعد إنشاء تطبيقات ويب معقدة بالأمر السهل، ولكن يتم تطوير CSS وHTML لتسهيل إدارة هذه العملية. تعمل الميزات والتحسينات الجديدة على تبسيط إنشاء مكونات واجهة المستخدم، مما يتيح لك التركيز على إنشاء تجارب رائعة. ويتم ذلك من خلال جهد تعاوني يضمّ العديد من هيئات المعايير الرئيسية ومجموعات المنتديات، بما في ذلك منتدى عمل CSS ومجموعة منتدى واجهة المستخدم المفتوحة وWhatWG (مجموعة عمل تكنولوجيا تطبيق النص التشعبي على الويب).
تتمثل إحدى المشكلات الكبيرة للمطور في طلب بسيط يبدو: القدرة على تصميم القوائم المنسدلة (العنصر المحدد). ومع أنّها تبدو واضحة في الظاهر، إلا أنّها مشكلة معقدة، وهي تؤثر في العديد من أقسام المنصة، بدءًا من التخطيط والعرض والتمرير والتفاعل إلى أنماط وكيل المستخدم وخصائص CSS، بل وحتى التغييرات في محتوى HTML نفسه.
تتكون القائمة المنسدلة من العديد من الأجزاء وتتضمن العديد من الحالات التي يجب أخذها في الاعتبار، مثل:
- روابط لوحة المفاتيح (للدخول أو الخروج من التفاعل)
- النقر للإغلاق
- الإدارة النشطة للنوافذ المنبثقة (إغلاق النوافذ المنبثقة الأخرى عند فتح إحدى النوافذ)
- إدارة التركيز على علامة التبويب
- جارٍ عرض قيمة الخيار المحدّدة
- نمط تفاعل السهم
- إدارة الدولة (مفتوح/إغلاق)
من الصعب حاليًا إدارة كل هذه الحالة بنفسك، لكنّ المنصة لا تسهّل تنفيذ ذلك أيضًا. لحلّ هذه المشكلة، قمنا بتفصيل هذه الأجزاء، ونعرض حاليًا بعض الميزات الأساسية التي ستتيح لك اختيار تصميم القوائم المنسدلة، ولكنّها أيضًا تؤدي إلى إجراء المزيد من المهام.
واجهة برمجة التطبيقات Popover
تم أولاً شحن سمة عالمية تُسمّى popover، ويسرّنا الإعلان عن أنّها أصبحت متوفرة حديثًا منذ بضعة أسابيع.
يتم إخفاء عناصر النوافذ المنبثقة باستخدام ميزة "display: none" إلى أن يتم فتحها باستخدام استدعاء مثل زر أو باستخدام JavaScript. لإنشاء نافذة منبثقة أساسية، عليك ضبط سمة المنبثق على العنصر وربط معرّفه بزر باستخدام popovertarget. الآن، الزر هو الداعي،
العرض التوضيحي المرئي
عرض توضيحي مباشر
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
بعد تفعيل سمة "النافذة المنبثقة" الآن، سيتعامل المتصفّح مع العديد من السلوكيات الرئيسية بدون أيّ نصوص برمجية إضافية، بما في ذلك:
- الترقية إلى الطبقة العليا: طبقة منفصلة فوق بقية الصفحة، كي لا تضطر إلى تغيير
z-index. - وظيفة الإغلاق الخفيف: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاق النافذة المنبثقة وإعادة التركيز.
- إدارة التركيز التلقائي لعلامة التبويب: يؤدي فتح النافذة المنبثقة إلى توقف علامة التبويب التالية داخل النافذة المنبثقة.
- ربط لوحة المفاتيح المدمجة: وسيؤدي الضغط على مفتاح
escأو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز. - عمليات ربط المكوّنات التلقائية: : يربط المتصفح دلاليًا نافذة منبثقة بالمشغّل الخاص به.
ربما حتى أنك تستخدم واجهة برمجة تطبيقات النوافذ المنبثقة هذه اليوم دون أن تدرك ذلك. نفذ GitHub نافذة منبثقة على قائمة "جديد" لصفحته الرئيسية وفي النظرة العامة لمراجعة طلب السحب. تدريجيًا، حسّنا هذه الميزة باستخدام الرموز المنبثقة polyfill، التي صمّمها Oddbird مع دعم كبير من كيث سيركل من GitHub، لإتاحة المتصفحات القديمة.
"لقد تمكنا من إيقاف العمل بآلاف سطور الرمز من خلال الانتقال إلى عناصر منبثقة. يساعدنا Popover في التخلّص من الحاجة إلى التصدي لأرقام مؤشر z السحرية... ووجود علاقة صحيحة لشجرة تسهيل الاستخدام من خلال سلوك زر التعريف، والتركيز على السلوكيات، ما يسهِّل بشكل كبير على نظام التصميم لدينا تنفيذ الأنماط بالطريقة الصحيحة.-كيث سيركل، مهندس برمجيات، GitHub"
تحريك تأثيرات الدخول والخروج
عندما تكون لديك نوافذ منبثقة، سترغب على الأرجح في إضافة بعض التفاعل. هناك أربع ميزات جديدة للتفاعل تم إطلاقها في العام الماضي لدعم العناصر المتحركة المتحركة. ومن بينها:
إمكانية تحريك display وcontent-visibility على مخطط زمني للإطار الرئيسي
تتيح السمة transition-behavior التي تتضمّن الكلمة الرئيسية allow-discrete تفعيل انتقالات الخصائص المنفصلة مثل display.
القاعدة @starting-style لتحريك تأثيرات الإدخال من display: none وإلى الطبقة العليا
خاصية التراكب للتحكم في سلوك الطبقة العلوية أثناء الحركة.
تعمل هذه الخصائص مع أي عنصر تقوم بتحريكه في الطبقة العلوية، سواء كان عنصرًا منبثقًا أو مربع حوار. معًا، يبدو الأمر كالتالي لمربع حوار يحتوي على صورة خلفية:
العرض التوضيحي المرئي
عرض توضيحي مباشر
dialog, ::backdrop{
opacity: 0;
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
[open], [open]::backdrop {
opacity: 1;
}
@starting-style {
[open], [open]::backdrop {
opacity: 0;
}
}
أولاً، عليك إعداد @starting-style، لكي يعرف المتصفّح الأنماط التي يجب تحريك هذا العنصر منها في نموذج DOM. ويتم ذلك في كل من مربّع الحوار والصور الخلفية. بعد ذلك، اضبط نمط الحالة المفتوحة لكل من مربّع الحوار والصور الخلفية. بالنسبة إلى مربّع الحوار، يستخدم ذلك السمة open وللعنصر الزائف في علامة ::popover-open المنبثقة. أخيرًا، يمكنك تحريك opacity وdisplay وoverlay باستخدام الكلمة الرئيسية allow-discrete لتفعيل وضع الحركة حيث يمكن للخصائص المنفصلة الانتقال.
موضع الإرساء
كانت فكرة Popover مجرد بداية القصة. من التحديثات المثيرة للغاية أن دعم موضع الإعلان الثابت متاح الآن من الإصدار 125 من Chrome.
وباستخدام تحديد موضع الارتساء، باستخدام بضعة أسطر من الرموز، يمكن للمتصفح معالجة المنطق لربط عنصر مرتبط بعنصر ارتساء واحد أو أكثر. في المثال التالي، يتم تثبيت تلميح بسيط بكل زر في أسفل الوسط.
العرض التوضيحي المرئي
عرض توضيحي مباشر
يمكنك إعداد علاقة تحديد موضع الارتساء في CSS باستخدام السمة anchor-name على عنصر الارتساء (في هذه الحالة الزر) والسمة position-anchor على العنصر الموضعي (في هذه الحالة، التلميح). بعد ذلك، طبِّق تحديد الموضع المطلق أو الثابت على علامة الارتساء باستخدام الدالة anchor(). يضع الرمز التالي أعلى التلميح في أسفل الزر.
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
position-anchor: --my-anchor;
}
يمكنك بدلاً من ذلك استخدام اسم الارتساء مباشرةً في دالة الارتساء وتخطّي سمة position-anchor. يمكن أن يكون هذا مفيدًا عند الارتساء بعناصر متعددة.
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
top: anchor(--my-anchor bottom);
}
أخيرًا، استخدِم الكلمة الرئيسية الجديدة anchor-center للسمتَين justify وalign لتوسيط العنصر الذي تم تحديد موضعه في علامة الارتساء الخاصة به.
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
top: anchor(--my-anchor bottom);
justify-self: anchor-center;
}
على الرغم من أنّه من السهل جدًا استخدام موضع الارتساء مع النافذة المنبثقة، فإنّه بالتأكيد ليس شرطًا لاستخدام موضع الارتساء. يمكن استخدام تحديد موضع الارتساء مع أي عنصرين (أو أكثر) لإنشاء علاقة مرئية. في الواقع، يعرض العرض التوضيحي التالي المستوحى من مقالة من "رومان كوماروف" نمط تسطير يتم تثبيته لإدراج العناصر أثناء التمرير فوقها أو النقر عليها.
العرض التوضيحي المرئي
عرض توضيحي مباشر
يستخدم هذا المثال دالة الارتساء لإعداد موضع الارتساء باستخدام السمات المادية لكل من left وright وbottom. فعندما تمرِّر مؤشر الماوس فوق أحد الروابط، يتغيّر علامة الارتساء الهدف، ويغيّر المتصفّح الهدف لتطبيق الموضع، مع تحريك اللون أيضًا في الوقت نفسه لإنشاء تأثير أنيق.
ul::before {
content: "";
position: absolute;
left: anchor(var(--target) left);
right: anchor(var(--target) right);
bottom: anchor(var(--target) bottom);
...
}
li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
--target: --item-1;
--color: red;
}
مكانة "inset-area" في السوق
بالإضافة إلى الموضع المطلق التلقائي للاتجاهات التي ربما استخدمتها من قبل، هناك آلية تنسيق جديدة مضمنة كجزء من واجهة برمجة تطبيقات تحديد موضع الارتساء التي تسمى منطقة داخلية. تجعل المنطقة الداخلية من السهل وضع العناصر الموضوعة بالنسبة إلى علامات الارتساء الخاصة بها، وتعمل على شبكة من 9 خلايا مع عنصر الارتساء في المنتصف. على سبيل المثال، يضع inset-area: top العنصر في موضعه في الأعلى ويضع inset-area: bottom العنصر الموضوع في موضعه في الأسفل.
تظهر نسخة مبسّطة من العرض التوضيحي الأول لإثبات الهوية على النحو التالي مع "inset-area":
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
position-anchor: --my-anchor;
inset-area: bottom;
}
يمكنك الجمع بين قيم موضع الإعلان هذه والكلمات الرئيسية التي يمتد نطاقها للبدء في الموضع الأوسط وإما الامتداد إلى اليسار أو الامتداد إلى اليمين أو الامتداد لتشغل المجموعة الكاملة من الأعمدة أو الصفوف المتاحة. يمكنك أيضًا استخدام الخصائص المنطقية أيضًا. لتسهيل العرض والاستعانة بآلية التنسيق هذه، يمكنك الاطّلاع على هذه الأداة في الإصدار 125 من Chrome والإصدارات الأحدث:
ولأن هذه العناصر ثابتة، يتحرك العنصر المحدد ديناميكيًا في جميع أنحاء الصفحة أثناء تحرك علامة الارتساء الخاصة به. لذلك في هذه الحالة، لدينا عناصر بطاقة بنمط استعلام الحاوية، والتي يتم تغيير حجمها بناءً على حجمها الأساسي (وهو شيء لا يمكنك فعله مع استعلامات الوسائط)، وستتغير القائمة الثابتة مع التخطيط الجديد مع تغير واجهة مستخدم البطاقة.
العرض التوضيحي المرئي
عرض توضيحي مباشر
مواضع الإعلانات الثابتة الديناميكية باستخدام position-try-options
يعد إنشاء القوائم والتنقل في القائمة الفرعية أسهل بكثير من خلال مزيج من النوافذ المنبثقة ووضع الارتساء. وعندما تصل إلى حافة إطار العرض باستخدام عنصر الارتساء، يمكنك السماح للمتصفح بالتعامل مع تغيير الموضع نيابةً عنك أيضًا.
يمكنك إجراء ذلك بعدة طرق. الخطوة الأولى هي إنشاء قواعدك الخاصة لتحديد الموضع. في هذه الحالة، يتم وضع القائمة الفرعية مبدئيًا على يمين زر "واجهة المتجر". يمكنك إنشاء جزء @position-try عندما لا تتوفّر مساحة كافية على يسار القائمة، ما يؤدي إلى إعطائه معرّفًا مخصّصًا بقيمة --bottom. بعد ذلك، يمكنك ربط مجموعة @position-try هذه بالارتساء باستخدام position-try-options.
والآن، سينتقل المتصفِّح بين حالات الإرساء هذه، مع تجربة الموضع الصحيح أولاً ثم الانتقال إلى الأسفل. ويمكن إجراء ذلك بانتقال جيد.
العرض التوضيحي المرئي
عرض توضيحي مباشر
#submenu {
position-anchor: --submenu;
top: anchor(top);
left: anchor(right);
margin-left: var(--padding);
position-try-options: --bottom;
transition: top 0.25s, left 0.25s;
width: max-content;
}
@position-try --bottom {
top: anchor(left);
left: anchor(bottom);
margin-left: var(--padding);
}
إلى جانب منطق تحديد الموضع الواضح، هناك بعض الكلمات الرئيسية التي يوفرها المتصفح إذا كنت تريد بعض التفاعلات الأساسية مثل قلب علامة الارتساء في الكتلة أو الاتجاهات المضمّنة.
position-try-options: flip-block, flip-inline;
للحصول على تجربة قلب بسيطة، يمكنك الاستفادة من قيم الكلمات الرئيسية القابلة للقلب هذه وتخطّي كتابة تعريف position-try تمامًا. أصبح بإمكانك الآن الحصول على عنصر ثابت لتحديد موضع الاستجابة للموقع الجغرافي يعمل بشكل كامل مع بضعة أسطر من CSS.
العرض التوضيحي المرئي
عرض توضيحي مباشر
.tooltip {
inset-area: top;
position-try-options: flip-block;
}
مزيد من المعلومات عن استخدام ميزة تحديد موضع الارتساء
مستقبل واجهة المستخدم ذات الطبقات
نرى التجارب المرتبطة في كل مكان، وتشكّل مجموعة الميزات المعروضة في هذه المشاركة بداية ممتازة لإطلاق العنان للإبداع والتحكم بشكل أفضل في العناصر الثابتة والواجهات ذات الطبقات. لا تشكل هذه الخطوة إلا البداية. على سبيل المثال، لا يعمل popover حاليًا إلا مع الأزرار كعنصر استدعاء أو مع JavaScript. بالنسبة لشيء مثل معاينات نمط ويكيبيديا، وهو نمط يظهر في جميع أنحاء منصة الويب، يجب أن يكون من الممكن التفاعل معه، كما يجب أن يؤدي إلى ظهور نافذة منبثقة من رابط ومن المستخدم يُظهر اهتمامًا دون الحاجة إلى النقر، مثل التمرير أو التركيز على علامة التبويب.
وكخطوة تالية لتطوير واجهة برمجة التطبيقات POPover API، نعمل على تطوير interesttarget لتلبية هذه الاحتياجات وتسهيل إعادة إنشاء هذه التجارب باستخدام عناصر الجذب المناسبة والمدمَجة لتسهيل الاستخدام. تمثّل هذه المشكلة صعوبة في الوصول يجب حلّها، مع الكثير من الأسئلة المفتوحة حول السلوكيات المثالية، ولكن من المفترض أن يؤدي حلّ هذه الوظيفة وتسويقها على مستوى النظام الأساسي إلى تحسين هذه التجارب للجميع.
<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>
<span popover=hint id="my-toolip">This is the tooltip</span>
بالإضافة إلى ذلك، هناك مزود عام آخر (invoketarget) متاح للاختبار في إصدار Canary بفضل عمل مطوّرَين خارجيَين هما "كيث سيركل" و"لوك وارلو". يوفّر invoketarget تجربة البيان الخاصة بالمطوّرين التي توفّر نوافذ منبثقة، تمت تسويتها لجميع العناصر التفاعلية، بما في ذلك <dialog> و<details> و<video> و<input type="file"> وغيرها.popovertarget
<button invoketarget="my-dialog">
Open Dialog
</button>
<dialog id="my-dialog">
Hello world!
</dialog>
نعلم أنّ هناك حالات استخدام لا تشملها واجهة برمجة التطبيقات هذه إلى الآن. على سبيل المثال، يمكنك تصميم السهم الذي يربط عنصر ارتساء بالارتساء الخاص به، لا سيما عند تغير موضع عنصر الارتساء، وتمكين عنصر من "التمرير" والبقاء في إطار العرض بدلاً من المحاذاة إلى موضع آخر يتم تعيينه عندما يصل إلى مربع الإحاطة الخاص به. لذا، وبالرغم من أنّنا متحمسون لإتاحة هذه الواجهة الفعّالة، فإنّنا نتطلّع أيضًا إلى توسيع نطاق إمكاناتها بشكل أكبر في المستقبل.
اختيار نمط معيّن
باستخدام الترميزَين popover وanchor معًا، حقّق الفريق تقدّمًا بشأن تفعيل قائمة منسدلة للاختيار من بين العناصر القابلة للتخصيص. والخبر السار هو أنّه تم إحراز تقدّم كبير. من ناحية أخرى، الخبر غير السار هو أنّ واجهة برمجة التطبيقات هذه لا تزال في حالة تجريبية في الوقت الحالي. مع ذلك، تسعدني مشاركة بعض العروض التوضيحية والتعديلات المباشرة حول تقدّمنا، ونأمل أن تصلك أيضًا بعض الملاحظات.
أولاً، تم إحراز تقدم في كيفية إشراك المستخدمين في تجربة الاختيار الجديدة والقابلة للتخصيص. والطريقة الحالية التي لا تزال قيد التنفيذ لإجراء ذلك هي استخدام خاصية المظهر في CSS، والتي تم ضبطها على appearance: base-select. بعد ضبط المظهر، سيتم تفعيل تجربة اختيار جديدة وقابلة للتخصيص.
select {
appearance: base-select;
}
بالإضافة إلى appearance: base-select، هناك بضعة تعديلات جديدة بتنسيق HTML. وتشمل هذه الإمكانات إمكانية التفاف الخيارات في datalist لتخصيصها، وإمكانية إضافة محتوى عشوائي غير تفاعلي، مثل الصور، في خياراتك. ستتوفر لك أيضًا إمكانية الوصول إلى عنصر جديد، وهو <selectedoption>، والذي سيعكس محتوى الخيارات في نفسه، والذي يمكنك تخصيصه وفقًا لاحتياجاتك الخاصة. هذا العنصر مفيد حقًا.
العرض التوضيحي المرئي
عرض توضيحي مباشر
<select>
<button type=popover>
<selectedoption></selectedoption>
</button>
<datalist>
<option value="" hidden>
<p>Select a country</p>
</option>
<option value="andorra">
<img src="Flag_of_Andorra.svg" />
<p>Andorra</p>
</option>
<option value="bolivia">
<img src="Flag_of_Bolivia.svg" />
<p>Bolivia</p>
</option>
...
</datalist>
</select>
يوضّح الرمز التالي عملية تخصيص <selectedoption> في واجهة مستخدم Gmail، حيث يمثّل رمز مرئي نوع الرد الذي تم اختياره لتوفير مساحة. يمكنك استخدام أنماط العرض الأساسية ضمن selectedoption للتمييز بين نمط الخيارات ونمط المعاينة. في هذه الحالة، يمكن أن يكون النص الظاهر في الخيار مخفيًا مرئيًا في selectedoption.
العرض التوضيحي المرئي
عرض توضيحي مباشر
selectedoption .text {
display: none;
}
ويشكّل التوافق مع الأنظمة القديمة إحدى أكبر مزايا إعادة استخدام العنصر <select> لواجهة برمجة التطبيقات هذه. في هذا البلد، يمكنك الاطّلاع على واجهة مستخدم مخصَّصة تحتوي على صور إبلاغات، وذلك من خلال الخيارات المتاحة للمستخدمين في تحليل المحتوى بسهولة أكبر. بما أنّ المتصفّحات غير المتوافقة ستتجاهل الأسطر التي لا تفهمها، مثل الزرّ المخصّص وقائمة البيانات والخيار المحدّد والصور المضمّنة في الخيارات، سيكون الإجراء الاحتياطي مشابهًا لواجهة مستخدِم التحديد التلقائية الحالية.
مع خيارات قابلة للتخصيص، تتوفّر إمكانات لا حصر لها. تعجبني أداة اختيار البلد هذه المصممة على طراز Airbnb بشكل خاص لأنها تتميز بأسلوب ذكي للتصميم سريع الاستجابة. يمكنك إجراء ذلك وغير ذلك الكثير من خلال الميزة القادمة التي تعتمد على أسلوب التصميم، ما يجعلها إضافة ضرورية إلى منصة الويب.
العرض التوضيحي المرئي
عرض توضيحي مباشر
أكورديون حصري
حل التصميم المحدّد (وجميع الأجزاء المرتبطة به) ليس العنصر الوحيد الذي ركّز فريق Chrome عليه في واجهة المستخدم. التحديث الأول الإضافي للمكونات هو القدرة على إنشاء أكورديون حصري، والذي يمكن من خلاله فتح عنصر واحد فقط من عناصر الأكورديون في كل مرة.
دعم المتصفح
- 120
- 120
- x
- 17.2
تكمن طريقة تفعيل ذلك في تطبيق قيمة الاسم نفسها على عناصر تفاصيل متعددة، وبالتالي إنشاء مجموعة مرتبطة من التفاصيل، تشبه إلى حدّ كبير مجموعة أزرار الاختيار.
<details name="learn-css" open>
<summary>Welcome to Learn CSS!</summary>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>...</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>...</p>
</details>
:user-valid و:user-invalid
هناك تحسين آخر لمكوّنات واجهة المستخدم هما الفئتان الزائفتان :user-valid و:user-invalid. تم استقرار عمل الفئتَين :user-valid و:user-invalid الصوريتَين بشكل مشابه للفئتَين الزائفتَين ":valid" و":invalid"، إلا أنّهما لا يتطابقان مع عنصر تحكّم في النموذج إلا بعد تفاعل المستخدم بشكل كبير مع الإدخال. ويعني ذلك الحاجة إلى رمز برمجي أقل بكثير لتحديد ما إذا كان قد تم التفاعل مع قيمة النموذج أو أصبحت "غير صالحة"، ما قد يكون مفيدًا جدًا لتقديم ملاحظات المستخدمين، كما يقلل من الكثير من النصوص البرمجية التي كانت ضرورية لإجراء ذلك في الماضي.
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
input:user-valid,
select:user-valid,
textarea:user-valid {
--state-color: green;
--bg: linear-gradient(...);
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
--state-color: red;
--bg: linear-gradient(...);
}
اطّلِع على مزيد من المعلومات عن استخدام العناصر الزائفة للتحقّق من صحة نموذج user-*.
field-sizing: content
ومن بين التحديثات المفيدة الأخرى للمكوّنات التي تم طرحها مؤخرًا هو field-sizing: content، ويمكن تطبيقه على عناصر التحكّم، مثل المدخلات والمساحات النصية. وهذا يمكّن من زيادة حجم الإدخال (أو تقليصه) اعتمادًا على محتواه. يمكن أن يكون field-sizing: content مفيدًا بشكل خاص في المساحات النصية، حيث لا يمكنك التعامل مع الأحجام الثابتة، حيث قد تحتاج إلى الانتقال للأعلى أو للأسفل للاطّلاع على ما كتبته في الأجزاء السابقة من طلبك في مربّع إدخال صغير جدًا.
دعم المتصفح
- 123
- 123
- x
- x
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
textarea, select, input {
field-sizing: content;
}
تعرَّف على المزيد من المعلومات عن تغيير حجم الحقول.
<hr> في <select>
تعد إمكانية تفعيل عنصر القاعدة <hr>، أو عنصر القاعدة الأفقية في عمليات التحديد ميزة صغيرة أخرى ولكنها مفيدة للمكوِّن. على الرغم من أنّ ذلك ليس له استخدام دلالي كبير، إلّا أنّه يساعدكم في فصل المحتوى بشكل جيد ضمن قائمة محددة، لا سيما المحتوى الذي قد لا تريدون بالضرورة تجميعه مع مجموعة بصرية (optgroup)، مثل قيمة عنصر نائب.
اختيار لقطة شاشة
اختيار عرض توضيحي مباشر
<select name="majors" id="major-select">
<option value="">Select a major</option>
<hr>
<optgroup label="School of Fine Arts">
<option value="arthist">
Art History
</option>
<option value="finearts">
Fine Arts
</option>
...
</select>
مزيد من المعلومات عن استخدام ساعة محددة
تحسينات على جودة الحياة
نحن نكرر باستمرار، وليس فقط للتفاعلات والمكونات. هناك العديد من الأخبار الأخرى المتعلقة بجودة الحياة والتي ظهرت في العام الماضي.
الدمج مع نظرة مستقبلية
أصبح دمج CSS الأصلي متاحًا في جميع المتصفّحات في العام الماضي، ومنذ ذلك الحين تم تحسينه لإتاحة استخدام الواجهة، ما يعني أنّ إضافة & قبل أسماء العناصر لم تعُد شرطًا. هذا يجعلني أشعر بالراحة والتشابه مع ما كنتُ معتادًا عليه في الماضي.
من أكثر ما يعجبني في تداخل CSS أنّه يتيح لك حظر المكوّنات بصريًا، وتتضمّن حالات ومفاتيح تعديل ضمن هذه المكوّنات، مثل استعلامات الحاوية والاستعلامات عن الوسائط. في السابق، كنت معتادًا على تجميع كل هذه الاستعلامات أسفل الملف لأغراض تتعلق بالخصوصية. الآن، يمكنك كتابتها بطريقة منطقية، بجوار باقي التعليمات البرمجية
.card {
/* card base styles */
h2 {
/* child element style */
}
&.highlight {
/* modifier style */
}
&:hover, &:focus {
/* state styles */
}
@container (width >= 300px) {
/* container query styles */
}
}
محاذاة المحتوى لتنسيق الكتلة
هناك تغيير آخر رائع وهو إمكانية استخدام آليات التوسيط مثل align-content في تخطيط الكتلة. وهذا يعني أنّه أصبح بإمكانك تنفيذ إجراءات مثل التوسيط الرأسي في div بدون الحاجة إلى تطبيق تنسيق مرن أو تخطيط الشبكة، وبدون آثار جانبية مثل منع تصغير الهامش، وهو ما قد لا تحتاج إليه من خوارزميات التنسيق تلك.
دعم المتصفح
- 123
- 123
- 125
- 17.4
لقطة شاشة
عرض توضيحي مباشر
div {
align-content: center;
}
التفاف النص: توازن وجمال
بالحديث عن التنسيق، تم تحسين تنسيق النص من خلال إضافة text-wrap: balance وpretty. يُستخدم text-wrap: balance في كتلة نصية أكثر اتساقًا، بينما يركز text-wrap: pretty على تقليل الأحرف المفردة في السطر الأخير من النص.
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
balance وpretty على عنوان وفقرة. جرِّب ترجمة العرض التوضيحي إلى لغة أخرى.h1 {
text-wrap: balance;
}
تعرَّف على مزيد من المعلومات عن التفاف النص: الرصيد.
الإشعارات الدولية حول أسلوب الخط
تم إجراء الكثير من التعديلات خلال العام الماضي حول تعديلات تنسيق أسلوب الخط لميزات نصوص CJK، مثل ميزة word-break: auto-phrase التي تلتف حول الخط عند حدود العبارة الطبيعية.
دعم المتصفح
- 119
- 119
- x
- x
word-break: normal وword-break: auto-phraseتطبيق text-spacing-trim، الذي يطبّق التنانين بين أحرف علامات الترقيم لتحسين قابلية قراءة أسلوب الخط الصينية واليابانية والكورية، للحصول على نتائج أكثر جاذبيةً.
دعم المتصفح
- 123
- 123
- x
- x
بنية الألوان النسبية
في عالم مظاهر الألوان، رأينا تحديثًا كبيرًا في بناء جملة الألوان النسبي.
في هذا المثال، تستخدم الألوان هنا مظاهر تستند إلى Oklch. وعندما يتم ضبط قيمة تدرُّج اللون بناءً على شريط التمرير، يتغير المظهر بأكمله. ويمكن تحقيق ذلك باستخدام بناء جملة الألوان النسبي. تستخدم الخلفية اللون الأساسي بناءً على تدرُّج اللون، وتضبط قنوات الإضاءة والكروما وتدرج اللون لضبط قيمتها. --i هو الفهرس الشقيق في القائمة لتدرج القيم، حيث يوضح كيف يمكنك دمج التحرك مع الخصائص المخصصة وبناء جملة الألوان النسبي لإنشاء المظاهر.
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
balance وpretty على عنوان وفقرة. جرِّب ترجمة العرض التوضيحي إلى لغة أخرى.:root {
--hue: 230;
--primary: oklch(70% .2 var(--hue));
}
li {
--_bg: oklch(from var(--primary)
calc(l - (var(--i) * .05))
calc(c - (var(--i) * .01))
calc(h - (var(--i) + 5)));
}
دالة light-dark()
إلى جانب الدالة light-dark()، أصبحت تصاميم الإعلانات أكثر ديناميكية وبسلاسة.
تعتبر الدالة light-dark() تحسينًا مريحًا يعمل على تبسيط خيارات صياغة الألوان بحيث يمكنك كتابة أنماط المظاهر بطريقة أكثر إيجازًا، كما هو موضّح في هذا المخطّط المرئي من تصميم "آدم أرجيل". قبل ذلك، كنت تحتاج إلى كتلتين مختلفتين من الرموز، (المظهر الافتراضي وطلب البحث المفضل للمستخدم)، لإعداد خيارات المظهر. والآن، يمكنك كتابة خيارات النمط هذه لكل من المظهر الفاتح والداكن في نفس سطر CSS باستخدام الدالة light-dark().
light-dark(). يمكنك الاطّلاع على العرض التوضيحي لمزيد من المعلومات.
html {
color-scheme: light dark;
}
button {
background-color: light-dark(lightblue, darkblue);
}
إذا اختار المستخدم مظهرًا فاتحًا، سيكون للزر خلفية زرقاء فاتحة. إذا اختار المستخدم مظهرًا داكنًا، سيكون للزر خلفية زرقاء داكنة.
أداة اختيار :has()
يسرّني أن أتحدث عن واجهة المستخدم الحديثة بدون ذكر أبرز ميزات إمكانية التشغيل التفاعلي من العام الماضي، وهي أداة اختيار :has() التي ظهرت على جميع المتصفّحات في كانون الأول (ديسمبر) من العام الماضي. تساعدك واجهة برمجة التطبيقات هذه في كتابة الأنماط المنطقية.
تتيح لك أداة اختيار :has() التحقق ممّا إذا كان أحد العناصر الفرعية يحتوي على عناصر ثانوية محدّدة أو ما إذا كانت هذه العناصر الثانوية في حالة محدّدة، ويمكنها أن تعمل بشكل أساسي أيضًا كأداة اختيار رئيسية.
has() يتم استخدامه لتصميم كتل المقارنة على Tokopedia.سبق أن أثبتت ميزة ":has()" فعاليتها بشكل خاص في العديد من الشركات، بما في ذلك PolicyBazaar التي تستخدم :has() لتصميم الكتل البرمجية استنادًا إلى المحتوى الداخلي، كما هو الحال في قسم المقارنة، حيث يتم تعديل النمط إذا كانت هناك خطة للمقارنة في الجزء، أو إذا كان فارغًا.
"باستخدام أداة اختيار :has()، تمكّنا من إزالة عملية التحقّق المستندة إلى JavaScript التي اختارها المستخدم، واستبدالها بحلّ CSS يوفّر لنا التجربة نفسها التي مرّ عليها سابقًا.-أمان سوني، المدير التقني، PolicyBazaar"
طلبات البحث الخاصة بالحاويات
من الميزات الأخرى الأساسية إلى الويب التي أصبحت متاحة حديثًا وزاد استخدامها طلبات البحث في الحاوية، والتي تتيح إمكانية الاستعلام عن الحجم الأساسي للعنصر الرئيسي من أجل تطبيق الأنماط: وهي تضم تشعبًا أكثر دقة من الاستعلامات عن الوسائط، والتي تستعلم عن حجم إطار العرض فقط.
أطلق Angular مؤخرًا موقعًا إلكترونيًا جديدًا رائعًا للوثائق على angular.dev باستخدام طلبات البحث في الحاوية لتصميم كتل العناوين استنادًا إلى المساحة المتاحة على الصفحة. لذلك حتى إذا تغير التخطيط، وانتقل من تخطيط شريط جانبي متعدد الأعمدة إلى تخطيط أحادي العمود، يمكن ضبط كتل العنوان ذاتيًا.
بدون استعلامات الحاوية، كان من الصعب جدًا تحقيق شيء كهذا، كما أن ذلك يضر بالأداء، مما يتطلب من مراقبي تغيير الحجم ومراقبي العناصر. الآن، من السهل تصميم عنصر بناءً على حجمه الأصلي.
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
@property
وأخيرًا، يسعدنا قريبًا رؤية @property land في Baseline. هذه ميزة أساسية لتوفير المعنى الدلالي للخصائص المخصّصة في CSS (المعروفة أيضًا باسم متغيّرات CSS)، وتفعيل عدد كبير من ميزات التفاعل الجديدة. تفعِّل @property أيضًا المعنى السياقي والتحقّق من الكتابة والإعدادات التلقائية والقيم الاحتياطية في CSS. نحن نفتح الأبواب أمام ميزات أكثر فعالية مثل طلبات البحث في نمط النطاق. لم تكن هذه الميزة متوفرة في السابق، وهي توفّر الآن معلومات مفصّلة عن لغة CSS.
العرض التوضيحي للتسجيل الرقمي للشاشة
عرض توضيحي مباشر
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
الخلاصة
مع كل هذه الإمكانات الجديدة والفعّالة لواجهة المستخدم عبر المتصفحات، تكون الاحتمالات لا حصر لها. فتجارب تفاعلية جديدة مع رسوم متحركة تعتمد على التمرير وانتقالات العرض تجعل الويب أكثر سلاسة وتفاعلية بطرق لم نرها من قبل. وتجعل مكونات واجهة المستخدم ذات المستوى التالي من السهل أكثر من أي وقت مضى إنشاء مكونات قوية ومخصصة بشكل جميل بدون استهلاك التجربة الأصلية بالكامل. وأخيرًا، فإن تحسينات جودة الحياة في الهندسة والتخطيط وأسلوب الخط والتصميم سريع الاستجابة لا تحل الأشياء الصغيرة فحسب، بل تمنح أيضًا المطورين الأدوات التي يحتاجونها لبناء واجهات معقدة تعمل على مجموعة متنوعة من الأجهزة وعوامل الشكل واحتياجات المستخدم.
من المفترض أن تتمكّن من إزالة النصوص البرمجية التابعة لجهات خارجية التي تتضمن ميزات ذات أداء قوي، مثل عناصر سرد التنقل وعناصر التوصيل لبعضها البعض باستخدام موضع الارتساء، وإنشاء انتقالات سلسة للصفحات، وأخيرًا قوائم الأنماط المنسدلة، وتحسين البنية العامة للرموز البرمجية بشكل طبيعي.
هذا أفضل وقت لتصبح مطوّر برامج على الويب. لم يكن هناك الكثير من الحماس والحيوية منذ الإعلان عن CSS3. وأصبحت الميزات التي نحتاج إليها ولكنّنا حلمنا بإطلاقها في الماضي حقيقة واقعة وجزء من المنصة. وبفضل آرائكم، أصبح بإمكاننا تحديد الأولويات وإتاحة هذه الإمكانات أخيرًا. نحن نعمل على تسهيل تنفيذ المهام المملة والصعبة محليًا حتى تتمكن من قضاء المزيد من الوقت في إنشاء العناصر المهمة، مثل الميزات الأساسية وتفاصيل التصميم التي تميّز علامتك التجارية.
لمعرفة المزيد من المعلومات عن هذه الميزات الجديدة فور إطلاقها، يمكنك المتابعة على الرابط developer.chrome.com وweb.dev حيث يشارك فريقنا آخر الأخبار في مجال تكنولوجيات الويب. جرِّب الصور المتحركة التي تعتمد على التمرير، أو اعرض الانتقالات، أو موضع الارتساء، أو حتى الاختيارات ذات الأنماط المختلفة، وأطلِعنا على رأيك. نحن في الخدمة وتسرّنا مساعدتك.