Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียรแบบที่คุณใช้งานได้ในปัจจุบัน
ผมเชื่อว่านักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ทุกคนควรรู้จัก :has() เป็นมากกว่า "ตัวเลือกหลัก", วิธีการและสาเหตุที่ใช้ subgrid, วิธีซ้อนด้วยไวยากรณ์ CSS ในตัว, วิธีการทำให้เบราว์เซอร์สร้างสมดุลระหว่างการตัดข้อความบรรทัดแรก และวิธีใช้หน่วยการค้นหาคอนเทนเนอร์
โพสต์นี้เป็นโพสต์ที่ต่อเนื่องมาจากข้อมูลโค้ด CSS 6 รายการของปีที่แล้วที่นักพัฒนาแอปฟรอนท์เอนด์ทุกคนควรทราบในปี 2023
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() พร้อมให้ใช้งานในเบราว์เซอร์หลักๆ ทั้งหมดเมื่อสิ้นปี 2023 ตัวเลือกใหม่นี้ดูเล็กและไร้เดียงสาแต่คุณจะประหลาดใจกับกรณีการใช้งานทั้งหมดที่ปลดล็อกได้ ไม่ว่าจะเป็นเกม การรีแอ็กทีฟ เลย์เอาต์แบบคำนึงถึงเนื้อหา คอมโพเนนต์อัจฉริยะ และสิ่งอื่นๆ ที่ 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) {…}
ต่อไปนี้เป็นกรณีการใช้งานง่ายๆ ที่จะไม่เปลี่ยนแปลงชื่อเรื่องของตัวเลือก หากคุณเพียงแค่ดูตัวอย่างเช่นนี้ คุณอาจคิดว่า :has() ถูกจำกัดให้เป็นเพียงตัวเลือกระดับบนสุด ลองดูตัวอย่างต่อไปนี้ เครื่องมือเหล่านี้จะตรวจสอบบางสิ่งโดยอิงตามระดับบนที่มีร่วมกัน จากนั้นเปลี่ยนแนวทางตัวเลือกเป็นเนื้อหาสำหรับเด็กที่อยู่ลึกลงไปในหน้านั้น
องค์ประกอบนี้จะแสดงองค์ประกอบข้อผิดพลาดของแบบฟอร์มหากข้อมูลป้อนเข้าไม่ถูกต้อง
form:has(:user-invalid) .error {
display: block;
}
สไลด์นี้เลื่อนออกจากพื้นที่เนื้อหาหลักเมื่อแผงด้านข้างมีคลาสเป็น .--is-open
html:has(#sidenav.--is-open) main {
translate: -320px;
}
มาชมการสาธิตสนุกๆ ที่ใช้ :has() เป็นตัวเลือกหลัก ใช้ :has() กับการค้นหาจำนวน และใช้การค้นหาคอนเทนเนอร์เพื่อสร้างเลย์เอาต์แบบตารางกริดที่แสดงองค์ประกอบ 1-12 อย่างได้อย่างสง่างามในแนวตั้งหรือแนวนอน
สร้างตารางกริดย่อย
subgrid
เป็นเวลาหลายปีแล้วที่ชุมชนเว็บส่วนหน้าได้ขอให้ Subgrid เข้ามาช่วยปรับแต่งและทำให้เครื่องมือเลย์เอาต์แบบตารางกริด CSS ของ 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