การจัดรูปแบบเว็บรุ่นใหม่

รับข้อมูลอัปเดตเกี่ยวกับฟีเจอร์ที่น่าสนใจใน CSS ที่ทันสมัย

Adam Argyle

Una Kravets

ปัจจุบัน 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 พร็อพเพอร์ตี้ที่มีอยู่แล้ว แต่อีกไม่นานก็จะรองรับค่าที่หลากหลายมากขึ้น ซึ่งรวมถึงอีโมจิและ SVG
• display: outer inner: พร็อพเพอร์ตี้ display จะยอมรับพารามิเตอร์ 2 ประเภทในเร็วๆ นี้ ซึ่งจะทำให้คุณระบุเลย์เอาต์ด้านนอกและด้านในได้อย่างชัดเจนแทนการใช้คีย์เวิร์ดแบบผสม เช่น inline-flex
• ภูมิภาค CSS: ให้คุณกรอกพื้นที่ที่ไม่ใช่สี่เหลี่ยมผืนผ้าที่กำหนดซึ่งเนื้อหาจะเข้าและออกจากได้
• โมดูล CSS: JavaScript จะสามารถขอโมดูล CSS และได้รับออบเจ็กต์ที่สมบูรณ์กลับคืนมา ซึ่งทำให้ดำเนินการได้ง่าย