محاكاة ميزات وسائط CSS

Sofia Emelianova
Sofia Emelianova
GitHub

يمكنك محاكاة ميزات وسائط CSS المختلفة باستخدام هذا المرجع لخيارات المحاكاة في علامة التبويب العرض.

محاكاة ميزة وسائط CSS prefers-color-scheme

تشير ميزة وسائط CSS "prefers-color-scheme" إلى ما إذا كان المستخدم يفضّل الألوان الفاتحة أو الداكنة.

لمحاكاة هذا الشرط:

  1. في صفحة prefers-color-scheme، افتح علامة التبويب Renders (العرض).

  2. ضمن محاكاة ميزة وسائط CSS prefers-color-scheme، اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • ما مِن محاكاة
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. إعادة تحميل الصفحة مثال:

يحاكي Preferreds-color-scheme:dark

محاكاة نوع وسائط CSS (تفعيل معاينة الطباعة)

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

لفرض وضع معاينة الطباعة على صفحتك:

  1. افتح علامة التبويب العرض وضمن محاكاة نوع وسائط CSS اختَر طباعة.

    وضع معاينة الطباعة

  2. من هنا، يمكنك عرض خدمة CSS وتغييرها، مثل أي صفحة ويب أخرى. راجِع بدء عرض محتوى CSS وتغييره.

محاكاة ميزة وسائط CSS forced-colors

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

لمحاكاة هذا الشرط:

  1. افتح علامة التبويب العرض.

  2. ضمن محاكاة ميزة وسائط CSS forced-colors، اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • ما مِن محاكاة
    • forced-colors:active
    • forced-colors:none

من خلال محاكاة forced-colors:active:

فرض-colors:نشطة

محاكاة ميزة وسائط CSS prefers-contrast

تشير ميزة وسائط CSS prefers-contrast إلى ما إذا كان المستخدم قد طلب من المستخدم عرض محتوى الويب بقيمة أعلى أو أقل أو قيمة تباين محدّدة.

لمحاكاة هذا الشرط:

  1. افتح علامة التبويب العرض.

  2. ضمن محاكاة ميزة وسائط CSS prefers-contrast، اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • ما مِن محاكاة
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

محاكاة ميزة وسائط CSS prefers-reduced-motion

تشير ميزة وسائط CSS prefers-reduced-motion إلى ما إذا كان المستخدم قد طلب تقليل مقدار الحركة على الصفحة.

لمحاكاة هذا الشرط:

  1. افتح علامة التبويب العرض في هذا العرض التوضيحي وحاوِل الانتقال للأسفل للاطّلاع على صور متحركة متنوعة.
  2. ضمن ميزة محاكاة وسائط CSS prefers-reduced-motion، اختَر prefers-reduced-motion:reduce.
  3. يُرجى إعادة محاولة الانتقال.

محاكاة ميزة وسائط CSS prefers-reduced-transparency

تشير ميزة وسائط CSS prefers-reduced-transparency إلى ما إذا كان المستخدم قد طلب تقليل تأثيرات الطبقة الشفافة أو شبه الشفافة المستخدمة على الجهاز.

تتوفّر ميزة prefers-reduced-transparency في الإصدار 118 من Chrome وتتيح لك تعديل محتوى الويب وفقًا للإعدادات المفضّلة التي يختارها المستخدم لتقليل الشفافية في نظام التشغيل، مثل إعداد تقليل الشفافية على نظام التشغيل macOS.

لمحاكاة هذا الشرط:

  1. افتح علامة التبويب العرض.
  2. ضمن ميزة محاكاة وسائط CSS prefers-reduced-transparency، اختَر prefers-reduced-transparency: reduce.
  3. تحقَّق مما إذا كانت صفحتك يتم عرضها بشكل صحيح.

محاكاة ميزة وسائط CSS color-gamut

تشير ميزة وسائط CSS color-gamut إلى نطاق الألوان الذي يتوافق مع وكيل المستخدم وجهاز الإخراج.

لمحاكاة هذا الشرط:

  1. افتح علامة التبويب العرض.

  2. ضمن محاكاة ميزة وسائط CSS color-gamut، اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • ما مِن محاكاة
    • color-gamut:srgb: مجموعة sRGB تقريبًا أو أكثر
    • color-gamut:p3—تقريبية السلسلة المحدّدة في مساحة ألوان العرض P3 أو أكثر
    • color-gamut:rec2020: السلسلة المحدَّدة في Rec. 2020 تقريبًا أو الإصدارات الأحدث