- Conditional CSS refers to CSS rules that are applied when a condition is met.
- A condition maybe a CSS property and value combination, as with the
@supports
rule.- A condition may test for a browser window condition such as width, as with the
@media
rule.
Media Queries and @media
- The
@media
rule is a long-standing feature of CSS. - Its syntax was initially defined by the CSS 2 specification back in 1998.
Media Query Syntax
as opposed to being printed:
@media screen { /* Styles go here */ }
- CSS style rules are nested within this
@media
rule set. - They’ll only apply when the document is displayed on a screen.
@media screen { body { font-size: 20px; } }
Media features the capabilities of the device or conditions of the viewport.
@media ( width: 480px ) { nav li { display: inline-block; } }
Min and Max Prefixes
- A more flexible media query might test for a minimum or maximum viewport width.
- We can apply styles when the viewport is at least this wide, and no more than that wide
@media ( max-width: 480px ) { nav li { display: block; } }
@media ( min-width: 481px ) and ( max-width: 1600px ) { nav ul { display: flex; } }
- If both conditions are true, that is, the viewport width is at least
480px
, but not greater than1600px
our styles will apply.
@media screen and ( hover: on-demand ) { input[type=checkbox] + label { padding: .5em; } }
Nesting @media Rules
@media screen { @media ( min-width: 320px) { img { display: block; width: 100%; height: auto; } } @media ( min-width: 640px) { img { display: inline-block; max-width: 300px; } } }
- A current common practice when using media queries is to set
min-width
andmax-width
breakpoints based on popular device sizes. - A breakpoint is the width or height that triggers a media query.
@media screen and ( max-width: 320px) {} @media screen ( min-width: 320px) and ( max-width: 480px) {} @media screen ( min-width: 481px) and ( max-width: 768px) {} @media screen ( min-width: 769px) {}
Using Media Queries with JavaScript
- Media queries also have a JavaScript API, better known as
matchMedia()
. - The
matchMedia()
method is a property of the window object. - You Can use it
window.matchMedia()
or justmatchMedia()
.
var isWideScreen = matchMedia("(min-width: 45em)"); console.log(isWideScreen.matches); // true || false
Selector Support with selector()
@supports selector( :blank ) { input:not(:blank):invalid { background: pink; } }
- Both
@media
and@supports
are powerful and flexible.