6 קטעי CSS שכל מפתחי ממשק קצה צריכים להכיר בשנת 2023

ספריית CSS חזקה ויציבה שאפשר להשתמש בה כבר היום.

Adam Argyle

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

1. שאילתה בקונטיינר

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

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

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

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

3. ערימת תמונות בגריד

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

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

• 57
• 16
• 52
• 10.1

Source

4. מעגל מהיר

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

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

• 88
• 88
• 89
• 15

Source

5. שליטה בוריאנטים באמצעות @layer

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

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

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

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

• 99
• 99
• 97
• 15.4

Source

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;
}

padding-inline

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source