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

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

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

تُعدّ 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(). بدلاً من ذلك، يمكنك تفعيل ميزة "الانتقال بين طرق العرض" في كلتا الصفحتَين المعنيّتَين باستخدام قاعدة 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. لمزيد من المعلومات حول عمليات انتقال العرض في التطبيقات المتعددة الصفحات، بما في ذلك كيفية إعدادها بأفضل أداء باستخدام العرض المسبق، يمكنك الاطّلاع على المحاضرة التالية التي قدّمها Bramus Van Damme:

مكوّنات واجهة المستخدم المتوافقة مع المحرّك: تبسيط التفاعلات المعقّدة

إنّ إنشاء تطبيقات ويب معقّدة ليس بالأمر السهل، ولكنّ لغتَي CSS وHTML تتطوّران لجعل هذه العملية أسهل بكثير. تساهم الميزات والتحسينات الجديدة في تبسيط عملية إنشاء عناصر واجهة المستخدِم، ما يتيح لك التركيز على تقديم تجارب رائعة. ويتم ذلك من خلال جهد تعاوني يشمل العديد من هيئات المعايير الرئيسية ومجموعات المنتدى، بما في ذلك CSS Working Group وOpen UI community Group وWHATWG (مجموعة عمل تكنولوجيا تطبيقات النص الفائق على الويب).

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

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

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

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

The Popover API

أولاً، أطلقنا سمة عامة باسم popover، ويسرّني أن أعلن أنّها أصبحت متاحة حديثًا في Baseline قبل بضعة أسابيع.

يتم إخفاء عناصر Popover باستخدام display: none إلى أن يتم فتحها باستخدام عنصر استدعاء، مثل زر أو باستخدام JavaScript. لإنشاء عنصر popover أساسي، اضبط سمة popover على العنصر، واربط المعرّف الخاص به بزر باستخدام popovertarget. الآن، الزر هو المشغّل،

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

بعد تفعيل السمة popover، يتعامل المتصفّح مع العديد من السلوكيات الرئيسية بدون أي نصوص برمجية إضافية، بما في ذلك:

• الترقية إلى الطبقة العليا: طبقة منفصلة فوق بقية الصفحة، لذا لن تحتاج إلى استخدام z-index.
• وظيفة الإغلاق السريع: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاقها وإعادة التركيز.
• الإدارة التلقائية لتركيز علامات التبويب: يؤدي فتح النافذة المنبثقة إلى إيقاف علامة التبويب التالية داخل النافذة المنبثقة.
• اختصارات لوحة المفاتيح المضمّنة: سيؤدي الضغط على المفتاح esc أو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز.
• عمليات الربط التلقائية للمكوّنات: : يربط المتصفّح بشكل دلالي بين لوحة العرض المنبثقة وعنصر التشغيل.

قد تستخدم واجهة برمجة التطبيقات هذه اليوم بدون أن تدرك ذلك. استخدمت GitHub النافذة المنبثقة في قائمة "جديد" على صفحتها الرئيسية وفي نظرة عامة على مراجعة طلبات السحب. وقد تم تحسين هذه الميزة تدريجيًا باستخدام popover polyfill، الذي أنشأته Oddbird مع بعض الدعم الكبير من Keith Cirkel من GitHub، وذلك لتكون متوافقة مع المتصفّحات القديمة.

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

يمكنك بدلاً من ذلك استخدام anchor-name مباشرةً في دالة 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، نمط تسطير ثابتًا في عناصر القائمة عند التمرير فوقها أو الانتقال إليها باستخدام المفتاح Tab.

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

مع عناصر التحديد القابلة للتخصيص، لا حدود للإمكانيات. أعجبني بشكل خاص أداة اختيار البلد هذه المستوحاة من 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 and pretty

في ما يتعلّق بالتصميم، تم إدخال تحسين رائع على تصميم النص من خلال إضافة 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() هي تحسين مريح يسهّل خيارات تصميم الألوان حتى تتمكّن من كتابة أنماط التصميم بطريقة أكثر إيجازًا، كما هو موضّح بشكل جيد في هذا الرسم التوضيحي الذي أعدّه Adam Argyle. في السابق، كان عليك استخدام مجموعتَين مختلفتَين من الرموز البرمجية (المظهر التلقائي وطلب البحث عن الإعدادات المفضّلة للمستخدم) لإعداد خيارات المظهر. يمكنك الآن كتابة خيارات الأنماط هذه لكل من المظهرين الفاتح والداكن في سطر 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 في Baseline قريبًا جدًا. هذه ميزة أساسية لتوفير معنى دلالي لخصائص CSS المخصّصة (المعروفة أيضًا باسم متغيرات CSS)، وتتيح مجموعة من ميزات التفاعل الجديدة. تتيح @property أيضًا المعنى السياقي والتحقّق من النوع والقيم التلقائية والقيم الاحتياطية في CSS. فتح الأبواب أمام ميزات أكثر فعالية، مثل طلبات البحث المتعلقة بنطاق الأنماط هذه ميزة لم تكن متاحة من قبل، وهي تتيح الآن فهمًا أعمق للغة CSS.

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

الخاتمة

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

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

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

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