คุณสมบัติ CSS ใหม่ที่น่าจับตามองในปี 2022

ต่อไปนี้คือการอัปเดต Cascading Style Sheets บางส่วนที่คุณไม่ควรพลาด ตั้งแต่คุณสมบัติการเลื่อนสแนปที่ไม่ค่อยมีใครรู้จัก ไปจนถึงจานสีใหม่ที่น่าทึ่ง

CSS (Cascading Style Sheets) เปิดตัวครั้งแรกในปี 1996 และยังคงเป็นองค์ประกอบที่สำคัญและมีการพัฒนาอย่างต่อเนื่องของสแต็กการพัฒนาเว็บ CSS ก็เหมือนกับภาษาอื่นๆ ที่มีชีวิต มักจะเพิ่มคุณสมบัติใหม่ๆ เพื่อตอบสนองต่อการปฏิบัติในโลกแห่งความเป็นจริง เนื่องจากวิวัฒนาการอย่างรวดเร็ว แม้แต่นักพัฒนาที่ทุ่มเทอาจพลาดคุณสมบัติใหม่ ลองดูคุณสมบัติที่มีประโยชน์ที่สุดบางส่วนที่จะมาใน CSS ในอนาคตอันใกล้นี้

ตารางย่อย

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

เลย์เอาต์กริดจะถูกระบุโดย display: grid declaration และคล้ายกับ Flexbox ที่ให้คุณกำหนดเลย์เอาต์สี่เหลี่ยมในขณะที่ควบคุมกริดของคุณในสองมิติ
จากการวิจัยพบว่านักพัฒนา CSS ส่วนใหญ่รู้จัก Grid Layout และพวกเราหลายคนใช้มัน (อย่าลืมลองถ้าคุณยังไม่ได้!)

Subgrid เป็นคุณสมบัติใหม่ล่าสุดและมีประโยชน์มากสำหรับโมดูล Grid Layout คุณลักษณะกริดย่อยช่วยให้คุณสร้างกริดย่อยที่จะสืบทอดเค้าโครงของกริดหลัก

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

Subgrid มีให้บริการใน Firefox 71 ขึ้นไปเท่านั้น แต่มีการวางแผนสำหรับ Safari WebKit, Google Chrome และ Microsoft Edge Subgrid จะเป็นฟีเจอร์เลย์เอาต์ที่มีประโยชน์มากในอนาคต

เน้นสี

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

ตัวอย่างเช่น ดังที่แสดงในรายการ 1 คุณสามารถใช้สีม่วงแดงกับปุ่มตัวเลือกทั้งหมดบนหน้าเว็บของคุณ (ดูตัวอย่างสดนี้ด้วย)

รายการ 1: การควบคุมสี CSS สำหรับปุ่มตัวเลือก

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

เลื่อนสแน็ป

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

เป็นที่น่าสังเกตว่าผู้ใช้ CSS มากกว่าหนึ่งในสามยังคงไม่ทราบถึงการเลื่อนสแน็ป

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

รายการ 2 แสดงตัวอย่างง่ายๆ ของวิธีควบคุมการเลื่อนสแน็ปใน div (ดูตัวอย่างสดนี้ด้วย)

รายการ 2 เป็นตัวอย่างของสแน็ปเลื่อนอย่างง่าย

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

ตำแหน่งเลื่อน y ในรายการ 3 จะย้ายไปยังองค์ประกอบย่อยโดยอัตโนมัติ ไม่ว่าคุณจะปล่อยการเลื่อนไปที่ใด นี่เป็นเพราะคุณสมบัติ scroll-snap-type ของคอนเทนเนอร์ scroll ถูกตั้งค่าเป็น y และองค์ประกอบย่อยที่มี scroll-snap-align: start ประกาศ

พฤติกรรมนี้ยังสามารถเปลี่ยนแปลงได้ ตัวอย่างเช่น คุณสามารถตั้งค่าคุณสมบัติ scroll-snap-type ให้ใกล้เคียงกับ y ได้ ใช้งานได้ตามที่คาดไว้ สแน็ปเมื่อเลื่อนอยู่ใกล้กับองค์ประกอบเท่านั้น

นอกจากนี้ คุณสมบัติลักษณะการทำงาน overscroll ที่เกี่ยวข้องจะควบคุมลักษณะการทำงานของคอนเทนเนอร์แบบซ้อน-scroll

คุณสมบัติ CSS ลอจิก

คุณอาจเคยประสบกับความรำคาญที่ต้องเขียนคุณสมบัติ border-left และ border-right หรือ border-top, border-bottom properties verbatim ถ้าคุณเคยต้องการตั้งค่าคอนเทนเนอร์ border ด้านซ้ายและขวาหรือด้านล่างและ สูงสุด. ปัญหาคือไม่มีวิธีใช้คุณสมบัติทางลัดโดยไม่ส่งผลต่อเส้นขอบที่คุณไม่ต้องการเปลี่ยน สิ่งนี้เป็นจริงสำหรับองค์ประกอบต่างๆ เช่น ช่องว่างภายในและระยะขอบ

