איך משתמשים ב Container Query

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

על מנת להשתמש בתכונה הזו, ראשית עלינו להגדיר את הקונטיינר. הקונטיינר יכול לקבל שתי תכונות: container-type ו- container-name.

container-name

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

container-type

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

size : העיצוב שלנו יושפע מגודלו של הקונטיינר בציר ה block ובציר ה inline.

inline-size : העיצוב יושפע מגודלו של הקונטיינר בציר ה inline (שמציין ברוב המקרים את רוחב הקונטיינר.

normal : העיצוב לא יושפע מגודלו של הקונטיינר, אבל יושפע משאילות עיצוב (על כך אכתוב כבר במדריך נפרד)

כמו שניתן לראות בדוגמה הבאה:

.container {
  container-type: inline-size;
  container-name: card;
}

במקרה הזה, נתנו לקונטיינר את השם card ואנחנו מטרגטים את הרוחב שלו.

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

@container card (width < 500px) {
  .inner {
    background-color: green;
  }
  h2 {
    font-size: 2rem;
  }
}

כלומר, ברגע שהרוחב של הקונטיינר שלנו קטן מ- 500 פיקסלים, אנחנו נקבע את הרקע של הקונטיינר הפנימי לירוק ונשנה את הגודל של הכותרת ל- 2rem.

תכונות נוספות

שאילתת הקונטיינר שלנו יכולה להתייחס לא רק לרוחב של הקונטיינר אלא לכמה תכונות נוספות:

height: די מתבקש שתוכלו להתייחס גם לגובה של הקונטיינר, אבל שימו לב שכשאתם מגדירים את סוג הקונטיינר אתם נותנים לו את הערך size.

block-size: אם אתם כבר משתמשים במאפיינים לוגיים בעיצובים שלכם, אז אתם צועדים עם הפנים לעתיד, וכבר יודעים על מה אני מדבר כאן. אם לא, תקראו כאן למה אתם צריכים לעבור לעבוד איתם.

inline-size: גם כאן, תכונה שלא תהיה זרה למי שעבר להשתמש במאפיינים לוגיים.

aspect-ratio: אם אתם רוצים לשלוט בעיצוב של תוכן הקונטיינר בהתבסס על יחס הגובה-רוחב שלו.