PackagesReroutesAboutlamdera.com

rtfeldman/elm-css/10.0.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

Css.Media

Functions for composing.

type alias Bits =
{ value : String
, bits : Compatible
}

Data Structures

type alias MediaQuery =
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 monoschrome screen, the body color is black.

In elm-css, queries are joined into rules using a special MediaQuery returned by the or function.

Query constructors

media : MediaQuery -> List Snippet -> Snippet

Combines media query components into media queries.

(stylesheet << namespace "homepage")
    [  media (and 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 Style -> Style

Combines media query components into media queries that are nested under selectors.

(stylesheet << namespace "homepage")
    [ footer
        [ withMedia [ screen, Media.minWidth (px 300), Media.maxWidth (px 800) ]
            [ Css.maxWidth (px 300) ]
    ]
@media screen and (min-width: 300px) and (max-width: 800px) {
    footer {
        max-width: 300px;
    }
}
mediaQuery : List String -> List Snippet -> Snippet

Manually specify a media query 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 (min-height: 400px) {
    body {
        font-size: 14px;
    }
}
withMediaQuery : List String -> List Style -> Style

Manually specify a media query 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 14px) ]
  ]

The above code translates into the following css.

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

Query composition

not : MediaQuery -> MediaQuery

Media modifier to negate a query

media (not screen) [ body [ Css.color (hex "000000") ] ]
or : MediaQuery -> MediaQuery -> MediaQuery

Combine media queries, where matching either query should apply the following CSS properties.

media (or screen print) [ ... ]

The rule above will apply to either screens or printers.

and : MediaQuery -> MediaQuery -> MediaQuery

Combine media queries, where matching either query should apply the following CSS properties.

media (and screen print) [ ... ]

The rule above will apply to both screens and printers.

Media Types

all : MediaQuery

Media type for all devices. This is assumed by default if no other media type is specified.

screen : MediaQuery

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

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

Media type for printers

media print [ a [ color (hex 000000), textDecoration none ] ]
speech : MediaQuery

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 -> MediaQuery

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 -> MediaQuery

Media feature width

media (Media.width (px 200)) [ ... ]
maxWidth : AbsoluteLength compatible -> MediaQuery

Media feature max-width

media (Media.maxWidth (px 800)) [ Css.class MobileNav [ display none] ]
minHeight : AbsoluteLength compatible -> MediaQuery

Media feature min-height

media (Media.minHeight(px 400)) [ Css.class TopBanner [ display block] ]
height : AbsoluteLength compatible -> MediaQuery

Media feature height

maxHeight : AbsoluteLength compatible -> MediaQuery

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 -> MediaQuery

Media feature min-aspect-ratio

media (minAspectRatio (ratio 1 1)) [ ... ]
aspectRatio : Ratio -> MediaQuery

Media feature aspect-ratio

media (aspectRatio (ratio 16 10)) [ ... ]
maxAspectRatio : Ratio -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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

media (minResolution (dpi 600)) [ Css.class HiResImg [ display block ] ]
resolution : Resolution -> MediaQuery

Media feature resolution Describes the resolution of the output device.

media (resolution (dppx 2)) [ img [ width (pct 50) ] ]
maxResolution : Resolution -> MediaQuery

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

media (maxResolution (dpcm 65)) [ Css.class HiResImg [ display none ] ]
scan : ScanningProcess a -> MediaQuery

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

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 -> MediaQuery

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

grid : MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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

overflowInline : InlineAxisOverflow a -> MediaQuery

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 -> MediaQuery

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

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

Media feature color

media (not color) [ body [Css.color (hex "000000")] ]
maxColor : Bits -> MediaQuery

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 -> MediaQuery

Media Feature min-monochrome

monochrome : MediaQuery

Media feature monochrome

media [ monochrome ] [ body [Css.color (hex "000000")] ]
maxMonochrome : Bits -> MediaQuery

Media feature max-monochrome

minColorIndex : Number a -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 -> MediaQuery

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 ] ]

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera