الميزات الجديدة في واجهة مستخدم الويب

Bramus
Una Kravets

تاريخ النشر: 1 يوليو 2026

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

في ما يلي ملخّص شامل لكل الميزات المذكورة في جلسة "الميزات الجديدة في واجهة مستخدم الويب"، منظَّمة حسب مجموعتنا الأساسية من مبادئ تجربة المستخدم.

الجزء 1: احترام الإعدادات المفضّلة للمستخدم

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

1- contrast-color()

تأخذ دالة CSS contrast-color() لونًا كإدخال وتعرض تلقائيًا إما black أو white، استنادًا إلى اللون الذي يتضمّن تباينًا أعلى مع لون الإدخال استنادًا إلى خوارزمية الحد الأدنى للتباين في معيار WCAG AA. يضمن ذلك سهولة القراءة بدون الحاجة إلى الحفاظ يدويًا على أزواج ألوان النص والخلفية.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

مزيد من المعلومات حول "contrast-color()"

2- light-dark()

تتيح لك دالة CSS light-dark() تحديد قيمتَين مختلفتَين (ألوان أو صور) لخاصية ما، إحداهما للوضع الفاتح والأخرى للوضع الداكن، وذلك ضمن تعريف واحد. يختار المتصفّح تلقائيًا لون التباين الصحيح استنادًا إلى color-scheme النشط (الذي يجب ضبطه على light أو dark أو light dark على :root أو عنصر رئيسي).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

الجديد في light-dark() هو أنّه لم يعُد يقتصر على قيم الألوان فقط. واعتبارًا من الإصدار 150 من Chrome، يقبل الآن أيضًا قيمتَين للصورة.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3- وظائف CSS المخصّصة (@function)

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

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

بالإضافة إلى طلبات البحث عن أنماط الحاويات والدالة CSS if()، يمكنك إنشاء دالة --light-dark() مخصّصة تعمل مع أي نوع من القيم، كما هو موضّح في هذا العرض التوضيحي:

4. طلبات البحث عن أنماط الحاويات

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

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

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

مزيد من المعلومات عن طلبات البحث المتعلقة بالأسلوب

5- الدالة if() في CSS

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

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

في العرض التوضيحي السابق، يتم استخدام الدالة if() لإنشاء قاعدة ألوان متباينة ذات مظهر موحّد استنادًا إلى ناتج الدالة contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

‫6. @supports at-rule()

تتيح الدالة at-rule() في CSS التي يمكن استخدامها مع @supports للمطوّرين إمكانية رصد الميزات لمعرفة ما إذا كان المتصفّح يتعرّف على قاعدة at معيّنة، مثل @starting-style أو @view-transition.

على سبيل المثال، للتحقّق من إمكانية استخدام @function، استخدِمها على النحو التالي:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

يتيح استخدام at-rule() التحقّق من التوافق الأساسي مع قاعدة ‎@ نفسها فقط، ولا يمكن استخدامه لاختبار واصفات أو مقدمات أو كتل كاملة من قواعد ‎@ معيّنة. تتوفّر حلول بديلة لرصد ميزات، مثل طلبات البحث الثابتة أو طلبات البحث المتعلقة بالأسلوب.

مزيد من المعلومات حول "@supports at-rule"

‫7. <meta name="text-scale">

تتيح علامة text-scale الوصفية في HTML للصفحة إمكانية ضبط حجم الخط الأولي للعنصر الجذر <html> بما يتناسب مع إعدادات حجم النص على مستوى نظام التشغيل والمتصفح، وهو أمر مهم بشكل خاص لمنصات الأجهزة الجوّالة.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

عند تطبيق هذا التغيير، يحدّد نظام التشغيل الآن حجم الخط في العنصر html، لذا لن تحتاج إلى ضبط font-size أساسي. إذا كنت تستخدم أطوالاً بوحدات نسبية مثل em وrem، ستستند قيم البكسل المحسوبة إلى حجم الخط الأساسي هذا.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

من علامة التبويب "العرض" في "أدوات مطوّري البرامج"، يمكنك محاكاة حجم الخط المفضّل. استخدِم القائمة المنسدلة لتغيير القيمة.

مزيد من المعلومات حول "<meta name=text-scale>"

الجزء 2: تنفيذ التفاعلات الطبيعية

تُعدّ الحركة الجسدية السلسة والإيماءات الطبيعية من العناصر الأساسية لجعل تجارب الويب تبدو ملموسة مثل التطبيقات الأصلية. وتسهّل عليك CSS الحديثة تحقيق ذلك.

8. دالة التسهيل linear()

