Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียร CSS ที่คุณสามารถใช้ได้ในวันนี้
ฉันเชื่อว่านักพัฒนาฟรอนท์เอนด์ทุกคนควรรู้วิธีใช้ 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;
}
}
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