ContextQMD
Back to Azul

Azul CSS Properties Reference

doc/guide/css-properties.md

0.0.716.7 KB
Original Source

Azul CSS Properties Reference

This document lists all CSS properties supported by Azul. Properties prefixed with -azul- are Azul-specific extensions.

Note: Azul does not support calc() or var() (CSS custom properties). Use concrete values instead.

Table of Contents

Layout Properties

PropertyValuesDescription
displayflex, block, inline, inline-block, none, gridDisplay mode
floatleft, right, noneFloat positioning
box-sizingcontent-box, border-boxBox model calculation
clearleft, right, both, noneClear floats
visibilityvisible, hidden, collapseElement visibility
writing-modehorizontal-tb, vertical-rl, vertical-lrText direction

Sizing Properties

PropertyValuesDescription
width<length>, <percentage>, auto, min-content, max-contentElement width
height<length>, <percentage>, auto, min-content, max-contentElement height
min-width<length>, <percentage>, autoMinimum width
min-height<length>, <percentage>, autoMinimum height
max-width<length>, <percentage>, noneMaximum width
max-height<length>, <percentage>, noneMaximum height

Spacing Properties

PropertyValuesDescription
margin<length>, <percentage>, autoOuter spacing (shorthand)
margin-top<length>, <percentage>, autoTop margin
margin-right<length>, <percentage>, autoRight margin
margin-bottom<length>, <percentage>, autoBottom margin
margin-left<length>, <percentage>, autoLeft margin
padding<length>, <percentage>Inner spacing (shorthand)
padding-top<length>, <percentage>Top padding
padding-right<length>, <percentage>Right padding
padding-bottom<length>, <percentage>Bottom padding
padding-left<length>, <percentage>Left padding
padding-inline-start<length>, <percentage>Logical start padding
padding-inline-end<length>, <percentage>Logical end padding

Flexbox Properties

PropertyValuesDescription
flex<grow> <shrink> <basis>Flex shorthand
flex-directionrow, column, row-reverse, column-reverseMain axis direction
flex-wrapnowrap, wrap, wrap-reverseLine wrapping
flex-grow<number>Grow factor
flex-shrink<number>Shrink factor
flex-basis<length>, <percentage>, auto, contentInitial main size
justify-contentflex-start, flex-end, center, space-between, space-around, space-evenlyMain axis alignment
align-itemsflex-start, flex-end, center, stretch, baselineCross axis alignment
align-contentflex-start, flex-end, center, stretch, space-between, space-aroundMulti-line alignment
align-selfauto, flex-start, flex-end, center, stretch, baselineIndividual cross-axis
gap<length>Gap between items
row-gap<length>Row gap
column-gap<length>Column gap

Grid Properties

PropertyValuesDescription
gridComplex shorthandGrid layout shorthand
grid-template-columns<track-list>, noneColumn track sizing
grid-template-rows<track-list>, noneRow track sizing
grid-auto-columns<track-size>Implicit column sizing
grid-auto-rows<track-size>Implicit row sizing
grid-auto-flowrow, column, denseAuto-placement algorithm
grid-column<line> / <line>Column placement
grid-row<line> / <line>Row placement
grid-gap<length>Gap between cells (legacy)
justify-selfstart, end, center, stretchJustify within cell
justify-itemsstart, end, center, stretchDefault justify for items

Positioning Properties

PropertyValuesDescription
positionstatic, relative, absolute, fixedPositioning scheme
top<length>, <percentage>, autoTop offset
right<length>, <percentage>, autoRight offset
bottom<length>, <percentage>, autoBottom offset
left<length>, <percentage>, autoLeft offset
z-index<integer>, autoStack order

Typography Properties

PropertyValuesDescription
color<color>, system:textText color
fontComplex shorthandFont shorthand
font-family<family-name>, serif, sans-serif, monospaceFont family
font-size<length>, <percentage>Font size
font-weightnormal, bold, 100-900Font weight
font-stylenormal, italic, obliqueFont style
line-height<number>, <length>, <percentage>, normalLine height
text-alignleft, right, center, justify, start, endHorizontal alignment
text-justifyauto, inter-word, inter-character, noneJustify method
vertical-alignbaseline, top, middle, bottom, sub, superVertical alignment
letter-spacing<length>, normalLetter spacing
word-spacing<length>, normalWord spacing
text-indent<length>, <percentage>First line indent
text-decorationnone, underline, line-through, overlineText decoration
white-spacenormal, nowrap, pre, pre-wrap, pre-lineWhitespace handling
hyphensnone, manual, autoHyphenation
directionltr, rtlText direction
user-selectnone, auto, text, allText selection
tab-size<integer>, <length>Tab character width
initial-letter<number>, normalDrop caps
line-clamp<integer>, noneLine clamping
hanging-punctuationnone, first, last, force-endPunctuation hanging
text-combine-uprightnone, all, digitsVertical text combining
-azul-hyphenation-language<language-tag>Hyphenation dictionary
text-shadow<x> <y> <blur> <color>Text shadow

Background Properties

PropertyValuesDescription
backgroundComplex shorthandBackground shorthand
background-color<color>, system:backgroundBackground color
background-imageurl(), linear-gradient(), radial-gradient(), noneBackground image
background-position<position>Image position
background-size<length>, cover, contain, autoImage size
background-repeatrepeat, no-repeat, repeat-x, repeat-yImage repeat

Border Properties

PropertyValuesDescription
border<width> <style> <color>Border shorthand
border-top/right/bottom/left<width> <style> <color>Side-specific border
border-width<length>Border width (all sides)
border-top-width<length>Top border width
border-right-width<length>Right border width
border-bottom-width<length>Bottom border width
border-left-width<length>Left border width
border-stylesolid, dashed, dotted, double, noneBorder style
border-top-styleSame as border-styleTop border style
border-right-styleSame as border-styleRight border style
border-bottom-styleSame as border-styleBottom border style
border-left-styleSame as border-styleLeft border style
border-color<color>Border color (all sides)
border-top-color<color>Top border color
border-right-color<color>Right border color
border-bottom-color<color>Bottom border color
border-left-color<color>Left border color
border-radius<length>, <percentage>Corner radius
border-top-left-radius<length>, <percentage>Top-left corner
border-top-right-radius<length>, <percentage>Top-right corner
border-bottom-left-radius<length>, <percentage>Bottom-left corner
border-bottom-right-radius<length>, <percentage>Bottom-right corner

Visual Effects

PropertyValuesDescription
opacity0.0 - 1.0Element opacity
box-shadow<x> <y> <blur> <spread> <color>Box shadow
-azul-box-shadow-top<shadow>Top shadow only
-azul-box-shadow-right<shadow>Right shadow only
-azul-box-shadow-bottom<shadow>Bottom shadow only
-azul-box-shadow-left<shadow>Left shadow only
filterblur(), brightness(), contrast(), grayscale(), etc.Visual filters
backdrop-filterSame as filterBackdrop filters
mix-blend-modenormal, multiply, screen, overlay, etc.Blend mode
transformtranslate(), rotate(), scale(), skew(), etc.Transformations
transform-origin<position>Transform origin
perspective-origin<position>Perspective origin
backface-visibilityvisible, hidden3D backface
clip-path<shape>, url()Clipping path

Scrollbar Properties

PropertyValuesDescription
overflowvisible, hidden, scroll, autoOverflow (shorthand)
overflow-xvisible, hidden, scroll, autoHorizontal overflow
overflow-yvisible, hidden, scroll, autoVertical overflow
scrollbar-widthauto, thin, noneScrollbar width
scrollbar-color<thumb-color> <track-color>Scrollbar colors
-azul-scrollbar-styleComplexCustom scrollbar styling

Text Selection Properties

Azul-specific properties for customizing text selection appearance:

PropertyValuesDescription
-azul-selection-background-color<color>, system:selection-backgroundSelection background
-azul-selection-color<color>, system:selection-textSelected text color
-azul-selection-radius<length>Selection corner radius

Caret Properties

