תכונות מדיה

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי תכונות מדיה