PackagesReroutesAboutlamdera.com

rtfeldman/elm-css/13.1.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

Css.Media

Functions for building @media queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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

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

@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 14px) ]
  ]

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 000000), 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 ] ]
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 : 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 ] ]

Modules

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