ThinkAlexandria / css-in-elm / 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. 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 =
Css.Structure.MediaType

A media type.

[[[[https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types)


type alias Expression =
Css.Structure.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),

[[[[https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)

@media rule constructors

media : List MediaQuery -> List Css.Snippet -> Css.Snippet

Combines media queries into a @media rule.

(stylesheet << namespace "homepage")
    [ media [ only screen [ Media.minWidth (px 300) ] ]
        [ footer [ Css.maxWidth (px 300) ] ]
    ]

The above code translates into the following CSS.

@media screen and (min-width: 300px) {
    footer {
        max-width: 300px;
    }
}

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

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

(stylesheet << namespace "homepage")
    [ footer
        [ 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) {
    footer {
        max-width: 300px;
    }
}

mediaQuery : List String -> List Css.Snippet -> Css.Snippet

Manually specify a @media rule using a List of strings.

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

The above code translates into the following CSS.

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

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.

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 : Css.Structure.Compatible 
}

ratio : Basics.Int -> Basics.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 : Css.Structure.Compatible 
}


type alias Portrait =
{ value : String
, orientation : Css.Structure.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 : Css.Structure.Compatible 
}

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

dpi : Basics.Float -> Resolution

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

dpi 166

dpcm : Basics.Float -> Resolution

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

dpcm 65

dppx : Basics.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 ] ]

scan : ScanningProcess a -> Expression

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


type alias Progressive =
{ value : String
, scanningProcess : Css.Structure.Compatible 
}


type alias Interlace =
{ value : String
, scanningProcess : Css.Structure.Compatible 
}

progressive : Progressive

CSS value progressive

interlace : Interlace

CSS value interlace

grid : Expression

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


type alias Slow =
{ value : String
, updateFrequency : Css.Structure.Compatible 
}


type alias Fast =
{ value : String
, updateFrequency : Css.Structure.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 : Css.Structure.Compatible 
}


type alias OptionalPaged =
{ value : String
, blockAxisOverflow : Css.Structure.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 : Css.Structure.Compatible 
}

bits : Basics.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 : Css.Structure.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 : Css.Structure.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 : Css.Structure.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 : Css.Structure.Compatible 
}


type alias P3 =
{ value : String
, colorGamut : Css.Structure.Compatible 
}


type alias Rec2020 =
{ value : String
, colorGamut : Css.Structure.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 : Css.Structure.Compatible 
}


type alias Coarse =
{ value : String
, pointerDevice : Css.Structure.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 : Css.Structure.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 : Css.Structure.Compatible 
}


type alias Enabled =
{ value : String
, scriptingSupport : Css.Structure.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 ] ]