תכונות מדיה

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

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

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

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

שאילתות להעדפות משתמש

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

מצב כהה ומצב בהיר

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

הגדרת ערכת הצבעים לרכיבי ממשק המשתמשx

הדפדפן מספק צבעים שמוגדרים כברירת מחדל לרכיבים כמו סרגלי גלילה ורכיבי טופס. אתם יכולים לציין אם להשתמש בעיצוב בהיר עם color-scheme: light או בעיצוב כהה עם color-scheme: dark. אפשר גם לציין שהדף תומך בשניהם באמצעות color-scheme: light dark. אפשר להגדיר את זה ברכיב :root או html כדי להגדיר את הסכימה לכל הדף, או לשנות את ההגדרה לרכיבים ספציפיים.

אפשר גם להגדיר תג meta ל-color-scheme כדי להגדיר את הסכימה של הדף לפני שהסגנונות נטענים. אם מגדירים את color-scheme: normal ברכיב בדף, המערכת תשתמש בערך color-scheme שהגדרתם במטא תג הזה.

<meta name="color-scheme" content="dark light">

תכונת מדיה אחת (prefers-color-scheme)

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

light-dark

אם אתם מאפשרים למשתמשים לבחור בין עיצוב בהיר לכהה, יכול להיות שיהיה לכם מסורבל להגדיר כל צבע בתוך שאילתת מדיה. ‫light-dark() מאפשר לציין את שניהם בנכס אחד.

כדי להפעיל את התכונה הזו, צריך להגדיר את color-scheme: light dark ברכיב או באחד מרכיבי האב שלו. קודם מגדירים צבע לשימוש במצב בהיר, ואז צבע לשימוש במצב כהה.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

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

העדפות ניגודיות

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

יכול להיות שאתם זוכרים ממודול Cascade שסגנונות מקומיים של משתמשים ב-!important יכולים לבטל את הסגנונות שדף אינטרנט מספק. כך המשתמשים יכולים להשתמש בסגנונות שמתאימים להם יותר.

צבעים מוכתבים

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

לפעמים תצטרכו לשנות את הסגנונות, למשל אם אתם משתמשים ברכיבים בדרכים לא סטנדרטיות. אפשר להשתמש בשאילתת המדיה @media (forced-colors: active) כדי להחיל סגנונות כשמשתמש מפעיל צבעים מאולצים.

במקרים מסוימים, הסגנונות של האתר הם חלק בלתי נפרד מהבנת התוכן עצמו, למשל בבוחר צבעים או בתרשים עם מקרא צבעים. אפשר להגדיר forced-color-adjust: none; ברכיב כדי לבטל את ההסכמה למצב של צבעים מאולצים. חשוב להקפיד להשבית את התכונה רק ברכיבים ספציפיים, ולבדוק שהתוכן עדיין נגיש במצב של צבעים מאולצים.

ניגודיות גבוהה

חלק מהמשתמשים יכולים גם להגדיר במערכת שלהם בקשה להגברת הניגודיות. אפשר לשנות את הסגנונות בתגובה באמצעות prefers-contrast: more media query.

תנועה מופחתת

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

כתיבת סקריפטים

יכול להיות שהמשתמשים יבקרו באתר שלכם כשה-JavaScript מושבת, ואתם יכולים לשנות את ה-CSS כך שהם עדיין יוכלו לגשת לתוכן באמצעות scripting שאילתת המדיה.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

בדיקת ההבנה

בדיקת הידע בנושא תכונות מדיה