תכונות מדיה

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

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

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

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

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

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

תמיכה בדפדפן

• 1
• 12
• 1
• 3

מקור

מאפייני אזור התצוגה

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

מסכים

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

ערך 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 מאפשרת לכם להתאים את הסגנונות לאפשרויות השונות האלה.

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

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. למסך HD שמדווח על ערך dynamic-range של high יש מרחב צבעים שונה באמצעות פונקציית color() החדשה של CSS.

.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)?

נכון

ניתן לקבל רוחב ספציפי רק על ידי בדיקה בו-זמנית של רוחב מעל 1023px ומתחת ל-1025px.

לא נכון

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

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

נכון

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

לא נכון

האפשרות הזו קיימת עבור 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)

לא אמיתי.