sketch

sketch/css/media

Define media queries directly with functions. Refer to the sketch module to get more details on the usage.

Advanced usage

Media queries can be rather complex, and the module tries to give all features in a usable way. A media query takes form (property: value) and can be combined, like (orientation: landscape) or (min-width: 1000px). Those media queries can be created by using the corresponding and, or or not functions.

MDN Reference

Types

ColorMode

opaque </> 
pub opaque type ColorMode

Query

opaque </>

Media queries can be rather complex, and the module tries to give all features in a usable way. A media query takes form (property: value) and can be combined, like (orientation: landscape) or (min-width: 1000px). Those media queries can be created by using the corresponding and, or or not functions.

MDN Reference

pub opaque type Query

Functions

all

</> 
pub fn all() -> Query

A <media-type> describes the general category of a device. Except when using the only logical operator, the media type is optional and the all type is implied.

Suitable for all devices.

MDN Reference

and

</> 
pub fn and(first: Query, second: Query) -> Query

Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true. It is also used for joining media features with media types.

MDN Reference

dark_theme

</> 
pub fn dark_theme() -> Query

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Automatically detects dark theme.

MDN Reference

landscape

</> 
pub fn landscape() -> Query

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

The viewport is in a landscape orientation, i.e., the width is greater than the height.

MDN Reference

light_theme

</> 
pub fn light_theme() -> Query

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Automatically detects dark theme.

MDN Reference

max_height

</> 
pub fn max_height(length: Length) -> Query

Defines maximum height of the style. Devices with a height lesser than max_height will be applied.

max_width

</> 
pub fn max_width(length: Length) -> Query

Defines maximum width of the style. Devices with a width lesser than max_width will be applied.

min_height

</> 
pub fn min_height(length: Length) -> Query

Defines minimum height of the style. Devices with a height greater than max_height will be applied.

min_width

</> 
pub fn min_width(length: Length) -> Query

Defines minimum width of the style. Devices with a width greater than min_width will be applied.

not

</> 
pub fn not(query: Query) -> Query

Used to negate a media query, returning true if the query would otherwise return false. If present in a or list of queries, it will only negate the specific query to which it is applied.

MDN Reference

only

</> 
pub fn only(query: Query) -> Query

Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

MDN Reference

or

</> 
pub fn or(first: Query, second: Query) -> Query

Used to combine multiple media queries into a single rule. Each query in a or list is treated separately from the others Thus, if any of the queries in a list is true, the entire media statement returns true.

MDN Reference

portrait

</> 
pub fn portrait() -> Query

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

MDN Reference

print

</> 
pub fn print() -> Query

A <media-type> describes the general category of a device. Except when using the only logical operator, the media type is optional and the all type is implied.

Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)

MDN Reference

screen

</> 
pub fn screen() -> Query

A <media-type> describes the general category of a device. Except when using the only logical operator, the media type is optional and the all type is implied.

Intended primarily for screens.

MDN Reference

✨ Search Document