تتيح لك دالة تغيير السرعة linear() إنشاء منحنيات انتقال مخصّصة ومعقّدة (مثل الارتدادات أو النوابض أو التجاوزات المرنة) من خلال الاستيفاء الخطي بين عدد غير محدود من نقاط التقدّم المحدّدة.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

في العرض التوضيحي التالي، يتم استخدام linear() لمنح مربع الحوار تغيير السرعة الطبيعي عند ظهوره أو إخفائه.

مزيد من المعلومات حول "linear()"

‫9. @starting-style

تحدّد قاعدة @starting-style في CSS القيم الأولية للسمات في عنصر تريد الانتقال منه عند عرض العنصر لأول مرة في DOM أو عند تغيُّر display من none إلى قيمة مرئية، وذلك لتفعيل انتقالات سلسة عند الدخول.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

في العرض التوضيحي السابق، يتم استخدام هذا الخيار لتحريك <dialog> عند ظهوره للمرة الأولى.

‫10- transition-behavior: allow-discrete

تتيح لك السمة transition-behavior (التي تُستخدَم غالبًا كـ allow-discrete في الاختصار transition) الانتقال بين السمات المنفصلة، مثل display أو overlay، ما يضمن بقاء العناصر مرئية أثناء الصور المتحركة للخروج قبل إخفائها.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() وsibling-count()

تعرض دالتا CSS sibling-index() وsibling-count() أعدادًا صحيحة تمثّل موضع العنصر المستند إلى 1 بين العناصر الشقيقة وإجمالي عدد العناصر الشقيقة، على التوالي. وهي مثالية لاحتساب تأخيرات الصور المتحركة المتداخلة بشكل ديناميكي في CSS بدون JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

في هذا العرض التوضيحي، يتم ترتيب محتوى مربّع الحوار بشكل متداخل باستخدام sibling-index() في animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. إغلاق مربّع الحوار بشكل سريع (السمة closedby)

تتيح لك السمة closedby في العنصر <dialog> (بالقيمة any) استخدام سلوك "الرفض الخفيف" التوضيحي، وإغلاق مربّعات الحوار المشروطة تلقائيًا عند النقر خارجها أو الضغط على ESC، بدون الحاجة إلى JavaScript مخصّص.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

يمكنك تجربته في العرض التوضيحي السابق.

‫13. corner-shape

تتيح السمة المختصرة التجريبية corner-shape للمطوّرين تعديل الزوايا الدائرية (من border-radius) لإنشاء أشكال مرئية مخصّصة، مثل bevel أو scoop أو notch أو squircle (من خلال superellipse()). وتتطابق الحدود والظلال ومخططات التركيز تلقائيًا مع الشكل.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

الجزء 3: توفير ميزة التنقّل الموجّه

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

14. انتقالات العرض في المستند نفسه

توفّر عمليات الانتقال في المستند نفسه، وهي جزء من View Transition API، آلية لإنشاء صور متحركة بين حالات نموذج المستند (DOM) في تطبيقات الصفحة الواحدة (SPA) من خلال التقاط لقطات وانتقالها باستخدام CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

مزيد من المعلومات حول عمليات الانتقال بين طرق العرض في المستند نفسه

15. انتقالات العرض بين المستندات

توسّع هذه الميزة نطاق View Transition API ليشمل تطبيقات الصفحات المتعددة، ما يتيح لك إنشاء انتقالات سلسة ومتحركة عند التنقّل بين المستندات المختلفة من خلال مطابقة العناصر التي تحمل السمة view-transition-name نفسها على مستوى الصفحات.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

مزيد من المعلومات حول عمليات الانتقال بين طرق العرض في المستندات

16. عمليات نقل العرض على مستوى العنصر

تتيح لك عمليات الانتقال بين طرق العرض على مستوى العنصر، التي تم طرحها في الإصدار 147 من Chrome، تنفيذ عملية انتقال بين طرق العرض على شجرة فرعية معيّنة من DOM فقط (باستخدام element.startViewTransition()) مع إبقاء بقية الصفحة نشطة وتفاعلية.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

عند بدء انتقال عرض نطاقه عنصر، يتم تنفيذه بشكل مستقل: فهو يبحث فقط في شجرة فرعية عن العناصر التي تتضمّن view-transition-name ويتم إدراج الفئة الزائفة ::view-transition في جذر النطاق نفسه. يمكن إجراء العزل بفضل التطبيق التلقائي لـ view-transition-scope: all.

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

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

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

مزيد من المعلومات حول عمليات الانتقال بين المشاهد على مستوى العنصر

17. عمليات الانتقال بين طَورَين

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

