Css.Media

Functions for building @media queries.

Data Structures

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 =

MediaType

A media type.

type alias Expression =

MediaExpression

A media expression. An expression is a media feature with an optional value, which resolves to either true or false. In the media query screen and (min-width: 768px),

screen is a media type,
min-width is a media feature, and
(min-width: 768px) is an expression.

Constructors

`@media` rule constructors

withMedia : List MediaQuery -> List Style -> 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 Style -> 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;
}

not : MediaType -> List Expression -> MediaQuery

Build a negated media query.

withMedia [ Media.not screen [] ]
    [ Css.color (hex "ff0000")
    ]

The above code translates into the following CSS:

@media not screen {
    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 ]

speech : MediaType

CSS media type for screenreaders and similar devices that read out a page.

withMedia [ not speech ]
    [ display none ]

Size media features

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

width : Value Length -> Expression

The width media feature.

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

minWidth : Value Length -> Expression

The min-width CSS media feature.

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

maxWidth : Value Length -> Expression

The max-width CSS media feature.

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

height : Value Length -> Expression

The height CSS media feature.

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

minHeight : Value Length -> Expression

The min-height CSS media feature.

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

maxHeight : Value Length -> Expression

The max-height CSS media feature.

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

Ratio

aspectRatio : Int -> Int -> Expression

The aspect-ratio CSS media feature.

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

minAspectRatio : Int -> Int -> Expression

The min-aspect-ratio CSS media feature.

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

maxAspectRatio : Int -> Int -> Expression

The max-aspect-ratio CSS media feature.

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

Orientation

type alias OrientationSupported supported =

{ supported | landscape : Supported, portrait : 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 : Value Orientation -> Expression

The orientation. CSS media feature.

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

landscape : Value { provides | landscape : Supported }

The landscape value for the orientation CSS media feature.

portrait : Value { provides | portrait : Supported }

The portrait value for the orientation CSS media feature.

Display Quality Media Features

Resolution

type alias ResolutionSupported supported =

{ supported

| dpi : Supported

, dpcm : Supported

, dppx : Supported

, x : 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 : Float -> Value { provides | dpi : Supported }

dpi resolution units.

dpcm : Float -> Value { provides | dpcm : Supported }

dpcm resolution units.

dppx : Float -> Value { provides | dppx : Supported }

dppx resolution units.

x : Float -> Value { provides | x : Supported }

An alias for dppx resolution units.

resolution : 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 : 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 : 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 : Supported, interlace : 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 : 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 : Value { provides | progressive : Supported }

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

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

interlace : Value { provides | interlace : 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 :

Value

{ none : Supported

, scroll : Supported

, optionalPaged : Supported

, paged : 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 :

Value

{ none : Supported

, scroll : 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 : Value { provides | paged : Supported }

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

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

optionalPaged : Value { provides | optionalPaged : Supported }

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

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

Color Media Features

Bit depth

color : Expression

The color CSS media feature.

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

minColor : Int -> Expression

The min-color CSS media feature.

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

maxColor : Int -> Expression

The max-color CSS media feature.

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

monochrome : 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 : Int -> Expression

The min-monochrome CSS media feature.

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

maxMonochrome : Int -> Expression

The max-monochrome CSS media feature.

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

colorIndex : 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 : 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 : 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 :

Value

{ srgb : Supported

, p3 : Supported

, rec2020 : Supported

}

-> Expression

The color-gamut CSS media feature.

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

srgb (narrowest, most common)
p3
rec2020 (widest)

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

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

srgb : Value { provides | srgb : 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 : Value { provides | p3 : 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]] [ ... ]

rec2020 : Value { provides | rec2020 : Supported }

The SRGB value for the colorGamut CSS media feature.

This will enable specific CSS for when a device is using the ITU Recommendation BT.2020 (Rec. 2020 for short) colour space. This is often what is commonly referred to as High Dynamic Range (HDR).

This is the widest gamut that colorGamut accepts.

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

Interaction Media Features

type alias PointingAccuracySupported supported =

{ supported | coarse : Supported, fine : 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 :

Value (PointingAccuracySupported { none : 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 :

Value (PointingAccuracySupported { none : 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 :

Value

{ none : Supported

, hover_ : 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 :

Value

{ none : Supported

, hover_ : 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 : Value { provides | coarse : 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 : Value { provides | fine : 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 ]]
    [ ... ]

hover_ : Value { provides | hover_ : Supported }

The hover value for the hover and anyHover CSS Media Features.

This is for input mechanism(s) that are capable of hovering over interactable objects.

withMedia [ only screen [ Media.hover hover_ ]]
    [ ... ]

Note: This is called hover_ so it doesn't conflict with the hover media feature this is used for.

Scripting Media Features

scripting :

Value

{ none : Supported

, initialOnly : Supported

, enabled : 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 : Value { provides | enabled : 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 : Value { provides | initialOnly : 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 ]]
    [ ... ]

dzuk-mutant/elm-css/1.0.0

Css.Media

Data Structures

Constructors

`@media` rule constructors

Query constructors

Media types

Size media features

Ratio

Orientation

Display Quality Media Features

Resolution

Display scanning

Bitmap or grid-based display

Overflow

Color Media Features

Bit depth

Color gamut

Interaction Media Features

Scripting Media Features

Modules

Css

Html.Styled

Svg.Styled

dzuk-mutant/elm-css/1.0.0

Css.Media

Data Structures

Constructors

@media rule constructors

Query constructors

Media types

Size media features

Ratio

Orientation

Display Quality Media Features

Resolution

Display scanning

Bitmap or grid-based display

Overflow

Color Media Features

Bit depth

Color gamut

Interaction Media Features

Scripting Media Features

Modules

Css

Html.Styled

Svg.Styled

`@media` rule constructors