תחביר טווח שאילתות המדיה החדש של CSS

אנחנו סומכים על שאילתות מדיה של CSS לבחירה ועיצוב אלמנטים על בסיס מצב ממוקד. מצב זה יכול להיות כל מיני דברים, אבל בדרך כלל מתחלק לשני מחנות: (1) סוג המדיה שבו נעשה שימוש, ו- (2) תכונה ספציפית של הדפדפן, המכשיר או אפילו הסביבה של המשתמש.

אז, נניח שאנחנו רוצים להחיל סגנון CSS מסוים על מסמך מודפס:

@media print {
  .element {
    /* Style away! */
  }
}

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

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

שים לב and שם? זה אופרטור שמאפשר לנו לשלב הצהרות. בדוגמה זו, שילבנו תנאי שסוג המדיה הוא a screen וזהו min-width התכונה מוגדרת ל 30em (או מעל). אנחנו יכולים לעשות את אותו הדבר כדי למקד לטווח של גדלי תצוגה:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

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

אבל מפרט ה-Media Queries Level 4 הציג תחביר חדש למיקוד בטווח רחב של יציאות תצוגה באמצעות אופרטורים להשוואה מתמטית נפוצה - דברים כמו <, >, ו = - זה הגיוני יותר מבחינה תחבירית תוך כתיבת פחות קוד.

בואו נחפור איך זה עובד.

מפעילי השוואה חדשים

הדוגמה האחרונה היא המחשה טובה לאופן שבו "זיפנו" טווחים על ידי שילוב תנאים באמצעות and מַפעִיל. השינוי הגדול במפרט Media Queries Level 4 הוא שיש לנו אופרטורים חדשים שמשווים ערכים במקום לשלב ביניהם:

• < מעריך אם ערך הוא פחות מ ערך אחר
• > מעריך אם ערך הוא גדול מ ערך אחר
• = מעריך אם ערך הוא שווה לערך אחר
• <= מעריך אם ערך הוא פחות או שווה to ערך אחר
• >= מעריך אם ערך הוא גדול או שווה to ערך אחר

הנה איך אולי כתבנו שאילתת מדיה שמחילה סגנונות אם הדפדפן כן 600px רחב או גדול יותר:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

כך נראה לכתוב את אותו הדבר באמצעות אופרטור השוואה:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

מיקוד לטווח רחב של יציאות תצוגה

לעתים קרובות כאשר אנו כותבים CSS Media Queries, אנו יוצרים מה שנקרא a נקודת עצירה - מצב שבו העיצוב "נשבר" ומערכת של סגנונות מיושמים כדי לתקן אותו. לעיצוב יכולות להיות המון נקודות שבירה! והם בדרך כלל מבוססים על נקודת התצוגה בין שני רוחבים: היכן מתחילה נקודת השבירה והיכן מסתיימת נקודת הפריצה.

הנה איך עשינו את זה באמצעות and אופרטור לשילוב שני ערכי נקודת השבירה:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

אתה מתחיל לקבל תחושה טובה של כמה קצר וקל יותר לכתוב שאילתת מדיה כשאנחנו מוותרים על הבולאני and מפעיל לטובת תחביר השוואת הטווחים החדש:

@media (400px <= width <= 1000px) {
  /* etc. */
}

הרבה יותר קל, נכון? וברור בדיוק מה עושה שאילתת המדיה הזו.

תמיכת דפדפן

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

בואו נסתכל על דוגמה

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

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

כדי לראות מה קורה, הנה איך הפריסה מגיבה בין שתי נקודות השבירה הקטנות יותר. רשימת הניווט הנסתרת מוצגת גם כן title ב main גדל פנימה font-size.

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

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

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

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

לגבי הפריסה:

• אל האני main האלמנט הופך לרשת בת 12 עמודות.
• לחצן מוצג על התמונה.
• גודל ה- .title הגופן של הרכיב גדל וחופף לתמונה.

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

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

תשחק עם זה:

מדוע קל יותר להבין את התחביר החדש

השורה התחתונה: קל יותר להבחין באופרטור השוואה (למשל width >= 320px) מאשר להבדיל בין min-width ו max-width באמצעות and מַפעִיל. על ידי הסרת הניואנס בין min- ו max-, יש לנו סינגל אחד width פרמטר לעבוד איתו והמפעילים מספרים לנו את השאר.

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

• max-width שווה ערך ל <= מפעיל (למשל (max-width: 320px) הוא זהה (width <= 320px)).
• min-width שווה ערך ל >= מפעיל (למשל (min-width: 320px) הוא זהה (width >= 320px)).

שימו לב שאף אחד מהם אינו המקביל ל- > or < אופרטורים.

בוא ניקח דוגמה היישר ממפרט Media Queries Level 4 שבו אנו מגדירים סגנונות שונים על סמך נקודת שבירה ב- 320px ברוחב יציאת התצוגה באמצעות min-width ו max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

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

@media (max-width: 320px){ /* styles for viewports = 321px */ }

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

פתרון אחד הוא להגדיל את ערך סולם ההשוואה השני (מספרים אחרי הנקודה העשרונית) ל 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

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

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

גלישה את

אוף, כיסינו הרבה קרקע על התחביר החדש למיקוד טווחי רוחב של יציאות התצוגה ב-CSS Media Queries. כעת, לאחר שמפרט Media Queries Level 4 הציג את התחביר והוא אומץ בדפדפני Firefox ו-Chromium, אנו מתקרבים לאפשרות להשתמש באופרטורי ההשוואה החדשים ולשלב אותם עם תכונות מדיה אחרות במגוון width, כמו height ו aspect-ratio

וזו רק אחת מהתכונות החדשות יותר שהציג מפרט רמה 4, לצד א חבורה של שאילתות שנוכל לבצע בהתבסס על העדפות המשתמש. זה לא נגמר שם! בדוק את מדריך מלא לשאילתות מדיה ב-CSS להצצה של מה עשוי להיכלל ב-Media Queries Level 5.