CSS Wrapped: 2023 - สรุปการเปลี่ยนแปลงทั้งหมดของ CSS ในปีนี้

• ปี 2023 เป็นปีที่ยิ่งใหญ่มากสำหรับ CSS มีฟีเจอร์ใหม่จำนวนมากในด้าน CSS และ UI ที่ทำให้สิ่งที่เคยถูกมองว่าเป็นไปไม่ได้บนเว็บแพลตฟอร์มกลายเป็นจริง
• เบราว์เซอร์หลักทั้งหมดรองรับ container queries, subgrid, ตัวเลือก :has() และยังรองรับ color spaces กับฟังก์ชันสีแบบใหม่ด้วย
• Chrome รองรับแอนิเมชันที่อิงการเลื่อนและการเปลี่ยนผ่านอย่างลื่นไหลระหว่างเว็บวิวได้ด้วย CSS เพียงอย่างเดียว
• มีการเพิ่มพื้นฐานใหม่จำนวนมากที่ช่วยปรับปรุงประสบการณ์ของนักพัฒนา เช่น CSS nesting และ scoped styles

Architectural foundations

Trigonometric functions

• Chrome 111 รองรับฟังก์ชันตรีโกณมิติอย่าง sin(), cos(), tan(), asin(), acos(), atan(), atan2()
• ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับงานด้านแอนิเมชันและเลย์เอาต์

Complex nth-* selection

• การใช้ตัวเลือก pseudo-class :nth-child() ช่วยให้เลือกองค์ประกอบใน DOM ตามดัชนีได้
• ตั้งแต่ Chrome 111 เป็นต้นมา สามารถส่งรายการตัวเลือกให้กับ :nth-child() และ :nth-last-child() ได้แบบไม่บังคับ

Scope

• Chrome 118 รองรับ @scope สำหรับกำหนดขอบเขตการจับคู่ตัวเลือกให้กับ subtree เฉพาะของเอกสาร
• subtree ที่ถูกกำหนดขอบเขตจะนิยามด้วย scope root และ scope limit ที่เป็นตัวเลือกเพิ่มเติม

Nesting

• ก่อนจะมี nesting เราต้องประกาศตัวเลือกทุกตัวแยกกันอย่างชัดเจน
• ตอนนี้สามารถจัดกลุ่มกฎสไตล์ที่เกี่ยวข้องกันและใช้ตัวเลือกต่อเนื่องกันได้

Subgrid

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

Typography

Initial-letter

• พร็อพเพอร์ตี initial-letter ที่เริ่มใช้ใน Chrome 110 เป็นความสามารถ CSS ขนาดเล็กแต่ทรงพลังสำหรับกำหนดการจัดวางอักษรตัวแรก
• สามารถวางตัวอักษรให้เป็นแบบ dropped หรือ raised ได้

text-wrap: balance and pretty

• นักพัฒนาไม่สามารถรู้ขนาดสุดท้าย ขนาดฟอนต์ หรือแม้แต่ภาษาของหัวเรื่องหรือย่อหน้าได้เสมอไป
• จึงมีการเพิ่มเทคนิคการตัดบรรทัดข้อความใหม่ 2 แบบคือ balance และ pretty

Color

HD Color Spaces (Color Level 4)

• ปี 2023 มีการเพิ่มสีใหม่ สีที่มากขึ้น color spaces ใหม่ ฟังก์ชันสี และความสามารถใหม่ ๆ
• ตอนนี้ CSS และสีสามารถสร้างไล่ระดับสีแบบ HDR และทำ interpolation ของไล่ระดับสีข้าม color spaces ต่าง ๆ ได้

color-mix function

• การผสมสีเป็นงานพื้นฐานแบบคลาสสิก และในปี 2023 ก็ทำได้ใน CSS แล้ว
• สามารถผสมสีด้วยสีขาวหรือสีดำ รวมถึงผสมความโปร่งใสเข้าไปในสีได้ และทำทั้งหมดนี้ใน color space ที่เลือกไว้

Relative color syntax

• Relative color syntax (RCS) เป็นแนวทางเสริมของ color-mix() สำหรับสร้างการแปรผันของสี
• RCS ช่วยให้จัดการสีได้ทั้งแบบสัมพัทธ์และแบบสัมบูรณ์

