שאילתות מדיה

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

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

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

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

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

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

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

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

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

@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.

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

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

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

@media (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. /*
}

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

@media (50em <= 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;
  }
}

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

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

בדיקת ההבנה

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