آخر الأخبار حول CSS وواجهة مستخدم الويب: ملخّص مؤتمر I/O لعام 2024

Una Kravets

توفّر منصة الويب ميزات مبتكرة، وتعدّ ميزات CSS وواجهة مستخدم الويب في طليعة هذا التطور المثير. نحن نعيش في عصر ذهبي لواجهة مستخدم الويب، مع طرح ميزات CSS جديدة في جميع المتصفّحات بسرعة لم يسبق لها مثيل، ما يفتح عالمًا من الاحتمالات لإنشاء تجارب ويب جميلة وتفاعلية. ستتعمّق هذه المشاركة في مدوّنتنا في الحالة الحالية لتنسيق CSS، وستستكشف بعض الميزات الجديدة الأكثر تأثيرًا التي تعيد تعريف طريقة إنشاء تطبيقات الويب، والتي تم عرضها مباشرةً في مؤتمر Google I/O لعام 2024.

تجارب تفاعلية جديدة

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

الصور المتحركة التي يتم تشغيلها من خلال الانتقال للأعلى أو للأسفل

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

إنشاء صور متحركة يتم تشغيلها من خلال الانتقال إلى الأسفل أو للأعلى

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

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

@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، ولاحظنا انخفاضًا في متوسط استخدام وحدة المعالجة المركزية من% 50 إلى% 2 أثناء الانتقال إلى الأسفل أو الأعلى. - "أندي وياهليم، كبير مهندسي البرمجيات في Tokopedia"

مستقبل تأثيرات الانتقال

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

وسنضيف المزيد من ميزات الانتقال إلى الأسفل أو الأعلى في المتصفحات في المستقبل. يعرض العرض الترويجي التالي مجموعة من هذه الميزات المستقبلية. ويستخدم الرمز البرمجي CSS scroll-start-target لضبط التاريخ والوقت الأوليَين في أداة الاختيار، وحدث JavaScript scrollsnapchange لتعديل تاريخ العنوان، ما يسهّل مزامنة البيانات مع الحدث المُجمَّع.

يمكنك أيضًا الاستفادة من ذلك لتعديل أداة اختيار في الوقت الفعلي باستخدام حدث JavaScript scrollsnapchanging.

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

للاطّلاع على مزيد من المعلومات حول بدء استخدام الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل، أطلق فريقنا سلسلة فيديوهات جديدة يمكنك العثور عليها على قناة Chrome للمطوّرين على YouTube. في هذا الدرس، ستتعرّف على أساسيات الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل من Bramus Van Damme، بما في ذلك آلية عمل الميزة والمفردات والطُرق المختلفة لإنشاء التأثيرات وكيفية دمج التأثيرات لإنشاء تجارب غنية. ننصحك بمشاهدة هذه السلسلة الرائعة من الفيديوهات.

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

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

وتعد 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;
}

عرض فئات الانتقال

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

عرض أنواع الانتقالات

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

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

يمكنك إعداد الأنواع ضمن دالة document.startViewTransition التي تقبل الآن عنصرًا. update هي دالة ردّ الاتصال التي تعدّل عنصر DOM، وtypes هو صفيف يحتوي على الأنواع.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

عمليات الانتقال لمشاهدة صفحات متعددة

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

تتضمّن مجموعة الميزات الجديدة هذه على مستوى المستندات تجارب الويب التي تقع ضمن المصدر نفسه، مثل الانتقال من web.dev إلى web.dev/blog، ولكنّ ذلك لا يشمل الانتقال من مصدر إلى آخر، مثل الانتقال من web.dev إلى blog.web.dev أو إلى نطاق آخر مثل google.com.

من الاختلافات الرئيسية بين انتقالات عرض المستند نفسه أنّك لا تحتاج إلى إنهاء الانتقال برمز document.startViewTransition(). بدلاً من ذلك، يمكنك تفعيل كلتا الصفحتَين المعنيّتَين بعملية انتقال العرض باستخدام قاعدة at-rule في CSS‏ @view-transition.

@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 ومجموعة منتدى Open UI وWHATWG (مجموعة عمل تكنولوجيا تطبيقات النص الفائق على الويب).

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

يتألّف القائمة المنسدلة من عدّة أجزاء وتتضمّن العديد من الحالات التي يجب أخذها في الاعتبار، مثل:

• عمليات ربط لوحة المفاتيح (للدخول إلى التفاعل أو الخروج منه)
• النقر بعيدًا لإغلاق الإشعار
• إدارة النوافذ المنبثقة النشطة (إغلاق النوافذ المنبثقة الأخرى عند فتح نافذة منبثقة)
• إدارة التركيز على علامة التبويب
• عرض قيمة الخيار المحدّدة
• أسلوب التفاعل مع السهم
• إدارة الحالة (مفتوح/مغلق)

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

واجهة برمجة التطبيقات Popover API

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

موضع الرابط

