بنية جديدة لاستعلامات وسائط النطاق

اكتشف كيف يمكن للبنية الجديدة هذه تبسيط الاستعلامات عن الوسائط.

Rachel Andrew

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

توضح الأمثلة التالية كيف يمكن أن تبسط استعلاماتك.

تتم كتابة اختبار الاستعلام النموذجي عن الوسائط للحد الأدنى لعرض إطار العرض على النحو التالي:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

تسمح البنية الجديدة باستخدام عامل تشغيل مقارنة:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

اختبار الحد الأقصى للعرض:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

والإصدار الذي يستخدم بناء جملة المستوى 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

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

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

يمكن إعادة كتابة ذلك في البنية الجديدة على النحو التالي:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

تندرج الميزة التي تختبرها، في هذه الحالة width، بين القيمتين.

بالإضافة إلى جعل الاستعلامات عن الوسائط أقل طولاً، فإن البنية الجديدة لها ميزة الدقة. يتضمّن طلب البحث min- وmax- القيم المحدّدة، على سبيل المثال اختبارات min-width: 400px بعرض 400 بكسل أو أكبر. تتيح لك بناء الجملة الجديد أن تكون أكثر وضوحًا حول ما تقصده وتجنب احتمالية تعارُض الاستعلامات.

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