مزيد من المعلومات حول عمليات الانتقال بين المشاهد على مرحلتَين

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. الصور المتحركة التي يتم تشغيلها عند التمرير

تتضمّن الميزات الجديدة في Chrome رسومات متحرّكة يتم تشغيلها عند التمرير. تؤدي الحركات التي يتم تشغيلها عند التنقّل إلى تشغيل حركة CSS عادية مستندة إلى الوقت عند تجاوز حدود التنقّل (باستخدام timeline-trigger لتحديد المشغِّل وanimation-trigger لتشغيله)، ما يوفّر بديلاً تصريحيًا لـ IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

الآلية الأساسية للصور المتحركة التي يتم تشغيلها عند التمرير هي مشغّلات المخطط الزمني التي تكون نشطة أو غير نشطة.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

فعِّل أداة العرض في العرض التوضيحي التالي لمعرفة ما يحدث: النطاق الأول هو نطاق التفعيل ويحدّد وقت تفعيل المشغّل. النطاق الثاني هو النطاق النشط الذي يحدّد المدة التي يجب أن يظلّ فيها نشطًا.

مزيد من المعلومات عن الصور المتحركة التي يتم تشغيلها عند التمرير

‫20. scroll-target-group: auto

يمكنك الآن إنشاء أداة scroll-spy أصلية في CSS تعمل على تمييز روابط التنقّل تلقائيًا استنادًا إلى موضع التمرير لدى المستخدم. من خلال ضبط scroll-target-group: auto على قائمة التنقّل، يضبط المتصفّح تلقائيًا aria-current="true" ويطبّق الفئة الزائفة :target-current على الرابط النشط. يمكن بعد ذلك استخدام :target-current لتنسيق الروابط النشطة بشكل أكبر.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

مزيد من المعلومات حول CSS scroll-spy مع scroll-target-group

21. خيار الحاوية scrollIntoView()

تكتسب الطريقة scrollIntoView() الخيار container. يؤدي ضبط target.scrollIntoView({container: 'nearest'}) إلى حصر التمرير في أقرب عنصر تمرير رئيسي بدلاً من أن يرتفع إلى الأعلى، ما يمنع التمرير على مستوى الصفحة من التسبب في فقدان التركيز.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

استخدِم مربّع الاختيار في هذا العرض التوضيحي لإيقاف الخيار وتفعيله:

مزيد من المعلومات حول "container: "nearest""

22. الانتقال الآلي القابل للانتظار

تعرض الآن جميع طرق التمرير الآلية (مثل scroll() وscrollTo() وscrollIntoView()) وعدًا. يتيح ذلك للمطوّرين await إكمال الصور المتحركة للتمرير السلس قبل تنفيذ المنطق اللاحق (مثل إضافة تأثير تمييز).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

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

الجزء 4: زيادة المحتوى وتقليل الضوضاء

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

23. طلبات البحث المتعلقة بحالة التمرير (scrolled)

تتيح طلبات البحث scroll-state، وهي جزء من طلبات البحث في حاويات CSS، تحديد نمط العناصر التابعة استنادًا إلى حالة التمرير في الحاوية (باستخدام container-type: scroll-state). يكتشف طلب البحث scrolled (على سبيل المثال، scroll-state(scrolled: bottom)) اتجاه التمرير النسبي الأخير، ما يتيح استخدام أنماط مثل "شريط Hidey".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

مزيد من المعلومات عن نمط "Hidey Bar"

24. طلبات البحث في الحاويات الثابتة

تتضمّن ميزة "تحديد موضع العنصر الثابت في CSS" طلبات البحث في الحاويات المستندة إلى عناصر ثابتة، ما يتيح لك التحقّق من موضع الاحتياط النشط حاليًا (مثل fallback: bottom أو fallback: flip-block) في عنصر مستند إلى عنصر ثابت، ما يتيح إجراء تعديلات ديناميكية على تصميم عنصر مستند إلى عنصر ثابت (مثل أسهم تلميحات الأدوات).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

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

25. CSS border-shape

تتيح لك السمة border-shape تحديد حدود غير مستطيلة باستخدام بنية الشكل نفسها المستخدَمة في clip-path. على عكس القص، تحافظ border-shape على الحدود والمخططات والتظليل متوافقًا بصريًا مع الشكل المخصّص. وهي تتجاوز أيضًا إمكانات corner-shape، لأنّ border-shape أكثر مرونة.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. الدالة shape() في CSS

