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

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

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

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

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

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

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

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

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

Browser Support

Source

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

إنّ طلبات البحث عن الوسائط الأكثر شيوعًا على الويب هي تلك التي تتعامل مع عرض مساحة العرض. وحتى في هذه الحالة، سيُتاح لك خيار. يمكنك استخدام ميزة الوسائط 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%);
  }
}