Media Queries

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

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

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

בגדול, media queries הן הדרך של CSS לכתוב CSS שונה לרזולוציות שונות. דוגמה חיה? בוודאי – קחו את האתר הזה וצמצמו את החלון שבו הוא מוצג, או הכנסו אליו בסלולר – אפשר לראות איך עיצוב האתר משתנה באופן כזה שאין שום פס גלילה אופקי וקל יותר לקרוא את תכני האתר. איך? האם באמצעות קסם? לא. יש קטעי קוד של CSS שעובדים אם הרזולוציה היא עד 400 פיקסלים (טלפון נייד) וקטעים שעובדים רק אם הרזולוציה גדולה יותר. הטכניקה הזו נקראת media query והיא ממש פשוטה. זה נראה כך:

@media (min-width:360px) {
  .selector {
       color: red;
   }
}

מה יש לנו פה? זה סינטקס ולידי לחלוטין של CSS. הוא מופעל אך ורק כשהרוחב המינימלי של המסך הוא 360 פיקסלים. אם הרוחב הוא 200 פיקסלים (למשל) אז כל מה שיש בתוך הסוגריים המסולסלות פשוט לא יעבוד ולא יפעל כאילו הוא לא נכתב בכלל. כלומר זה יעבוד רק מ-360 ומעלה.

ומה עם הקוד הזה?

@media (max-width:360px) {
  .selector {
       color: red;
   }
}

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

אפשר כמובן לשלב:

@media (min-width:400px) {
    .selector {
         border: 3px solid red;
    }
}

@media (max-width:400px) {
    .selector {
         border: 3px solid yellow;
    }
}

כאן מה שיקרה הוא שהסלקטור שלנו יצבע את הגבול באדום בכל מסך שהגודל המינימלי שלו הוא 400 פיקסלים (כלומר 400 ומעלה). אם המסך יהיה 399 פיקסלים הכלל בכלל לא יופעל.
הסלקטור שלנו יצבע בצהוב את האלמנט אם המסך הוא בגודל מקסימלי של 400 פיקסלים – כלומר 400 ומטה. אם המסך יהיה 401 פיקסלים הכלל לא יופעל.

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

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

נשאלת השאלה – מה קורה עם המסך הוא בדיוק בגודל של 400 פיקסלים? במקרה הזה שני התנאים מתמלאים! המסך הוא גם בגודל של עד 400 פיקסלים וגם בגודל של 400 פיקסלים ומעלה! אם שני התנאים מתמלאים, אז בעצם כל מה שיש בתוך ה-query מתמלא, ואם הוא מתמלא, אז כל הכללים תקפים. במקרה הזה מי שינצח הוא הכלל התחתון.

המקרים האלו, של תפר בין רזולוציות נקראים נקודות שבירה – כאשר אתם בודקים את האתר שלכם, שימו לב לנקודות השבירה ותמיד תבדקו איך האתר נראה בהן.

למרות שמקובל להשתמש ב-media queries של רוחב, יש עוד שאפשר להשתמש בהן – גובה למשל, או רזולוציה של דחיסות פיקסלים (למסכי רטינה למשל) ופרמטרים רבים נוספים שרובם די איזוטריים, אבל מעניין להסתכל בהם. הרשימה המלאה נמצאת באתר של מוזילה.

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

היום סביר להניח שלא יצא לכם לכתוב media query טבעיים, כיוון שרובנו משתמשים בפריימוורקים של CSS שיסדרו לנו את החיים – כמו bootstrap למשל, או foundation. אבל טוב לדעת ולהכיר. במיוחד את נושא נקודות השבירה.