Media Queries

הבסיס שעומד מאחורי כל ריספונסיביות של CSS.
דוגמה של פס גלילה לרוחב

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

מומלץ לצפות באתר ברזולוציה 600x800 ובדפדפן מסוג IE גירסא 5.5 ומעלה.
מומלץ לצפות באתר ברזולוציה 600×800 ובדפדפן מסוג IE גירסא 5.5 ומעלה.

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

דוגמה של פס גלילה לרוחב
דוגמה של פס גלילה לרוחב

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

פוסטים נוספים שכדאי לקרוא

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

פרק מיוחד, לצד הקלטה של פרק של עושים תוכנה על אחת התקינות החשובות ביותר עבור חברות שסביר להניח שלא הכרתם

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

גלילה לראש העמוד