דף זה תורגם על ידי Cloud Translation API.

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

תמיכה בדפדפנים

מקור

container

תמיכה בדפדפנים

מקור

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

תמיכה בדפדפנים

מקור

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

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

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

padding-inline

תמיכה בדפדפנים

מקור

margin-block

תמיכה בדפדפנים

מקור

inset-inline

תמיכה בדפדפנים

מקור