אמולציה של תכונות מדיה של CSS

Sofia Emelianova

יוצרים אמולציה של תכונות מדיה שונות של CSS בעזרת ההפניה הזו לאפשרויות אמולציה בכרטיסייה רינדור.

יצירת אמולציה של תכונת מדיה של CSS prefers-color-scheme

תכונה של מדיה ב-CSS‏ prefers-color-scheme מציינת אם המשתמש מעדיף ערכת צבעים בהירה או כהה.

כדי לבצע אמולציה של התנאי הזה:

1. בדף prefers-color-scheme, פותחים את הכרטיסייה Rendering.

2. בקטע הדמיה של תכונת מדיה של CSS prefers-color-scheme, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ללא אמולציה
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. טוענים מחדש את הדף. לדוגמה:

יצירת אמולציה של סוג מדיה של CSS (הפעלת תצוגה מקדימה של הדפסה)

שאילתת המדיה המודפסת קובעת איך הדף ייראה כשהוא יודפס.

כדי לאלץ את הדף להיכנס למצב תצוגה מקדימה של הדפסה:

1. פותחים את הכרטיסייה Rendering ובקטע Emulate CSS media type בוחרים באפשרות print.

   

2. מכאן תוכלו להציג ולשנות את קובץ ה-CSS, כמו כל דף אינטרנט אחר. תחילת העבודה עם הצגה ושינוי של CSS

יצירת אמולציה של מדיה של CSS עם forced-colors

תכונת המדיה של CSS forced-colors מציינת אם סוכן המשתמש הפעיל מצב צבעים מאולץ. דוגמה למצב צבעים מאולץ היא 'ניגודיות גבוהה' ב-Windows.

כדי לבצע אמולציה של התנאי הזה:

1. פותחים את הכרטיסייה עיבוד.

2. בקטע הדמיה של תכונת מדיה של CSS forced-colors, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ללא אמולציה
   • forced-colors:active
   • forced-colors:none

עם forced-colors:active במהדורה ממוּלאמת:

יצירת אמולציה של מדיה של 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

תכונת המדיה prefers-reduced-transparency של CSS מציינת אם המשתמש ביקש לצמצם את האפקטים של השכבה השקופה או השקופה בשימוש במכשיר.

התכונה prefers-reduced-transparency זמינה בגרסה 118 של Chrome ומאפשרת להתאים את התוכן מהאינטרנט להעדפה שבחר המשתמש כדי לשפר את השקיפות במערכת ההפעלה, כמו ההגדרה הפחתת השקיפות ב-macOS.

כדי לבצע אמולציה של התנאי הזה:

1. פותחים את הכרטיסייה עיבוד.
2. בקטע הדמיה של מדיה של CSS prefers-reduced-transparency, בוחרים באפשרות prefers-reduced-transparency: reduce.
3. בודקים אם הדף מוצג כראוי.

יצירת אמולציה של מדיה של CSS עם color-gamut

תכונת המדיה color-gamut ב-CSS מציינת את טווח הצבעים שסוכן המשתמש ומכשיר הפלט תומכים בו.

כדי לדמות את התנאי הזה:

1. פותחים את הכרטיסייה רינדור.

2. בקטע הדמיה של תכונת מדיה של CSS color-gamut, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ללא אמולציה
   • color-gamut:srgb – בערך sRGB או יותר
   • color-gamut:p3 – בערך המגוון שצוין במרחב הצבעים Display P3 או יותר
   • color-gamut:rec2020 – בערך המגוון שצוין ב-Rec. 2020 או יותר