CSS ที่มีประสิทธิภาพ ใช้งานได้จริง และเสถียรซึ่งคุณใช้ได้เลยในวันนี้
เราเชื่อว่านักพัฒนาซอฟต์แวร์ฝั่งหน้าเว็บทุกคนควรทราบวิธีใช้การค้นหาคอนเทนเนอร์ สร้างประสบการณ์การเลื่อนแบบ Snap หลีกเลี่ยงการใช้ 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;
}
}
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
เลเยอร์ตามลำดับขั้นช่วยแทรกตัวแปรที่ค้นพบหรือสร้างขึ้นในภายหลังไปยังตําแหน่งที่เหมาะสมในลําดับชั้นที่มีชุดตัวแปรเดิม
/* 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