โมดูล CSS Logical Properties ช่วยให้คุณอ้างถึงสิ่งต่าง ๆ ในลักษณะนามธรรมโดยใช้คำสำคัญแบบอินไลน์และบล็อก เมื่อพูดถึงซ้ายและขวา ให้ใช้อินไลน์ เมื่อพูดถึงด้านบนและด้านล่างให้ใช้บล็อก ตัวอย่างเช่น หากต้องการเพิ่มเส้นขอบทางด้านซ้ายและด้านขวาของ div ให้ใช้โค้ดในรายการ 3 (ดูตัวอย่างสดที่นี่ด้วย)

รายการ 3: ช่องว่างภายในซ้ายและขวาพร้อมตรรกะแบบอินไลน์

 div { border- inline : 10px dashed seagreen; }

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

นักพัฒนาส่วนใหญ่ใช้ทางลัดเหล่านี้เพื่อจัดการกับปัญหาทิศทางข้อความและโหมดการเขียน ในกรณีเหล่านี้ คุณสมบัติ เช่น padding-inline-end ช่วยให้คุณกำหนดเป้าหมายการเติมต่อท้ายโดยไม่คำนึงถึงทิศทางของข้อความ

โดยพื้นฐานแล้ว สิ่งที่เป็นนามธรรมไปยังอินไลน์และบล็อกช่วยให้สามารถสร้างสไตล์ทั่วไปที่สามารถนำไปใช้กับสถานการณ์ต่างๆ ได้ ดูข้อมูลเพิ่มเติมได้ที่ CSS Logical Properties and Values

ค้นหาคอนเทนเนอร์

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

ไม่มีคำจำกัดความที่ชัดเจนของไวยากรณ์ แต่อาจคล้ายกับรายการ 4

@คอนเทนเนอร์ รายชื่อ 4

 @container (max-width: 650px){ … }

พิจารณาว่าจะมีประสิทธิภาพเพียงใดในการปรับแต่งเลย์เอาต์ตามขนาดของคอนเทนเนอร์ต่างๆ ที่ปรากฏตลอดทั้งเลเยอร์ที่ซ้อนกันของ UI นี่เป็นการเปลี่ยนแปลงที่สำคัญพอสมควรที่จะจุดประกายให้เกิดนวัตกรรมอินเทอร์เฟซ

สามโทนสีใหม่

ผู้ปฏิบัติงาน CSS ได้ใช้ RGB, HEX และสีที่มีชื่อเพื่อตกแต่งและทำให้อุปกรณ์แสดงผลมีชีวิตชีวาขึ้นตั้งแต่สมัยโบราณ การประกาศสีสไตล์ HSL เพิ่งเปิดตัว ข้อมูลจำเพาะ CSS กำลังเปิดตัวตัวบอกสีใหม่ ได้แก่ hwb, lab และ lch

HWB เป็นตัวย่อของ hue, whiteness และ blackness เป็นสัมผัสที่ดีที่โดดเด่นสำหรับความสามารถในการอ่านของมนุษย์ - คุณเลือกสีแล้วเพิ่มสีขาวและสีดำ เข้ากันได้กับ Chrome, Firefox และ Safari เวอร์ชันล่าสุด (การอ้างอิงคุณลักษณะของ Microsoft Edge นั้นเงียบอย่างน่าประหลาดในเรื่องนี้) หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HWB โปรดดูที่ hwb() – เครื่องหมายสีสำหรับมนุษย์? เช่นเดียวกับ RGB และ HWL มีช่องอัลฟาเพื่อความโปร่งใส

LCH ซึ่งย่อมาจาก lightness, chroma และ hue มีความโดดเด่นในการขยายจานสีที่มีอยู่ สี LCH ใช้ใน CSS อะไร ทำไม และอย่างไร นี่คือภาพรวมที่ดีที่รวมการอภิปรายที่เปิดหูเปิดตาเกี่ยวกับทฤษฎีสีใน CSS ขณะนี้มีเพียง Safari เท่านั้นที่รองรับ LCH

ทฤษฎีส่วนใหญ่ของขอบเขตสีใหม่คือ LAB ซึ่งได้มาจากทฤษฎีสี CIE LAB ตัวบ่งชี้สีของห้องปฏิบัติการอ้างว่าครอบคลุมสีที่มนุษย์มองเห็นได้ทั้งหมดซึ่งเป็นข้อเรียกร้องที่ชัดเจน เช่นเดียวกับ LCH ปัจจุบัน Safari รองรับเท่านั้น ดูข้อมูลเพิ่มเติมเกี่ยวกับ LAB สำหรับ CSS ได้ในเอกสารประกอบ Mozilla CSS