เพื่อช่วยให้นักพัฒนาปรับแต่งเว็บไซต์ด้วยการผสมผสาน JavaScript และ CSS คุณสมบัติ CSS ใหม่ๆ ได้รับการพัฒนาและรองรับในเบราว์เซอร์ยอดนิยม สรุปคุณสมบัติสำคัญดังนี้:
focus-within
แก้ปัญหา accessibility การโฟกัสภายในองค์ประกอบ
scroll-snap
เปิดใช้งานการเลื่อนและการชะลอแบบเนทีฟ (native scroll snap)
@media (prefers-*)
ตั้งค่า UI/UX ตามการตั้งค่าอุปกรณ์ของผู้ใช้ เช่น prefers-color-scheme, prefers-reduced-motion, prefers-contrast เพื่อการทำให้ส่วนบุคคลสูงขึ้น
position: sticky
เก็บ UI ให้อยู่ใน viewport ตลอดเวลา
Logical Properties
ช่วยให้ระยะห่างรอบๆ องค์ประกอบปรับตัวตามทิศทางการเขียน (RTL/LTR) ได้อัตโนมัติ
Gap Property
ใช้งานได้กับ Flexbox แล้ว - ให้คอนเทนเนอร์เป็นผู้จัดการช่องว่างแทนที่จะให้แต่ละลูกกำหนด margin เอง
backdrop-filter
ปรับสไตล์ด้านหลังองค์ประกอบได้สะดวก (เช่น blur, brightness)
CSS Houdini API
API ระดับต่ำที่ให้นักพัฒนาสามารถบอกเบราว์เซอร์ว่าต้องการอ่าน/เข้าใจ CSS แบบกำหนดเองอย่างไร รวมถึง Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM, Font Metrics API
aspect-ratio
รักษาอัตราส่วนมิติของสื่อ
size
ตั้งค่าความสูงและความกว้างในคุณสมบัติเดียว
min(), max(), clamp()
ตั้งค่าข้อจำกัดสำหรับคุณสมบัติ CSS ใดๆ
display: outer inner
ไวยากรณ์สองค่าสำหรับการจัดวางองค์ประกอบที่แม่นยำขึ้น
list-style-type
เพิ่มสไตล์กำหนดเองให้รายการ
CSS Modules
ใช้ JavaScript ขอโมดูลเฉพาะจากไฟล์ local หรือ remote ได้
CSS Regions
เติมเนื้อหาในพื้นที่ที่กำหนด
CSS Subgrid
สร้าง micro layouts ภายใน CSS Grid ได้
ตัวอย่าง: ใช้ :is() selector
<!DOCTYPE html> <html> <head> <style> * { margin: 2%; text-align: center; } :is(header, main, footer) span:after { content: " Awesome!"; box-shadow: inset 0 0 8px lightgreen; font-size: 1.2em; font-family: Calibri; } :-webkit-any(header, div, section) span:after { content: " Awesome!"; box-shadow: inset 0 0 8px lightgreen; font-size: 1.2em; font-family: Calibri; } :-moz-any(header, div, section) span:after { content: " Awesome!"; box-shadow: inset 0 0 8px lightgreen; font-size: 1.2em; font-family: Calibri; } :matches(header, div, section) span:after { content: " Awesome!"; box-shadow: inset 0 0 8px lightgreen; font-size: 1.2em; font-family: Calibri; } </style> </head> <body> <header> <span>:is() operator is</span> </header> <div> <span>DEMO</span> <span>Alt + F4</span> <span>Enter</span> </div> <section> <span>Howzit?</span> </section> </body> </html>
ตัวอย่าง: backdrop-filter
<html> <head> <style> #parent { margin: 8%; background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400"); padding: 2%; width: 200px; height: 200px; box-shadow: 0 0 20px rgba(100,0,40,0.8); } h2 { margin-top: 20vh; backdrop-filter: invert(1); } </style> </head> <body> <div id="parent"> <div> <h2>Watch this cool effect</h2> </div> </div> </body>