PropertyValuesDescription
caret-color<color>, autoText cursor color
caret-animation-duration<time>Caret blink duration
-azul-caret-width<length>Caret width

Multi-Column Layout

PropertyValuesDescription
columns<count> <width>Columns shorthand
column-count<integer>, autoNumber of columns
column-width<length>, autoColumn width
column-gap<length>, normalGap between columns
column-spannone, allSpan across columns
column-fillauto, balanceColumn filling
column-rule<width> <style> <color>Column divider
column-rule-width<length>Divider width
column-rule-stylesolid, dashed, etc.Divider style
column-rule-color<color>Divider color

CSS Regions

PropertyValuesDescription
flow-into<name>, noneFlow content into region
flow-from<name>, nonePull content from flow
shape-outside<shape>, noneText wrap shape
shape-inside<shape>, noneInside text shape
shape-margin<length>Shape margin
shape-image-threshold0.0 - 1.0Shape alpha threshold

Fragmentation

Properties for page and column breaks:

PropertyValuesDescription
break-beforeauto, avoid, page, column, regionBreak before element
break-afterauto, avoid, page, column, regionBreak after element
break-insideauto, avoid, avoid-page, avoid-columnBreak inside element
page-break-beforeLegacy alias for break-before
page-break-afterLegacy alias for break-after
page-break-insideLegacy alias for break-inside
orphans<integer>Min lines at bottom
widows<integer>Min lines at top
box-decoration-breakslice, cloneBox decoration handling

Lists and Counters

PropertyValuesDescription
list-style-typedisc, circle, square, decimal, lower-alpha, etc.Marker type
list-style-positioninside, outsideMarker position
content<string>, counter(), attr(), noneGenerated content
counter-reset<name> <value>Reset counter
counter-increment<name> <value>Increment counter
string-set<name> <content>Named string

Cursor

PropertyValuesDescription
cursordefault, pointer, text, move, not-allowed, grab, grabbing, crosshair, help, wait, progress, noneCursor style

Length Units

UnitDescriptionExample
pxPixels (absolute)16px
%Percentage of parent50%
emRelative to parent font size1.5em
remRelative to root font size1rem
vhViewport height percentage100vh
vwViewport width percentage100vw
vminSmaller of vh/vw50vmin
vmaxLarger of vh/vw50vmax
chWidth of "0" character40ch
exHeight of "x" character2ex
ptPoints (1/72 inch)12pt
pcPicas (12 points)1pc
inInches1in
cmCentimeters2.54cm
mmMillimeters25.4mm

Color Formats

Standard CSS Colors

css
/* Named colors */
color: red;
color: transparent;
color: rebeccapurple;

/* Hexadecimal */
color: #ff0000;        /* RGB */
color: #f00;           /* Short RGB */
color: #ff0000ff;      /* RGBA */
color: #f00f;          /* Short RGBA */

/* Functional notation */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

System Colors (Azul Extension)

Lazily-evaluated colors that adapt to the user's OS theme:

css
color: system:text;                  /* System text color */
color: system:background;            /* System background */
background: system:accent;           /* User's accent color */
color: system:accent-text;           /* Text on accent background */
background: system:button-face;      /* Button background */
color: system:button-text;           /* Button text */
background: system:window-background; /* Window background */
background: system:selection-background; /* Selection highlight */
color: system:selection-text;        /* Selected text color */

Pseudo-Classes

SelectorDescription
:hoverMouse over element
:activeElement being clicked
:focusElement has keyboard focus
:first-childFirst child of parent
:last-childLast child of parent
:nth-child(n)Nth child (1-indexed)
:nth-child(odd)Odd children
:nth-child(even)Even children
:disabledDisabled form elements
:checkedChecked checkboxes/radios

Note: In nested CSS, use :hover directly without the & prefix (unlike standard CSS nesting).

Not Supported

The following CSS features are not supported in Azul:

  • calc() - Use concrete values
  • var() - CSS custom properties not available
  • @keyframes / animation - Use Rust animation API
  • @import - Include styles via Rust code
  • @font-face - Load fonts via Rust API

Back to Styling System | Back to Guide