نشكرك على متابعة مؤتمر Google I/O. مشاهدة المحتوى عند الطلب

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

@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.
}

وعلى الرغم من أن المصطلحين "عمودي" و "landscape" يُستخدم غالبًا للإشارة إلى اتجاه الأجهزة الجوّالة، إلا أنّ ميزة وسائط 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%);
  }
}