CSS Container Queries: כשרכיב מגיב לגודל ההורה שלו, לא לגודל המסך

מאת צוות מדיה דיל · 07.07.2026 · פיתוח אתרים · 4 דק׳

CSS Container Queries, container-type, cqw ויחידות container, הבדל מ-Media Queries, ותפקיד ב-Design Systems.

רכיב כרטיס מוצר שנבנה עם media query בודק את רוחב כל המסך — אבל אותו כרטיס בדיוק יכול לשבת בעמודה רחבה בעמוד אחד ובעמודה צרה של Sidebar בעמוד אחר, ואין דרך ב-media queries רגילים להבדיל בין שני המצבים האלה, כי שניהם קורים על אותו רוחב מסך בדיוק. Container Queries פותרות בעיה שהצטברה שנים ב-CSS: הן מאפשרות לרכיב להגיב לגודל ההורה הישיר שלו (ה-container) ולא לגודל ה-viewport כולו, מה שהופך רכיבים לבאמת עצמאיים ומודולריים.

איך זה עובד טכנית

כדי להשתמש ב-Container Queries, קודם מסמנים אלמנט הורה כ-container עם container-type: inline-size (או size), ולרוב נותנים לו container-name כדי לאפשר טירגוט מדויק. לאחר מכן, כל רכיב צאצא יכול להשתמש ב-@container במקום ב-@media, ולהגדיר סגנון שונה לפי הרוחב של ה-container הקרוב ביותר שסומן — לא לפי רוחב חלון הדפדפן. זה הופך את שאלת ה-breakpoint משאלה גלובלית לשאלה מקומית לכל רכיב בנפרד.

ההבדל המהותי מ-Media Queries

Media Query עונה על השאלה "כמה רחב הוא חלון הדפדפן?" — שאלה גלובלית אחת לכל הדף. Container Query עונה על "כמה רחב המקום שיש לי בפועל?" — שאלה שיכולה לקבל תשובה שונה לחלוטין לאותו רכיב בשני מקומות באותו עמוד. כרטיס שמוצג בגריד של שלוש עמודות ברוחב מסך רחב יכול פתאום להיות צר יותר מאותו כרטיס בתוך Sidebar במסך צר, ורק Container Queries נותנות לו את המידע הנכון כדי להגיב בהתאם.

מתי זה משנה בבניית design systems

בספריית רכיבים משותפת שמשמשת כמה מוצרים או צוותים — בדיוק כמו שמתואר במדריך לDesign Systems ורכיבים משותפים — אי אפשר לדעת מראש היכן כל רכיב ישב בכל הקשר עתידי. Container Queries משחררות את מעצב הרכיב מהצורך לנחש את כל ההקשרים האפשריים מראש: הרכיב עצמו יודע להגיב נכון לכל רוחב שהוא מקבל, בלי שהצוות שמטמיע אותו יצטרך לכתוב override ידני לכל מיקום חדש.

תמיכת דפדפנים ואסטרטגיית מעבר

נכון להיום Container Queries נתמכות בכל הדפדפנים המודרניים המרכזיים — Chrome, Edge, Firefox ו-Safari — ואפשר להשתמש בהן בבטחה בפרויקטים חדשים. עבור תמיכה בדפדפנים ישנים מאוד, ניתן להשתמש ב-@supports כדי לספק fallback מבוסס Media Query, כך שרכיבים עדיין מקבלים סגנון סביר גם בסביבה שלא תומכת, בזמן שכל הדפדפנים המודרניים מקבלים את ההתנהגות המדויקת יותר.

Container Query Units

מעבר לשאילתות עצמן, ה-spec מוסיף גם יחידות יחסיות חדשות — cqw, cqh, cqi ו-cqb — שמאפשרות להגדיר גודל פונט, ריווח או רוחב יחסית לגודל ה-container במקום ליחידות viewport גלובליות כמו vw. זה מאפשר טיפוגרפיה שמתכווצת ומתרחבת בצורה חלקה ופרופורציונלית לגודל האזור שבו הרכיב יושב, בלי לחכות לקפיצה בין breakpoints בדידים.

מלכודת נפוצה: containment ו-layout

הגדרת container-type: inline-size יוצרת containment שמונע מהתוכן הפנימי להשפיע על גודל ה-container עצמו — משמעות הדבר שאי אפשר להגדיר width: auto או fit-content על ה-container שמסתמך על התוכן שבתוכו, כי זו לולאה לוגית שהדפדפן לא יכול לפתור. חשוב לתת ל-container רוחב מפורש או מבוסס גריד/flex מההורה שלו, ורק אז לתת לילדים בפנים להגיב אליו.

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

תגיות: Container Queries · CSS · cqw · Design Systems · Responsive Design · container-type

← חזרה לבלוג · צור קשר