Chromium מגיע עם פער Flexbox

נכס ה-CSS gap כאן בשביל מנועי ה-CSS Flexbox ו-Multi-Column של Chromium.

אדם ארגייל
דייוויד גרוגן
דייוויד גרוגן
GitHub

פער ב-CSS

הערך gap הוא זרימה יחסית, כלומר הוא משתנה באופן דינמי בהתאם לכיוון של זרימת התוכן. לדוגמה, gap יתאים אוטומטית את הערכים השונים של writing-mode או direction שהגדרת למשתמשים הבינלאומיים. דרך זו מקלה משמעותית על אתגרי הריווח עבור הרכיב ומחבר ה-CSS. פחות התאמה של הקוד.

הפער שמדגים תמיכה בלוקליזציה כי הוא מטפל בשינויים בכיוון ובמצב כתיבה: Codepen | ציוץ

תאימות דפדפן

תמיכה בדפדפן

  • 57
  • 16
  • 52
  • 10.1

מקור

Usage

gap מקבל כל אורך או אחוז של CSS כערך.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


אפשר לציין רווח באורך 1, שישמש גם לשורה וגם לעמודה.

קיצור דרך
.grid {
  display: grid;
  gap: 10px;
}
הגדרה של שורות ועמודות יחד ביחד בו-זמנית
בוצעה הרחבה
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


אפשר להקצות שני אורכים לרווח, שישמשו כשורה ועמודה.

קיצור דרך
.grid {
  display: grid;
  gap: 10px 5%;
}
מגדירים בו-זמנית גם שורות וגם עמודות בנפרד
בוצעה הרחבה
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

לפני שהחברה gap פעלה ב-Flexbox, האסטרטגיות כללו שולי רווח שליליים, סלקטורים מורכבים, סלקטורים מסוג :last או :first, או אמצעים אחרים לניהול המרחב של קבוצת צאצאים שנפרסה באופן דינמי ועטיפה.

ניסיונות קודמים

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

בוררים מסוג פסאודו-מחלקה
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
תנשמת לבנה
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
מקור

אבל האפשרויות שלמעלה לא תחליף מלא ל-gap, ולרוב צריך לבצע התאמות ב-@media או ב-:lang() כדי להביא בחשבון תרחישי אריזה, מצבי כתיבה או כיוונים. הוספה של שאילתת מדיה אחת או שתיים לא נראית כל כך גרועה, אבל הן יכולות להוביל ולהוביל ללוגיקת פריסה מורכבת.

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

הנפילה: פער

.layout {
  display: flex;
  gap: 10px;
}

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

עדכונים בכלי הפיתוח ל-Chromium

בעקבות העדכונים האלה, אנחנו מבצעים שינויים בכלי הפיתוח ל-Chromium, שימו לב איך החלונית סגנונות מטפלת עכשיו ב-grid-gap וב-gap 👍

משרד עם שני אנשים שעובדים ליד שולחן.
Devtools מציג את grid-gap וגם את gap, כאשר gap מוצג מתחת ל-grid-gap כדי לאפשר למפל להשתמש בתחביר העדכני ביותר.

כלי הפיתוח תומכים גם ב-grid-gap וגם ב-gap, כי gap הוא בעצם כינוי לתחבירים הקודמים.

פוטנציאל לפריסה חדשה

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

ציוץ

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

מרובה עמודות gap

בנוסף ל-Flexbox שתומכת בתחביר gap, פריסות מרובות-עמודות תומכות גם בתחביר gap הקצר יותר.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

יפה מאוד.