Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียร CSS ที่คุณสามารถใช้ได้ในวันนี้
ผมเชื่อว่านักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ทุกคนควรรู้ว่า :has() เป็นมากกว่า "ตัวเลือกหลัก"
วิธีการและเหตุผลของ subgrid วิธีฝังด้วยไวยากรณ์ CSS ในตัว วิธีทำให้
การตัดข้อความบรรทัดแรกสำหรับความสมดุลของเบราว์เซอร์ และวิธีใช้หน่วยการค้นหาของคอนเทนเนอร์
โพสต์นี้เป็นเนื้อหาต่อเนื่องจาก ข้อมูลโค้ด CSS จำนวน 6 รายการของปีที่แล้วที่นักพัฒนาฟรอนท์เอนด์ทุกคนควรรู้ในปี 2023
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() พร้อมให้ใช้งานในเบราว์เซอร์หลักๆ ทั้งหมดเมื่อสิ้นปี 2023 ดูเหมือนว่าตัวเลือกใหม่นี้
เล็กและไร้เดียงสา แต่คุณจะประหลาดใจกับทุก Use Case ที่แอปเหล่านี้ปลดล็อกได้:
เกม รีแอ็กทีฟ เลย์เอาต์ที่รับรู้เนื้อหา คอมโพเนนต์อัจฉริยะ และ
อีกมากที่ Jhey ได้สำรวจไว้เป็นอย่างดีในบทความนี้
ต่อไปนี้คือตัวอย่างการใช้ :has() เป็นตัวเลือกระดับบนสุด ชื่อที่ได้ชื่อนี้เพราะ
โดยปกติหัวเรื่องของตัวเลือกจะอยู่ส่วนท้าย เช่น ul li โดยที่ li คือหัวเรื่อง
และรับสไตล์ เมื่อใช้ :has() องค์ประกอบที่อยู่ตรงตอนต้นของตัวเลือกจะกลายเป็น
ชื่อเรื่อง ในตัวอย่างต่อไปนี้ ปุ่มมีช่องว่างหากมีองค์ประกอบอยู่ภายใน
ด้วยคลาส .icon การ์ดจะเปลี่ยนการวางแนวหากมีรูปภาพอยู่ข้างใน
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
ตัวเลือกแบบยาวที่ต้องการคือการเปลี่ยนเลย์เอาต์ตามจำนวนสินค้าที่มี ซึ่งตอนนี้คุณทำได้แล้ว
ด้วย :has() เนื่องจากสามารถเก็บคอนเทนเนอร์เป็น "เรื่อง" ขณะค้นหาจำนวนรายการย่อยได้
main:has(> :nth-child(5)) {…}
อีกตัวอย่างหนึ่งในระดับที่สูงขึ้น เปลี่ยนรูปแบบที่ตั้งค่ากับทั้งเอกสาร เมื่อเปิดใช้ช่องทำเครื่องหมายที่เจาะจงในหน้าเว็บ
html:has(#dark-mode:checked) {…}
นี่เป็น Use Case ง่ายๆ ที่ไม่เปลี่ยนแปลงหัวข้อของตัวเลือก หากคุณเพียงแค่ดูตัวอย่าง
เช่นนี้ คุณอาจคิดว่า :has() ถูกจำกัดไว้สำหรับตัวเลือกผู้ปกครองเท่านั้น ลองพิจารณาวิธีต่อไปนี้
ดูตัวอย่าง ซึ่งจะตรวจหาบางอย่างที่อิงตามระดับบนทั่วไป จากนั้นเปลี่ยนทิศทางของตัวเลือก
สำหรับเด็กที่อยู่ลึกลงไปในหน้านั้น
ส่วนนี้แสดงองค์ประกอบของข้อผิดพลาดของแบบฟอร์มหากมีอินพุตที่ไม่ถูกต้อง
form:has(:user-invalid) .error {
display: block;
}
สไลด์นี้เลื่อนออกจากพื้นที่เนื้อหาหลักเมื่อการนำทางด้านข้างมีคลาสเป็น .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
มาดูเดโมสนุกๆ ที่ใช้ :has() เป็นตัวเลือกหลัก :has() พร้อมการค้นหาปริมาณ
และ การค้นหาคอนเทนเนอร์ เพื่อสร้างรูปแบบตารางกริดที่สามารถแสดงผลได้อย่างสวยงาม
องค์ประกอบ 1-12 รายการในแนวตั้งหรือแนวนอน:
สร้างตารางกริดย่อย
subgrid
เป็นเวลาหลายปีแล้วที่ชุมชนเว็บฟรอนท์เอนด์ได้ขอให้ระบบตารางกริดย่อยเพื่อช่วยจัดองค์ประกอบให้เสร็จเรียบร้อย เครื่องมือเลย์เอาต์แบบตารางกริด CSS ที่มีประสิทธิภาพและได้รับความนิยมอย่างมาก ซึ่งตอนนี้มีให้ใช้งานในเครื่องมือค้นหาหลักทั้ง 3 ประเภทแล้ว
เรียนรู้เพิ่มเติมเกี่ยวกับตารางย่อยที่นี่หากต้องการดูภาพรวม
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
ฝังวิธี CSS
nesting
การฝัง CSS ในตัวพร้อมใช้งานในเบราว์เซอร์หลักๆ ทุกเบราว์เซอร์ในปี 2023 ผมยังอัปเดตเว็บไซต์เพื่อนำกระบวนการสร้าง ที่คอมไพล์การซ้อนออกไปอีกด้วย และตอนนี้ก็จัดส่ง สไตล์ชีตที่เล็กลง ใช่ สไตล์ชีตที่มีการซ้อนมีขนาดเล็กลง เครื่องมือสำหรับนักพัฒนาเว็บจะพร้อมนำเสนอ
ดูภาพรวมของไวยากรณ์การซ้อน CSS ได้ที่นี่ เพื่อดูรายละเอียดทั้งหมด ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างไวยากรณ์
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
ให้เบราว์เซอร์สมดุลระหว่างบรรทัดแรก
balance
pretty
หากไม่มี text-wrap: balance นักพัฒนาแอปและนักเขียนเนื้อหาจะเหลือคำแนะนำการขึ้นบรรทัดใหม่
เช่น <wbr> เอลิเมนต์หรือ ­ ส่วนใหญ่แล้วจะเป็นการต่อสู้ที่แพ้ เพราะทันทีที่
เนื้อหาได้รับการแปล ซูม หรือแก้ไขไม่ว่าในลักษณะใดก็ตาม จึงไม่สามารถรับประกันได้ว่า
คำแนะนำในการตัดข้อความจะอยู่ในตำแหน่งที่เหมาะสมสำหรับการนำเสนอเนื้อหารูปแบบใหม่
เมื่อใช้การตัดข้อความอย่างสมดุล คุณสามารถออกจากการดำเนินการนี้กับเบราว์เซอร์ได้ ดูการเปรียบเทียบได้ใน Codepen ต่อไปนี้
ใช้หน่วยการค้นหาของคอนเทนเนอร์
cqw
โพสต์เมื่อปีที่แล้ว ได้แนะนำว่านักพัฒนาฟรอนท์เอนด์ทุกคนควรรู้วิธีเขียน ของคอนเทนเนอร์ ถ้าคุณยังไม่ได้เรียนรู้ ก็ทำให้ปี 2024 เป็นปีที่เราประสบความสำเร็จได้ และตรวจสอบหน่วยการค้นหาของคอนเทนเนอร์ด้วย ภาพรวม Ahmad Shadeed เขียนบทความที่ยอดเยี่ยมเกี่ยวกับหน่วยการค้นหาคอนเทนเนอร์ในปี 2021
มีหน่วยขององค์กรควบคุมใหม่ 6 หน่วยดังนี้
- ตัวแปรในบรรทัด
cqi - ตัวแปรความกว้าง
cqw - รูปแบบการบล็อก
cqb - ตัวแปรความสูง
cqh - ตัวแปรสำหรับความยาวที่น้อยกว่า
cqmin - ตัวแปรสำหรับความยาวที่มากกว่า
cqmax
ลองพิจารณาสถานการณ์จำลองภาพเคลื่อนไหวภายในคอนเทนเนอร์ องค์ประกอบย่อยที่เลื่อนออกจากคอนเทนเนอร์โดย โดยใช้ 100cqi ซึ่งเท่ากับ 100% ของขนาดคอนเทนเนอร์ในบรรทัด
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
นี่คือการ์ดที่มีการพิมพ์ตามคอนเทนเนอร์ที่ปรับเปลี่ยนตามอุปกรณ์ และรูปภาพที่ปรับตาม การวางแนวของคอนเทนเนอร์ กลายเป็นขนาดครึ่งหนึ่งหากการวางแนวเป็นแนวนอน
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
หากหน่วยเหล่านี้ใหม่สำหรับคุณ เราขอแนะนำให้คุณ ดูหน่วยทั้งหมดที่คุณใช้ได้ในปี 2024