ميزات الوسائط

ملخص حول جميع الطرق التي تتيح لك بها ميزات الوسائط الاستجابة للأجهزة والإعدادات المفضّلة.

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

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

تذكر أن استعلام الوسائط يشتمل على نوع وسائط اختياري وميزة وسائط إلزامية. لم تطرأ أيّ تغييرات كبيرة على أنواع الوسائط على مرّ السنين. لا تزال هناك أربع قيم محتملة فقط:

@media all
@media screen
@media print
@media speech

من ناحية أخرى، توسعت ميزات الوسائط بشكل كبير. يمكن للمصممين الآن مقابلة المستخدمين إلى ما بعد منتصف الطريق، وتكييف التصميمات لتناسب أكثر بكثير من مجرد حجم الشاشة.

سمات إطار العرض

إلى حد كبير، أشهر استعلامات عن الوسائط على الويب هي تلك التي تتناول عرض إطار العرض. ولكن حتى هنا، يتم تقديم خيار لك. يمكنك استخدام ميزة الوسائط max-width لتطبيق أنماط أقل من عرض معيّن، أو يمكنك استخدام ميزة الوسائط min-width لتطبيق أنماط أعلى من عرض معيّن.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

أنا شخصيًا أحب استخدام min-width. أطبق أنماط التخطيط بطريقة إضافية. أُدخل قواعد تنسيق جديدة في كل نقطة توقف بدلاً من التراجع عن القواعد السابقة.

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

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

ويمكنك استخدام ميزة الوسائط max-height إذا أردت ذلك. في هذه الحالة، يتم تثبيت العنوان تلقائيًا، ولكن تتم إزالة معدّل الاستخدام إذا لم تكن هناك مساحة رأسية كافية.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

لا ينطبق الاختيار بين البادئتين min- وmax- على width وheight فقط. وتوفّر ميزة الوسائط aspect-ratio الخيار نفسه. وتوفّر لك أيضًا إصدارًا غير مسبوق إذا كنت تريد تطبيق أنماط بنسبة دقيقة من العرض إلى الارتفاع.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

قد يؤدي توفير أنماط مختلفة لنِسب عرض إلى ارتفاع مختلفة إلى نجاحك في تحقيق الأمر بسرعة. إذا لم تكن بحاجة إلى هذا المستوى الدقيق من التحكّم، قد تناسب ميزة الوسائط في orientation احتياجاتك بشكل أفضل. وتشتمل على قيمتين محتملتين: portrait أو landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

على الرغم من أنّ المصطلحين "عمودي" و"أفقي" يتم استخدامهما في أغلب الأحيان للإشارة إلى اتجاه الأجهزة الجوّالة، لا يمكن استخدام ميزة الوسائط في "orientation" على جهاز معيّن. تبلغ قيمة orientation نافذة المتصفح بملء الشاشة على أي كمبيوتر محمول عادي landscape.

الشاشات

تختلف كثافات وحدات البكسل في الشاشات المختلفة، حيث تُقاس بوحدة dpi ونقطة لكل بوصة. يمكنك ضبط الأنماط لكثافات وحدات بكسل مختلفة باستخدام ميزة الوسائط في resolution. مثل aspect-ratio، يتوفّر resolution بثلاثة أنواع: الحدّ الأدنى والحد الأقصى والدقيق.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

قد لا تحتاج أبدًا إلى استخدام أي استعلام عن الوسائط في resolution. عادةً ما تكون كثافة وحدات البكسل مشكلة للصور فقط، بينما الصور المتجاوبة مع مختلف الأجهزة هي طريقة للتعامل مع كثافة وحدات البكسل مباشرةً في HTML.

من ناحية أخرى، CSS هي المكان الذي تحدد فيه الرسوم المتحركة والانتقالات. ويمكنك ضبط هذه الصور المتحركة والانتقالات للاستجابة إلى معدلات التحديث المختلفة باستخدام ميزة الوسائط في update. تعرض ميزة الوسائط هذه إحدى القيم الثلاث: none وslow وfast.

في حال استخدام قيمة update التي تبلغ none، لن يتم حفظ معدّل التحديث. فمثلاً، لا يمكن تعديل صفحة مطبوعة.

تشير القيمة update التي تبلغ slow إلى أنّه لا يمكن تحديث الشاشة بسرعة. شاشة الحبر الإلكتروني هي أحد الأمثلة على شاشة ذات معدل تحديث بطيء.

تشير القيمة update التي تبلغ fast إلى أنّه يتم إعادة تحميل الشاشة بسرعة كافية للتعامل مع الصور المتحركة والانتقالات.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

لا ترتبط جميع جوانب الشاشة بإمكانيات الأجهزة. في الوحدة حول المواضيع، اطّلعت على كيفية تحديد الخصائص في ملف بيان تطبيق الويب. يُطلق على إحدى هذه السمات اسم display، ويمكنك تحديدها بقيمة fullscreen أو standalone أو minimum-ui أو browser. تتيح لك ميزة وسائط display-mode المقابلة تخصيص الأنماط لهذه الخيارات المختلفة.

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

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

اللون

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

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

هناك ميزة وسائط مقابلة من color.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

بالنسبة إلى الشاشات الملونة، يمكنك كتابة طلبات بحث باستخدام ميزات الوسائط color-gamut أو color-index أو dynamic-range. تبلغ جميعها تفاصيل محددة حول إمكانات الألوان للشاشة.

في هذا المثال، يتم تعديل قيم الألوان استجابةً لميزة وسائط dynamic-range التي تسجّل الحد الأقصى للسطوع وعمق اللون ونسبة التباين في الشاشة. القيمتان المحتملتان هي standard أو high. بالنسبة إلى الشاشة العالية الدقة التي تسجّل قيمة dynamic-range تبلغ high، يتم تخصيص مساحة لون مختلفة لها باستخدام دالة color() الجديدة في CSS.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

تفاعل

ويمكن لميزات الوسائط أيضًا الإبلاغ عن نوع آلية الإدخال المستخدمة للتفاعل مع موقعك الإلكتروني: hover وany-hover وpointer وany-pointer. راجِع وحدة التفاعل للحصول على مزيد من التفاصيل.

خيارات

هناك مجموعة من طلبات البحث عن الوسائط تتيح لك الردّ على الإعدادات المفضّلة للمستخدم: prefers-color-scheme وprefers-contrast وprefers-reduced-motion. لمزيد من التفاصيل، يمكنك الاطّلاع على وحدات التصميم وتسهيل الاستخدام.

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

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

المزيد من ميزات الوسائط

ستتوفر قريبًا المزيد من ميزات الوسائط.

ستعرض ميزتا الوسائط forced-colors وinverted-colors ما إذا كان الجهاز يستخدم لوحة ألوان محدودة أو مقلوبة.

تتيح لك ميزة الوسائط scripting تعديل خدمة CSS استنادًا إلى مدى توفّر JavaScript.

ميزة وسائط تُسمى prefers-reduced-data ستتيح للمستخدمين إمكانية تحديد أنّهم متصلون باتصال تفرض تكلفة استخدام، لكي يتمكنوا من إرسال مواد عرض أصغر أو أقلّ.

ولا تزال الاقتراحات الأخرى قيد صياغة. في الوحدة التالية والأخيرة، ستتعرف على اقتراح لميزة وسائط تتناول تكوينات مختلفة للشاشة.

التحقق من فهمك

اختبر معلوماتك عن ميزات الوسائط