Video summary
The video addresses common frustrations where developers rely on JavaScript to solve problems that modern CSS can handle more elegantly and efficiently. The presenter begins by tackling scroll behavior, specifically the annoyance of smooth scrolling covering up anchor targets. Instead of writing complex JavaScript to calculate offsets, viewers are encouraged to use the native `scroll-margin` property combined with `scroll-behavior: smooth`. This approach allows elements to maintain a specific viewport margin around them during navigation, ensuring that titles or sections remain visible when clicked. The speaker also emphasizes the importance of wrapping these features in a `prefers-reduced-motion` media query to respect user preferences and prevent motion sickness for those with vestibular issues, noting that browser support for these properties has been robust for over four years.
Continuing the theme of simplifying interactions without JavaScript, the discussion moves to horizontal scrolling and scroll snapping. While developers often use Flexbox or Grid layouts, the real power lies in implementing `scroll-snap-type` on parent containers and `scroll-snap-align` on children to create seamless snapping experiences. The presenter explains that this feature requires setting specific values for the axis (inline or block) and the snap mode (mandatory or proximity), which can be fine-tuned for different use cases. Unlike previous methods that required extensive scripting, this CSS-only solution provides a fantastic feel on mobile devices where swiping is common, while still functioning adequately on desktops. The video highlights that browser support for scroll snapping is excellent, making it a safe and effective choice for web applications that need to organize content into distinct sections.
The tutorial then shifts focus to form validation, arguing against the practice of using JavaScript to check inputs immediately upon losing focus or when fields are empty. Instead, the presenter advocates for using the `user-invalid` and `user-valid` pseudo-classes, which only trigger after a user has interacted with an input field. This method prevents premature error messages that degrade the user experience before any data entry has occurred. Furthermore, the video demonstrates how CSS can handle complex validation rules, such as minimum length requirements or regular expressions for password patterns, by automatically updating the visual state of the form. The speaker clarifies that while CSS is powerful for this first line of defense, server-side validation remains essential for security, but the initial user feedback loop can be entirely managed with modern CSS features that have been widely available for over two and a half years.
Finally, the video offers bonus tips regarding accessibility and responsive design, specifically addressing focus rings and text area sizing. The presenter advises against removing default focus outlines using `outline: none`, as this harms keyboard navigation; instead, developers should use `focus-visible` to show indicators only when triggered by keyboard interaction, preserving them for mouse users who might not expect them. In terms of layout, the video introduces the `lh` unit, which represents line height, allowing text areas to maintain a consistent number of lines regardless of font size changes without needing magic numbers or JavaScript calculations. Additionally, the new `field-sizing` property is highlighted as a progressive enhancement that allows input fields to automatically expand based on content length, solving a longstanding pain point with minimal CSS code. Although this specific feature is newer, having been in all major browser engines for about three months, it represents a significant step forward in creating more fluid and responsive form experiences without relying on scripts.
Read the full video transcript
Hello my friend and friends. People like
to complain about the content I post on
my channel saying that it's like I it's
too cutting edge. So it's great to know
about these features, but then I can't
use it or it's just way too complicated.
I'm making a mess of things. Whatever it
is. Today we're not doing that. Instead
we're looking at some really well
supported CSS features that people still
use JavaScript for instead. We're just
going to look at how we can simplify
things in like one or two liners. Uh it
Yeah, it should be a lot of fun. So
let's dive in. The first one is not
scroll behavior smooth. Uh though this
is a little bit of a softball still and
I bet you people still use JavaScript
for this. Uh and the reason probably is
you have your scroll behavior smooth for
some anchors or something, but if I
click middle, I'm covering up the middle
right here, right? Like that's annoying.
And so then people turn to JavaScript
because of this, but no, you don't have
to do that. You don't have to calculate
offsets. You just have to add a target
with your scroll margin on there. I'm
using viewport block, which is top and
bottom. So if I click middle now, look
at that. We can see my middle. If I go
to bottom, it leaves a 20 viewport
margin around these items as I'm moving
around. can do all sorts of things with
your margin, right? Like here if I add
an outline to it, we can actually see
what we're targeting. My IDs are on the
section. Your IDs could definitely just
be right on the titles as well. That
would work perfectly fine. And yeah, it
just works really well. Super awesome.
Definitely use this instead of doing
whatever you're doing with JavaScript
instead. Though if you are going to do
it, uh for the scroll behavior of
smooth, do wrap it in a
prefers-reduced-motion like I'm doing
right here because then people who have
opted out of having motion, they will
appreciate that and then it just jumps
around, but it still keeps that scroll
margin on the target. So when it jumps
down, your title's still not covering
things. Uh and if somebody has like
vestibular issues or something like
that, they're not getting nauseous while
they visit your webpage, which is a good
thing. And I mentioned browser support
for these things is good. This is uh
scroll behavior itself is has been well
supported now. It's been browsers for
over 4 years and target has been around
for basically forever. So you you can
definitely are safe to use this. Uh next
up, continuing on the topic of
scrolling,
uh is we can do some scrolling stuff
here, just setting up a uh uh uh uh
horizontal scroller that we can see. You
might have already seen me do this type
of thing. I am using grid here. This
isn't the JavaScripty thing cuz most
people are just using flexbox for this.
They're both fine. Use whatever you
want. It's not often I say that. I
usually just say use grid instead, but
however you want to do this, set it all
up, but then the cool part is when you
bring in the scroll snap type. I have
seen people do a ridiculous amount of
JavaScript for this depending on which
AB test won. have seen a thumbnail that
had the type of JavaScript I've seen
people use for this,
where you can do a scroll snap type
instead. But there is one thing with
scroll snap type is this does not work
out of the box. You do want to have two
things, or not want to have, you have to
have two things. The parent has to have
the scroll snap type and the child has
to have a scroll snap align on it.
Scroll snap type does have to take two
different values. One of them is what
axis are you on? So the inline or block
axis. You can also use an X or Y there.
And then you have mandatory or
proximity. I would just play around with
the two of them. It really depends on
the use case that you have. And then the
alignment is simple, center, left,
right,
things like that. And in setting it up
like this now, if I'm scrolling over,
you can see if I let go, it sort of
snaps a little bit. It's not the
greatest experience on desktop, but even
if I like scroll, it always snap to the
next one.
But if you're on a mobile device and
you're swiping around, this feels
fantastic. So for web apps and other
things like this, this is a really nice
thing to include in your sites. And as I
said once again, browser support is
fantastic. You're very safe to use this.
All right, next up we have form stuff
and validationy things. I was going to
say people don't use JavaScript for
this, but I know people will look for
like blur events and then add a touched
class or things like that, and then
you're checking if it's valid or
invalid, and I get why people do that
because valid and invalid are terrible
pseudo classes cuz they validate the
form before you've done anything. So
then you have to add that class using
JavaScript because right now, as we can
see, like all of these are valid and
they're all valid cuz they're just
inputs. Um, I shouldn't these labels
don't have an ID like we're not
connecting them. This is a sample code.
You should have like an ID on here and
you're connecting your label to your
input obviously. Um, but yeah, sample
code right there just for simplicity's
sake for a demo.
Um, but yeah, right now these are empty
cuz they're valid cuz they're just an
input. And if I make them required, now
they're all invalid and that sucks. So
the user gets there and they're just
told they're wrong before they've even
done anything. Like that's not a nice
user experience, right? Uh, and again,
that's why you come in with JavaScript.
Now use user valid and user invalid
instead. And this gets that type of
behavior. If I come in and I leave the
field, nothing changes. But if I come in
and I write a name, let's say Kevin, now
it's valid. Fantastic. Let's come in and
write an email address in here at
kevinpowell.co.
I get a lot of email here. You can
definitely email me, but I might not see
it. Um, but there is
uh, you know, that that's valid and then
I come in my password and ooh, that's
invalid. But wait, how does the browser
know that's invalid? Well, it's because
I put a min length on there. That's kind
of cool, right? Uh, so now if I try and
submit, it actually tells me that it's
invalid and why it's wrong and there's
zero JavaScript involved in this. It's
pretty awesome in my opinion. Uh, I'll
put a link in the description. You can
customize these error messages and do a
little bit more with them. Uh, the API
for this is actually pretty nice though
that does require JavaScript and I've
done that in another video so I'll link
it down in the description below.
But uh, yeah, we we can do all of that
and set that up and then it knows it's
not long enough so it gets invalid. If I
put in enough, all of a sudden like
magic it becomes valid. It's fantastic.
We can do a little bit more here.
>> [laughter]
>> We're entering into a wheel weird realm,
but you can actually use regex as a part
of a pattern. And if you have regex in
there, if I put a whole bunch of
characters here and then I leave, it's
still invalid cuz this is not very good
regex, but all it's looking for is if I
have a mix of uh, like regular
characters and digits. So, if I put in a
number there, now all of a sudden
it works. Fantastic. It's now valid and
the user knows that it is and they can
submit.
This Some people might be looking at
this going Kevin's telling us to do form
validation with CSS. No, I'm definitely
not saying that. I'm saying don't use
JavaScript for that first line of
defense where you're looking for blur
events and then doing different things
and using valid and valid or whatever
you're doing. Use CSS as a first line of
defense. And then when the user hits
submit, do some server-side validation
and make sure everything is fine.
Don't ignore server-side validation.
That's not what CSS is for, but we can
do a lot with just our user valid and
invalid right there. So, fantastic. And
browser support for these is now
baseline widely available, which it's
been like 2 and 1/2 years they're
around. So, yeah, go ahead and use it. I
think it's safe at this point. Maybe
worth checking just to double-check with
depends on your users and everything
else, but it has been around for a while
now. Now, the next one we're going to go
to isn't a JavaScript thing. It's just
like a bonus tip.
This is that people If I click on my
menu, it gets the focus ring on it
because I have a focus state. And
there's default focus states that we
have on things. So, people then just go
focus none or focus zero whatever. They
they remove the outline for everything
because maybe they don't even want to,
but their boss clicks on the button and
goes, "Why is there this weird ring on
here? I don't want a ring when I click
on it." But, you do want to keep that
for people that are using keyboards.
Well, it's nice and easy. You just use
focus visible for that. This is actually
the user agent default in browsers now.
So, if I tap to this and I'm interacting
with it and I
it all works the way you would expect it
to. But, if I click on it with my mouse,
it doesn't gain that focus ring. I'm
going to put a link to a video where I
go into a bit more detail on this
in the description just cuz it depends
on how you're interacting with it and
what the element is as well and the
browser's making some decisions along
the way. But, yeah, just use focus
visible instead of focus and it's
probably a good idea. As I said, the
user agents have all switched over, and
browser support for it is fantastic. So,
you're pretty safe to use it these days.
And since we're talking about forms,
we're going to continue that trend of
talking about forms with two other
things that I want to look at here, both
to do with the text area. And this might
be something where like your designer
comes up to you and they're like, "Oh,
you know what? You You need to make that
text area three have fit three lines of
text." You start magic numbering your
way there, and you're like, "Ha, I got
it." Then the designer comes back, and
they go, "Actually, we want to increase
the font size." And you go, "Oh, man,
you know, I have to magic number all
that again?" No, you're not going to
magic number that. You're going to
remember about the LH unit.
The LH unit stands for the line height.
So, it's always going to be three lines
of text tall. So, now if I change the
font size back and forth, you can see
that it's always matching or growing and
shrinking with that font size. It's
fantastic. Uh LH is a super underused
thing. It works really well with these
things. Anytime people are like, "Oh,
CSS is a broken weird language because
it's just adding new units all the
time." The
amount of JavaScript you need to do to
solve this and just like calculate the
height based on things like 3 LH, you're
done. It's fantastic. It's so nice.
Uh and then if you're going to do it,
don't set it as a height. Set it as a
min-height. Or I guess
it's my channel, I got to talk about
logical properties. Switch it over to a
min-block size, maybe. And the reason
I'm saying to do it as a minimum is we
have another cool new property, which is
field-sizing. Uh field-sizing means that
if a user comes in here, um because a
number of reasons, such as when a user
writes more lines than the size of the
box
or whatever we want, right?
If you want a box to grow as the user's
writing in it, this was a pain in the
butt to do, and now we can do it with
one line of CSS. Uh it's a so wonderful
and so great.
The LH unit has been around baseline
widely available for 2 years now, and
it's been since November, so it's been
in all the browser engines since
November. So, it's like two and a half
years ish from the time of the release
of this video.
And you won't be super happy about this
cuz field sizing is only newly
available. It's in all of the engines,
uh but it's only been 3 months that it
has landed in all of them.
But I think it's a really nice
progressive enhancement. And I know some
for some people progressive enhancement
is a trigger word, uh but I think this
is a really nice use case for that type
of thing with like chat bubbles and
other things where you need it to grow
and shrink field sizing content one line
of CSS. It's just really, really good.
And yeah, I'm going to leave you with
that. I hope some of these help you out,
let you remove a whole bunch of
JavaScript. And I just want to say a
very big thank you to Johnny, my enabler
of awesome, as well as all my other
patrons and channel members for their
continued support. And of course, until
next time, don't forget to make your
corner of the internet just a little bit
more awesome.