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

bookmark_border קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

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