Functions for building [`
Css.Structure.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.
Css.Structure.MediaType
A media type.
@media
rule constructorswithMedia : List MediaQuery -> List Css.Style -> Css.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 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;
}
}
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;
}
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 ]
For querying either the size of the viewport or the size of a printed page.
width : Css.Value.Value Css.Length -> Expression
The width
media feature.
withMedia [ all [ Media.width (px 200) ]]
[ ... ]
minWidth : Css.Value.Value Css.Length -> Expression
The min-width
CSS media feature.
withMedia [ all [ Media.minWidth (px 600) ]]
[ Css.maxWidth (px 500) ]
maxWidth : Css.Value.Value Css.Length -> Expression
The max-width
CSS media feature.
withMedia [ all [ Media.maxWidth (px 800) ]]
[ display none ]
height : Css.Value.Value Css.Length -> Expression
The height
CSS media feature.
withMedia [ all [ Media.height (px 200) ]]
[ ... ]
minHeight : Css.Value.Value Css.Length -> Expression
The min-height
CSS media feature.
withMedia [ all [ Media.minHeight (px 400) ]]
[ display block ]
maxHeight : Css.Value.Value Css.Length -> Expression
The max-height
CSS media feature.
withMedia [ all [ Media.maxHeight (px 399) ]
[ display none ]
aspectRatio : Basics.Int -> Basics.Int -> Expression
The aspect-ratio
CSS media feature.
withMedia [ all [ aspectRatio 16 10 ]]
[ ... ]
minAspectRatio : Basics.Int -> Basics.Int -> Expression
The min-aspect-ratio
CSS media feature.
withMedia [ all [ minAspectRatio 1 1 ]]
[ ... ]
maxAspectRatio : Basics.Int -> Basics.Int -> Expression
The max-aspect-ratio
CSS media feature.
withMedia [ all [ maxAspectRatio 16 9 ]]
[ ... ]
{ supported | landscape : Css.Value.Supported
, portrait : Css.Value.Supported
}
A type alias used to accept an orientation value, among others.
OrientationSupported {}
A type alias used to accept an orientation value.
orientation : Css.Value.Value Orientation -> Expression
The orientation
.
CSS media feature.
withMedia [ all [ orientation portrait ]]
[ ... ]
landscape : Css.Value.Value { provides | landscape : Css.Value.Supported }
The landscape
value for the orientation
CSS media feature.
{ supported | dpi : Css.Value.Supported
, dpcm : Css.Value.Supported
, dppx : Css.Value.Supported
, x : Css.Value.Supported
}
A type alias used to accept a resolution among other values.
ResolutionSupported {}
A type alias used to accept a resolution.
dpi : Basics.Float -> Css.Value.Value { provides | dpi : Css.Value.Supported }
dpi
resolution units.
dpcm : Basics.Float -> Css.Value.Value { provides | dpcm : Css.Value.Supported }
dpcm
resolution units.
dppx : Basics.Float -> Css.Value.Value { provides | dppx : Css.Value.Supported }
dppx
resolution units.
x : Basics.Float -> Css.Value.Value { provides | x : Css.Value.Supported }
An alias for dppx
resolution units.
resolution : Css.Value.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 : Css.Value.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 : Css.Value.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 ] ]
{ supported | progressive : Css.Value.Supported
, interlace : Css.Value.Supported
}
A type alias used to accept an scanning process value, among others.
ScanningProcessSupported {}
A type alias used to accept an scanning process value.
scan : Css.Value.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 : Css.Value.Value { provides | progressive : Css.Value.Supported }
CSS Media query value for when a screen has progressive scan.
withMedia [ only screen [ scan progressive ]]
[ ... ]
interlace : Css.Value.Value { provides | interlace : Css.Value.Supported }
CSS Media query value for when a screen has interlace scan.
withMedia [ only screen [ scan interlace ]]
[ ... ]
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 ]]
[ ... ]
overflowBlock : Css.Value.Value { none : Css.Value.Supported, scroll : Css.Value.Supported, optionalPaged : Css.Value.Supported, paged : Css.Value.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 : Css.Value.Value { none : Css.Value.Supported, scroll : Css.Value.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 : Css.Value.Value { provides | paged : Css.Value.Supported }
CSS Media query value for the block-overflow media feature.
withMedia [ all [ Media.overflowBlock paged ]]
[ ... ]
color : Expression
The color
CSS media feature.
withMedia [ all [ color ]]
[ Css.color (hex "000000")
]
minColor : Basics.Int -> Expression
The min-color
CSS media feature.
withMedia [ only screen [ minColor 256 ]]
[ Css.color (hex "D9534F")
]
maxColor : Basics.Int -> Expression
The max-color
CSS media feature.
withMedia [ only screen [ maxColor 8 ]]
[ Css.color (hex "FF0000")
]
monochrome : Basics.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 : Basics.Int -> Expression
The min-monochrome
CSS media feature.
withMedia [ only screen [ minMonochrome 2 ]]
[ ... ]
maxMonochrome : Basics.Int -> Expression
The max-monochrome
CSS media feature.
withMedia [ only screen [ maxMonochrome 5 ]]
[ ... ]
colorIndex : Basics.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 : Basics.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 : Basics.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") ] ]
colorGamut : Css.Value.Value { srgb : Css.Value.Supported, p3 : Css.Value.Supported, rec2020 : Css.Value.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 : Css.Value.Value { provides | srgb : Css.Value.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 : Css.Value.Value { provides | p3 : Css.Value.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]] [ ... ]
prefersColorScheme : Css.Value.Value { light : Css.Value.Supported, dark : Css.Value.Supported } -> Expression
The prefers-color-scheme
CSS media feature.
withMedia [only screen [prefersColorScheme light]] [ ... ]
withMedia [only screen [prefersColorScheme dark]] [ ... ]
prefersContrast : Css.Value.Value { noPreference : Css.Value.Supported, more : Css.Value.Supported, less : Css.Value.Supported, custom : Css.Value.Supported } -> Expression
The prefers-contrast
CSS media feature.
When prefersContrast
is custom
, it indicates the user has notified the system to use
a particular set of colours, and the implied contrast of this set of colours does
not match the more
or less
keywords. The value will match the palette specified
by forcedColors active
.
withMedia [only screen [prefersContrast noPreference]] [ ... ]
withMedia [only screen [prefersContrast more]] [ ... ]
prefersReducedMotion : Css.Value.Value { noPreference : Css.Value.Supported, reduce : Css.Value.Supported } -> Expression
The prefers-reduced-motion
CSS media feature.
noPreference
means that the user has not indicated they want motion reduced (essentially equivalent to False).reduce
means the user has indicated they want motion reduced (essentially equivalent to True).
withMedia [only screen [prefersReducedMotion noPreference]] [ ... ]
withMedia [only screen [prefersReducedMotion reduce]] [ ... ]
forcedColors : Css.Value.Value { none : Css.Value.Supported, active_ : Css.Value.Supported } -> Expression
The forced-colors
CSS media feature.
none
means that forced-colors is not active (essentially equivalent to False).active_
means that forced-colors is active (essentially equivalent to True).
withMedia [only screen [forcedColors Css.none]] [ ... ]
withMedia [only screen [forcedColors active_]] [ ... ]
light : Css.Value.Value { provides | light : Css.Value.Supported }
The light
value for the prefersColorScheme
CSS media feature.
This means the user has indicated that they are using a light (dark content on light background) theme.
withMedia [only screen [prefersColorScheme light]] [ ... ]
dark : Css.Value.Value { provides | dark : Css.Value.Supported }
The dark
value for the prefersColorScheme
CSS media feature.
This means the user has indicated that they are using a dark (dark content on dark background) theme.
withMedia [only screen [prefersColorScheme dark]] [ ... ]
more : Css.Value.Value { provides | more : Css.Value.Supported }
The more
value for the prefersContrast
CSS media feature.
This means the user has indicated that they prefer an interface with a higher level of contrast.
withMedia [only screen [prefersContrast more]] [ ... ]
less : Css.Value.Value { provides | less : Css.Value.Supported }
The less
value for the prefersContrast
CSS media feature.
This means the user has indicated that they prefer an interface with a lower level of contrast.
withMedia [only screen [prefersContrast less]] [ ... ]
noPreference : Css.Value.Value { provides | noPreference : Css.Value.Supported }
The no-preference
value for the prefersContrast
and prefersReducedMotion
CSS media features.
prefersContrast
, it means that the user has no preference either way.prefersReducedMotion
, it means the user does not prefer reduced motion (essentially equivalent to False). withMedia [only screen [prefersContrast noPreference]] [ ... ]
withMedia [only screen [prefersReducedMotion noPreference]] [ ... ]
reduce : Css.Value.Value { provides | reduce : Css.Value.Supported }
The reduce
value for the prefersReducedMotion
CSS media feature.
This means the user has indicated that they prefer reduced motion (essentially equivalent to True).
withMedia [only screen [prefersReducedMotion reduce]] [ ... ]
custom : Css.Value.Value { provides | custom : Css.Value.Supported }
The custom
value for the prefersContrast
CSS media feature.
it indicates the user has notified the system to use
a particular set of colours, and the implied contrast of this set of colours does
not match the more
or less
keywords. The value will match the palette specified
by forcedColors active_
.
withMedia [only screen [prefersContrast custom]] [ ... ]
active_ : Css.Value.Value { provides | active_ : Css.Value.Supported }
The active_
value for the forcedColors
CSS media feature.
This means the user has indicated that forced colors is active (essentially equivalent to True).
Note: This is called active_
instead of active
to prevent conflicts with Css.active
.
withMedia [only screen [forcedColors active_]] [ ... ]
{ supported | coarse : Css.Value.Supported
, fine : Css.Value.Supported
}
A type alias used to accept an pointer device accuracy value, among others.
PointingAccuracySupported {}
A type alias used to accept an pointer device accuracy value.
pointer : Css.Value.Value (PointingAccuracySupported { none : Css.Value.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 : Css.Value.Value (PointingAccuracySupported { none : Css.Value.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 : Css.Value.Value { none : Css.Value.Supported, hover_ : Css.Value.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 : Css.Value.Value { none : Css.Value.Supported, hover_ : Css.Value.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 : Css.Value.Value { provides | coarse : Css.Value.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 : Css.Value.Value { provides | fine : Css.Value.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 ]]
[ ... ]
scripting : Css.Value.Value { none : Css.Value.Supported, initialOnly : Css.Value.Supported, enabled : Css.Value.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 : Css.Value.Value { provides | enabled : Css.Value.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 : Css.Value.Value { provides | initialOnly : Css.Value.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 ]]
[ ... ]