שאילתות מדיה

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

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

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

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

בחירת נקודות עצירה (breakpoint) לפי התוכן

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

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

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

שילובים

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

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

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

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

בדיקת ההבנה

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