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

Sofia Emelianova

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

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

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

כדי לחקות את התנאי הזה:

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

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

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

3. צריך לטעון מחדש את הדף. למשל:

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

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

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

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

   

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

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

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

כדי לחקות את התנאי הזה:

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

2. בקטע Emulate media media media forced-colors, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

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

עם אמולציה של forced-colors:active:

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

תכונת המדיה של CSS prefers-contrast מציינת אם המשתמש ביקש שתוכן האינטרנט יוצג עם ערך ניגודיות גבוה, נמוך או ספציפי.

כדי לחקות את התנאי הזה:

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

2. בקטע Emulate media media media prefers-contrast, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ללא אמולציה
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

אמולציה של תכונת מדיה של CSS prefers-reduced-motion

תכונת המדיה של CSS prefers-reduced-motion מציינת אם המשתמש ביקש למזער את כמות התנועה בדף.

כדי לחקות את התנאי הזה:

1. פותחים את הכרטיסייה עיבוד בהדגמה הזו ומנסים לגלול כדי לראות אנימציות שונות.
2. בקטע Emolate Media feature prefers-reduced-motion, בוחרים באפשרות prefers-reduced-motion:reduce.
3. צריך לנסות לגלול שוב.

אמולציה של תכונת מדיה של CSS prefers-reduced-transparency

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

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

כדי לחקות את התנאי הזה:

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

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

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

כדי לחקות את התנאי הזה:

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

2. בקטע Emulate media media media color-gamut, בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

   • ללא אמולציה
   • color-gamut:srgb – משטח בערך sRGB או יותר
   • color-gamut:p3 –, בקירוב, שצוין במרחב צבע P3 ברשת המדיה או יותר
   • color-gamut:rec2020 – בדומה למסגרת שצוינה בהמלצה ל-2020 או יותר