dzuk-mutant / elm-css / Css.Media

Functions for building [`

Data Structures


type alias MediaQuery =
Css.Structure.MediaQuery

One query of a media rule. A media rule can have multiple queries. For example, the Elm and corresponding CSS below contains 1 rule, with 2 queries.

@media print, screen and (monochrome) {
    body {
        color: black;
    }
}

The above rule roughly translates as: If the device is a printer or is a monochrome screen, the body color is black. In elm-css, queries are joined into rules using a special MediaQuery returned by the or function.


type alias MediaType =
Css.Structure.MediaType

A media type.

Constructors

@media rule constructors

withMedia : List MediaQuery -> List Css.Style -> Css.Style

Combines media queries that are nested under selectors into a @media rule.

css
    [ withMedia [ only screen [ Media.minWidth (px 300), Media.maxWidth (px 800) ] ]
        [ Css.maxWidth (px 300) ]

The above code translates into the following CSS:

@media only screen and (min-width: 300px) and (max-width: 800px) {
    ._c9f0fd {
        max-width: 300px;
    }
}

withMediaQuery : List String -> List Css.Style -> Css.Style

Manually specify a @media rule that is nested under an element or class using a List of strings.

body
    [ withMediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
        [ fontSize (px 14 px) ]
    ]

The above code translates into the following CSS:

@media screen and (min-width: 320px), screen and (max-height: 400px) {
    body {
        font-size: 14px;
    }
}

Query constructors

all : List Expression -> MediaQuery

Build a media query that will match all media types. The supplied expressions are combined with and.

If you want to build a media query that doesn't specify a media type, use this function.

withMedia [ all [ color, orientation landscape ] ]
    [ Css.color (hex "ff0000")
    ]

The above code translates into the following CSS:

@media (color) and (orientation: landscape) {
    color: #ff0000;
}

only : MediaType -> List Expression -> MediaQuery

Build a media query matching a single media type.

withMedia [ only screen [ minWidth (px 320), orientation portrait ] ]
    [ Css.color (hex "ff0000") ]

The above code translates into the following CSS:

@media only screen and (min-width: 320px) and (orientation: portrait) {
    color: #ff0000;
}

Media types

screen : MediaType

CSS media type for any device not matched by print or speech.

withMedia [ screen [ maxWidth (px 600) ]]
    [ display none ]

print : MediaType

Css media type for printers.

withMedia [ print ]
    [ color (hex 0), textDecoration none ]

Size media features

For querying either the size of the viewport or the size of a printed page.

width : Css.Value.Value Css.Length -> Expression

The width media feature.

withMedia [ all [ Media.width (px 200) ]]
    [ ... ]

minWidth : Css.Value.Value Css.Length -> Expression

The min-width CSS media feature.

withMedia [ all [ Media.minWidth (px 600) ]]
    [ Css.maxWidth (px 500) ]

maxWidth : Css.Value.Value Css.Length -> Expression

The max-width CSS media feature.

withMedia [ all [ Media.maxWidth (px 800) ]]
    [ display none ]

height : Css.Value.Value Css.Length -> Expression

The height CSS media feature.

withMedia [ all [ Media.height (px 200) ]]
    [ ... ]

minHeight : Css.Value.Value Css.Length -> Expression

The min-height CSS media feature.

withMedia [ all [ Media.minHeight (px 400) ]]
    [ display block ]

maxHeight : Css.Value.Value Css.Length -> Expression

The max-height CSS media feature.

withMedia [ all [ Media.maxHeight (px 399) ]
    [ display none ]

Ratio

aspectRatio : Basics.Int -> Basics.Int -> Expression

The aspect-ratio CSS media feature.

withMedia [ all [ aspectRatio 16 10 ]]
    [ ... ]

minAspectRatio : Basics.Int -> Basics.Int -> Expression

The min-aspect-ratio CSS media feature.

withMedia [ all [ minAspectRatio 1 1 ]]
    [ ... ]

maxAspectRatio : Basics.Int -> Basics.Int -> Expression

The max-aspect-ratio CSS media feature.

withMedia [ all [ maxAspectRatio 16 9 ]]
    [ ... ]

Orientation


type alias OrientationSupported supported =
{ supported | landscape : Css.Value.Supported
, portrait : Css.Value.Supported 
}

A type alias used to accept an orientation value, among others.


type alias Orientation =
OrientationSupported {}

A type alias used to accept an orientation value.

orientation : Css.Value.Value Orientation -> Expression

The orientation. CSS media feature.

withMedia [ all [ orientation portrait ]]
    [ ... ]

landscape : Css.Value.Value { provides | landscape : Css.Value.Supported }

The landscape value for the orientation CSS media feature.

Display Quality Media Features

Resolution


type alias ResolutionSupported supported =
{ supported | dpi : Css.Value.Supported
, dpcm : Css.Value.Supported
, dppx : Css.Value.Supported
, x : Css.Value.Supported 
}

A type alias used to accept a resolution among other values.


type alias Resolution =
ResolutionSupported {}

A type alias used to accept a resolution.

dpi : Basics.Float -> Css.Value.Value { provides | dpi : Css.Value.Supported }

dpi resolution units.

dpcm : Basics.Float -> Css.Value.Value { provides | dpcm : Css.Value.Supported }

dpcm resolution units.

dppx : Basics.Float -> Css.Value.Value { provides | dppx : Css.Value.Supported }

dppx resolution units.

x : Basics.Float -> Css.Value.Value { provides | x : Css.Value.Supported }

An alias for dppx resolution units.

resolution : Css.Value.Value Resolution -> Expression

The resolution CSS media feature.

It describes the resolution of the output device.

withMedia [ only screen [ resolution (dppx 2) ]]
    [ img [ width (pct 50) ] ]

minResolution : Css.Value.Value Resolution -> Expression

The min-resolution CSS media feature.

It describes the minimum resolution of the output device.

withMedia [ only screen [ minResolution (dpi 600) ]]
    [ Css.class HiResImg [ display block ] ]

maxResolution : Css.Value.Value Resolution -> Expression

The max-resolution CSS media feature.

It describes the maximum resolution of the output device.

withMedia [ only screen [ maxResolution (dpcm 65) ]]
    [ Css.class HiResImg [ display none ] ]

Display scanning


type alias ScanningProcessSupported supported =
{ supported | progressive : Css.Value.Supported
, interlace : Css.Value.Supported 
}

A type alias used to accept an scanning process value, among others.


type alias ScanningProcess =
ScanningProcessSupported {}

A type alias used to accept an scanning process value.

scan : Css.Value.Value ScanningProcess -> Expression

The scan CSS media feature.

Queries the scanning (or refresh) process of the device's display.

withMedia [ only screen [ scan progressive ]]
    [ ... ]

progressive : Css.Value.Value { provides | progressive : Css.Value.Supported }

CSS Media query value for when a screen has progressive scan.

withMedia [ only screen [ scan progressive ]]
    [ ... ]

interlace : Css.Value.Value { provides | interlace : Css.Value.Supported }

CSS Media query value for when a screen has interlace scan.

withMedia [ only screen [ scan interlace ]]
    [ ... ]

Bitmap or grid-based display

grid : Expression

The grid CSS media feature.

Queries whether the output device's screen works on bitmaps or a character-based grids.

withMedia [ only screen [ Media.grid ]]
    [ ... ]

Overflow

overflowBlock : Css.Value.Value { none : Css.Value.Supported, scroll : Css.Value.Supported, optionalPaged : Css.Value.Supported, paged : Css.Value.Supported } -> Expression

The overflow-block CSS media feature.

It describes the behavior of the device when content overflows the initial containing block in the block axis.

withMedia [ all [ Media.overflowBlock optionalPaged ]]
    [ ... ]

overflowInline : Css.Value.Value { none : Css.Value.Supported, scroll : Css.Value.Supported } -> Expression

The overflow-inline CSS media feature.

It describes the behavior of the device when content overflows the initial containing block in the block axis.

withMedia [ all [ Media.overflowInline optionalPaged ]]
    [ ... ]

paged : Css.Value.Value { provides | paged : Css.Value.Supported }

CSS Media query value for the block-overflow media feature.

withMedia [ all [ Media.overflowBlock paged ]]
    [ ... ]

Color Media Features

Bit depth

color : Expression

The color CSS media feature.

withMedia [ all [ color ]]
    [ Css.color (hex "000000")
    ]

minColor : Basics.Int -> Expression

The min-color CSS media feature.

withMedia [ only screen [ minColor 256 ]]
    [ Css.color (hex "D9534F")
    ]

maxColor : Basics.Int -> Expression

The max-color CSS media feature.

withMedia [ only screen [ maxColor 8 ]]
    [ Css.color (hex "FF0000")
    ]

monochrome : Basics.Bool -> Expression

The monochrome CSS media feature.

This works a little bit differently to the original feature for the sake of streamlining in elm:

Use True to query monochrome displays. This is the equivalent of @media (monochrome) in CSS.

Use False to query non-monochrome displays. This is the equivalent of @media (monochrome: 0) in CSS.

-- monochrome device
withMedia [ only screen [ monochrome True ]]
    [ Css.color (hex "000000")
    ]

-- non-monochrome device
withMedia [ only screen [ monochrome False ]]
    [ Css.color (hex "333333")
    ]

minMonochrome : Basics.Int -> Expression

The min-monochrome CSS media feature.

withMedia [ only screen [ minMonochrome 2 ]]
    [ ... ]

maxMonochrome : Basics.Int -> Expression

The max-monochrome CSS media feature.

withMedia [ only screen [ maxMonochrome 5 ]]
    [ ... ]

colorIndex : Basics.Int -> Expression

The color-index CSS media feature.

It queries the number of colors in the user agent's color lookup table.

withMedia [ only screen [ colorIndex 16777216 ]]
    [ a [ Css.color (hex "D9534F") ]
    ]

minColorIndex : Basics.Int -> Expression

The min-color-index CSS media feature.

It queries the number of colors in the user agent's color lookup table.

withMedia [ only screen [ minColorIndex 16777216 ]]
    [ a [ Css.color (hex "D9534F") ]
    ]

maxColorIndex : Basics.Int -> Expression

The max-color-index CSS media feature.

It queries the number of colors in the user agent's color lookup table.

withMedia [ only screen [ maxColorIndex 256 ]]
    [ a [ Css.color (hex "FF0000") ] ]

Color gamut

colorGamut : Css.Value.Value { srgb : Css.Value.Supported, p3 : Css.Value.Supported, rec2020 : Css.Value.Supported } -> Expression

The color-gamut CSS media feature.

The keyword values this supports in order of how wide each color gamut is:

withMedia [only screen [colorGamut srgb]] [ ... ]

withMedia [only screen [colorGamut rec2020]] [ ... ]

srgb : Css.Value.Value { provides | srgb : Css.Value.Supported }

The SRGB value for the colorGamut CSS media feature.

This will enable specific CSS for when a device is using the SRGB colour space.

SRGB is the lowest gamut keyword that colorGamut accepts. In modern computing standards, this is the lowest common denominator colour space, it's rare (but not impossible) when a display doesn't support SRGB.

withMedia [only screen [colorGamut srgb]] [ ... ]

p3 : Css.Value.Value { provides | p3 : Css.Value.Supported }

The P3 value for the colorGamut CSS media feature.

This will enable specific CSS for when a device is using the Apple DCI-P3 (P3 for short) colour space.

This color gamut is wider than srgb but narrower than rec2020.

withMedia [only screen [colorGamut p3]] [ ... ]

Visual preferences

prefersColorScheme : Css.Value.Value { light : Css.Value.Supported, dark : Css.Value.Supported } -> Expression

The prefers-color-scheme CSS media feature.

withMedia [only screen [prefersColorScheme light]] [ ... ]

withMedia [only screen [prefersColorScheme dark]] [ ... ]

prefersContrast : Css.Value.Value { noPreference : Css.Value.Supported, more : Css.Value.Supported, less : Css.Value.Supported, custom : Css.Value.Supported } -> Expression

The prefers-contrast CSS media feature.

When prefersContrast is custom, it indicates the user has notified the system to use a particular set of colours, and the implied contrast of this set of colours does not match the more or less keywords. The value will match the palette specified by forcedColors active.

withMedia [only screen [prefersContrast noPreference]] [ ... ]

withMedia [only screen [prefersContrast more]] [ ... ]

prefersReducedMotion : Css.Value.Value { noPreference : Css.Value.Supported, reduce : Css.Value.Supported } -> Expression

The prefers-reduced-motion CSS media feature.

forcedColors : Css.Value.Value { none : Css.Value.Supported, active_ : Css.Value.Supported } -> Expression

The forced-colors CSS media feature.

light : Css.Value.Value { provides | light : Css.Value.Supported }

The light value for the prefersColorScheme CSS media feature.

This means the user has indicated that they are using a light (dark content on light background) theme.

withMedia [only screen [prefersColorScheme light]] [ ... ]

dark : Css.Value.Value { provides | dark : Css.Value.Supported }

The dark value for the prefersColorScheme CSS media feature.

This means the user has indicated that they are using a dark (dark content on dark background) theme.

withMedia [only screen [prefersColorScheme dark]] [ ... ]

more : Css.Value.Value { provides | more : Css.Value.Supported }

The more value for the prefersContrast CSS media feature.

This means the user has indicated that they prefer an interface with a higher level of contrast.

withMedia [only screen [prefersContrast more]] [ ... ]

less : Css.Value.Value { provides | less : Css.Value.Supported }

The less value for the prefersContrast CSS media feature.

This means the user has indicated that they prefer an interface with a lower level of contrast.

withMedia [only screen [prefersContrast less]] [ ... ]

noPreference : Css.Value.Value { provides | noPreference : Css.Value.Supported }

The no-preference value for the prefersContrast and prefersReducedMotion CSS media features.

    withMedia [only screen [prefersContrast noPreference]] [ ... ]

    withMedia [only screen [prefersReducedMotion noPreference]] [ ... ]

reduce : Css.Value.Value { provides | reduce : Css.Value.Supported }

The reduce value for the prefersReducedMotion CSS media feature.

This means the user has indicated that they prefer reduced motion (essentially equivalent to True).

withMedia [only screen [prefersReducedMotion reduce]] [ ... ]

custom : Css.Value.Value { provides | custom : Css.Value.Supported }

The custom value for the prefersContrast CSS media feature.

it indicates the user has notified the system to use a particular set of colours, and the implied contrast of this set of colours does not match the more or less keywords. The value will match the palette specified by forcedColors active_.

withMedia [only screen [prefersContrast custom]] [ ... ]

active_ : Css.Value.Value { provides | active_ : Css.Value.Supported }

The active_ value for the forcedColors CSS media feature.

This means the user has indicated that forced colors is active (essentially equivalent to True).

Note: This is called active_ instead of active to prevent conflicts with Css.active.

withMedia [only screen [forcedColors active_]] [ ... ]

Interaction Media Features


type alias PointingAccuracySupported supported =
{ supported | coarse : Css.Value.Supported
, fine : Css.Value.Supported 
}

A type alias used to accept an pointer device accuracy value, among others.


type alias PointingAccuracy =
PointingAccuracySupported {}

A type alias used to accept an pointer device accuracy value.

pointer : Css.Value.Value (PointingAccuracySupported { none : Css.Value.Supported }) -> Expression

The pointer CSS media feature.

This queries whether the user has a pointing device, and if so, how accurate the primary pointing device is.

If you want to query the accuracy of any pointing device, use anyPointer instead.

withMedia [all [Media.pointer coarse]] [ a [ display block, Css.height (px 24) ] ]

anyPointer : Css.Value.Value (PointingAccuracySupported { none : Css.Value.Supported }) -> Expression

The any-pointer CSS media feature.

This queries whether the user has any pointing device, and if so, how accurate it is.

If you want to query the accuracy of the primary pointing device, use pointer instead.

withMedia [all [Media.pointer coarse]] [ a [ display block, Css.height (px 24) ] ]

hover : Css.Value.Value { none : Css.Value.Supported, hover_ : Css.Value.Supported } -> Expression

The hover CSS media feature.

Queries the if the user agent's primary input mechanism has the ability to hover over elements.

If you want to query the hover capabilities of any pointing device, use anyHover instead.

withMedia [all [Media.hover canHover]] [ a [ Css.hover [ textDecoration underline ] ] ]

anyHover : Css.Value.Value { none : Css.Value.Supported, hover_ : Css.Value.Supported } -> Expression

The any-hover CSS media feature.

Queries the if any of user agent's input mechanisms have the ability to hover over elements.

If you want to query the hover capabilities of the primary pointing device, use hover instead.

withMedia [all [anyHover hover_]]
    [ a
        [ Css.hover [ textDecoration underline ] ]
    ]

coarse : Css.Value.Value { provides | coarse : Css.Value.Supported }

The coarse value for the pointer and anyPointer CSS Media Features.

This is for input mechanism(s) that have limited accuracy.

withMedia [ only screen [ Media.pointer coarse ]]
    [ ... ]

fine : Css.Value.Value { provides | fine : Css.Value.Supported }

The fine value for the pointer and anyPointer CSS Media Features.

This is for input mechanism(s) that are somewhat accurate.

withMedia [ only screen [ Media.pointer fine ]]
    [ ... ]

Scripting Media Features

scripting : Css.Value.Value { none : Css.Value.Supported, initialOnly : Css.Value.Supported, enabled : Css.Value.Supported } -> Expression

The scripting CSS media feature.

This tests whether scripting like JS is available, and if so, in what contexts.

withMedia [ all [ scripting none ]]
    [ Css.class NoScript [ display block ] ]

enabled : Css.Value.Value { provides | enabled : Css.Value.Supported }

The enabled value for the scripting CSS media feature.

This is for scripting that is allowed and active on the current document.

withMedia [ all [ scripting enabled ]]
    [ ... ]

initialOnly : Css.Value.Value { provides | initialOnly : Css.Value.Supported }

The initialOnly value for the scripting CSS media feature.

This is for scripting that is allowed only on initial page load.

withMedia [ all [ scripting initialOnly ]]
    [ ... ]