►
From YouTube: What's New in CSS - Hover Conf Presentation Recap
Description
A short recap of Adam Argyle's presentation on Hover Conf 2021!
Original Slides from Adam Argyle: https://2021-hover-conf-new-in-css.netlify.app
Expanded Notes and More: https://gitlab.com/dfosco/hover-conf-2021
A
Hello,
everyone-
this
is
daniel
foshko,
I'm
designer
on
the
release
group
on
gitlab.
This
is
a
presentation
recap
of
hoverconf
conference
all
about
css
I
attended
a
few
weeks
ago.
A
This
is
a
presentation
recap
for
what's
new
in
css,
adam
argyle's
presentation.
Adam
is
a
developer
advocate
at
google,
who
is
very
involved
with
css
coming
the
css
community
and
standards
committees.
In
this
presentation
he
goes
over
31
new
css
features.
There
are
different
stages
of
implementation.
Some
of
them
are
just
proposals.
Others
can
be
used
behind
flags
on
the
browsers
and
others.
You
can
start
experimenting
right
away
using
fallbacks.
A
These
are
all
the
features
he
goes
through.
Some
high
res
some
other
risks
some
low
risk.
You
can
try
today,
there's
too
many,
so
I
won't
go
over
all
of
them,
but
you
can
check
all
of
his
presentation
that
has
links
to
all
the
demos
proposals
and
articles
on
this
url.
The
description
for
this
video
will
also
have
all
the
links,
including
including
more
extensive
notes
for
other
talks.
I
watched
at
hoverconf
and
again
these
features
are
in
different
stages
of
maturity.
Some
of
them
do
not
exist.
A
A
Conditional
variable
values
are
a
super
interesting
feature
and
they
essentially
present
a
simpler
media
query
with
an
inline
conditional,
it's
pretty
much
a
javascript
ternary,
but
in
css.
So
here
you
have
a
flex
direction
statement.
If
the
viewport
width
is
more
than
500
pixels,
then
it
will
resolve
to
row.
Otherwise
it
will
resolve
to
column.
A
You
can
do
also
more
complex
statements,
so
in
this
case
you
have
a
css
variable
size
with
value
small
and
then
font
size.
If
the
variable
size
is
small,
then
it
resolved
to
m
if
it's
medium
3m,
if
it's
large
5m-
and
this
is
super
cool
because
whichever
value
this
variable
matches
will
be
applied
on
the
style
and
the
others
will
be
ignored.
A
But
what
happens
if
none
of
the
values
apply
right
here,
you
have
largest
what
would
happen
here.
That's
why
switch
is
another
feature,
that's
coming
to
css
and
if
you're
thinking
switch
from
javascript
you're
exactly
right.
Essentially,
this
is
the
kind
of
switch
statement
you
have
in
javascript,
but
natively
in
css.
A
Houdini
allows
you
to
create
your
own
layout
logic
and
functions
that
run
directly
on
the
browser
engine,
freeing
space
on
the
main
javascript
thread.
So,
let's
see
an
example
here
we
have
houdini
masonry
right,
and
this
is
essentially
a
value
for
the
display
property.
Just
like
you
have
display
flex
or
display
block
or
display
grid,
but
display
masonry,
and
this
is
what
it
looks
like
it's
running,
on
chrome,
canary
with
a
flag
enabled.
A
A
Just
one
moment
there
you
go
so
houdini
svg
path,
that
is
kind
of
bonkers,
and
this
is
essentially
something
more
closely
resembling
adobe
illustrator,
but
in
your
browser
itself.
So
this
is
what
it
looks
like
you
have
an
svg
path
and
then
the
layout
svg
path
property
actually
renders
the
elements
along
the
path.
So,
if
you
add
more,
they
will
be
all
along
the
path
you
can.
A
You
have
flex
like
flexbox,
like
attributes
that
you
can
change
for
the
whole
container
or
the
elements
themselves,
but
the
really
cool
thing
is
that
you
can
change
the
actual
svg
path
and
all
the
elements
will
follow
them.
The
the
gif
is
scratching
a
little
bit,
so
it
may
be
hard
to
see,
but
I
think
you
can
you
can
get
the
idea
from
from
this.
A
Let's
get
away
from
these
gifts
because
they
are
killing
my
presentation
yeah
next
up,
houdini
paint,
which
is
another
type
of
houdini
property
and
essentially
houdini
paint
lets
you
create
pink
paint,
functions
with
very
custom
properties
and
very
custom
functionality.
A
So
here
you
can
pass
different
kinds
of
properties
to
this
powdered
gradient
paint
function,
and-
and
this
is
a
kind
of
example
similar
to
that
one
right.
So
this
is
that
static,
gradient
paint
function,
you
can
change
properties,
change
the
color
and
you
see
it
renders
directly
on
the
browser
something
very
custom.
You
have
different
different
browser
supports
here,
so
you
see,
chrome
65
already
supports
it.
A
A
A
Is
you
have
an
add
scope
statement
where
you
define
the
class
to
which
all
of
this
will
be
scoped
to
it
supports
a
lot
of
stuff,
so
adam
doesn't
go
into
a
lot
of
detail,
but
essentially
you
can
also
use
it
to
create
teams
for
design
systems.
So
you
have
light
team
scope
and
dart
team
scope,
and
the
good
thing
about
this
is
that
it's
much
harder
for
specificity
and
css
from
outside
of
the
scope
to
leak
in
here
next
container,
queries,
which
is
a
huge
thing,
that's
coming
to
css.
A
This
gif
shows
an
example
and
you
can
see
the
screen
is
resizing
and
these
elements
they
change
layout
at
different
rates
right.
That's
because
they
are
not
responding
to
a
media
query,
but
they
are
responding
to
container
queries
that
change
the
layout
based
on
the
size
of
the
containers
themselves,
not
the
full
page.
So
this
is
how
it
works
more
or
less.
A
You
apply
the
contain
class
to
define
an
element
as
a
parent
container
and
which
properties
you
should
respond
to
and
then
on
the
child
elements
you
declare
add
container,
then
the
property
and
how
it
should
respond.
So
this
looks
like
a
media
query
essentially,
but
the
difference
is
that
it
applies
to
the
size
of
the
element
itself,
not
of
the
whole
screen.
A
So
there's
a
lot
more
applications.
This
would
be
super
interesting
next
nesting,
so
we
spent
years
using
sas.
Essentially
because
of
this
feature
and
much
more
sas
is
great.
But
yes,
it's
just
like
you
expect
to
work,
and
I
think
css
owes
a
lot
to
sas
for
being
at
the
forefront
for
stuff
like
this
cascade
layers.
This
is
something
else
that
I
hadn't
heard
before.
Until
this
presentation
is
so
cool,
so
essentially
cascade
layers
are
imagine,
you
have
a
reset
right,
reset.css.css.
A
The
way
you
would
import
this
in
your
project
today
would
be
either
through
css
imports,
which
are
not
the
best
or,
if
you're,
using
vue.js,
you
know,
react
or
any
other
sort
of
templating
engine.
You
use
that
to
import
the
css
file.
A
Css
layers,
allow
you
to
create
a
layer
for
your
reset
and
then
import
the
layer
directly
on
the
css,
also
allowing
you
to
add
more
things
to
that
layer
after
it
was
declared-
and
you
know,
import
layers
one
after
the
other.
So
here
I
am
importing
this
file
as
a
layer
in
this
layer
default,
and
then
I'm
adding
also
this
file
on
this
layer
default
and
you
can
do
all
sorts
of
of
importings
and
then
the
interesting
thing
about
this
again,
not
to
go
too
much
in
details.
A
But
as
far
as
I
understood
layers,
they
do
not
follow
the
css
specificity.
So
what
it
means
is
whatever
is
declared
last
here
has
a
preference
regardless
of
specificity.
So
if
you're
thinking
of
css
specificity,
it's
like
each
layer
has
its
own
contained
layer
of
specificity
where
it
applies
in
there,
but
between
layers,
the
ordering
is
what
matters
so
really
cool
and
really
useful
for
future
large
css
applications,
yeah
and
here's
another
another
way.
You
can
declare
them
as
well
foldables.
A
A
A
So
here,
for
example,
you
have
display
grid
and
the
gap
right
is
the
size
of
the
the
the
size
of
the
middle
of
the
fold
and
then
grit
and
plate
volumes,
one
to
the
left
and
the
other
to
the
rest.
So
imagine
having
applications
that
people
working
on
the
field
have
foldable
tablets
and
you
can
have
the
same
web
app
that
if
they
are
using
a
foldable,
a
foldable
device,
it
looks
perfectly
fine
for
that
device.
But
then,
if
they're
using
a
desktop
or
normal
mobile
device,
it
looks
differently.
A
But
it's
the
same
application
really
cool.
And
here
another
example.
You
can
set
an
element
to
span
a
single
fold
right
or
expand
both
folds
so
really
powerful,
stuff,
color
level.
Four-
and
this
this
I
had
heard
of
before-
and
it's
so
exciting.
So
you
know
when,
when
you
open
a
mac
computer-
and
you
have
this
beautiful
background
image
and
then
when
you
code
a
website,
everything
looks
like
this
there's
a
reason
for
that.
A
This
is
an
exaggeration,
of
course,
but
essentially
css
is
not
prepared
to
display
all
the
colors
that
modern
this
place
can
show
you
right.
So
this
is
srgb
and
then
color
level.
Four
introduces
lch,
which
has
a
much
more
broader
color
range.
Here's
an
example.
Essentially
srgb
only
goes
up
to
here.
So
you
can
see.
A
A
Lab
is
another,
and-
and
the
interesting
thing
is
that
these
color
modes
are
made
to
match
more
closely
the
way
the
human
eye
works
so
really
interesting,
stuff
and
then
coming
even
after
that
there's
color
level,
five
that
introduces
color
mixing
right,
and
this
is
whoa
mind
blowing,
because
now
you
actually
mix
colors
the
way
real
life
paint
works.
So
you
can
mix
red
and
white
and
it
will
actually
render
a
pink
color.
More
than
that,
you
can
mix
colors
in
different
rates.
A
A
But
then,
if
I
want
a
lighter
one,
I
can
leave
40
of
my
color
after
black
comes
in,
and
on
top
of
that
we
have
color
contrast
with
a
scent
which
essentially
says
here's
this
color,
this
background
versus
black
and
white,
so,
depending
on
the
value
of
bg,
choose
either
black
and
white.
A
The
one
has
the
best
contrast
and
what
that
means
is
it'll,
actually
change
colors,
depending
on
the
background
dynamically,
so
there's
so
many
things
we
do
today
to
to
ensure
color
contrast
that
will
simply
won't
have
to
do
because
this
was
solved
for
us.
A
Moving
on
data
saver
is
a
nice
little
feature
that
essentially
gives
us
ways
to
choose
different
different
classes
and
different
files
based
on
whatever
preference,
the
user
browser
has
for
data,
and
this
in
theory,
could
get
the
preference
directly
from
the
mobile
device
doesn't
necessarily
have
to
be
something
set
in
the
mobile
browser,
so
really
interesting
things.
So
you
can
have
a
lighter
video
for
your
users
or,
if
they're
on
desktop.
If
they
have
no
preference,
then
you
can
load
huge
funds
because
you
know
you're,
assuming
they
have
a
fast
connection,
all
right.