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

Una Kravets

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

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

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

الصور المتحركة المستندة إلى التمرير

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

إنشاء صور متحركة بالتمرير

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

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

@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']
})

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

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

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

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