CSS

These two media features let you detect the input capabilities of a user’s device — whether they have a mouse that can hover, a touch screen, or both. This is crucial for creating interfaces that work well across all device types. Overview of Features Feature Description Values any-hover Detects if any pointing device can hover…

These two media features let you adapt styles based on the shape of the viewport and the color capabilities of the output device — useful for responsive design and print optimization. Overview of Features Feature Description Values aspect-ratio Ratio of viewport width to height 16/9, 4/3, 1/1 color Bits per color component (RGB) Integer (e.g.,…

These two advanced media features let you adapt styles based on the color capabilities of the display — from the range of colors it can reproduce to the size of its color lookup table. Overview of Features Feature Description Values color-gamut Approximate color gamut of the display srgb, p3, rec2020 color-index Number of entries in…

These two media features let you adapt styles based on how the app is displayed and the visual capabilities of the screen — from standalone PWA mode to HDR displays. Overview of Features Feature Description Values display-mode How the document is displayed browser, standalone, minimal-ui, fullscreen, picture-in-picture dynamic-range Brightness, contrast, and color depth standard, high…

These two media features let you adapt styles for accessibility (high-contrast mode) and legacy devices (grid-based screens). Overview of Features Feature Description Values forced-colors Detects forced colors mode (e.g., Windows High Contrast) none, active grid Detects if the device uses a grid-based screen 0, 1 1. forced-colors The forced-colors media feature detects when the user…

These two media features are the cornerstones of responsive design. They let you apply styles based on the viewport’s dimensions, enabling layouts that adapt to any screen size. Overview of Features Feature Description Values height Viewport height Exact, min-height, max-height width Viewport width Exact, min-width, max-width 1. height The height media feature applies styles based…

These two media features help you create input-aware and accessibility-friendly interfaces — one detects hover capability, the other detects inverted color schemes. Overview of Features Feature Description Values hover Detects if the primary pointing device can hover none, hover inverted-colors Detects if the system uses inverted colors none, inverted 1. hover The hover media feature…

These two media features let you adapt styles for monochrome displays and screen orientation — one for specialized devices, the other for everyday responsive design. Overview of Features Feature Description Values monochrome Bits per pixel for monochrome devices Integer (0, 1, 8) orientation Portrait or landscape orientation portrait, landscape 1. monochrome The monochrome media feature…

These two media features describe how a device handles content overflow — whether it scrolls, paginates, or simply clips. They’re especially relevant for paged media (like print) and e-readers. Overview of Features Feature Description Axis overflow-block Overflow handling along the block axis Vertical (in horizontal writing modes) overflow-inline Overflow handling along the inline axis Horizontal…

These two media features let you adapt styles based on the accuracy of the pointing device and the pixel density of the display — essential for touch-friendly interfaces and high-DPI screens. Overview of Features Feature Description Values pointer Accuracy of the primary pointing device none, coarse, fine resolution Pixel density of the output device dpi,…