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

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

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

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

@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 إلى عدم توفّر معدّل تحديث. على سبيل المثال، لا يمكن تعديل صفحة مطبوعة.

تعني القيمة slow للمَعلَمة update أنّه لا يمكن تحديث شاشة العرض بسرعة. شاشة الحبر الإلكتروني هي أحد الأمثلة على الشاشات التي يكون معدّل إعادة تحميلها بطيئًا.

تشير قيمة 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 مساحة ألوان مختلفة باستخدام دالة CSS الجديدة color().

.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. لمزيد من التفاصيل، يُرجى الاطّلاع على الوحدة التدريبية حول التفاعل.

طلبات البحث المتعلقة بالإعدادات المفضّلة للمستخدم

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

الوضع الداكن والوضع الفاتح

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

ضبط نظام الألوان لعناصر واجهة المستخدمx

يوفّر المتصفّح ألوانًا تلقائية لعناصر مثل أشرطة التمرير وعناصر النماذج. يمكنك تحديد ما إذا كنت تريد استخدام مظهر فاتح مع color-scheme: light أو مظهر داكن مع color-scheme: dark. يمكنك أيضًا تحديد أنّ الصفحة تتوافق مع كليهما باستخدام color-scheme: light dark. يمكنك ضبط هذا الإعداد على العنصر :root أو html لضبط المخطط للصفحة بأكملها، أو يمكنك إلغاء الإعداد لعناصر معيّنة.

يمكنك أيضًا ضبط علامة meta لـ color-scheme من أجل ضبط مخطط الصفحة قبل تحميل الأنماط. إذا ضبطت color-scheme: normal على عنصر في الصفحة، سيتم استخدام القيمة color-scheme التي ضبطتها في هذه العلامة الوصفية.

<meta name="color-scheme" content="dark light">

prefers-color-scheme ميزة الوسائط

يمكنك أيضًا تحديد أنماط مخصّصة استجابةً لمظهر الألوان المفضّل لدى المستخدم باستخدام طلب بحث وسائط prefers-color-scheme.

light-dark

إذا كنت توفّر للمستخدمين خيار التبديل بين المظهرَين الفاتح والداكن، قد يكون من الأفضل ضبط كل لون داخل طلب بحث وسائط. تتيح لك السمة light-dark() تحديد كليهما في موقع واحد.

لتفعيل ذلك، عليك ضبط color-scheme: light dark على العنصر أو أحد العناصر الرئيسية. عليك أولاً ضبط لون لاستخدامه في الوضع الفاتح، ثم لون لاستخدامه في الوضع الداكن.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

إذا ضبط المستخدم إعدادات النظام المفضّلة على طلب الوضع الفاتح، سيكون العنوان باللون الأسود. إذا كان المظهر المفضّل هو الوضع الداكن، سيكون العنوان باللون الأبيض.

إعدادات التباين المفضّلة

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

قد تتذكّر في وحدة Cascade أنّ أنماط المستخدم المحلي !important يمكنها تجاهل الأنماط التي توفّرها صفحة الويب. يتيح ذلك للمستخدمين استخدام أنماط تناسبهم بشكل أفضل.

الألوان المفروضة

يوفر نظام التشغيل Windows "تصميمات التباين العالي" التي يمكن للمستخدمين اختيارها لتجاوز التصميمات على موقع إلكتروني. وغالبًا ما تكون هذه المظاهر عالية التباين، وقد تكون في الوضع الفاتح أو الداكن. في CSS، يُطلق على ذلك اسم "الألوان المفروضة"، وفي معظم الحالات، سيتصرف موقعك الإلكتروني على النحو المتوقّع في هذا الوضع. ستستخدِم الأزرار والروابط وعناصر الإدخال والمحتوى الآخر ألوان المظهر.

في بعض الأحيان، قد تحتاج إلى تعديل الأنماط، مثلاً إذا كنت تستخدم العناصر بطرق غير عادية. يمكنك استخدام طلب البحث عن الوسائط @media (forced-colors: active) لتطبيق الأنماط عندما يفعّل المستخدم الألوان المفروضة.

في بعض الحالات، تكون أنماط الموقع الإلكتروني جزءًا لا يتجزأ من فهم المحتوى نفسه، مثلاً في أداة اختيار الألوان أو الرسم البياني الذي يتضمّن مفتاح ألوان. يمكنك ضبط forced-color-adjust: none; على عنصر لإيقاف وضع الألوان المفروضة. احرص على إيقاف هذه الميزة في عناصر معيّنة فقط، وتأكَّد من أنّه لا يزال بإمكانك الوصول إلى المحتوى في وضع الألوان المفروضة.

تباين عالٍ

قد يضبط بعض المستخدمين أيضًا إعدادات النظام لطلب زيادة التباين. يمكنك تعديل الأنماط في الرد باستخدام طلب البحث عن الوسائط prefers-contrast: more.

الحدّ من الحركة

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

نص الفيديوهات

قد ينتقل المستخدمون إلى موقعك الإلكتروني مع إيقاف JavaScript، ويمكنك تعديل CSS ليظل بإمكانهم الوصول إلى المحتوى باستخدام طلب البحث عن الوسائط scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

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

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