כמה פעמים שאילתות גודל מיכל היו עוזרות לי

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

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

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

מקרה 1: רשת כרטיסים

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

נניח שהוטלה עליך לבנות את רשת הכרטיסים הזו עם הדרישה שכל כרטיס צריך לשמור על יחס רוחב-גובה של 1:1:

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

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

בפרויקט שלי בעולם האמיתי, נחתתי על גישת JavaScript שתעשה:

1. האזן לאירוע שינוי גודל.
2. חשב את הרוחב של כל כרטיס.
3. הוסף גודל גופן מוטבע לכל כרטיס בהתאם לרוחבו.
4. סגנון הכל בפנים באמצעות em יחידות.

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

שאילתות מיכל היו הרבה יותר טובות כי הן מספקות לנו יחידות שאילתות מיכל, כמו ה cqw יחידה. אתה בטח כבר מבין, אבל 1cqw שווה ל 1% ברוחב של מכולה. יש לנו גם את cqi יחידה שהיא מדד לרוחב המוטבע של מיכל, ו cqb עבור רוחב בלוק של מכולה. אז אם יש לנו מיכל כרטיסים כלומר 500px רחב, א 50cqw ערך מחושב ל 250px.

אם הייתי מסוגל להשתמש בשאילתות מיכל ברשת הכרטיסים שלי, יכולתי להגדיר את .card רכיב כמיכל:

.card { 
  container: card / size;
}

אז יכולתי להגדיר עטיפה פנימית עם padding כי קנה מידה ב 10% של .cardרוחב של באמצעות cqw יחידה:

.card__inner { 
  padding: 10cqw; 
} 

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

רעיון אחר? להשתמש cqw יחידות עבור גודל הגופן של התוכן הפנימי, ולאחר מכן החל ריפוד פנימה em יחידות:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw הוא ערך שרירותי - רק אחד שהסתפקתי בו. הריפוד הזה עדיין שווה ל 10cqw מאז em היחידה היא יחסית ל- .card__inner גודל גופן!

תפסת את זה? ה 2em הוא יחסית ל 5cqw גודל הגופן שנקבע על אותו מיכל. קונטיינרים עובדים אחרת ממה שהורגלנו אליו, כמו em יחידות הן יחסיות של אותו אלמנט font-size value. אבל מה ששמתי לב אליו מהר הוא שיחידות שאילתת קונטיינר מתייחסות אליו ההורה הקרוב שהוא גם מיכל.

לדוגמה, 5cqw אינו משתנה בהתאם ל- .card רוחב האלמנט בדוגמה זו:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

במקום זאת, הוא משתנה לכל ההורה הקרוב ביותר שמוגדר כמיכל. בגלל זה הקמתי את א .card__inner עֲטִיפָה.

מקרה 2: פריסה מתחלפת

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

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

שאילתות מיכל היו הופכות את זה לקלי קלות, הודות ל- @container כְּלָל:

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

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

שאילתה אחת, נזילות אינסופית:

אבל רגע! יש משהו שאולי תרצה להיזהר ממנו. באופן ספציפי, זה יכול להיות קשה להשתמש בשאילתת מיכל כמו זו בתוך מערכת עיצוב מבוססת אביזרים. למשל, זה .info-card הרכיב יכול להכיל רכיבי צאצא המסתמכים על אביזרים כדי לשנות את המראה שלהם.

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

מקרה 3: משיכות SVG

הנה עוד דפוס סופר נפוץ שהשתמשתי בו לאחרונה שבו שאילתות גודל מיכל היו מביאות למוצר מלוטש יותר. נניח שיש לך סמל נעול עם כותרת:

  
    
   
  Heading

זה די פשוט לשנות את קנה המידה של הסמל עם גודל הכותרת, אפילו ללא שאילתות מדיה. עם זאת, הבעיה היא ש-SVG stroke-width עשוי להיות רזה מדי כדי להבחין כל כך טוב בגודל קטן יותר, ואולי לתפוס יותר מדי תשומת לב עם מהלך עבה במיוחד בגודל גדול יותר.

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

גודל הגופן של הכותרת עשוי להתבסס על רוחב נקודת התצוגה, כך שסמל ה-SVG צריך להתאים בהתאם את המקום שבו פועל הקו שלו בכל גודל. אתה יכול לעשות את רוחב הקו ביחס לכותרת font-size על ידי הגדרתו em יחידות. אבל אם יש לך סט ספציפי של גדלי שבץ שאתה צריך לדבוק בו, אז זה לא יעבוד כי אחרת הוא מקנה קנה מידה ליניארי - אין דרך להתאים אותו לסוג מסוים stroke-width ערך בנקודות מסוימות מבלי להזדקק לשאילתות מדיה על רוחב יציאת התצוגה.

אבל זה מה שהייתי עושה לו היה לי את המותרות של שאילתות מיכל באותו זמן:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

השווה את ההטמעות וראה כיצד גרסת השאילתה המכולה מצמידה את מהלך ה-SVG לרוחבים הספציפיים שאני רוצה בהתבסס על רוחב המיכל.

בונוס: סוגים אחרים של שאילתות גודל מיכל

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

רוב הדוגמאות שראיתי נותנות שאילתות ל- width, max-width, ו min-width, height, block-size, ו inline-size כפי שעשיתי לאורך המאמר הזה.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

אבל MDN מתאר שני דברים נוספים אנחנו יכולים לשאול נגד. אחד הוא orientation זה הגיוני לחלוטין מכיוון שאנו משתמשים בו כל הזמן בשאילתות מדיה. זה לא שונה עם שאילתות מיכל:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

האחר? שֶׁלָה aspect-ratio, תאמין לזה או לא:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

הנה הדגמה הניתנת לעריכה לשחק עם שתי הדוגמאות:

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