DevTuts

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,…

These two media features are essential for accessibility and personalization. They let you respect the user’s preferred color scheme (light/dark) and contrast level. Overview of Features Feature Description Values prefers-color-scheme User’s preferred color scheme light, dark prefers-contrast User’s preferred contrast level no-preference, more, less, custom 1. prefers-color-scheme The prefers-color-scheme media feature detects whether the user…

These two media features prioritize user comfort and performance. One respects users who want less data usage, the other respects users who are sensitive to motion. Overview of Features Feature Description Values prefers-reduced-data User wants lighter data usage no-preference, reduce prefers-reduced-motion User wants less animation/motion no-preference, reduce 1. prefers-reduced-data The prefers-reduced-data media feature detects if…

These two media features address accessibility (transparency preferences) and legacy display technology (interlaced vs progressive scanning). Overview of Features Feature Description Values prefers-reduced-transparency User wants less transparency no-preference, reduce scan Monitor’s scanning process interlaced, progressive 1. prefers-reduced-transparency The prefers-reduced-transparency media feature detects if the user has requested reduced transparency — important for users who have…

These three media features let you adapt styles based on JavaScript availability, display refresh capability, and HDR video support. Overview of Features Feature Description Values scripting Detects JavaScript availability none, initial-only, enabled update How often the display can update none, slow, fast video-dynamic-range Dynamic range of the video plane standard, high 1. scripting The scripting…

45. Transform Property Introduction The transform property is one of the most powerful tools in CSS. It lets you rotate, scale, skew, and translate elements — all without affecting the layout of other elements. What is the transform Property? The transform property applies 2D or 3D transformations to an element. Unlike properties like margin or…

The matrix() and matrix3d() functions are the most powerful — and most complex — transform functions in CSS. They let you apply exact mathematical transformations using matrices. Overview Function Dimensions Matrix Size Values matrix() 2D 3×3 (6 values) a, b, c, d, e, f matrix3d() 3D 4×4 (16 values) a through p 1. matrix() —…

These three properties unlock the third dimension in CSS. With perspective, rotate3d, and transform-style, you can create stunning 3D effects like cubes, cards, and spatial interfaces. Overview of Features Property/Function Description Values perspective Distance from viewer to z=0 plane Length (e.g., 600px) rotate() 2D rotation around a fixed point Angle (e.g., 45deg) rotate3d() 3D rotation…