طلب بحث الوسائط عن تحديث 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