תכונות מדיה

סיכום של כל הדרכים שבהן תכונות המדיה מאפשרות לכם להגיב למכשירים ולהעדפות שלכם.

עיצוב רספונסיבי לא היה אפשרי בלי שאילתות מדיה. לפני שאילתות המדיה הופיעו, לא הייתה דרך לדעת באיזה סוג מכשיר אנשים השתמשו כדי לבקר באתר שלכם. המעצבים נאלצו להסתמך על הנחות. ההנחות האלה קושרו לפריסות רחבות או לפריסות רחבות וגמישות.

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

חשוב לזכור ששאילתת מדיה מורכבת מסוג מדיה אופציונלי ומתכונה חובה של מדיה. לא הרבה השתנה בסוגי המדיה לאורך השנים. עדיין יש רק ארבעה ערכים אפשריים:

@media all
@media screen
@media print
@media speech

לעומת זאת, תכונות המדיה התרחבו מאוד. מעכשיו, מעצבים יכולים להתאים את העיצובים שלהם לא רק לגודל המסך, אלא גם לגורמים רבים נוספים.

Browser Support

• 1
• 12
• 1
• 3

Source

המימדים של אזור התצוגה

שאילתות המדיה הפופולריות ביותר באינטרנט הן אלה שקשורות לרוחב שדה התצוגה. אבל גם כאן יש לכם אפשרות בחירה. אפשר להשתמש בתכונה 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 מציין שאין קצב רענון. לדוגמה, אי אפשר לעדכן דף מודפס.

אם הערך של update הוא slow, המשמעות היא שהתצוגה לא יכולה להתעדכן במהירות. מסך e-ink הוא דוגמה אחת למסך עם קצב רענון איטי.

ערך 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.

נניח שציינתם את הערך standalone עבור display במניפסט של אפליקציית האינטרנט. אם מישהו יוסיף את האתר שלכם למסך הבית, האתר יופעל ללא ממשק דפדפן. יכול להיות שתרצו להציג לחצן 'הקודם' למשתמשים האלה.

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. פרטים נוספים זמינים במודול בנושא אינטראקציה.

העדפות

יש מגוון של שאילתות מדיה שמאפשרות לכם להגיב להעדפות של המשתמשים: prefers-color-scheme,‏ prefers-contrast ו-prefers-reduced-motion. פרטים נוספים זמינים במודולים בנושא עיצוב נושא ונגישות.

אפשר לשלב תכונות מדיה בשאילתת מדיה אחת. אתם יכולים להגדיר את סגנונות האנימציה כך שיחולו רק אם למכשיר יש קצב רענון מהיר והמשתמש לא הביע העדפה לתנועה מופחתת.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

תכונות מדיה נוספות

בקרוב נוסיף עוד תכונות מדיה.

תכונות המדיה forced-colors ו-inverted-colors ידווחו אם במכשיר נעשה שימוש בלוח צבעים מוגבל או בלוח צבעים הפוך.

תכונה של מדיה scripting תאפשר לכם לשנות את קובץ ה-CSS בהתאם לזמינות של JavaScript.

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

אנחנו עדיין מגבשים הצעות נוספות. במודול הבא והאחרון תלמדו על הצעה לתכונה של מדיה שמטפלת בהגדרות מסך שונות.

בדיקת ההבנה

מבחן בנושא תכונות המדיה

האם שאילתה של מדיה יכולה לבדוק אם המכשיר הוא ברוחב ספציפי, כמו @media (width: 1024px)?

True

כדי לקבל רוחב ספציפי, צריך לבדוק בו-זמנית אם הרוחב גדול מ-1023px וקטן מ-1025px.

לא נכון

min-width ו-max-width הם האפשרויות הזמינות.

האם אפשר להשתמש בשאילתת מדיה כדי לבדוק אם מכשיר נמצא ב-aspect-ratio ספציפי, כמו @media (aspect-ratio: 4/3)?

True

יחס גובה-רוחב הוא המאפיין היחיד שאפשר להתאים לו יחס אחד בלבד.

לא נכון

האפשרות הזו קיימת ב-aspect-ratio.

אילו שאילתות מדיה לגבי צבע תקינות?

@media (color)

מתאים לכל מכשיר בצבע.

@media (monochrome)

מתאים לכל מכשיר ללא יכולת צבע.

@media (color-gamut: srgb)

התאמה למכשירים עם יכולת צבע sRGB.

@media (min-color-index: 15000)

התאמה למכשירים עם לפחות 15,000 צבעים זמינים.

@media (dynamic-range: high)

התאמה למכשירים עם טווחי צבעים באיכות HD.

אילו מבין שאילתות המדיה הבאות לגבי העדפות המשתמש תקינות?

@media (prefers-color-scheme: dark)

ההתאמה מתרחשת כשמערכת ההפעלה של המשתמש מוגדרת למצב כהה.

@media (prefers-colors: high-definition)

לא אמיתי.

@media (prefers-reduced-motion: reduce)

ההתאמה מתרחשת כשמערכת ההפעלה של המשתמש מוגדרת להפחית תנועה.

@media (prefers-contrast: more)

ההתאמה מתבצעת כשמערכת ההפעלה של המשתמש מוגדרת לניגודיות גבוהה יותר.

@media (prefers-site-speed: fast)

לא אמיתי.