طلب بحث الوسائط عن تحديث CSS

يجب تكييف واجهة المستخدم مع إمكانات معدّل تحديث الشاشة.

Adam Argyle

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

تمنحك ميزة update media query طريقة لتكييف واجهة المستخدم مع معدّل التحديث في الجهاز. يمكن أن تُبلغ الميزة عن قيمة fast أو slow أو none ذات صلة بقدرات الأجهزة المختلفة.

توافق المتصفّح

  • Chrome: 113.
  • ‫Edge: 113
  • Firefox: 102
  • ‫Safari: 17

المصدر

الأجهزة ومعدّل التحديث

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

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

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

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

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

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

@media (update: none) {
  /* one time render like printed paper */
}

في أداة CodePen التالية، يمكنك الاطّلاع على صورة متحركة محسّنة بشكل تدريجي عند التمرير باستخدام طلب البحث الجديد هذا للوسائط:

مزيد من الموارد