HTTP 203: CSS Triggers (S1, Ep1)
Articles,  Blog

HTTP 203: CSS Triggers (S1, Ep1)

PAUL: My question
for you is how do you know if changing a CSS
property is expensive? JAKE: Like painting expensive? PAUL: Not just paint. We’re talking layouts,
we’re talking paint, we’re talking composite. These things– developers, they
talk about this all the time. How do I know if I’m
doing something that’s going to cause me a
bottleneck and it’s a problem. How do you know? JAKE: It’s normally just a
matter of do it and test it. PAUL: It was. It was, but it’s
not anymore, Jake. Good news. I’ve made a website. JAKE: Yay! PAUL: Woo! JAKE: CSStriggers. PAUL: Yes. Dot com. And it’s a bit
pluggy, isn’t it now? JAKE: This is not
like trigger warning? PAUL: Well, it could be,
depending on how upset you get over CSS. JAKE: Yes, which can be
quite upsetting, especially if it’s causing
performance issues. PAUL: Ah. I like what you did. You brought it right back in. Yeah, anyway. So the idea is you hit the site. It’s got all the
CSS properties, you can search for the one
you’re interested in, and it will tell you whether
it triggers layout, paint, composite, all of the above. JAKE: These are
different things. Are there things
that it would change that only affects
one of those things? Give me an example
of something that only affects painting,
but not the other things. PAUL: Painting, background
size, box shadow, text shadow. They do that because
they don’t change the layout of the
page in any way right? They don’t change the
geometry of the page. The widths, heights,
anything to do with the element’s actual sizes. JAKE: So there are
ones that do it the other way around as well? PAUL: So it’s more
like a waterfall. If you change layout,
which is going to be changing the widths,
heights, basically the geometry of the page, paddings, margins,
all that kind of stuff. You will change the
geometry of the page and that will dirty some pixels,
which will need to be repainted and then you’ll need
to composite the page. Or you change something which
causes the paint to happen and you have to
composite the page, or you change
something which just causes the page to recomposited. So it’s a sort of
stepping process. JAKE: When you
[INAUDIBLE] the state, was this just from
memory and experience? PAUL: Nope. I’m glad you asked. I made the mother
of all test suites. It was fantastic. And then I used telemetry
to kind of step through them and figure out what was what. But I used will
change, which was brand new and very exciting. Basically to say, I will
be changing opacity, I will be changing box shadow. You tell me, when I do
this, what it triggered. And devtools just went, you
know what, I did a bit of layout there. Did a bit of paint. Anyway, if you want to see how
your CSS affects performance, what work it’s going to
trigger, just go to the site and have a look. JAKE: Oh, cool. And is that for every browser? PAUL: Other browsers
are incoming. Today it’s only Chrome. JAKE: Cool. And what’s the site name? I wasn’t listening
to you properly. PAUL: Really? JAKE: No, I really wasn’t. You should say it again
just for my benefit. PAUL: Just your benefit? JAKE: Just my benefit. PAUL: Excellent. I’m glad we’re having this
conversation, my friend. JAKE: Yay! PAUL: Woo! JAKE: Keyboards. They’re the computer
ones or the musical ones. You’ve used one before, right? PAUL: No. Yes. JAKE: Yes. I’ve seen you in the office. Now, I imagine there was
a point where a keyboard manufacturer thought, we
need to solve this problem. We need to give them a
key to press when they’ve hit the wrong key and they want
to undo that error of theirs, right? And they called this
the backspace key. PAUL: Right. JAKE: So this key
that you’re supposed to press when you’ve gone off
by one, hit the wrong key, want to correct it. Where did they put this key? PAUL: Right next to
the return/enter key. JAKE: Right next to the
key that says, no actually, everything is great, I
want to ship that text off to a colleague. Right? A colleague asked
for some help, and I wrote, because I was a
little bit busy at the time, give me a sec. And I was like, oh
I’ve done it wrong. Went to press the backspace key. Enter. Off to the colleague. Off to their phone
goes, give me a sex. Like it was a demand. So I want to talk
about pointer events. PAUL: Yay!


Leave a Reply

Your email address will not be published. Required fields are marked *