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