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

Sofia Emelianova
Sofia Emelianova
GitHub

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

محاكاة ميزة وسائط prefers-color-scheme لصفحات الأنماط المتتالية (CSS)

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

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

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

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

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

  3. يُرجى إعادة تحميل الصفحة. على سبيل المثال:

محاكاة prefers-color-scheme:dark

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

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

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

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

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

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

محاكاة ميزة وسائط forced-colors لصفحات الأنماط المتتالية (CSS)

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

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

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

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

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

مع forced-colors:active المحاكي:

forced-colors:active

محاكاة ميزة وسائط prefers-contrast لصفحات الأنماط المتتالية (CSS)

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

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

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

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

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

محاكاة ميزة وسائط prefers-reduced-motion لصفحات الأنماط المتتالية (CSS)

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

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

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

محاكاة ميزة وسائط prefers-reduced-transparency لصفحات الأنماط المتتالية (CSS)

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

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

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

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

محاكاة ميزة وسائط color-gamut لصفحات الأنماط المتتالية (CSS)

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

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

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

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

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