CSS กำลังไป Gosh-Darned Hog Wild ฉันบอกอะไรคุณ

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

ในขณะที่บางคนกำลังนั่งดู CSS วิวัฒนาการ มันรู้สึกเหมือนว่าเราอยู่ในช่วงเวลาที่ร้อนแรงที่สุดของนวัตกรรมในประวัติศาสตร์ CSS มันเป็นบางสิ่งจริงๆ เมื่อเรามี flexbox ในทุกเบราว์เซอร์ และหลังจากนั้นไม่นานก็กริด พวกเขาเปลี่ยนเกมจาก CSS ที่รู้สึกเหมือนเป็นคอลเล็กชั่นลูกเล่นที่น่าอึดอัดใจเป็นสิ่งที่สมเหตุสมผลและเหมาะสมกว่า

ความรู้สึกนั้นเป็นจริงมากขึ้นเรื่อย ๆ ตลอดเวลา ในช่วงสั้นๆ ที่ผ่านมา นี่คือรายการของสิ่งที่เกิดขึ้น

⚠️🤷 ไวยากรณ์อาจไม่เหมือนกับตัวอย่างใดๆ ด้านล่างนี้เมื่อส่งจริง 🤷⚠️

การทำรังพื้นเมือง

การทำรังพื้นเมืองได้กลายเป็น ร่างการทำงานสาธารณะฉบับแรกหมายความว่าใกล้จะเป็นของจริงมากขึ้นกว่าเดิม ผู้คนจำนวนมากใช้ตัวประมวลผลล่วงหน้าเพื่อความสะดวกในการซ้อน และสิ่งนี้น่าจะเป็นประโยชน์สำหรับผู้ที่ต้องการลดความซับซ้อนของเครื่องมือสร้างเพื่อหลีกเลี่ยงปัญหานั้น

ฉันชอบวิธีการที่คุณทำได้เป็นพิเศษ กฎเงื่อนไขรัง.

.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { }
}

ฉันเคยได้ยินเสียงกระซิบว่านี่เป็นแนวคิดที่ใช้การได้เหมือนกัน ซึ่งหลีกเลี่ยงไม่ให้ & บนตัวเลือกที่เรียบง่ายและหลีกเลี่ยง @nest เลย

.card {{ .title { } .body { } body.dark & { }
}}

แบบสอบถามคอนเทนเนอร์

การสืบค้นข้อมูลคอนเทนเนอร์เป็นเพียงฉบับร่างของบรรณาธิการ (CSS Containment Module ระดับ 3) ในขณะนี้ แต่พวกเขามีการใช้งานใน Chrome แล้ว (พร้อมแฟล็ก) สิ่งเหล่านี้เป็นเรื่องใหญ่เพราะช่วยให้เราสามารถตัดสินใจเกี่ยวกับสไตล์ตามขนาดของคอนเทนเนอร์ได้ ซึ่งในโลกที่ขับเคลื่อนด้วยส่วนประกอบในปัจจุบันเป็นแนวคิดที่ดีอย่างยิ่ง

ดู รหัส สำหรับ เว็บไซต์ตัวอย่างง่ายๆ (อาจดูแปลกถ้าคุณไม่ได้ติดธงใน Chrome)

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card { display: flex;
}
@container (max-width: 500px) { /* Must style a child, not the container */ .card { flex-direction: column; }
}

หน่วยคอนเทนเนอร์

หน่วยคอนเทนเนอร์ มี ร่างสเปค เช่นกัน ซึ่งสำหรับฉัน มีประโยชน์เกือบสองเท่าของการสืบค้นคอนเทนเนอร์ แนวคิดคือคุณมีหน่วยที่ยึดตามขนาดของคอนเทนเนอร์ (ความกว้าง ความสูง หรือ "ขนาดอินไลน์" / "ขนาดบล็อก") ฉันจินตนาการถึง qi หน่วยที่มีประโยชน์มากที่สุด

หวังว่าเร็ว ๆ นี้ เราจะเขียน CSS ขอบเขตคอนเทนเนอร์ที่จัดรูปแบบตามขนาดของตัวเอง และสามารถส่งผ่านขนาดนั้นสำหรับคุณสมบัติอื่น ๆ เพื่อใช้ภายใน ดิ font-size คุณสมบัติเป็นตัวอย่างง่ายๆ ที่มีประโยชน์ (แบบอักษรที่ปรับขนาดตามคอนเทนเนอร์) แต่ฉันแน่ใจว่าคอนเทนเนอร์ยูนิตจะใช้สำหรับสิ่งของทุกประเภท เช่น gap, paddingและใครจะรู้ว่าอะไรอีก

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card h2 { font-size: 1.5rem; /* fallback */
}
@container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem + 2qi, 56px) }
}

เลเยอร์คาสเคด

