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

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

Adam Argyle

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

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

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

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

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

@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 التالية، يمكنك الاطّلاع على صورة متحركة محسّنة بشكل تدريجي عند التمرير باستخدام طلب البحث الجديد هذا للوسائط:

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

• المستوى 4 من طلبات الوسائط في CSS
• تعديل طلب البحث عن الوسائط على MDN