Slide 1
Slide 1 text
The ABCs of CSS Properties
You’ve Likely Never Used
(Well, Mostly!)
Alicia Sedlock | @aliciability
Slide 2
Slide 2 text
Hi!
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
What’s your favorite CSS property or module?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
There’s a lot of CSS I don't know.
Slide 7
Slide 7 text
A additive-symbols
“… specify symbols when the value of a
counter system descriptor is additive.”
Slide 8
Slide 8 text
@counter-style custom-counter {
system: additive;
additive-symbol: I 1;
}
.list {
list-style: custom-counter;
}
Slide 9
Slide 9 text
@counter-style custom-counter {
system: additive;
additive-symbol: “>” 3;
}
.list {
list-style: customer-counter;
}
Slide 10
Slide 10 text
@counter-style custom-counter {
system: additive;
additive-symbol: “X” 10, “V” 5, “I” 1;
}
Slide 11
Slide 11 text
B ::backdrop
“…is a box rendered immediately below
any element rendered in fullscreen mode.”
Slide 12
Slide 12 text
dialog { /* some dialog styles */ }
dialog::backdrop {
background: black;
opacity: .5;
}
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
C caret-color
“…sets the color of the caret in an element.”
Slide 15
Slide 15 text
input.custom {
caret-color: red;
}
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
D :default
“…represents any user interface element
that is the default among a group of
similar elements.”
Slide 18
Slide 18 text
:default { background-color: pink; }
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
E :empty
“
..any element that has no children at all.”
Slide 21
Slide 21 text
div {
background: lightblue;
}
div:empty {
background: pink;
}
Hello world!
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
F ::first-letter
“…applies styles to the first letter of the
first line of a block-level element…”
Slide 24
Slide 24 text
p::first-letter {
color: red;
font-size: 3em;
font-weight: bold;
}
The quick brown fox
Slide 25
Slide 25 text
p::first-letter {
color: red;
font-size: 3em;
font-weight: bold;
}
The quick brown fox
Slide 26
Slide 26 text
G grayscale()
Slide 27
Slide 27 text
.fox1 { filter: grayscale(.95); }
.fox2 { filter: grayscale(.55); }
.fox3 { filter: grayscale(.15); }
Slide 28
Slide 28 text
H hyphens
“…how words should be hyphenated when
text wraps across multiple lines.”
Slide 29
Slide 29 text
That Conference is extremely rad!
p { hyphens: none; width: 55px; }Slide 30
Slide 30 text
That Conference is extremely rad!
p { hyphens: manual; width: 55px; }Slide 31
Slide 31 text
That Conference is extremely rad!
p { hyphens: auto; width: 55px; }Slide 32
Slide 32 text
I :in-range
“…matches when the value currently
contained inside an element is
inside the range limits specified by
the min and max attributes.”
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Enter a number 1-10
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;
}
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
J justify-content
ONLY ENTRY
“…defines how the browser distributes
space between and around content items
along the main axis of their container.”
Slide 37
Slide 37 text
.container {
display: flex;
justify-content: ;
}
Slide 38
Slide 38 text
.container {
display: flex;
justify-content: flex-start;
}
Slide 39
Slide 39 text
.container {
display: flex;
justify-content: flex-end;
}
Slide 40
Slide 40 text
.container {
display: flex;
justify-content: center;
}
Slide 41
Slide 41 text
.container {
display: flex;
justify-content: space-around;
}
Slide 42
Slide 42 text
.container {
display: flex;
justify-content: space-between;
}
Slide 43
Slide 43 text
K khz
“…represents a frequency dimension, such
as the pitch of a speaking voice.”
Slide 44
Slide 44 text
p.low { pitch: 105Hz; }
em.high { pitch: 135Hz; }
Slide 45
Slide 45 text
L :lang
“…matches elements based on the
language the element is determined to be
in.”
Slide 46
Slide 46 text
Slide 47
Slide 47 text
Hello, world!
Bonjour, le monde!
Hallo, Welt!
Slide 48
Slide 48 text
:lang(en) { border: 1px solid red; }
:lang(fr) { border: 1px solid blue; }
:lang(de) { border: 1px solid black; }
Slide 49
Slide 49 text
M max-zoom
“…sets the maximum zoom factor of a
document defined by the @viewport at-
rule."
Slide 50
Slide 50 text
* {
max-zoom: 150%;
max-zoom: 2.0;
}
Slide 51
Slide 51 text
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.”
Slide 52
Slide 52 text
- One
- Two
- Three
- Four
- Five
Slide 53
Slide 53 text
@counter-style negative-counter {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
negative: "(-" ")";
}
.list {
list-style: negative-counter;
}
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
O object-fit
“…how a replaced element, such as
an ![]()
or , should be resized to
fit its container.”
Slide 56
Slide 56 text
/* Base styles for examples */
img {
width: 400px;
height: 500px;
border: 5px solid pink;
object-fit: ;
}
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
P pointer-events
“…specifies under what circumstances a
particular graphic element can become
the target of mouse events.”
Slide 63
Slide 63 text
div {
pointer-events: none;
}
Slide 64
Slide 64 text
Lorem ipsum dolor sit amet…
I am an overlay. Try selecting the text
behind me.
Slide 65
Slide 65 text
.overlay {
position: absolute;
top: 0;
left: 40%;
background: rgba(0,0,0,.75);
height: 200px;
width: 250px;
color: white;
padding: 1em;
pointer-events: auto;
}
Slide 66
Slide 66 text
pointer-events: auto
Slide 67
Slide 67 text
pointer-events: none
Slide 68
Slide 68 text
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;
Slide 69
Slide 69 text
Q quotes
“…indicates how user agents should
render quotation marks.”
Slide 70
Slide 70 text
According to Groot, I am Groot..
q { quotes: "**" “**”; }
q:before { content: open-quote; }
q:after { content: close-quote; }
Slide 71
Slide 71 text
Peter Quill says I'm pretty sure the answer
is I am Groot.
q { quotes: ’””’ ‘“”’ “‘’” “‘’”; }
q:before { content: open-quote; }
q:after { content: close-quote; }
Slide 72
Slide 72 text
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"
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
S suffix
“…specifies a symbol that will be
appended to the marker representation.”
Slide 75
Slide 75 text
- One
- Two
- Three
- Four
- Five
Slide 76
Slide 76 text
@counter-style counter-options {
system: fixed;
symbols: A B C D E F G;
suffix: “) ”;
}
.list {
list-style: counter-options;
}
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
T tab-size
“…used to customize the width of a tab
(U+0009) character.”
Slide 79
Slide 79 text
pre {
tab-size: 4; /* integer values */
tab-size: 2;
tab-size: 10px; /* length values */
tab-size: 2em;
}
Slide 80
Slide 80 text
This is a line in pre! CSS is a lot of fun. :)pre { border: 1px solid black; width: 500px; }
Slide 81
Slide 81 text
This is a line in pre! CSS is a lot of fun. :)pre { border: 1px solid black; width: 500px; tab-size: 4; }
Slide 82
Slide 82 text
This is a line in pre! CSS is a lot of fun. :)pre { border: 1px solid black; width: 500px; tab-size: 100px; }
Slide 83
Slide 83 text
U unset
“…resets a property to its inherited value
if it inherits from its parent, and to
its initial value if not.”
Slide 84
Slide 84 text
I want to be blue text!
I want to be orange text :(
I don't want to be orange.
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
V vw/vh
“Equal to 1% of the width/height of the
viewport's initial containing block.”
Slide 87
Slide 87 text
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…”
Slide 88
Slide 88 text
div {
will-change: transform;
will-change: opacity;
will-change: contents; /* custom-ident */
will-change: scroll-behavior; /* custom-ident */
}
Slide 89
Slide 89 text
A warning on will-change
• Intended as a “last resort” - don’t prematurely optimize
• Meant to be used sparingly
Slide 90
Slide 90 text
X
Y
Slide 91
Slide 91 text
* { xtreme: ‘heck-yeah’; }
Slide 92
Slide 92 text
* { yolo: 100; }
Slide 93
Slide 93 text
Z z-index
“… specifies the z-order of
a positioned element and its descendants.”
Slide 94
Slide 94 text
What the heck do I do with this now?
Slide 95
Slide 95 text
Depth of CSS
Slide 96
Slide 96 text
Some of these things are
• Experimental technology
• In working draft
• In initial definition
Slide 97
Slide 97 text
Grid Layout Hype
Slide 98
Slide 98 text
P pointer-events
“…specifies under what circumstances a
particular graphic element can become
the target of mouse events.”
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
A Challenge
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Thank you.