| ขนาดและคณิตศาสตร์ |
|---|
| ผลลัพธ์ของนิพจน์เลขคณิต โดยผสมหน่วยต่างชนิดกันได้ | width: calc(100% - 2rem); |
| ค่าที่เล็กที่สุดจากค่าที่กำหนดให้ | width: min(100%, 60ch); |
| ค่าที่ใหญ่ที่สุดจากค่าที่กำหนดให้ | width: max(320px, 40vw); |
| ค่าที่ถูกจำกัดระหว่างค่าต่ำสุด ค่าที่ต้องการ และค่าสูงสุด | font-size: clamp(1rem, 2vw, 1.5rem); |
| อ่านตัวแปรสภาพแวดล้อมที่ user agent จัดให้ | padding: env(safe-area-inset-top); |
| ขนาดที่ถูกจำกัดไม่ให้เกินความกว้างตามธรรมชาติของเนื้อหา | width: fit-content(200px); |
| ปัดค่าหนึ่งให้เป็นพหุคูณที่ใกล้ที่สุดของอีกค่าหนึ่ง | width: round(up, 133px, 50px); |
| เศษเชิงบวกของการหาร มีค่าไม่ติดลบเสมอ | margin: mod(100px, 30px); |
| เศษของการหาร คงเครื่องหมายตามตัวตั้ง | margin: rem(-100px, 30px); |
| ค่าสัมบูรณ์ | translateX(abs(-10px)); |
| -1, 0 หรือ 1 ตามเครื่องหมายของค่า | padding: sign(-5px) * 10px; |
| Grid |
|---|
| ช่วงขนาดสำหรับ grid track ระหว่างค่าต่ำสุดและค่าสูงสุด | grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); |
| ทำซ้ำรูปแบบ track ตามจำนวนครั้ง หรือจนกว่าจะเต็ม | grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| ตรรกะและเงื่อนไข |
|---|
| เลือกหนึ่งในสองค่าตามเงื่อนไข | font-size: if(media(width > 600px), 1.25rem, 1rem); |
| เป็นจริงเมื่อ media query ตรงกัน ใช้ภายใน if() | padding: if(media(width > 40rem), 2rem, 1rem); |
| เป็นจริงเมื่อเบราว์เซอร์รองรับการประกาศนั้น ใช้ภายใน if() | display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); |
| เป็นจริงเมื่อ selector ตรงกัน ใช้ภายใน if() | font-weight: if(selector(:hover), 700, 400); |
| Custom properties |
|---|
| ค่าของ custom property พร้อม fallback เป็นตัวเลือก | color: var(--accent, #333); |
| สี |
|---|
| สีจากช่องสัญญาณแดง เขียว น้ำเงิน (และอัลฟา) | color: rgb(59 130 246 / 0.8); |
| สีจากเฉดสี ความอิ่มสี และความสว่าง | color: hsl(210 80% 50%); |
| สีในปริภูมิ OKLCH แบบรับรู้ตามสายตา (ความสว่างสม่ำเสมอ) | color: oklch(0.7 0.15 250); |
| สีผสมจากสองสีในปริภูมิสีที่กำหนด | color: color-mix(in srgb, red 40%, blue); |
| ตัวเลือกจากรายการที่ต่างจากสีพื้นมากที่สุด | color: color-contrast(#fff vs #000, #777); |
| สีจากเฉดสี ความขาว และความดำ | color: hwb(210 10% 20%); |
| สีในปริภูมิ CIELAB (ความสว่าง แกน a และ b) | color: lab(52% 40 59); |
| สีในปริภูมิ CIELAB (ความสว่าง ความอิ่มสี เฉดสี) | color: lch(52% 49 24); |
| สีในปริภูมิสีใดก็ได้ที่กำหนดไว้ล่วงหน้า โดยระบุพิกัด | color: color(display-p3 1 0.4 0.2); |
| สีแรกในโหมดสว่าง สีที่สองในโหมดมืด | color: light-dark(#1a1a1a, #f5f5f5); |
| Gradient และรูปภาพ |
|---|
| gradient ตามเส้นตรงระหว่างจุดสี | background: linear-gradient(90deg, #4b9fff, #2ee6a6); |
| gradient ที่แผ่ออกจากจุดศูนย์กลาง | background: radial-gradient(circle, #fff, #000); |
| gradient ที่หมุนวนรอบจุดศูนย์กลาง | background: conic-gradient(red, yellow, red); |
| โหลดทรัพยากรภายนอก: รูปภาพ ฟอนต์ หรือ SVG | background-image: url(hero.webp); |
| เลือกรูปภาพที่ดีที่สุดตามความละเอียดของอุปกรณ์ | background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); |
| ผสมสองภาพตามเปอร์เซ็นต์ที่กำหนด | background-image: cross-fade(30%, url(a.webp), url(b.webp)); |
| ฟิลเตอร์และรูปทรง |
|---|
| ฟิลเตอร์ระดับพิกเซลที่ใช้ภายใน property ชื่อ filter | filter: blur(4px) brightness(1.1); |
| สตริง path ของ SVG ใช้วาด clip หรือรูปทรง | clip-path: path('M10 10 H 90 V 90 Z'); |
| อ่าน attribute ของ HTML; ใช้นอก content ได้จำกัด | content: attr(data-label); |
| ปรับคอนทราสต์ของอิลิเมนต์ | filter: contrast(1.4); |
| วาดเงาที่ตามรูปทรงอัลฟาของอิลิเมนต์ | filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); |
| เปลี่ยนอิลิเมนต์เป็นขาวดำ | filter: grayscale(100%); |
| กลับสีของอิลิเมนต์ | filter: invert(1); |
| ใส่โทนสีซีเปีย | filter: sepia(0.6); |
| หมุนเฉดสีของสีในอิลิเมนต์ | filter: hue-rotate(90deg); |
| กำหนดความทึบของอิลิเมนต์ผ่าน filter | filter: opacity(0.5); |
| รูปทรงวงกลมสำหรับ clip-path หรือ shape-outside | clip-path: circle(40% at 50% 50%); |
| รูปทรงวงรีสำหรับ clip-path หรือ shape-outside | clip-path: ellipse(50% 35% at 50% 50%); |
| รูปทรงสี่เหลี่ยมมุมมนสำหรับ clip-path | clip-path: inset(10px 10px 10px 10px round 8px); |
| รูปทรงหลายเหลี่ยมจากรายการจุด | clip-path: polygon(50% 0, 100% 100%, 0 100%); |
| การแปลงรูป |
|---|
| เลื่อนอิลิเมนต์ตามแกน X และ Y | transform: translate(10px, 20px); |
| หมุนอิลิเมนต์รอบจุดศูนย์กลางของมัน | transform: rotate(45deg); |
| ย่อ-ขยายอิลิเมนต์ตามแกน X และ Y | transform: scale(1.25); |
| เอียงอิลิเมนต์ตามแกน X และ Y | transform: skew(10deg, 0deg); |
| การแปลง 2D จากค่า matrix หกค่า | transform: matrix(1, 0, 0.5, 1, 10, 0); |
| กำหนดความลึกแบบ perspective 3D สำหรับอิลิเมนต์ลูก | transform: perspective(600px) rotateY(20deg); |
| แอนิเมชันและตัวนับ |
|---|
| เส้นโค้ง easing จากจุดควบคุมสี่จุด | transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); |
| easing ที่กระโดดเป็นขั้นเท่า ๆ กัน | animation-timing-function: steps(8, end); |
| ค่าปัจจุบันของ CSS counter ใช้เป็น content | content: counter(chapter); |
| ค่าของ counter และทุกตัวบรรพบุรุษของมัน เชื่อมด้วยสตริง | content: counters(item, "."); |
| 0 ถึง 1 ตามความคืบหน้าของค่าระหว่างจุดเริ่มและจุดสิ้นสุด | opacity: progress(scroll(), 0, 50vh); |
| เลขสุ่มจากช่วงที่กำหนด คงที่ต่ออิลิเมนต์ | rotate: random(from -5deg to 5deg); |
| ไซน์ของมุม สำหรับนิพจน์ calc | translateY(calc(1rem * sin(45deg))); |
| โคไซน์ของมุม สำหรับนิพจน์ calc | translateX(calc(1rem * cos(45deg))); |