Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียรแบบที่คุณใช้งานได้ในปัจจุบัน
ผมเชื่อว่านักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ทุกคนควรทราบวิธีใช้คำค้นหาคอนเทนเนอร์ สร้างประสบการณ์การสแนปการเลื่อน หลีกเลี่ยง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
container
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
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