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

קובצי CSS יציבים ועוצמתיים שמתאימים לשימוש מיידי.

Adam Argyle

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

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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

באוסף הענק והמעורר השראה הזה ב-Codepen יש כ-25 הדגמות שמאפשרות ללמוד עוד על הפוטנציאל של תכונת ה-CSS הזו.

scroll-snap-type

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Source

scroll-snap-align

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Source

scroll-snap-stop

Browser Support

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Source

overscroll-behavior

Browser Support

  • Chrome: 144.
  • Edge: 18.
  • Firefox: 150.
  • Safari: 16.

Source

3. ערימת תמונות ברשת

עדיף להימנע משימוש ב-position absolute עם רשת CSS של תא יחיד. אחרי שהתאים נערמים אחד על השני, צריך להשתמש במאפייני justify ו-align כדי למקם אותם.

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

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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

4. מעגל מהיר

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

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

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

margin-block

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

inset-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Source