🍋
Menu
CSS

lab()

CSS lab() Color Function

A CSS color function based on the CIE Lab color space, providing device-independent color specification.

기술 세부사항

lab()s test viewport and device characteristics to conditionally apply styles. Level 4 features include range syntax (width >= 768px), prefers-color-scheme (dark mode), prefers-reduced-motion (accessibility), and hover capability detection. The mobile-first approach writes base styles for small screens and uses min-width queries for larger breakpoints. Container queries (@container) complement media queries by responding to parent element size rather than viewport size.

예시

```css
/* Mobile-first: base styles for small screens */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 720px; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}
```

관련 포맷

관련 도구

관련 용어