หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Adam Argyle

ฉันเชื่อว่านักพัฒนาฟรอนท์เอนด์ทุกคนควรรู้วิธีใช้ container การค้นหา สร้างประสบการณ์การสแนปแบบเลื่อน หลีกเลี่ยง 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 Snap

ประสบการณ์การเลื่อนที่จัดเรียงอย่างดี ช่วยให้ประสบการณ์ของคุณแตกต่างจากส่วนอื่นๆ และเลื่อน snap คือ วิธีที่สมบูรณ์แบบในการจับคู่ 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

การรองรับเบราว์เซอร์

แหล่งที่มา

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 เลเยอร์ สามารถช่วยแทรกตัวแปรได้ ค้นพบหรือสร้างในภายหลัง ในตำแหน่งที่ถูกต้องใน Cascade ที่มี ชุดตัวแปรดั้งเดิม

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

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

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

@layer

การรองรับเบราว์เซอร์

แหล่งที่มา

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

การรองรับเบราว์เซอร์

แหล่งที่มา

margin-block

การรองรับเบราว์เซอร์

แหล่งที่มา

inset-inline

การรองรับเบราว์เซอร์

แหล่งที่มา