שירות CSS איכותי, עוצמתי ויציב שאפשר להשתמש בו כבר היום.
לדעתי כל מפתח ממשק קצה צריך לדעת איך להשתמש בשאילתות של קונטיינרים, ליצור חוויית גלילה Snap, להימנע מ-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. גלילת הצמדה
חוויות גלילה מתוזמנות היטב מבדילות את חוויית השימוש שלכם מכל השאר. והצמדה של גלילה היא הדרך המושלמת להתאים את חוויית הגלילה במערכת ולספק נקודות עצירה משמעותיות.
.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 הזו, אפשר לעיין באוסף GooglePens הגדול ומעורר ההשראה שכולל כ-25 הדגמות.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. ערימת רשת
להימנע ממיקום המוחלט עם רשת CSS של תא יחיד. אחרי שהם מועברים זה על גבי זה, משתמשים ביישור ויישור של המאפיינים כדי למקם אותם.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. מעגל מהיר
יש הרבה דרכים ליצור מעגלים ב-CSS, אבל זו בהחלט הדרך המינימלית ביותר.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. שליטה בווריאציות באמצעות @layer
שכבות המדרגות יכולות לעזור להוסיף וריאנטים שהתגלו או נוצרו מאוחר יותר למקום הנכון במפל עם קבוצת הווריאנטים המקורית.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
לאחר מכן, בקובץ אחר לגמרי, שנטען בזמן אקראי אחר, מוסיפים וריאנט חדש לשכבת הלחצן, כאילו היא הייתה שם יחד עם שאר המשתמשים באותו זמן.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. מאפיינים לוגיים מאפשרים לזכור פחות ולשפר את פוטנציאל החשיפה
חשוב לזכור בעל-פה את מודל התיבה החדש, ולעולם לא צריך לדאוג לגבי שינוי המרווח הפנימי או השוליים השמאליים והימניים במצבי כתיבה בינלאומיים והוראות מפורטות ליצירת מסמכים.
אפשר לשנות את הסגנונות, ממאפיינים פיזיים למאפיינים לוגיים כמו
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;
}