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

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

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

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