1. Prefers Reduced Motion
prefers-reduced-motion 미디어 쿼리는 사용자가 불필요한 움직임을 최소화하도록 요청했는지 여부를 알려준다. motion-reduce 수정자를 사용하여 이러한 요청이 있을 때 조건부 스타일을 추가할 수 있다. 반대로 motion-safe 수정자는 사용자가 움직임을 최소화하지 않은 경우에만 스타일을 추가한다.
예시:
<!-- motion-reduce -->
<button class="motion-reduce:hidden animate-spin">
Loading...
</button>
<!-- motion-safe -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition">
Save changes
</button>2. Prefers Contrast
prefers-contrast 미디어 쿼리는 사용자가 더 많은 또는 더 적은 대비를 요청했는지 여부를 알려준다. contrast-more 수정자를 사용하여 더 많은 대비를 요청한 경우 조건부 스타일을 추가할 수 있으며, contrast-less 수정자를 사용하여 더 적은 대비를 요청한 경우 스타일을 조정할 수 있다.
예시:
<!-- contrast-more -->
<input class="contrast-more:border-slate-400 contrast-more:placeholder-slate-500" />
<!-- contrast-less -->
<input class="contrast-less:border-slate-100 contrast-less:placeholder-slate-200" />3. Forced Colors Mode
forced-colors 미디어 쿼리는 사용자가 강제 색상 모드를 사용하는지 여부를 나타낸다. 강제 색상 모드는 사이트의 색상을 사용자 정의 팔레트로 대체하여 텍스트, 배경, 링크 및 버튼 등을 표시한다. forced-colors 수정자를 사용하여 강제 색상 모드가 활성화된 경우 조건부 스타일을 추가할 수 있다.
예시:
<label>
<input type="radio" class="forced-colors:appearance-auto appearance-none" />
<div class="forced-colors:hidden h-6 w-6 rounded-full bg-cyan-200"></div>
</label>4. Viewport Orientation
뷰포트의 방향에 따라 조건부 스타일을 적용하려면 portrait 및 landscape 수정자를 사용할 수 있다. portrait 수정자는 세로 방향일 때 스타일을 적용하며, landscape 수정자는 가로 방향일 때 스타일을 적용한다.
예시:
<div>
<div class="portrait:hidden">This is hidden in portrait mode</div>
<div class="landscape:hidden">This is hidden in landscape mode</div>
</div>5. Print Styles
문서가 인쇄될 때만 적용되는 스타일을 추가하려면 print 수정자를 사용할 수 있다. 이를 통해 인쇄 시 특정 요소를 숨기거나 표시할 수 있다.
예시:
<div>
<article class="print:hidden">This will be hidden when printed</article>
<div class="hidden print:block">This will be shown when printed</div>
</div>6. Supports Rules
사용자의 브라우저에서 특정 기능이 지원되는지 여부에 따라 스타일을 조건부로 적용하려면 supports-[...] 수정자를 사용할 수 있다. 이 수정자는 @supports 규칙을 사용하여 브라우저에서 특정 CSS 기능의 지원 여부를 검사한다.
예시:
<div class="supports-[display:grid]:grid">
This will be a grid if grids are supported
</div>
<div class="supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur">
This will have a backdrop filter if supported
</div>