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

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

.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

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

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

תמיכה בדפדפן

מקור