تتيح لك الدالة shape() في CSS تحديد مسارات هندسية معقّدة مضمّنة في CSS. يمكن استخدامها مع سمات مثل clip-path أو border-shape أو shape-outside لإنشاء أشكال مجانية غير مستطيلة يمكن أن يطفو المحتوى عليها.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. الموضع الثابت لكل محور

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

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

تتوفّر هذه الميزة للاختبار في الإصدار 148 من Chrome مع تفعيل ميزة "ميزات تجريبية لمنصة الويب".

مزيد من المعلومات حول position: sticky لكل محور

الجزء 5: التكيّف مع شكل الجهاز

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

28. إيماءات تجاوز حد التمرير (المناطق القابلة للتمرير السريع)

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

يعمل فريق Chrome على حلّ مقترَح مستنِد إلى التصريح، وذلك بالتعاون مع مجموعة OpenUI، ويتيح لك هذا الحلّ إنشاء مناطق أصلية قابلة للتمرير المستنِد إلى الإيماءات (مثل قوائم Gmail القابلة للتمرير أو القوائم الجانبية القابلة للتجاهل بالتمرير) باستخدام overscrollcontainer وأدوات استدعاء الأوامر، ما يتيح التفاعل معها بشكل طبيعي باستخدام اللمس والتمرير.

مزيد من المعلومات حول إيماءات تجاوز حد التمرير

29. HTML-in-Canvas

تمثّل واجهة برمجة التطبيقات HTML-in-Canvas تغييرًا جذريًا في النموذج، ما يتيح للمطوّرين وضع عناصر DOM حقيقية داخل <canvas> (باستخدام السمة layoutsubtree). تظلّ هذه العناصر قابلة للبحث فيها والوصول إليها بالكامل، وتتوافق مع ميزات المتصفّح، مثل الملء التلقائي، مع السماح لبرامج التظليل WebGL/WebGPU بالتفاعل معها بشكلٍ أصلي.

جولة سريعة

نظرة سريعة على بعض الميزات الفعّالة الأخرى التي تدفع الويب إلى الأمام

30- نقل مع الحفاظ على حالة نموذج العناصر في المستند (moveBefore())

تتيح لك طريقة moveBefore() DOM إعادة ربط عناصر DOM (مثل تشغيل الفيديوهات أو إطارات iframe أو المدخلات المركّزة) بدون إتلاف حالتها أو تشغيل عمليات إعادة التحميل.

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

مزيد من المعلومات حول "moveBefore()"

31. CSS text-fit

‫text-fit هي خاصية تجريبية في CSS تعمل على تغيير حجم الخط بشكل ديناميكي ليتناسب تمامًا مع عرض العنصر الحاوي (مثل text-fit: grow per-line-all).

مزيد من المعلومات حول "text-fit"

‫32. ‫CSS text-box (text-box-trim وtext-box-edge)

تعمل السمة text-box (والسمات المختصرة text-box-trim وtext-box-edge) على تقليل المساحة العمودية (المسافة البادئة) أعلى النص وأسفله، ما يضمن محاذاة عمودية وتوسيطًا مثاليَين.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

مزيد من المعلومات حول "text-trim"

‫33. زخارف الفجوات في CSS

توفّر زخارف الفجوات في CSS column-rule لشبكات CSS ونموذج flexbox، وتضيف السمة الجديدة row-rule، ما يتيح للمطوّرين تصميم المزاريب بين الصفوف والأعمدة. لن تحتاج بعد الآن إلى التعامل مع الحدود أو العناصر الزائفة لتصميم القواعد بين الصفوف والأعمدة.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

مزيد من المعلومات حول CSS Gap Decorations

‫34. وحدات عرض متوافقة مع شريط التمرير (vw وvh وما إلى ذلك)

تطرح وحدات إطار العرض، مثل vw وvh، تلقائيًا حجم أشرطة التمرير (إذا كان من المؤكّد أنّها ستكون مرئية، باستخدام overflow-y: scroll أو scrollbar-gutter: stable المُحدَّدة في :root)، ما يمنع حدوث تجاوز أفقي غير مقصود عند ضبط العناصر على 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

مزيد من المعلومات حول وحدات إطار العرض المتوافقة مع أشرطة التمرير

‫35. الوصول إلى العناصر الزائفة باستخدام JavaScript

تعرض واجهات برمجة التطبيقات على الويب الآن عناصر CSS الزائفة (مثل ::before أو ::after) إلى JavaScript.

يمكنك استرداد مثيل CSSPseudoElement باستخدام Element.pseudo(type) والتحقّق من العنصر الزائف الذي أدّى إلى تشغيل حدث باستخدام Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

مزيد من المعلومات حول "CSSPseudoElement"

الخاتمة

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