Css.Media

Functions for building @media queries.

Data Structures

MediaQuery

One query of a media rule. A media rule can have multiple queries. The 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.

`@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.

media [ all [ color, landscape ] ]
    [ body [ Css.color (hex "ff0000") ] ]

The above code translates into the following CSS.

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

only : MediaType -> List Expression -> MediaQuery

Build a media query matching a single media type.

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

The above code translates into the following CSS.

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

not : MediaType -> List Expression -> MediaQuery

Build a negated media query.

media [ not screen [] ]
    [ body [ Css.color (hex "ff0000") ] ]

The above code translates into the following CSS.

@media not screen {
    body {
        color: #ff0000;
    }
}

Media Types

screen : MediaType

Media type for any device not matched by print or speech.

media (and screen (maxWidth (px 600)) [ Css.class mobileNav display none ]

print : MediaType

Media type for printers

media print [ a [ color (hex 0), textDecoration none ] ]

speech : MediaType

Media type for screenreaders and similar devices that read out a page

media (not speech) [ Css.class screenReaderOnly [ display none ] ]

Viewport, Page Dimensions Media Features

minWidth : AbsoluteLength compatible -> Expression

Media feature min-width Queries the width of the output device.

media (Media.minWidth (px 600)) [ Css.class Container [ Css.maxWidth (px 500) ] ]

width : AbsoluteLength compatible -> Expression

Media feature width

media (Media.width (px 200)) [ ... ]

maxWidth : AbsoluteLength compatible -> Expression

Media feature max-width

media (Media.maxWidth (px 800)) [ Css.class MobileNav [ display none ] ]

minHeight : AbsoluteLength compatible -> Expression

Media feature min-height

media (Media.minHeight (px 400)) [ Css.class TopBanner [ display block ] ]

height : AbsoluteLength compatible -> Expression

Media feature height

maxHeight : AbsoluteLength compatible -> Expression

Media feature max-height

media (Media.maxHeight (px 399)) [ Css.class TopBanner [ display none ] ]

type alias Ratio =

{ value : String

, ratio : Compatible

}

ratio : Int -> Int -> Ratio

Create a ratio.

--a ratio of 4/3
ratio 4 3

minAspectRatio : Ratio -> Expression

Media feature min-aspect-ratio

media (minAspectRatio (ratio 1 1)) [ ... ]

aspectRatio : Ratio -> Expression

Media feature aspect-ratio

media (aspectRatio (ratio 16 10)) [ ... ]

maxAspectRatio : Ratio -> Expression

Media feature max-aspect-ratio

media (maxAspectRatio (ratio 16 9)) [ ... ]

type alias Landscape =

{ value : String

, orientation : Compatible

}

type alias Portrait =

{ value : String

, orientation : Compatible

}

landscape : Landscape

CSS value landscape

portrait : Portrait

CSS value portrait

orientation : Orientation a -> Expression

Media feature orientation. Accepts portrait or landscape.

Display Quality Media Features

type alias Resolution =

{ value : String

, resolution : Compatible

}

Display Resolution. https://www.w3.org/TR/css3-values/#resolution-value

dpi : Float -> Resolution

dpi: Dots per inch. https://www.w3.org/TR/css3-values/#resolution-value

dpi 166

dpcm : Float -> Resolution

dpcm: Dots per centimeter. https://www.w3.org/TR/css3-values/#resolution-value

dpcm 65

dppx : Float -> Resolution

dppx: Dots per pixel. https://www.w3.org/TR/css3-values/#resolution-value

dppx 1.5

minResolution : Resolution -> Expression

Media feature min-resolution. Describes the resolution of the output device.

media (minResolution (dpi 600)) [ Css.class HiResImg [ display block ] ]

resolution : Resolution -> Expression

Media feature resolution Describes the resolution of the output device.

media (resolution (dppx 2)) [ img [ width (pct 50) ] ]

maxResolution : Resolution -> Expression

Media feature max-resolution Describes the resolution of the output device.

media (maxResolution (dpcm 65)) [ Css.class HiResImg [ display none ] ]

type alias Progressive =

{ value : String

, scanningProcess : Compatible

}

type alias Interlace =

{ value : String

, scanningProcess : Compatible

}

progressive : Progressive

CSS value progressive

interlace : Interlace

CSS value interlace

scan : ScanningProcess a -> Expression

Media feature scan. Queries scanning process of the device. Accepts innterlace (some TVs) or progressive (most things).

grid : Expression

Media feature grid. Queries whether the output device is a grid or bitmap.

type alias Slow =

{ value : String

, updateFrequency : Compatible

}

type alias Fast =

{ value : String

, updateFrequency : Compatible

}

slow : Slow

CSS value slow

fast : Fast

CSS value fast

update : UpdateFrequency a -> Expression

Media feature update The update frequency of the device. Accepts none, slow, or fast

type alias Paged =

{ value : String

, blockAxisOverflow : Compatible

}

type alias OptionalPaged =

{ value : String

, blockAxisOverflow : Compatible

}

paged : Paged

CSS value paged

optionalPaged : OptionalPaged

CSS value optional-paged

overflowBlock : BlockAxisOverflow a -> Expression

Media feature overflow-block Describes the behavior of the device when content overflows the initial containing block in the block axis.

overflowInline : InlineAxisOverflow a -> Expression

Media feature overflow-inline. Describes the behavior of the device when content overflows the initial containing block in the inline axis.

Color Media Features

type alias Bits =

{ value : String

, bits : Compatible

}

bits : Int -> Bits

Get a bumber of bits

bits 8

minColor : Bits -> Expression

Media Feature min-nncolor Queries the user agent's bits per color channel

media (screen (minColor (bits 256))) [ a [ Css.color (hex "D9534F") ] ]

color : Expression

Media feature color

media (not color) [ body [ Css.color (hex "000000") ] ]

maxColor : Bits -> Expression

Media feature max-color Queries the user agent's bits per color channel

media (and screen (maxColor (bits 8))) [ a [ Css.color (hex "FF0000") ] ]

minMonochrome : Bits -> Expression

Media Feature min-monochrome

monochrome : Expression

Media feature monochrome

media [ monochrome ] [ body [ Css.color (hex "000000") ] ]

maxMonochrome : Bits -> Expression

Media feature max-monochrome

minColorIndex : Number a -> Expression

Media Feature min-color-index Queries the number of colors in the user agent's color lookup table.

media (and screen (minColorIndex (int 16777216))) [ a [ Css.color (hex "D9534F") ] ]

colorIndex : Number a -> Expression

Media feature color-index Queries the number of colors in the user agent's color lookup table.

media (and screen (colorIndex (int 16777216))) [ a [ Css.color (hex "D9534F") ] ]

maxColorIndex : Number a -> Expression

Media feature max-color-index. Queries the number of colors in the user agent's color lookup table.

media (and screen (maxColorIndex (int 256))) [ a [ Css.color (hex "FF0000") ] ]

type alias SRGB =

{ value : String

, colorGamut : Compatible

}

type alias P3 =

{ value : String

, colorGamut : Compatible

}

type alias Rec2020 =

{ value : String

, colorGamut : Compatible

}

srgb : SRGB

CSS value srgb

p3 : P3

CSS value p3

rec2020 : Rec2020

CSS value rec2020

colorGamut : ColorGamut a -> Expression

Media feature color-gamut. Describes the approximate range of colors supported by the user agent and device.

media (and screen (colorGamut rec2020)) [ Css.class HiColorImg [ display block ] ]

Interaction Media Features

type alias Fine =

{ value : String

, pointerDevice : Compatible

}

type alias Coarse =

{ value : String

, pointerDevice : Compatible

}

fine : Fine

CSS Value fine

coarse : Coarse

CSS Value coarse

pointer : PointerDevice a -> Expression

Media feature pointer Queries the presence and accuracy of a pointing device, such as a mouse, touchscreen, or Wii remote. Reflects the capabilities of the primary input mechanism. Accepts none, fine, and coarse.

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

anyPointer : PointerDevice a -> Expression

Media feature any-pointer Queries the presence and accuracy of a pointing device, such as a mouse, touchscreen, or Wii remote. Reflects the capabilities of the most capable input mechanism. Accepts none, fine, and coarse.

media (anyPointer coarse) [ a [ display block, Css.height (px 24) ] ]

type alias CanHover =

{ value : String

, hoverCapability : Compatible

}

canHover : CanHover

The value hover. Named canHover to avoid conflict with the media feature of the same name

hover : HoverCapability a -> Expression

Media feature hover. Queries the if the user agent's primary input mechanism has the ability to hover over elements. Accepts none or canHover.

media (Media.hover canHover) [ a [ Css.hover [ textDecoration underline ] ] ]

anyHover : HoverCapability a -> Expression

Media feature any-hover Queries the if any of user agent's input mechanisms have the ability to hover over elements Accepts none or canHover.

media (anyHover canHover) [ a [ Css.hover [ textDecoration underline ] ] ]

Scripting Media Features

type alias InitialOnly =

{ value : String

, scriptingSupport : Compatible

}

type alias Enabled =

{ value : String

, scriptingSupport : Compatible

}

initialOnly : InitialOnly

CSS value initial-only.

enabled : Enabled

CSS value enabled.

scripting : ScriptingSupport a -> Expression

The scripting media feature for querying the user agents support for scripting languages like JavaScript. Accepts none, initialOnly, and enabled.

media (scripting none) [ Css.class NoScript [ display block ] ]

rtfeldman/elm-css/16.1.1

Css.Media

Data Structures

`@media` rule constructors

Query constructors

Media Types

Viewport, Page Dimensions Media Features

Display Quality Media Features

Color Media Features

Interaction Media Features

Scripting Media Features

Modules

Styling

Elements

rtfeldman/elm-css/16.1.1

Css.Media

Data Structures

@media rule constructors

Query constructors

Media Types

Viewport, Page Dimensions Media Features

Display Quality Media Features

Color Media Features

Interaction Media Features

Scripting Media Features

Modules

Styling

Elements

`@media` rule constructors