דף זה תורגם על ידי 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. הצמדה לגלילה

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

.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 הזו זמין באוסף Codepen הכולל כ-25 הדגמות.

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

תמיכה בדפדפן

מקור