ספריית CSS חזקה ויציבה שאפשר להשתמש בה כבר היום.
לדעתי, כל מפתח ממשק קצה צריך לדעת איך להשתמש בשאילתות של מאגרים, ליצור חוויית הצמדה לגלילה, להימנע מ-position: absolute
באמצעות רשת, ליצור עיגול במהירות, להשתמש בשכבות מדורגות ולהגיע לתוצאות טובות יותר באמצעות פחות קוד באמצעות מאפיינים לוגיים. לפניכם סקירה כללית מהירה של כל אחת מהן.
1. שאילתת קונטיינר
התכונה הפופולרית ביותר ב-CSS שביקשו אותה במשך 10 שנים ברציפות יציבה עכשיו בכל הדפדפנים, ותוכלו להשתמש בה בשאילתות לגבי רוחב בשנת 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. גלילה עם נקודות עצירה (scroll snapping)
חוויית גלילה מתואמת היטב מבדילה את חוויית המשתמש שלכם מכל השאר, והצמדת גלילה היא הדרך המושלמת להתאים את חוויית המשתמש בגלילה למערכת תוך מתן נקודות עצירה משמעותיות.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
בקולקציה העצומה והמעניקה השראה הזו ב-Codepen יש כ-25 הדגמות שממחישות את הפוטנציאל של התכונה הזו ב-CSS.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. ערימת תמונות בגריד
הימנעו ממיקום מוחלט באמצעות רשת CSS של תא יחיד. אחרי שהם יוערמו זה על גבי זה, תוכלו להשתמש במאפייני ההתאמה והיישור כדי למקם אותם.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. מעגל מהיר
יש הרבה דרכים ליצור עיגולים ב-CSS, אבל זו בהחלט הדרך המינימלית ביותר.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. שליטה בוריאנטים באמצעות @layer
שכבות של מפל יכולות לעזור להוסיף וריאנטים שגיליתם או יצרתם מאוחר יותר, למיקום הנכון במפל עם קבוצת הווריאנטים המקורית.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
לאחר מכן, בקובץ אחר לגמרי, שנטען בזמן אקראי אחר, מוסיפים וריאנט חדש לשכבת הלחצן כאילו הוא היה שם עם שאר הווריאנטים כל הזמן.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
6. שומרים פחות בזיכרון ומגיעים ליותר משתמשים באמצעות מאפיינים לוגיים
כדאי לשנן את מודל התיבה החדש הזה, ולא תצטרכו יותר לשנות את השוליים או את הרווח הימני והשמאלי עבור סגנונות כתיבה בינלאומיים וכיווני גיליון.
משנים את הסגנונות ממאפיינים פיזיים למאפיינים לוגיים כמו padding-inline
, margin-inline
, inset-inline
, והדפדפן יבצע את ההתאמות.
button { padding-inline: 2ch; padding-block: 1ch; } article > p { text-align: start; margin-block: 2ch; } .something::before { inset-inline: auto 0; }