6 ข้อมูลโค้ด CSS ที่นักพัฒนาซอฟต์แวร์ส่วนหน้าควรทราบในปี 2023

Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียรแบบที่คุณใช้งานได้ในปัจจุบัน

Adam Argyle

ผมเชื่อว่านักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ทุกคนควรทราบวิธีใช้คำค้นหาคอนเทนเนอร์ สร้างประสบการณ์การสแนปการเลื่อน หลีกเลี่ยงposition: absolute ด้วยตารางกริด ตอกวงกลมทันที ใช้เลเยอร์แบบ Cascade เพื่อเข้าถึงได้มากขึ้นโดยใช้น้อยลงผ่านทางพร็อพเพอร์ตี้เชิงตรรกะ ภาพรวมคร่าวๆ ของความคาดหวังแต่ละข้อมีดังนี้

1. การค้นหาคอนเทนเนอร์

ฟีเจอร์ CSS ที่มีการร้องขอกันเข้ามามากที่สุดตลอด 10 ปีนั้นเสถียรแล้วในเบราว์เซอร์ต่างๆ และพร้อมให้คุณใช้สำหรับการค้นหาตามความกว้างในปี 2023

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

การสนับสนุนเบราว์เซอร์

• 105
• 105
• 110
• 16

แหล่งที่มา

container

การสนับสนุนเบราว์เซอร์

• 105
• 105
• 110
• 16

แหล่งที่มา

2. สแนปการเลื่อน

ประสบการณ์การเลื่อนที่เรียบเรียงอย่างดีเยี่ยมจะทำให้ประสบการณ์การใช้งานของคุณโดดเด่นไม่เหมือนใคร และการเลื่อน สแนปก็เป็นวิธีที่สมบูรณ์แบบในการจับคู่ UX ของการเลื่อนของระบบ และให้จุดหยุดที่น่าสนใจ

.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

การสนับสนุนเบราว์เซอร์

• 69
• 79
• 99
• 11

แหล่งที่มา

scroll-snap-align

การสนับสนุนเบราว์เซอร์

• 69
• 79
• 68
• 11

แหล่งที่มา

scroll-snap-stop

การสนับสนุนเบราว์เซอร์

• 75
• 79
• 103
• 15

แหล่งที่มา

overscroll-behavior

การสนับสนุนเบราว์เซอร์

• 63
• 18
• 59
• 16

แหล่งที่มา

3. กองตารางกริด

หลีกเลี่ยงตำแหน่งสัมบูรณ์ด้วยตารางกริด CSS ของเซลล์เดียว เมื่อซ้อนกัน ให้ใช้การจัดแนวชิดขอบและจัดตำแหน่งพร็อพเพอร์ตี้

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

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

grid

การสนับสนุนเบราว์เซอร์

• 57
• 16
• 52
• 10.1

แหล่งที่มา

4. แวดวงสั้นๆ

การสร้างวงกลมใน CSS มีหลายวิธี แต่จริงๆ แล้วนี่เป็นวิธีที่น้อยที่สุด

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

aspect-ratio

การสนับสนุนเบราว์เซอร์

• 88
• 88
• 89
• 15

แหล่งที่มา

5. ควบคุมตัวแปรด้วย @layer

เลเยอร์แบบ Cascade จะช่วยแทรกตัวแปรที่ค้นพบหรือสร้างขึ้นในภายหลังลงในตำแหน่งที่ถูกต้องใน Cascade ที่มีชุดตัวแปรดั้งเดิมได้

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

จากนั้น โหลดรูปแบบใหม่อย่างสิ้นเชิงในบางไฟล์ แล้วเพิ่มตัวแปรใหม่ลงในเลเยอร์ปุ่มราวกับว่าอยู่ที่นั่นกับส่วนที่เหลือตลอดช่วงเวลานี้

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

การสนับสนุนเบราว์เซอร์

• 99
• 99
• 97
• 15.4

แหล่งที่มา

6. จดจำได้น้อยลงและเข้าถึงได้มากขึ้นด้วยคุณสมบัติเชิงตรรกะ

จดจำโมเดลของช่องใหม่ 1 โมเดลนี้ แล้วไม่ต้องกังวลเรื่องการเปลี่ยนระยะห่างจากขอบด้านซ้ายและขวาหรือระยะขอบสำหรับโหมดการเขียนระหว่างประเทศและเส้นทางเอกสารอีกครั้ง ปรับรูปแบบจากคุณสมบัติทางกายภาพไปจนถึงแบบตรรกะ เช่น 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

การสนับสนุนเบราว์เซอร์

• 87
• 87
• 66
• 14.1

แหล่งที่มา

margin-block

การสนับสนุนเบราว์เซอร์

• 87
• 87
• 66
• 14.1

แหล่งที่มา

inset-inline

การสนับสนุนเบราว์เซอร์

• 87
• 87
• 63
• 14.1

แหล่งที่มา