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

גלו איך התחביר החדש הזה יכול לייעל שאילתות מדיה.

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

תמיכה בדפדפן

  • Chrome: 104.
  • קצה: 104.
  • Firefox: 102.
  • Safari: 16.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 של רוחב של 400 פיקסלים או יותר. התחביר החדש מאפשר לנסח מילים בצורה מפורשת יותר ולהימנע מהתנגשות בין שאילתות.

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