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

איך אפשר להשתמש בתחביר החדש כדי לייעל שאילתות מדיה

Rachel Andrew

התכונה 'שאילתות מדיה' מפעילה עיצוב רספונסיבי, ותכונות הטווח שמאפשרות לבדוק את הגודל המינימלי והמקסימלי של אזור התצוגה משמשות כ-80% מהאתרים שמשתמשים בשאילתות מדיה. במפרט של Media Queries ברמה 4 יש תחביר משופר לשאילתות הטווח האלה.

תמיכה בדפדפן

מקור

בדוגמאות הבאות אפשר לראות איך אפשר לייעל את השאילתות.

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

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

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

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

בדיקה של רוחב מקסימלי:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

וגם הגרסה שמשתמשת בתחביר ברמה 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

התחביר הזה יכול לשפר את היעילות של השאילתות, במיוחד כשבודקים בין שני רוחבים. בדוגמה הבאה, שאילתה המדיה בודקת אם אזור התצוגה (viewport) הוא ברוחב מינימלי של 400 פיקסלים ברוחב מקסימלי של 600 פיקסלים.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

אפשר לשכתב את הפקודה בתחביר החדש כך:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

התכונה שאתם בודקים, במקרה הזה width, נמצאת בין שני הערכים.

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

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