Uncommon CSS

New

display: grid


Old

border-image

(Limited Chrome support)

Useless?

caret-color


Not covering

del {
    text-decoration-color: red;
    text-decoration-style: wavy;
}

cursor

div { cursor: crosshair; }
Crosshair
div { cursor: url(...); }
?

Web Video Text Tracks Format (WebVTT)


Styled WebVTT

video::cue(b) {
    color: red !important;
}

Limited support


columns, :first-*

p { columns: 3 auto; }
p::first-line { font-variant-caps: small-caps; }
MOBY DICK

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. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.


:first-letter

p::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;
}
MOBY DICK

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. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this.


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;
}
Nineteen Eighty-Four, often published as 1984, is a dystopian novel published in 1949 by English…

font-feature-settings

Toggles OpenType features in fonts

p { font-feature-settings: "liga" on; }
The iffy fjords afflict fit affiliates
p { font-feature-settings: "liga" off; }

The iffycalt fjords afflict fit affiliates


font-variant-caps

p { font-feature-settings: "smcp"; }
p { font-variant-caps: small-caps; }

Small Caps

Aa Bb Cc Dd Ee Ff

US nato asean 9am–17pm


font-variant-numeric

p { font-feature-settings: 'ss17'; }

22‌1/2 22‌1⁄2‌ ⁄ 1984–2048 787

p { font-feature-settings: 'zero', 'tnum', 'lnum'; }
p { font-variant-numeric: slashed-zero tabular-nums lining-nums; }
22‌1/2 22‌1⁄2 1984–2048 787

ordn

p { font-feature-settings: 'ordn' off; }
1st 2nd 3rd 4th 2st 3th 4dogs 5 cats
p { font-feature-settings: 'ordn'; }

1st 2nd 3rd 4th 2st 3th 4dogs 5 cats

1st <sup> 2nd 3rd


font-feature-settings

Useful settings

Feature list


When to use tabular figures

Use 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

28 February, 2018, 9:30–14:40
28 February, 2018, 9:30–14:40

RTL text

p {
    direction: rtl;
    unicode-bidi: normal;
}
الموسوعة الحرة التي يستطيع الجميع تحريرها. توجد الآن 560٬021 مقالة بالعربية.

Vertical text

p {
    writing-mode: vertical-rl;
    hanging-punctuation: end;
}


text-orientation

p {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
Wikipedia, the free encyclopedia 维基百科,自由的百科全书
Wikipedia, the free encyclopedia 维基百科,自由的百科全书

Emphasis in Asian scripts

*:lang(ja) emp {
    text-emphasis-style: filled sesame;
}

*:lang(zh) emp {
    text-emphasis-style: filled dot;
}


text-emphasis

emp {
    /* text-emphasis-color: red; */
    text-emphasis-style: "🔥";
}
Call me Ishmael. Some years ago—never mind how long precisely—having 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🤔🤔🤔🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 Ishmael. Some years ago—

text-combine-upright

Vertical numerals, aka tate-chu-yoko (縦中横)

p, li::marker {
    text-combine-upright: digits 4;
}


Vertical punctuation

If the font supports it, setting the writing mode enables vertical punctuation


@media

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

@media print

Apply selectors to your webpage in print

@media print {
    section {
        height: 100%;
        page-break-after: always;
        font-size: 16px;
        color: black;
    }
}

@page

W3C ·  MDN

Selectors 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;

p { position: sticky; }

MDN


repeating-linear-gradient

background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            #E1002D 10px,
            #E1002D 20px);

filter

Very common (CSS)


<filter>

Not very common (SVG)

And quite advanced

W3C Filters

feDistantLight
fePointLight
feSpotLight
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence

feDisplacementMap

SVG 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>

feDisplacementMap


feDisplacementMap

<feImage result="warp"
    xlink:href="${displacementMap}"
/>
<feDisplacementMap
    xChannelSelector="G"
    yChannelSelector="R"
    ...
+ iframe

Filter composition


SVG rules


clip-path

img { clip-path: circle(33%); }

SVG also has a version of clip-path


clip-path: polygon

img { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

clip-path generator


background-clip

p {
    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

img {
    mask-image: url(res/scanlines.gif);
    mask-size: cover;
}

SVG also has a version of mask-image


mask-image

+ +

::selection

p::selection {
    background-color: black;
}

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.


contain and cover

#bg { background-size: cover; }
#img1 { object-fit: cover; }
#img2 { object-fit: contain; }
#img3 { object-fit: unset; }

CSS 3D transforms

body { transform: rotateX(45deg) rotateY(45deg); }

scroll-behaviour

body {
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
}

overscroll-behavior

body { overscroll-behavior: none; }

Disable native overscroll behavior

Chrome article on overscroll-behavior


Hammer, nail, etc.


Everything is here