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

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

שאילתות מיכל הוצגו כדי לפתור בעיה זו. הם גם עלו עם הפופולריות של מסגרות כמו React ו-Vue.js שפועלות על ידי יצירת "רכיבי ממשק משתמש" מודולריים. למד כיצד להשתמש בשאילתות מיכל כדי ליצור אלמנטים רספונסיביים ב-CSS שלך.

הקוד המשמש במאמר זה זמין כאן מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

מדוע כדאי להשתמש בשאילתות מיכל CSS?

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

לאחר שיבוט בהצלחה את ה-repo, הפעל את הקוד. תמצא דף אינטרנט הדומה לתמונה הבאה:

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

instagram viewer

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

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

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

@כְּלֵי תִקְשׁוֹרֶת(מקסימום רוחב: 800 פיקסלים) {
.כַּרְטִיס {
כיוון הגמיש: טור;
 }
.card-header { 
רוֹחַב: 100%;
 }
}

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

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

סרגל צד.כַּרְטִיס {
/* הגדל את כרטיס סרגל הצד */
}
@כְּלֵי תִקְשׁוֹרֶת(מקסימום רוחב: 800 פיקסלים) {
/* סגנון הדף כאשר המסך צר מ-800 פיקסלים */
}

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

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

כיצד ליצור שאילתת מיכל

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

רָאשִׁי, סרגל צד {
סוג מיכל: גודל מוטבע
}

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

@מְכוֹלָה(מקסימום רוחב: 500 פיקסלים) {
.כַּרְטִיס {
כיוון הגמיש: טור;
 }
.card-header {
רוֹחַב: 100%;
 }
}

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

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

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

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

מתן שמות למיכלים

כאשר אתה יוצר א @מְכוֹלָה שאילתה, הוא מחפש תחילה את המיכל של הרכיב שאליו אתה ממקד בתוך השאילתה. במקרה שלנו, זה יהיה המיכל הראשי והמיכל של סרגל הצד.

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

בדוגמה הבאה, הפכנו את רכיב הגוף למיכל:

גוּף {
סוג מיכל: גודל מוטבע;
}

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

כדי לעקוף התנהגות זו, עליך לעשות שני דברים. ראשית, עליך לתת לרכיב הגוף שלך שם מיכל:

גוּף {
סוג מיכל: גודל מוטבע;
שם מיכל: גוּף;
}

לאחר מכן, כאשר אתה יוצר את שאילתת המכולה שלך, עליך לציין את שם המכל לאחר @מְכוֹלָה.

@מְכוֹלָה גוף (רוחב מקסימלי:1000 פיקסלים){
/* כללי CSS המכוונים למיכל הגוף */
}

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

יחידות מיכל

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

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