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

ספריית 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;
  }
}
@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. גלילה עם נקודות עצירה (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

  • 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: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

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

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

.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