Functions for building [`
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.
Css.Structure.MediaType
A media type.
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)
,
screen
is a media type,min-width
is a media feature, and(min-width: 768px)
is an expression.@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
.
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;
}
}
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 ] ]
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 ] ]
{ 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)) [ ... ]
{ value : String
, orientation : Css.Structure.Compatible
}
{ 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
.
{ 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 ] ]
{ value : String
, scanningProcess : Css.Structure.Compatible
}
{ value : String
, scanningProcess : Css.Structure.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.
{ value : String
, updateFrequency : Css.Structure.Compatible
}
{ 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
{ value : String
, blockAxisOverflow : Css.Structure.Compatible
}
{ 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.
{ 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") ] ]
{ value : String
, colorGamut : Css.Structure.Compatible
}
{ value : String
, colorGamut : Css.Structure.Compatible
}
{ 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 ] ]
{ value : String
, pointerDevice : Css.Structure.Compatible
}
{ 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) ] ]
{ 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 ] ] ]
{ value : String
, scriptingSupport : Css.Structure.Compatible
}
{ 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 ] ]