لم تكن النافذة المنبثقة سوى بداية القصة. يسرّنا الإعلان عن توفّر تحديد موضع العنصر الأساسي في الإصدار 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;
}

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

يستخدم هذا المثال دالة الربط لإعداد موضع الربط باستخدام الخصائص المادية لـ 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

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

كخطوة تالية لواجهة برمجة التطبيقات 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 تجربة المطوّر التعريفية التي توفّر popovertarget نوافذ منبثقة، تم تسويتها لجميع العناصر التفاعلية، بما في ذلك <dialog> و<details> و<video> و<input type="file"> وغير ذلك.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

عنصر اختيار قابل للتنسيق

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

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

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

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>

مزيد من المعلومات عن استخدام hr في 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 لتنسيق الكتل

ومن التغييرات الرائعة الأخرى إمكانية استخدام آليات المركزية مثل align-content في تنسيق الكتل. وهذا يعني أنّه يمكنك الآن تنفيذ إجراءات مثل التوسيط العمودي داخل div بدون الحاجة إلى تطبيق تنسيق شبكة أو تنسيق مرن، وبدون تأثيرات جانبية، مثل منع تصغير الهامش، والتي قد لا تريدها من خوارزميات التنسيق هذه.

لقطة شاشة

عرض توضيحي مباشر

div {
  align-content: center;
}

التفاف النص: مظهر متوازن وجميل

في ما يتعلّق بالتنسيق، تم إجراء تحسين جيد على تنسيق النص من خلال إضافة text-wrap: balance وpretty. يتم استخدام text-wrap: balance لإنشاء كتلة نصية أكثر اتساقًا، في حين تركّز text-wrap: pretty على تقليل الكلمات المفردة في السطر الأخير من النص.

h1 {
  text-wrap: balance;
}

اطّلِع على مزيد من المعلومات عن text-wrap: balance.

تعديلات على الطباعة الدولية

شهد العام الماضي الكثير من التعديلات على التنسيق الطباعي لميزات النصوص باللغة الصينية واليابانية والكورية، مثل ميزة word-break: auto-phrase التي تُلفّ السطر عند حدود العبارة الطبيعية.

وtext-spacing-trim، الذي يطبّق ميزة "محوّر المسافة بين الأحرف" بين أحرف علامات الترقيم لتحسين سهولة قراءة الطباعة الصينية واليابانية والكورية للحصول على نتائج أكثر إرضاءً للعين.

بنية الألوان النسبية

في عالم تنسيق الألوان، شهدنا تعديلاً كبيرًا في بنية الألوان النسبية.

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

: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().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

إذا اختار المستخدم مظهرًا فاتحًا، سيكون للزر خلفية زرقاء فاتحة. إذا اختار المستخدم مظهرًا داكنًا، سيكون للزر خلفية زرقاء داكنة.

أداة اختيار :has()

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

يتيح لك أداة الاختيار :has() التحقّق مما إذا كان العنصر الثانوي يتضمّن عناصر ثانوية معيّنة، أو ما إذا كانت هذه العناصر الثانوية في حالة معيّنة، ويمكن أن تعمل بشكل أساسي كأداة اختيار للعنصر الرئيسي أيضًا.

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

"باستخدام أداة الاختيار ‎ :has()‎، تمكّنا من إيقاف عملية التحقّق المستندة إلى JavaScript لاختيار المستخدم واستبدالها بحلّ CSS يعمل بسلاسة ويقدّم التجربة نفسها التي كانت متوفرة من قبل". -أمان سوني، رئيس فريق التكنولوجيا، PolicyBazaar

طلبات البحث عن الحاويات

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

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

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

@property

وأخيرًا، نحن متحمّسون لطرح @property في الإصدار الأساسي قريبًا جدًا. هذه ميزة رئيسية لتوفير معنى دلالي للمواقع المخصّصة في CSS (المعروفة أيضًا باسم متغيّرات CSS)، كما تتيح مجموعة كبيرة من ميزات التفاعل الجديدة. تتيح @property أيضًا المعنى السياقي والتحقّق من النوع والقيم التلقائية والقيم الاحتياطية في CSS. يتيح ذلك استخدام ميزات أكثر فعالية، مثل طلبات البحث بنمط النطاق. هذه ميزة لم تكن متاحة من قبل، وهي توفّر الآن الكثير من العمق للغة CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

الخاتمة

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

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

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

للاطّلاع على مزيد من المعلومات حول هذه الميزات الجديدة عند طرحها، يمكنك متابعتنا على developer.chrome.com وweb.dev حيث يشارك فريقنا آخر الأخبار حول تكنولوجيات الويب. جرِّب الرسومات المتحرّكة المستندة إلى الانتقالات أو عرض الانتقالات أو موضع الربط أو حتى الاختيار الذي يمكن تطبيق نمط عليه، وأخبِرنا برأيك. نحن هنا للاستماع إليك ومساعدتك.