آخر الأخبار حول 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. ستتعرّف هنا على أساسيات الرسوم المتحركة المستندة إلى التمرير من 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()، بل عليك بدلاً من ذلك تفعيل كلتا الصفحتَين المشاركتَين في عملية الانتقال بين طرق العرض باستخدام قاعدة @view-transition في CSS.

@view-transition {
  navigation: auto;
}

للحصول على تأثير أكثر تخصيصًا، يمكنك استخدام JavaScript من خلال أدوات معالجة الأحداث الجديدة pageswap أو pagereveal، ما يتيح لك الوصول إلى عنصر انتقال العرض.

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

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

في المستقبل، نخطّط لتوسيع نطاق ميزة "انتقالات العرض"، بما في ذلك:

• عمليات الانتقال المحدودة النطاق: تتيح لك حصر عملية الانتقال في شجرة فرعية من نموذج المستند (DOM)، ما يتيح استمرار تفاعلية بقية الصفحة، ويتيح تنفيذ عمليات انتقال متعددة للعرض في الوقت نفسه.
• انتقالات العرض المستندة إلى الإيماءات: استخدِم إيماءات السحب أو التمرير السريع لتفعيل انتقال العرض بين المستندات للحصول على تجارب أكثر ملاءمةً على الويب.
• مطابقة عناصر التنقّل في CSS: يمكنك تخصيص انتقال العرض بين المستندات مباشرةً في CSS كبديل لاستخدام الحدثين pageswap وpagereveal في JavaScript. لمزيد من المعلومات حول عمليات انتقال العرض في التطبيقات المتعددة الصفحات، بما في ذلك كيفية إعدادها بأفضل أداء باستخدام العرض المسبق، يمكنك الاطّلاع على المحاضرة التالية التي قدّمها 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 في القائمة "جديد" على صفحتها الرئيسية وفي نظرة عامة على مراجعة طلبات السحب. وقد حسّنت هذه الميزة تدريجيًا باستخدام popover polyfill، التي أنشأتها Oddbird مع بعض الدعم الكبير من Keith Cirkel من GitHub، لتتوافق مع المتصفحات القديمة.

"لقد تمكّنا من إيقاف آلاف أسطر الرموز البرمجية نهائيًا من خلال نقلها إلى popover. تساعدنا 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;
}

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

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

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