آخر الأخبار حول 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']
})

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

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

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

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

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

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

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

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

The Popover API

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

تكون عناصر 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>

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

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

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

موضع التثبيت

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

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

لقد تلقّت تعديلات التنسيق الطباعي لميزات النص CJK الكثير من التعديلات الرائعة في العام الماضي، مثل ميزة 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;
}

الخاتمة

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

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

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

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