Links can be styled selecting on three pseudo-classes, giving more options and a dedicated syntax versus, targeting the tag names, via attributes, or worse alternatives.
| :link | Targets unvisited links |
|---|---|
| :visited | Targets visited links |
| :any-link | Targets both of the above |
Links are frequently targeted by the user, via the cursor, and make good targets for the related pseudo-classes.
| :hover | Targets element while being hovered |
|---|---|
| :active | Targets element while being clicked |
@counter-style { sytem: fixed } :
falls back to the regular scheme when the S symols are exhausted.
suffix: " ",
symbols: Ⓐ Ⓑ Ⓒ Ⓓ...@counter-style { sytem: cyclic } :
items k + n|S| ∀n receive symbol k,
i.e. wrapping modulo S.
suffix: " ",
symbols: "\1F511" "\1F984"list-style: square url(...)@media print
and @page.
@page :left
and @page :right
select pages odd/even, for example,
offset margins to book-bind.
margin
in this context is the margin as it would be specified
in the printing dialog.
It will override the agent defaults,
but it may be possible for the user to disable or change this.
html
root gets "cut" in several roots, one for each page,
this can be seen when specifying a translucent background
onto the html.
@media screenThe core mechanism to use for reponsiveness with "breakpoint switching", i.e. not based on continuous proportions dependant on the viewport size.
@containerSetting the container shorthand
does not always reflect the style changes
(may depend on browser/version).
The work-around is to assign
el.style.container = undefined
and then
setTimeout(_ =>
el.style.container =
"MyCont/inline-size", 10)
A timeout of 10ms works, and 1ms does not.