Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The ABCs of CSS You've Likely Never Used
Search
Alicia Sedlock
August 08, 2017
Technology
0
63
The ABCs of CSS You've Likely Never Used
That Conference 2017
Alicia Sedlock
August 08, 2017
Tweet
Share
More Decks by Alicia Sedlock
See All by Alicia Sedlock
How To Fights and Prevent Burnout
aliciasedlock
2
20k
The State of Front-End Testing
aliciasedlock
2
570
The Landscape of Front-End Testing
aliciasedlock
3
1.3k
You Can Make Games
aliciasedlock
1
140
Jumping Into Front-End Testing
aliciasedlock
3
170
Let's Get Testable: An Introduction to Unit Testing
aliciasedlock
4
840
Other Decks in Technology
See All in Technology
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
430
許しとアジャイル
jnuank
1
140
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
230
AWS IoT 超入門 2025
hattori
0
250
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
100
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
110
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
A Tale of Four Properties
chriscoyier
160
23k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
339
57k
Embracing the Ebb and Flow
colly
88
4.8k
The Language of Interfaces
destraynor
162
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
The ABCs of CSS Properties You’ve Likely Never Used (Well,
Mostly!) Alicia Sedlock | @aliciability
Hi!
None
What’s your favorite CSS property or module?
None
There’s a lot of CSS I don't know.
A additive-symbols “… specify symbols when the value of a
counter system descriptor is additive.”
@counter-style custom-counter { system: additive; additive-symbol: I 1; } .list
{ list-style: custom-counter; }
@counter-style custom-counter { system: additive; additive-symbol: “>” 3; } .list
{ list-style: customer-counter; }
@counter-style custom-counter { system: additive; additive-symbol: “X” 10, “V” 5,
“I” 1; }
B ::backdrop “…is a box rendered immediately below any
element rendered in fullscreen mode.”
dialog { /* some dialog styles */ } dialog::backdrop {
background: black; opacity: .5; }
None
C caret-color “…sets the color of the caret in
an element.”
input.custom { caret-color: red; }
None
D :default “…represents any user interface element that is
the default among a group of similar elements.”
:default { background-color: pink; } <form> <input type=“button” value=“Button” />
<input type=“submit” /> <input type=“reset” /> </form>
None
E :empty “ ..any element that has no children
at all.”
div { background: lightblue; } div:empty {
background: pink; } <div><!— No content —></div> <div>Hello world!</div> <div> <!— No content —> </div>
None
F ::first-letter “…applies styles to the first letter of
the first line of a block-level element…”
p::first-letter { color: red; font-size: 3em; font-weight: bold;
} <p>The quick brown fox</p>
p::first-letter { color: red; font-size: 3em; font-weight: bold;
} <p> <img src=“fox.jpg” /> The quick brown fox </p>
G grayscale()
.fox1 { filter: grayscale(.95); } .fox2 { filter: grayscale(.55); }
.fox3 { filter: grayscale(.15); }
H hyphens “…how words should be hyphenated when text
wraps across multiple lines.”
<p>That Conference is extreme­ly rad!</p> p { hyphens: none; width:
55px; }
<p>That Conference is extreme­ly rad!</p> p { hyphens: manual; width:
55px; }
<p>That Conference is extreme­ly rad!</p> p { hyphens: auto; width:
55px; }
I :in-range “…matches when the value currently contained inside
an <input> element is inside the range limits specified by the min and max attributes.”
None
<label>Enter a number 1-10</label> <input type="number" min="1" max="10" value="12" />
input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; }
None
J justify-content ONLY ENTRY “…defines how the browser distributes
space between and around content items along the main axis of their container.”
.container { display: flex; justify-content: <value>; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
.container { display: flex; justify-content: flex-start; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
.container { display: flex; justify-content: flex-end; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
.container { display: flex; justify-content: center; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
.container { display: flex; justify-content: space-around; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
.container { display: flex; justify-content: space-between; } <div class=“container”> <div><!—
Content! —></div> <div><!— Content! —></div> <div><!— Content! —></div> </div>
K khz “…represents a frequency dimension, such as the
pitch of a speaking voice.”
p.low { pitch: 105Hz; } em.high { pitch: 135Hz; }
L :lang “…matches elements based on the language the
element is determined to be in.”
<html lang=“en”></html>
<div lang=“en”>Hello, world!</div> <div lang=“fr”>Bonjour, le monde!</div> <div lang=“de”>Hallo, Welt!</div>
:lang(en) { border: 1px solid red; } :lang(fr) {
border: 1px solid blue; } :lang(de) { border: 1px solid black; }
M max-zoom “…sets the maximum zoom factor of a
document defined by the @viewport at- rule."
* { max-zoom: 150%; max-zoom: 2.0; }
N negative “…alters the representation of negative counter values,
by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.”
<ul class="list" start="-3"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
@counter-style negative-counter { system: numeric; symbols: "0" "1" "2" "3"
"4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: negative-counter; }
None
O object-fit “…how a replaced element, such as an
<img> or <video>, should be resized to fit its container.”
/* Base styles for examples */ img { width: 400px;
height: 500px; border: 5px solid pink; object-fit: <value>; }
None
None
None
None
None
P pointer-events “…specifies under what circumstances a particular graphic
element can become the target of mouse events.”
div { pointer-events: none; }
<div> Lorem ipsum dolor sit amet… </div> <div class="overlay"> I
am an overlay. Try selecting the text behind me. </div>
.overlay { position: absolute; top: 0; left: 40%; background: rgba(0,0,0,.75);
height: 200px; width: 250px; color: white; padding: 1em; pointer-events: auto; }
pointer-events: auto
pointer-events: none
pointer-events: visiblePainted; pointer-events: visibleFill; pointer-events: visibleStroke; pointer-events: visible; pointer-events: painted;
pointer-events: fill; pointer-events: stroke; pointer-events: all;
Q quotes “…indicates how user agents should render quotation
marks.”
<span>According to Groot, <q>I am Groot.</q>.</span> q { quotes:
"**" “**”; } q:before { content: open-quote; } q:after { content: close-quote; }
<span>Peter Quill says <q>I'm pretty sure the answer is <q>I
am Groot</q>.</q></span> q { quotes: ’””’ ‘“”’ “‘’” “‘’”; } q:before { content: open-quote; } q:after { content: close-quote; }
R revert “…rolls back the cascade so that a
property takes on the value it would have had if there were no styles in the current style origin"
None
S suffix “…specifies a symbol that will be appended
to the marker representation.”
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
@counter-style counter-options { system: fixed; symbols: A B C D
E F G; suffix: “) ”; } .list { list-style: counter-options; }
None
T tab-size “…used to customize the width of a
tab (U+0009) character.”
pre { tab-size: 4; /* integer values */ tab-size: 2;
tab-size: 10px; /* length values */ tab-size: 2em; }
<pre class=“default"> 	This is a line in pre! 	CSS is
a lot of fun. :) </pre> pre { border: 1px solid black; width: 500px; }
<pre class=“default"> 	This is a line in pre! 	CSS is
a lot of fun. :) </pre> pre { border: 1px solid black; width: 500px; tab-size: 4; }
<pre class=“default"> 	This is a line in pre! 	CSS is
a lot of fun. :) </pre> pre { border: 1px solid black; width: 500px; tab-size: 100px; }
U unset “…resets a property to its inherited value
if it inherits from its parent, and to its initial value if not.”
<p>I want to be blue text!</p> <div class="foo"> <p>I want
to be orange text :(</p> </div> <div class="bar"> <p>I don't want to be orange.</p> </div> .foo { color: orange; } .bar { color: green; } p { color: blue; } .bar p { color: unset; }
None
V vw/vh “Equal to 1% of the width/height of the
viewport's initial containing block.”
W will-change “…provides a way for authors to hint browsers
about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time…”
div { will-change: transform; will-change: opacity; will-change: contents; /* custom-ident
*/ will-change: scroll-behavior; /* custom-ident */ }
A warning on will-change • Intended as a “last resort”
- don’t prematurely optimize • Meant to be used sparingly
X Y
* { xtreme: ‘heck-yeah’; }
* { yolo: 100; }
Z z-index “… specifies the z-order of a positioned element
and its descendants.”
What the heck do I do with this now?
Depth of CSS
Some of these things are • Experimental technology • In
working draft • In initial definition
Grid Layout Hype
P pointer-events “…specifies under what circumstances a particular graphic
element can become the target of mouse events.”
None
None
A Challenge
None
Thank you.