שאילתות מדיה

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

שאילתות מדיה מופעלות באמצעות מילת המפתח @media (כלל at-rule של CSS), ואפשר להשתמש בהן במגוון תרחישים לדוגמה.

טירגוט לסוגים שונים של פלט

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

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

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

אפשר להשתמש בכלל @media בגיליון הסגנונות באופן הזה, או ליצור גיליון סגנונות נפרד ולהשתמש במאפיין media ברכיב link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

אם לא מציינים סוג מדיה ל-CSS, הערך של סוג המדיה יהיה all באופן אוטומטי. שני קטעי הקוד הבאים ב-CSS זהים:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

גם שתי שורות ה-HTML הבאות זהות:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

תנאי השאילתה

אפשר להוסיף תנאים לסוגי מדיה. הבקשות האלה נקראות שאילתות מדיה. ה-CSS יחול רק אם סוג המדיה תואם וגם התנאי מתקיים. התנאים האלה נקראים תכונות מדיה.

זהו התחביר של שאילתות מדיה:

@media type and (feature)

אפשר להשתמש בבקשות מדיה ברכיב link אם הסגנונות נמצאים בגיליון סגנונות נפרד:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

נניח שאתם רוצים להחיל סגנונות שונים בהתאם למצב של חלון הדפדפן: אופקי (רוחב שדה התצוגה גדול מגובהו) או אנכי (גובה שדה התצוגה גדול מרוחבו). יש תכונה של מדיה שנקראת orientation שאפשר להשתמש בה כדי לבדוק את הדברים הבאים:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

לחלופין, אם אתם מעדיפים להשתמש בגיליונות סגנונות נפרדים:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

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

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

או באמצעות גיליונות סגנונות נפרדים:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

יכול להיות ששימוש בגיליונות סגנונות נפרדים לסוגים שונים של מדיה – כמו print – הוא בסדר, אבל כנראה שלא כדאי להשתמש בגיליונות סגנונות נפרדים לכל שאילתה של מדיה. במקום זאת, צריך להשתמש בכללי at-rule של @media.

התאמת סגנונות על סמך גודל אזור התצוגה

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

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

משתמשים בתכונת המדיה max-width כדי להחיל סגנונות ברוחב מסוים ומטה:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

אפשר להשתמש בכל יחידת אורך של CSS בשאילתות המדיה. אם התוכן שלכם מבוסס בעיקר על תמונות, יכול להיות שפיקסלים יהיו האפשרות הטובה ביותר. אם התוכן שלכם מבוסס בעיקר על טקסט, כנראה שתהיה לכם יותר תועלת משימוש ביחידה יחסית שמבוססת על גודל הטקסט, כמו em או ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

אפשר גם לשלב שאילתות מדיה כדי להחיל יותר מתנאים אחד. משתמשים במילה and כדי לשלב את שאילתות המדיה:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

בחירת נקודות עצירה על סמך התוכן

הנקודה שבה התנאי של תכונה של מדיה הופך ל-True נקראת נקודת עצירה (breakpoint). מומלץ לבחור את נקודות הצירוף על סמך התוכן שלכם, ולא על סמך הגדלים הפופולריים של המכשירים, כי הם עשויים להשתנות בכל מחזור השקה של טכנולוגיה.

בדוגמה הזו, 50em הוא הנקודה שבה שורות הטקסט הופכות לארוכות מדי. לכן נוצר נקודת עצירה כדי שהממשק יהיה קריא יותר. באמצעות המאפיין column-count, הטקסט מחולק לשתי עמודות מהנקודה הזו ואילך.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

שילובים

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

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

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

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

בדיקת ההבנה

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