Abbreviations
Maple uses compact keys for common parts of its class syntax. This page is a quick reference for media query keys and abbreviated CSS property names.
Reading This Reference
Media query keys appear before the utility, as in
@md:bgc-primary. Property abbreviations take the property position in property-value, as in bgc-primary. Property Abbreviations
If a CSS property is not listed here, use the property name in camelCase, such as scrollBehavior.
Layout & Display
Abbreviation
CSS Property
dpostrblzofofxofyofwrptrdircntposvwc Flexbox
Abbreviation
CSS Property
fxfxbfxdirfxffxgfxsfxwraiacasjijs Grid
Abbreviation
CSS Property
grgrtcolsrowsareascolrowareaggrggxgy Spacing
Abbreviation
CSS Property
mmtmrmbmlmxmymbsmbepptprplpypbe Sizing
Abbreviation
CSS Property
whmnwmnhmxwmxhar Typography
Abbreviation
CSS Property
cffffdfsfwfstlhtatdecotdecoctdecostttftoftwrtwrmodtwrsttshadowwslist Background
Abbreviation
CSS Property
bgbgcbgimgbgposbgposxbgposybgsbgrbgclipbgobgattachbgblend Border
Abbreviation
CSS Property
brbrwbrstbrcbrtbrtcbrtwbrtstbrrbrrcbrrwbrrstbrbbrbcbrbwbrbstbrlbrlcbrlwbrlstradbrtlradbrtrradbrblradbrbrradbrybrysbryebrxbrxsbrxebrimgbrimgw Effects
Transform
Abbreviation
CSS Property
tftfotfsttfboxtl Transition & Animation
Abbreviation
CSS Property
tstsproptsdurtsdeltsbehanimanimnameanimduranimdelanimtfanimdiranimicanimfmanimpsanimcompanimrangeanimrangestartanimrangeend Outline
Abbreviation
CSS Property
ololwolstolcoloff SVG & Other
Container Query Keys
Bare query keys target the nearest container. Add a container name in parentheses, such as md(sidebar):, to target a named container.
Syntax
Meaning
md:Targets the nearest container.
not-md:Negates a container query.
md(sidebar):Targets a named container.
Breakpoints
Key
Meaning
min-width: 480px
min-width: 640px
min-width: 768px
min-width: 1024px
min-width: 1280px
min-width: 1536px
Breakpoints can be overridden or extended in the script query string. See Custom Breakpoints for configuration details.
Dimensions
Orientation
Feature Queries
Key
Meaning
container style query
State Queries
Viewport Query Keys
Prefix query keys with @ to target the viewport instead of a container.
Syntax
Meaning
@md:Targets the viewport.
@not-md:Negates a viewport query.
Breakpoints
Key
Meaning
min-width: 480px
min-width: 640px
min-width: 768px
min-width: 1024px
min-width: 1280px
min-width: 1536px
Dimensions
Orientation
Environment
Key
Meaning
prefers-color-scheme: dark
prefers-color-scheme: light
prefers-reduced-motion: reduce
no reduced-motion preference
Display Modes
Key
Meaning
display-mode: browser
display-mode: standalone
display-mode: fullscreen
display-mode: picture-in-picture
Feature Queries
Key
Meaning
CSS feature support