שירות 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. הצמדה לגלילה
חוויות גלילה מתוזמנות היטב מבדילות את החוויה שלך מכל השאר, ולגלול Snap הוא דרך מושלמת להתאמת חוויית המשתמש בגלילה למערכת, תוך עצירה משמעותית נקודות.
.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;
}
מידע נוסף על הפוטנציאל של תכונת ה-CSS הזו זמין במסמך הזה ענק ומעורר השראה אוסף Codepen שכולל כ-25 הדגמות.
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
Cascade שכבות יש לך אפשרות להוסיף וריאנטים התגלה או נוצר מאוחר יותר, במקום הנכון ברצף עם קבוצת וריאציות מקורית.
/* 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; }