display: grid
border-image
caret-color
cursorLimited support
columns, :first-*:first-letterp::first-letter {
float: left;
font-size: 700%;
background: url(res/pic2.png);
color: white;
padding: 0.1em;
margin: 0 0.05em 0.05em 0;
border: outset 4px pink;
text-shadow: 1em 1em 2em rgba(255, 215, 0, 0.5), 0 0 1em rgba(255, 215, 0, 0.5), 0 0 0.2em rgba(255, 215, 0, 0.5), 1px 1px 0 #ecdc25, -1px -1px 0 #90582e, 1px -1px 0 #ecdc25, -1px 1px 0 #90582e, 3px 3px 5px #333;
}unicode-range@font-face {
font-family: ComicNumerals;
src: local(Comic Sans MS), local(Chalkboard);
/* ASCII 0-9, A-Z */
unicode-range: U+30-39, U+41-5A;
}font-feature-settingsToggles OpenType features in fonts
The i
font-variant-capsSmall Caps
Aa Bb Cc Dd Ee Ff
US nato asean 9am–17pm
font-variant-numeric221/2 221⁄2 1984–2048 787
p { font-feature-settings: 'zero', 'tnum', 'lnum'; }
p { font-variant-numeric: slashed-zero tabular-nums lining-nums; }ordn1st 2nd 3rd 4th 2st 3th 4dogs 5 cats
1st 2nd 3rd
font-feature-settingsUseful settings
liga Required Ligatuersdlig Discretionary ligaturessmcp Small Capscalt Contextual Alternatesdlig Discretionary Ligaturestnum Tabular Figureszero Slashed Zeroswsh Swashfrac Fractionsordn OrdinalsUse tabular and modern numbers for tables & labels
| 1811 est. | 353500.00 |
| 1900 est. | 21464.17 |
| 1986 est. | 617617.76 |
| 1816 est. | 353500.00 |
| 1906 est. | 21464.17 |
| 1986 est. | 617617.76 |
Proportional and old-style are best left in body text

text-orientation*:lang(ja) emp {
text-emphasis-style: filled sesame;
}
*:lang(zh) emp {
text-emphasis-style: filled dot;
}
text-emphasistext-combine-uprightVertical numerals, aka tate-chu-yoko (縦中横)


If the font supports it, setting the writing mode enables vertical punctuation
@media@media print@pagepage-break-after, page-break-beforeorphans, widowssize@media printApply selectors to your webpage in print
@pageSelectors for the printed page itself
@page { /* size: A4 landscape; */ }
/* cover */
@page:first { font-size: 192px; }
/* verso */
@page:left { margin: 5cm 10cm 5cm 5cm; }
/* recto */
@page:right { margin: 5cm 5cm 5cm 10cm; }position: sticky;repeating-linear-gradientbackground: repeating-linear-gradient(45deg,
transparent,
transparent 10px,
#E1002D 10px,
#E1002D 20px);filterVery common (CSS)
<filter>Not very common (SVG)
And quite advanced
feDistantLight
fePointLight
feSpotLight
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDisplacementMapSVG filters can be applied to HTML
<filter>
<feImage
result="warp"
xlink:href="${displacementMap}"
/>
<feDisplacementMap
xChannelSelector="G"
yChannelSelector="R"
in="SourceGraphic"
in2="warp"
scale="400"
/>
</filter>feDisplacementMapfeDisplacementMap<feImage result="warp"
xlink:href="${displacementMap}"
/>
<feDisplacementMap
xChannelSelector="G"
yChannelSelector="R"
...
+
iframe
blur + contrastclip-path
SVG also has a version of clip-path
clip-path: polygon
background-clipp {
color: transparent;
background: -webkit-linear-gradient(top, black, white);
background-clip: text
}Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. 🔥
mask-image
SVG also has a version of mask-image
mask-image
+
+
::selectionCall me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.
contain and cover#bg { background-size: cover; }
#img1 { object-fit: cover; }
#img2 { object-fit: contain; }
#img3 { object-fit: unset; }
scroll-behaviouroverscroll-behaviorDisable native overscroll behavior
Chrome article on overscroll-behavior