รับข้อมูลอัปเดตเกี่ยวกับฟีเจอร์ที่น่าสนใจใน CSS ที่ทันสมัย
ปัจจุบัน CSS มีเรื่องน่าตื่นเต้นมากมายมากมาย และหลายเรื่องก็รองรับในเบราว์เซอร์ในปัจจุบันแล้ว การบรรยายของเราที่งาน CDS 2019 ซึ่งคุณรับชมได้ด้านล่างมีข้อมูลเกี่ยวกับฟีเจอร์ใหม่และที่กำลังจะเปิดตัวมากมายซึ่งเราคิดว่าควรได้รับความสนใจ
โพสต์นี้เน้นไปที่ฟีเจอร์ที่คุณใช้ได้ในปัจจุบัน อย่าลืมดูการพูดคุยเพื่อพูดคุยอย่างเจาะลึกเกี่ยวกับฟีเจอร์ที่กำลังจะเปิดตัว เช่น Houdini นอกจากนี้ คุณยังดูการสาธิตฟีเจอร์ทั้งหมดที่เราพูดคุยกันได้ในหน้า CSS@CDS
เนื้อหา
- สแนปการเลื่อน
:focus-within
- คิวรี่สื่อระดับ 5
- สมบัติทางตรรกะ
position: sticky
backdrop-filter
:is()
gap
- CSS Houdini
- รายการเพิ่มเติม
สแนปการเลื่อน
Scroll Snap ให้คุณกำหนดจุดสแนปขณะที่ผู้ใช้เลื่อนเนื้อหาในแนวตั้ง แนวนอน หรือทั้ง 2 อย่าง อุปกรณ์จะมีความเฉื่อยและการลดความเร็วในตัว และรองรับการสัมผัส
โค้ดตัวอย่างนี้ตั้งค่าการเลื่อนแนวนอนในองค์ประกอบ <section>
โดยมีจุดสแนปที่จัดชิดด้านซ้ายขององค์ประกอบ <picture>
ย่อย ดังนี้
section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
section > picture {
scroll-snap-align: start;
}
วิธีการมีดังนี้
- ในองค์ประกอบ
<section>
ระดับบนสุด- มีการตั้งค่า
overflow-x
เป็นauto
เพื่อเลื่อนในแนวนอน - มีการตั้งค่า
overscroll-behavior-x
เป็นcontain
เพื่อป้องกันไม่ให้องค์ประกอบระดับบนสุดเลื่อนเมื่อผู้ใช้ไปถึงขอบเขตของพื้นที่เลื่อนขององค์ประกอบ<section>
(วิธีนี้ไม่จำเป็นต่อการสแนป แต่ก็มักเป็นความคิดที่ดี) - มีการตั้งค่า
scroll-snap-type
เป็นx
สำหรับการสแนปในแนวนอนและmandatory
เพื่อให้วิวพอร์ตสแนปไปยังจุดสแนปที่ใกล้ที่สุดเสมอ
- มีการตั้งค่า
- ในองค์ประกอบ
<picture>
ย่อยscroll-snap-align
ได้รับการตั้งค่าให้เริ่มต้น ซึ่งกำหนดจุดสแนปที่ด้านซ้ายของแต่ละภาพ (สมมติว่าdirection
ได้รับการตั้งค่าเป็นltr
)
และนี่คือการสาธิตแบบสด:
คุณยังดูการสาธิตเกี่ยวกับสแนปการเลื่อนแนวตั้งและสแนปการเลื่อนแบบเมทริกซ์ได้ด้วย
:focus-within
:focus-within
ช่วยแก้ปัญหาการช่วยเหลือพิเศษที่มีมาอย่างยาวนาน: มีหลายกรณีที่การมุ่งเน้นองค์ประกอบย่อยควรส่งผลต่อการนำเสนอองค์ประกอบหลักเพื่อให้ผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษเข้าถึง UI ได้
ตัวอย่างเช่น หากคุณมีเมนูแบบเลื่อนลงที่มีหลายรายการ เมนูควรจะยังปรากฏให้เห็น ในขณะที่รายการต่างๆ ยังโฟกัสอยู่ มิฉะนั้น เมนูจะไม่ปรากฏสำหรับผู้ใช้แป้นพิมพ์
:focus-within
บอกให้เบราว์เซอร์ใช้รูปแบบเมื่อโฟกัสอยู่ที่องค์ประกอบย่อยขององค์ประกอบที่ระบุ กลับไปที่ตัวอย่างเมนู ด้วยการตั้งค่า :focus-within
ในองค์ประกอบเมนู คุณจะดูแลให้รายการในเมนูมีโฟกัสอยู่ได้โดยทำดังนี้
.menu:focus-within {
display: block;
opacity: 1;
visibility: visible;
}
ลองใช้การกด Tab ผ่านองค์ประกอบที่โฟกัสได้ในการสาธิตด้านล่าง คุณจะเห็นว่าเมนูยังคงปรากฏให้เห็นเมื่อคุณโฟกัสที่รายการเมนู
คิวรี่สื่อระดับ 5
คำค้นหาสื่อใหม่ๆ เป็นวิธีที่มีประสิทธิภาพในการปรับประสบการณ์ของผู้ใช้แอปตามค่ากำหนดอุปกรณ์ของผู้ใช้ โดยพื้นฐานแล้ว เบราว์เซอร์จะทำหน้าที่เป็นพร็อกซีสำหรับค่ากำหนดระดับระบบที่เราสามารถตอบกลับใน CSS โดยใช้กลุ่มคำค้นหาสื่อ prefers-*
ดังนี้
คำถามใหม่ๆ ที่เราคิดว่านักพัฒนาแอปจะสนใจมากที่สุดมีดังนี้
คำค้นหาเหล่านี้มีประโยชน์อย่างยิ่งสำหรับการเข้าถึง อย่างก่อนหน้านี้เราไม่มีทางรู้เลยว่าผู้ใช้ได้ตั้งค่าระบบปฏิบัติการเป็นโหมดคอนทราสต์สูง หากต้องการใช้โหมดคอนทราสต์สูงสำหรับเว็บแอปที่ยังคงเอกลักษณ์ของแบรนด์ไว้ คุณต้องขอให้ผู้ใช้เลือกจาก UI ภายในแอป ซึ่งตอนนี้คุณจะเห็นการตั้งค่าคอนทราสต์สูงจากระบบปฏิบัติการได้โดยใช้ prefers-contrast
นัยยะที่น่าสนใจอย่างหนึ่งของคำค้นหาสื่อเหล่านี้คือ เราสามารถออกแบบค่ากำหนดของผู้ใช้ในระดับระบบหลายๆ ชุดเพื่อรองรับความต้องการของผู้ใช้และการช่วยเหลือพิเศษที่มีความหลากหลาย หากผู้ใช้ต้องการโหมดมืดแบบคอนทราสต์สูงเมื่ออยู่ในสภาพแวดล้อมที่มีแสงสลัว คุณก็ทำได้
สิ่งสำคัญสำหรับอนันต์คือ "ต้องการลดการเคลื่อนไหว" จะไม่จำเป็นต้องเขียนว่า "ไม่มีการเคลื่อนไหว" ผู้ใช้บอกว่าพวกเขาชอบภาพเคลื่อนไหวน้อยกว่า ไม่ใช่ว่าไม่ต้องการภาพเคลื่อนไหวใดๆ เขาอ้างว่าการเคลื่อนไหวที่ลดลงไม่ใช่การไม่เคลื่อนไหว ต่อไปนี้คือตัวอย่างที่ใช้ภาพเคลื่อนไหวแบบครอสเฟดเมื่อผู้ใช้ต้องการลดการเคลื่อนไหว
สมบัติทางตรรกะ
คุณสมบัติทางตรรกะแก้ไขปัญหาที่มีผู้เห็นมากขึ้นเนื่องจากนักพัฒนาซอฟต์แวร์จำนวนมากขึ้นจัดการเรื่องของการปรับให้เป็นสากล พร็อพเพอร์ตี้เลย์เอาต์จำนวนมาก เช่น margin
และ padding
จะถือว่าเป็นภาษาที่อ่านจากบนลงล่างและอ่านจากซ้ายไปขวา
เมื่อออกแบบหน้าเว็บสำหรับหลายภาษาด้วยโหมดการเขียนที่แตกต่างกัน นักพัฒนาซอฟต์แวร์ต้องปรับคุณสมบัติเหล่านั้นทั้งหมดโดยแยกกันตามองค์ประกอบที่หลากหลาย ซึ่งจะกลายเป็นฝันร้ายเกี่ยวกับการบำรุงรักษาอย่างรวดเร็ว
คุณสมบัติเชิงตรรกะช่วยให้คุณรักษาความสมบูรณ์ของเลย์เอาต์ในโหมดการแปลและโหมดการเขียนได้ โดยจะอัปเดตแบบไดนามิกตามลำดับเนื้อหาของเนื้อหา ไม่ใช่การจัดเรียงเชิงพื้นที่ ด้วยคุณสมบัติเชิงตรรกะ แต่ละองค์ประกอบจะมี 2 มิติดังนี้
- มิติข้อมูลบล็อกจะตั้งฉากกับการไหลของข้อความในบรรทัด (ในภาษาอังกฤษ
block-size
เหมือนกับheight
) - มิติข้อมูลในบรรทัดจะขนานกับลักษณะข้อความในบรรทัด (ในภาษาอังกฤษ
inline-size
เหมือนกับwidth
)
ชื่อมิติข้อมูลเหล่านี้จะใช้กับพร็อพเพอร์ตี้เลย์เอาต์เชิงตรรกะทั้งหมด ตัวอย่างเช่น ในภาษาอังกฤษ block-start
คือ top
และ inline-end
เท่ากับ right
เมื่อใช้คุณสมบัติแบบลอจิคัล คุณจะสามารถอัปเดตเลย์เอาต์สำหรับภาษาอื่นๆ โดยอัตโนมัติได้ง่ายๆ ด้วยการเปลี่ยนพร็อพเพอร์ตี้ writing-mode
และ direction
สำหรับหน้าเว็บ แทนที่จะอัปเดตพร็อพเพอร์ตี้เลย์เอาต์หลายสิบรายการในแต่ละองค์ประกอบ
คุณดูวิธีการทำงานของพร็อพเพอร์ตี้เชิงตรรกะได้ในการสาธิตด้านล่าง โดยตั้งค่าพร็อพเพอร์ตี้ writing-mode
ในองค์ประกอบ <body>
เป็นค่าอื่น
position: sticky
องค์ประกอบที่มี position: sticky
จะยังคงอยู่ในขั้นตอนการบล็อกจนกว่าจะเริ่มออกนอกหน้าจอ และจะหยุดเลื่อนพร้อมกับส่วนที่เหลือของหน้าและยังคงอยู่ในตำแหน่งที่ระบุโดยค่า top
ขององค์ประกอบ
พื้นที่ที่จัดสรรสำหรับองค์ประกอบนั้นจะยังคงอยู่ในโฟลว์ และองค์ประกอบจะกลับไปตามเดิมเมื่อผู้ใช้เลื่อนกลับขึ้นไป
การจัดตำแหน่งแบบติดหนึบช่วยให้คุณสามารถสร้างเอฟเฟ็กต์ที่มีประโยชน์มากมายซึ่งก่อนหน้านี้ต้องใช้ JavaScript เราได้สร้างการสาธิตขึ้นหลายรายการเพื่อแสดงความเป็นไปได้ เดโมแต่ละรายการใช้ CSS เดียวกันเป็นส่วนใหญ่และปรับมาร์กอัป HTML เพียงเล็กน้อยเพื่อสร้างเอฟเฟกต์
สแต็กติดหนึบ
ในการสาธิตนี้ องค์ประกอบ Sticky ทั้งหมดใช้คอนเทนเนอร์เดียวกัน ซึ่งหมายความว่าองค์ประกอบแบบติดหนึบแต่ละรายการจะเลื่อนมาทับองค์ประกอบก่อนหน้าขณะที่ผู้ใช้เลื่อนลง องค์ประกอบแบบติดหนึบจะมีตำแหน่งที่ค้างอยู่เหมือนกัน
สไลด์ติดหนึบ
องค์ประกอบติดหนึบตรงนี้เป็นญาติๆ (ผู้ปกครองเป็นพี่น้อง) เมื่อองค์ประกอบติดหนึบตรงขอบล่างของคอนเทนเนอร์ องค์ประกอบดังกล่าวจะขยับขึ้นพร้อมกับคอนเทนเนอร์ ทำให้เกิดการแสดงผลที่องค์ประกอบติดหนึบที่ต่ำกว่าจะดันตัวให้สูงขึ้น กล่าวอีกนัยหนึ่งคือ โฆษณาเหล่านี้ดูเหมือนว่าจะแข่งขันกันเพื่อชิงตำแหน่งที่ค้างอยู่
เดสเพราโดติดหนึบ
องค์ประกอบติดหนึบในการสาธิตนี้เป็นแบบลูกพี่ลูกน้อง เช่นเดียวกับสไลด์ติดหนึบ แต่ระบบวางพารามิเตอร์นี้ไว้ในคอนเทนเนอร์ที่ตั้งค่าเป็นเลย์เอาต์ตารางกริดแบบ 2 คอลัมน์
backdrop-filter
คุณสมบัติ backdrop-filter
ช่วยให้คุณใส่เอฟเฟกต์กราฟิกกับพื้นที่ด้านหลังองค์ประกอบแทนการใช้กับตัวองค์ประกอบเอง ซึ่งมีเอฟเฟกต์เจ๋งๆ มากมายที่ก่อนหน้านี้สามารถทำได้โดยใช้ CSS และการแฮ็ก JavaScript ที่ซับซ้อนแต่ทำได้ด้วย CSS เพียงบรรทัดเดียว
ตัวอย่างเช่น เดโมนี้ใช้ backdrop-filter
เพื่อทำการเบลอสไตล์ระบบปฏิบัติการ
เรามีโพสต์ดีๆ เกี่ยวกับ backdrop-filter
อยู่แล้ว โปรดไปที่นั่นเพื่อดูข้อมูลเพิ่มเติม
:is()
แม้ว่า :is()
คลาส Pseudo-class จะมีอายุมากกว่า 10 ปี แต่ก็ยังไม่มีการใช้งานมากนักตามที่เราคิดว่าเหมาะสม ซึ่งจะใช้รายการตัวเลือกที่คั่นด้วยเครื่องหมายจุลภาคเป็นอาร์กิวเมนต์ และตรงกับตัวเลือกทุกรายการในรายการนั้น ความยืดหยุ่นนี้เอื้อต่อการใช้งานอย่างเหลือเชื่อและสามารถลดจำนวน CSS ที่คุณจัดส่งได้อย่างมาก
ต่อไปนี้คือตัวอย่างสั้นๆ
button.focus,
button:focus {
…
}
article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
…
}
/* selects the same elements as the code above */
button:is(.focus, :focus) {
…
}
article > :is(h1,h2,h3,h4,h5,h6) {
…
}
gap
เลย์เอาต์ตารางกริดของ CSS ใช้ gap
(ก่อนหน้านี้คือ grid-gap
) มาระยะหนึ่งแล้ว gap
ช่วยแก้ปัญหาเลย์เอาต์ที่พบได้ทั่วไปหลายอย่าง โดยการระบุระยะห่างภายในขององค์ประกอบที่มี แทนที่จะเป็นระยะห่างรอบๆ องค์ประกอบย่อย ตัวอย่างเช่น เมื่อมีช่องว่าง คุณก็ไม่ต้องกังวลเกี่ยวกับขอบในองค์ประกอบย่อย ซึ่งจะก่อให้เกิดช่องว่างที่ไม่ต้องการรอบๆ ขอบขององค์ประกอบที่มี
ข่าวดียิ่งกว่า: gap
กำลังจะพร้อมใช้ใน Flexbox ซึ่งจะนำสิทธิพิเศษด้านการเว้นวรรคทั้งหมดแบบเดียวกับที่ตารางกริดมีคือ
- มีการประกาศการเว้นวรรค 1 รายการแทนที่จะเป็นหลายรายการ
- คุณไม่จำเป็นต้องสร้างแบบแผนสำหรับโปรเจ็กต์ของคุณว่าองค์ประกอบย่อยใดควรมีระยะห่างเอง เนื่องจากองค์ประกอบที่มีจะเป็นเจ้าของระยะห่างแทน
- โค้ดนี้เข้าใจได้ง่ายกว่ากลยุทธ์เก่าๆ อย่างนกฮูกที่ถูกโจมตี
วิดีโอต่อไปนี้แสดงประโยชน์ของการใช้พร็อพเพอร์ตี้ gap
รายการเดียวสำหรับ 2 องค์ประกอบ โดยองค์ประกอบหนึ่งมีเลย์เอาต์แบบตารางกริดและอีกองค์ประกอบหนึ่งมีเลย์เอาต์แบบยืดหยุ่น
ขณะนี้มีเพียง FireFox เท่านั้นที่รองรับ gap
ในเลย์เอาต์แบบยืดหยุ่น แต่โปรดลองเล่นการสาธิตนี้เพื่อดูวิธีการทำงาน
CSS ฮูดินี่
Houdini คือชุด API ระดับต่ำสำหรับเครื่องมือแสดงผลของเบราว์เซอร์ที่ให้คุณบอกเบราว์เซอร์ว่าจะตีความ CSS ที่กำหนดเองอย่างไร กล่าวคือ ช่วยให้คุณเข้าถึงโมเดลออบเจ็กต์ CSS และขยาย CSS ผ่าน JavaScript ได้ ซึ่งมีประโยชน์หลายประการดังนี้
- และทำให้คุณสามารถสร้างฟีเจอร์ CSS ที่กำหนดเองได้มากขึ้น
- การแยกข้อกังวลการแสดงผลออกจากตรรกะของแอปพลิเคชันทำได้ง่ายกว่า
- ความสามารถนี้มีประสิทธิภาพมากกว่าการใช้ JavaScript แบบ Polyfill ที่เราทำอยู่ในปัจจุบันเนื่องจากเบราว์เซอร์ไม่ต้องแยกวิเคราะห์สคริปต์และทำรอบการแสดงผลเป็นครั้งที่ 2 อีกต่อไป โค้ด Houdini จะได้รับการแยกวิเคราะห์ในรอบการแสดงผลแรก
Houdini เป็นชื่อที่ครอบคลุมของ API หลายรายการ หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับพวกเขาและสถานะปัจจุบันของพวกเขา โปรดดูที่ฮูดินี่พร้อมหรือยัง ในการพูดคุยกัน เราได้พูดถึง Properties and Value API, Paint API และ Animation Worklet เนื่องจากตอนนี้มีการรองรับมากที่สุด เราสามารถใส่โพสต์แบบเต็มให้กับ API ที่น่าสนใจเหล่านี้ได้อย่างง่ายดาย แต่ในตอนนี้ดูการพูดคุยของเราเพื่อดูภาพรวมและการสาธิตเจ๋งๆ ที่จะเริ่มแสดงให้เห็นว่าคุณสามารถทำอะไรกับ API ได้บ้าง
รายการเพิ่มเติม
ยังมีอีก 2-3 อย่างที่เราอยากจะพูดคุยแต่ยังไม่มีเวลาอธิบายอย่างละเอียด เราจึงเร่งเครื่องให้คุณฟังได้ ⚡ หากคุณยังไม่เคยได้ยินเกี่ยวกับฟีเจอร์เหล่านี้ โปรดรับชมการสนทนาส่วนสุดท้าย
size
: พร็อพเพอร์ตี้ที่จะช่วยให้คุณกำหนดความสูงและความกว้างพร้อมกันได้aspect-ratio
: พร็อพเพอร์ตี้ที่กำหนดสัดส่วนภาพสำหรับองค์ประกอบที่ไม่มีองค์ประกอบภายในmin()
,max()
และclamp()
: ฟังก์ชันที่ช่วยให้คุณตั้งค่าข้อจำกัดที่เป็นตัวเลขบนพร็อพเพอร์ตี้ CSS ใดก็ได้ ไม่ใช่แค่ความกว้างและความสูงlist-style-type
พร็อพเพอร์ตี้ที่มีอยู่แล้ว แต่อีกไม่นานก็จะรองรับค่าที่หลากหลายมากขึ้น ซึ่งรวมถึงอีโมจิและ SVGdisplay: outer inner
: พร็อพเพอร์ตี้display
จะยอมรับพารามิเตอร์ 2 ประเภทในเร็วๆ นี้ ซึ่งจะทำให้คุณระบุเลย์เอาต์ด้านนอกและด้านในได้อย่างชัดเจนแทนการใช้คีย์เวิร์ดแบบผสม เช่นinline-flex
- ภูมิภาค CSS: ให้คุณกรอกพื้นที่ที่ไม่ใช่สี่เหลี่ยมผืนผ้าที่กำหนดซึ่งเนื้อหาจะเข้าและออกจากได้
- โมดูล CSS: JavaScript จะสามารถขอโมดูล CSS และได้รับออบเจ็กต์ที่สมบูรณ์กลับคืนมา ซึ่งทำให้ดำเนินการได้ง่าย