เลเยอร์คาสเคด (ใน ร่างการทำงาน spec) แนะนำกระบวนทัศน์ใหม่ทั้งหมดที่ตัวเลือก CSS ชนะใน Cascade ตอนนี้ส่วนใหญ่เป็นการแข่งขันเฉพาะ ตัวเลือกที่มีความเฉพาะเจาะจงสูงสุดจะชนะ แพ้เฉพาะสไตล์อินไลน์และกฎเฉพาะด้วย !important ข้อ แต่สำหรับเลเยอร์ ตัวเลือกที่ตรงกันบนเลเยอร์ที่สูงกว่าจะเป็นผู้ชนะ

@layer base; @layer theme; @layer utilities; /* Reset styles with no layer (super low) */
* { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); }
} @layer base { /* Most styles? */
} @layer utilities { .no-margin { margin: 0; }
}

@เมื่อไร

แท็บแอตกินส์ ข้อเสนอ สำหรับ CSS เมื่อ / อื่น ๆ กฎได้รับ ได้รับการยอมรับ และเป็นวิธีการแสดงออก @media และ @supports แบบสอบถามในลักษณะที่คุณสามารถแสดงออกได้ง่ายขึ้น else เงื่อนไข. ในขณะที่การสืบค้นข้อมูลของสื่อมีความสามารถอยู่แล้วในการ ทำตรรกะการทำแบบสอบถามที่ไม่เกิดร่วมกันนั้นยากที่จะแสดงออกมาเป็นเวลานาน และทำให้สิ่งนี้ง่ายมาก

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */
} @else { /* C */
}

การกำหนดขอบเขต

ความคิดของ สไตล์ที่กำหนดขอบเขต (อันนี้คือ บรรณาธิการฉบับร่าง) คือมันให้ไวยากรณ์สำหรับการเขียนบล็อกของสไตล์ที่ใช้เฉพาะกับบางตัวเลือกและภายในเท่านั้น แต่ยังมีความสามารถที่จะหยุดขอบเขตสร้าง สโคปโดนัท.

ส่วนที่ฉันชอบที่สุดคือความเข้มแข็ง "ความใกล้เคียง" มิเรียมอธิบายดังนี้:

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

<div class="dark-theme"> <a href="#">plum</a> <div class="light-theme"> <a href="#">also plum???</a> </div>
</div>

จุดที่ดีใช่มั้ย! ไม่มีวิธีใดที่ดีในการแสดงว่าคุณต้องการความใกล้ชิดของลิงก์นั้นไปยัง .light-theme ที่จะชนะ. ตอนนี้ความเฉพาะเจาะจงของทั้งสองเรื่องเหมือนกันแต่ .dark-theme มาทีหลัง — ดังนั้นมันจึงชนะ หวังว่ารูปแบบที่กำหนดขอบเขตจะช่วยในมุมนี้ได้เช่นกัน

@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... }
}

/* Proximity help! */
@scope (.light-theme) { a { color: purple; }
} @scope (.dark-theme) { a { color: plum; }
}

คุณไม่สามารถใช้ สิ่งใด ในรายการนี้บนเว็บไซต์การผลิตของคุณ หลังจากหลายปีเหล่านี้ที่พยายามติดตามเรื่องแบบนี้ ฉันยังคงไม่รู้ว่าทุกอย่างจะดำเนินไปอย่างไร ฉันคิดว่าสเปกต้องเสร็จและตกลงกันก่อน จากนั้นเบราว์เซอร์ก็รับมัน หวังว่าจะมีมากกว่าหนึ่งตัว และเมื่อมีแล้ว ฉันคิดว่าสเป็คสามารถสรุปได้หรือไม่

ฉันไม่รู้. บางทีมันอาจจะตาย บางทีมันอาจจะเกิดขึ้นเร็วมากและบางอย่างก็ช้ามาก มีแนวโน้มว่าบางส่วนจะลดลงในเบราว์เซอร์บางตัว แต่ไม่ใช่ในเบราว์เซอร์อื่น เฮ้ อย่างน้อยตอนนี้เราก็มีเบราว์เซอร์ที่ใช้งานได้ปกติ ดังนั้นเมื่อสิ่งต่าง ๆ ตก มันจะเกิดขึ้นอย่างรวดเร็ว ฉันรู้สึกว่าตอนนี้เราอยู่ในขั้นตอนที่คุณสมบัติ CSS ที่ใหญ่ที่สุดและดีที่สุดส่วนใหญ่ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด แต่ด้วยสิ่งนี้ที่จะมาถึง เราจะเข้าสู่ขั้นตอนที่การรองรับล่าสุดและยิ่งใหญ่ที่สุด จะขาด ๆ หาย ๆ มากขึ้น

ที่มา: https://css-tricks.com/css-is-going-gosh-darned-hog-wild-i-tell-ya-what/

ประทับเวลา: ตุลาคม 13, 2021