בוולנטיין דיי הקרוב אנחנו חוגגים שאילתות על קונטיינרים ויחידות של שאילתות קונטיינרים שמובילים לכל הדפדפנים היציבים.
כבר יש אהבה לשאילתות של קונטיינרים! בוולנטיין דיי הקרוב, שאילתות הקונטיינר בגודל מסוים ויחידות של שאילתות הקונטיינרים יציבו בכל הדפדפנים המודרניים.
באמצעות שאילתות של קונטיינרים אפשר להריץ שאילתות על פרטי הסגנון של רכיב הורה, למשל inline-size שלו. באמצעות שאילתות מדיה אפשר להריץ שאילתות לגבי גודל אזור התצוגה, שאילתות קונטיינר מאפשרות רכיבים שיכולים להשתנות בהתאם למיקום שלהם בממשק המשתמש.
שאילתות קונטיינרים שימושיות במיוחד לעיצוב רספונסיבי ולרכיבים לשימוש חוזר. לדוגמה, הפעלת רכיב כרטיס שיכול להיפרס בצורה אחת כשמציבים אותו בסרגל צד, ובתצורה אחרת בתוך רשת מוצרים.
שימוש בשאילתות של קונטיינרים
כדי להשתמש בשאילתות של מאגר, קודם צריך להגדיר אילוץ של רכיב הורה. כדי לעשות זאת, מגדירים container-type במאגר ההורה, או משתמשים בקיצור container כדי לתת לישות גם סוג וגם שם בו-זמנית:
.card-container {
container: card / inline-size;
}
אם המדיניות container-type מוגדרת כ-inline-size, הפונקציה הזו שולחת שאילתה לגבי גודל ההנחיה המובנית של ההורה. בשפות לטיניות כמו אנגלית, הערך הזה יהיה רוחב הכרטיס, מכיוון שהטקסט עובר משמאל לימין.
עכשיו אפשר להשתמש במאגר כדי להחיל סגנונות על כל הצאצאים שלו באמצעות @container:
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
בנוסף, אפשר להשתמש בערכי יחידה של אורך שאילתה בקונטיינר באותו אופן שבו משתמשים בערכי יחידה המבוססים על אזור התצוגה. ההבדל הוא שיחידות המאגר מתאימות למאגר ולא לאזור התצוגה. הדוגמה הבאה מציגה טיפוגרפיה רספונסיבית באמצעות יחידות של שאילתות קונטיינרים והפונקציה clamp(), שמעניקה ערך גודל מינימלי ומקסימלי:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
הערך 15cqi שלמעלה מתייחס ל-15% מהגודל המוטמע של הקונטיינר. הפונקציה clamp() נותנת ערך מינימלי של 2rem ומקסימום של 4rem. בינתיים, אם הערך 15cqi נמצא בין הערכים האלה, הטקסט יתכווץ ויגדל בהתאם.
שאילתת קונטיינר בוולנטיין דיי
כדי לחגוג את שאילתת הקונטיינר שנהנית מאהבה בחג הזה, יצרנו וולנטיין אהוב שבו כולם יוכלו ליהנות, ללא קשר לדפדפן היציב (הגרסה העדכנית ביותר) שבו מציגים את הפוסט הזה.