دمج استعلامات وسائط متعددة
استخدم عوامل التشغيل and وor وnot لدمج ميزات الوسائط في استعلامات معقدة
دمج استعلامات وسائط متعددة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
المعامل and
تتطلب الكلمة المفتاحية and تحقق جميع الشروط في الوقت نفسه. وهي مفيدة لاستهداف أحجام وأنواع أجهزة محددة معًا.
<div class="box">and operator demo</div>
النطاق باستخدام and
يؤدي الجمع بين min-width وmax-width باستخدام and إلى استهداف نطاق محدد من عرض منفذ العرض (أنماط الأجهزة اللوحية فقط):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
الفاصلة باعتبارها OR
تعمل الاستعلامات المفصولة بفواصل مثل OR — تُطبَّق الأنماط إذا تطابق أي استعلام:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
عامل not
ينفي not استعلام وسائط كاملًا. ويجب استخدامه بحذر — إذ يُطبَّق على تعبير الاستعلام بأكمله، وليس على الشرط الأول فقط.
<div class="doc">not operator demo</div>
not مع الأقواس (حديثًا)
تسمح استعلامات الوسائط الحديثة من المستوى 4 باستخدام not() كدالة مع ميزات فردية:
<div class="panel">not() function demo</div>
الكلمة المفتاحية only (قديمة)
كانت الكلمة المفتاحية only تُستخدم لإخفاء استعلامات الوسائط عن المتصفحات القديمة التي لا تدعم ميزات الوسائط. تتجاهلها المتصفحات الحديثة، لكنها غير ضارة.
<div class="box">only keyword demo</div>
تداخل استعلامات الوسائط (CSS Nesting)
باستخدام التداخل الأصلي في CSS، يمكن كتابة استعلامات الوسائط داخل كتل المحددات:
<div class="card">Nested media query demo</div>
الجمع بين الهاتف المحمول وHigh DPI
استهدف الأجهزة المحمولة تحديدًا (الصغيرة وذات الكثافة العالية للبكسلات):
<div class="icon"></div>
الطباعة والألوان
ميزات وسائط متعددة لأنماط الطباعة التي تُطبَّق على الطابعات الملونة فقط:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
استعلام الوسائط في @import
يمكن تطبيق استعلامات الوسائط وقت الاستيراد لتحميل ملفات أنماط كاملة بشكل مشروط، رغم أن ذلك يحجب التصيير ويجب استخدامه باعتدال:
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
الخصائص المنطقية في الاستعلامات المعقدة
كقاعدة عامة، تكون الاستعلامات الأبسط أسهل في الصيانة. تجنب ربط عدد كبير جدًا من الشروط. عندما يصبح الاستعلام معقدًا، فكّر في إعادة هيكلة أسلوب CSS بدلًا من تعقيد الاستعلام.
تحقق سريع
أي استعلام وسائط يطبّق الأنماط عندما يكون عرض منفذ العرض 600px على الأقل أو يكون الجهاز في الوضع الأفقي؟
مراجعة
يتطلب and تحقق جميع الشروط. وتعمل الفواصل باعتبارها OR بين الاستعلامات. وينفي not استعلامًا كاملًا. اجمع بين min-width وmax-width لاستهداف نطاق معين. يدعم CSS الحديث تداخل استعلامات الوسائط داخل كتل المحددات وبنية النطاقات لكتابة تعبيرات أوضح.
الأسئلة الشائعة
هل درس «دمج استعلامات وسائط متعددة» مجاني؟
نعم — نص درس «دمج استعلامات وسائط متعددة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «دمج استعلامات وسائط متعددة»؟
استخدم عوامل التشغيل and وor وnot لدمج ميزات الوسائط في استعلامات معقدة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «دمج استعلامات وسائط متعددة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الصياغة ونقاط التوقف الشائعة
- استعلامات العرض والارتفاع والاتجاه
- Prefers-Color-Scheme وPrefers-Reduced-Motion
- دمج استعلامات وسائط متعددة