- ปี 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 เดียวกันจะสร้างเป็นกลุ่มเชิงความหมายเดียวกัน
ยังไม่มีความคิดเห็น