Responsive Design

Size container queries

• แทนที่จะใช้ข้อมูลขนาดแบบ global ของ viewport, container queries รองรับการ query องค์ประกอบพาเรนต์ภายในหน้าได้

Style container queries

• style queries ช่วยให้สามารถ query ค่าของ custom properties จากองค์ประกอบพาเรนต์ได้

:has() selector

• นักพัฒนาเรียกร้อง “parent selector” ใน CSS มานานเกือบ 20 ปี
• เมื่อใช้ตัวเลือก :has() จะสามารถเลือกองค์ประกอบ .card ที่มี hero image เป็นลูกได้ เช่น .card:has(img.hero)

Update media query

• update media query ช่วยให้ปรับ UI ให้เหมาะกับอัตรารีเฟรชของอุปกรณ์ได้

Scripting media query

• scripting media query ใช้ตรวจสอบได้ว่า JavaScript พร้อมใช้งานหรือไม่

Reduced-transparency media query

• อินเทอร์เฟซที่ไม่ทึบแสงอาจทำให้ปวดหัวหรือมองเห็นได้ยากสำหรับผู้ที่มีความบกพร่องทางการมองเห็นหลายประเภท
• media query นี้บ่งชี้ว่าผู้ใช้มีการตั้งค่าระบบที่ต้องการลดหรือลบความโปร่งใสออกจาก UI

Interaction

View transitions

• view transitions ส่งผลอย่างมากต่อประสบการณ์ผู้ใช้ของหน้าเว็บ
• View Transitions API ช่วยให้สร้างการเปลี่ยนผ่านทางภาพระหว่างสถานะของสองหน้าภายใน single-page application ได้

Linear-easing function

• ฟังก์ชัน linear() ทำให้สร้าง easing function ที่ซับซ้อนได้อย่างง่ายขึ้น โดยแลกกับการสูญเสียความแม่นยำเล็กน้อย

Scroll End

• อีเวนต์ scrollend มอบอีเวนต์สิ้นสุดการเลื่อนในจังหวะที่เหมาะสม ทำให้เข้าใจได้อย่างถูกต้องว่าผู้ใช้ยังอยู่ระหว่างการ gesture หรือไม่

Scroll-driven animations

• แอนิเมชันที่ขับเคลื่อนด้วยการเลื่อนช่วยให้เชื่อมแอนิเมชันที่สร้างด้วย CSS animation หรือ Web Animations API เข้ากับ scroll offset ของตัวเลื่อนได้

Deferred timeline attachment

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

Discrete property animations

• ในปี 2023 มีการเพิ่มความสามารถใหม่สำหรับแอนิเมชันแบบไม่ต่อเนื่อง เช่น ความสามารถในการทำแอนิเมชันจาก display: none

@starting-style

• กฎ CSS @starting-style สร้างขึ้นบนความสามารถใหม่ของเว็บสำหรับการทำแอนิเมชันจาก display: none

Overlay

• พร็อพเพอร์ตี CSS ใหม่ overlay ช่วยให้องค์ประกอบสไตล์ top-layer อย่าง popover และ dialog แสดงแอนิเมชันออกมาจากชั้นบนสุดได้อย่างลื่นไหล

Components

Popover

• Popover API ช่วยในการสร้างองค์ประกอบที่วางอยู่เหนือส่วนอื่น ๆ ของหน้า

Horizontal rules in select

• Chrome และ Safari รองรับความสามารถในการเพิ่มองค์ประกอบเส้นคั่นแนวนอน (แท็ก ) ภายในองค์ประกอบ ได้ในปีนี้

:user-valid and invalid pseudo classes

• :user-valid และ :user-invalid ทำงานคล้ายกับ pseudo-class :valid และ :invalid แต่จะจับคู่กับ form control ก็ต่อเมื่อผู้ใช้มีปฏิสัมพันธ์กับอินพุตนั้นมากพอสมควรแล้วเท่านั้น

Exclusive accordion

• Chrome 120 รองรับแอตทริบิวต์ name สำหรับองค์ประกอบ ``
• เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ `` หลายตัวที่มีค่า name เดียวกันจะสร้างเป็นกลุ่มเชิงความหมายเดียวกัน