跟讀練習: Use these CSS features instead of JavaScript - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

185 句

如果句子過短或過長，請點選 Edit 進行調整。

Hello my friend and friends.

People like to complain about the content I post on my channel saying

that it's like 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

and we're just going to look at how we can simplify things into like one or two liners.

Yeah it should be a lot of fun.

So let's dive in.

The first one is not scroll behavior smooth though this is a little bit of a softball still

and I bet you people still use JavaScript for this.

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 a 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.

And you 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, for the scroll behavior of smooth, do rapid and it 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.

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 a scroll behavior itself is, has been well supported now.

It's been browsers for over four years and target has been around for basically forever.

So you definitely are safe to use this.

Next up, continuing on the topic of scrolling, is we can do some scrolling stuff here, just setting up a 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 because 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 A, B test.

One, you might 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 will 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 validation 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 because 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

because they're just inputs um i shouldn't these labels don't have

an id like i'm 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 because they're valid

because they're just an input and if i make them required now they're all invalid

and that sucks 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 no 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 kevin now it's valid fantastic let's come in

and write an email address in here at kevin powell .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 I can 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 and 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 i'll put a link in the description you can customize these error messages

100

and do a little bit more with them the api for this is actually pretty nice though

101

that does require javascript and i've done that in another video

102

so i'll link it down in the description below

103

but uh yeah we can do all of that and set

104

that up and then it knows it's not long enough

105

so it gets invalid

106

if i put in enough all of a sudden like magic

107

it becomes valid it's fantastic we can do a little bit more here we're entering into a weird realm

108

but you can actually use regex as a part of a pattern

109

and if you have regex in there

110

if I put a whole bunch of characters here

111

and then I leave it's still invalid because this is not very good regex

112

but all it's looking for is if I have a mix of like regular characters

113

and digits so

114

if I put in a number there now all of a sudden it works fantastic it's now valid

115

and the user knows that it is and they can submit

116

this some people might be looking at this going Kevin's telling us to do form validation with CSS?

117

No, I'm definitely not saying that.

118

I'm saying don't use JavaScript for

119

that first line of defense where you're looking for blur events

120

and then doing different things and using valid invalid or whatever you're doing.

121

Use CSS as a first line of defense.

122

And then when the user hits submit, do some server side validation and make sure everything is fine.

123

Don't ignore server side validation.

124

That's not what CSS is for, but we can do a lot with just our user valid and invalid right there. So fantastic.

125

And browser support for these is now baseline widely available which it's been like two and a half years they're around.

126

So yeah, go ahead and use it.

127

I think it's safe at this point.

128

Maybe worth checking just to double check with depends on your users and everything else, but it has been around for a while now.

129

Now the next one we're going to go to isn't really a JavaScript thing.

130

It's just like a bonus tip.

131

This is that people, if I click on my menu, it gets the focus ring on it because I have a focus state

132

and there's default focus states that we have on things.

133

So people then just go focus none or focus zero or whatever.

134

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?

135

I don't want a ring when I click on it, but you do want to keep that for people that are using keyboards.

136

Oh, it's nice and easy.

137

You just use focus visible for that.

138

This is actually the user agent default in browsers now.

139

So if I tab to this and I'm interacting with it and I, it all works the way you'd expect it to.

140

But if I click on it with my mouse, it doesn't gain that focus ring.

141

I'm going to put a link to a video where I go into a bit more detail on this in the description, just because it depends on how you're interacting with it and what the element is as well.

142

And the browser is making some decisions along the way.

143

But yeah, just use focus visible instead of focus.

144

And it's probably a good idea.

145

As I said, the user agents have all switched over and browser support for it is fantastic.

146

So you're pretty safe to use it these days.

147

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.

148

And this might be something where like your designer comes up to you and they're like, oh you know what you need to make

149

that text area three have fit three lines of text you start magic numbering your way there

150

and you're i got it then the designer comes back

151

and they go actually we want to increase the font size

152

and you go oh man you know i have to magic number all

153

that again no you're not going to magic number

154

that you're going to remember about the lh unit the lh unit stands for the line height

155

so it's always going to be three lines of text tall so now if i change the font size back and forth.

156

You can see that it's always matching or growing and shrinking with that font size.

157

It's fantastic.

158

LH is a super underused thing.

159

It works really well with these things.

160

Anytime people are like, oh, CSS is a broken, weird language because it's just adding new units all the time.

161

The amount of JavaScript you need to do to solve this

162

and just like calculate the height based on things like 3LH, you're done.

163

It's fantastic.

164

It's so nice.

165

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

166

logical properties switch it over to a min block size maybe

167

and the reason i'm saying to do it as a minimum is we have another cool new property

168

which is field sizing uh field sizing means that

169

if a user comes in here um because a number of reasons such as

170

when a user writes more lines than the size of the box or whatever we want right

171

if you want a box to grow as the user is

172

writing in it this was a pain in the butt to do

173

and now we can do it with one line of css uh it's just

174

so wonderful and so great the lh unit has been around baseline widely available for two years now

175

and it's been since november so it's been in all the browser engines since november

176

so it's like two and a half years ish from the time of release of this video

177

and you won't be super happy about this because field sizing is only newly available.

178

It's in all of the engines, but it's only been three months that it has landed in all of them.

179

But I think it's a really nice progressive enhancement.

180

And I know for some people, progressive enhancement is a trigger word, but I think this is a really nice use case for that type of thing.

181

But for like chat bubbles and other things where you need to grow and shrink field sizing content, one line of CSS, it's just really, really good.

182

And yeah, I'm going to leave you with that.

183

I hope some of these help you out, let you remove a whole bunch of JavaScript.

184

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.

185

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

同頻道

FOR YOU

你能學到什麼

通過這段影片，你將掌握2項實用口語技能：一是如何在日常對話中自然表達“反駁觀點”（如影片開頭回應他人抱怨時的流暢表述），二是學會用簡潔語言解釋技術概念（如講解CSS特性時的清晰邏輯）。這些技能不僅適用於日常交流，也能提升雅思口語練習中的表達能力。

注意這些發音現象

影片中存在多處連讀和弱讀現象，需重點關注：
1. “it's like it's” 中的“like it's”連讀為/laɪkɪts/；
2. “a lot of fun” 中的“of”弱讀為/əv/；
3. “scroll behavior smooth” 中的“behavior smooth”連讀為/bɪˈheɪvjər smuːð/。這些連讀技巧能讓你的口語更接近母語者水平，可藉助shadowing site反覆模仿。

像母語者一樣表達

模仿影片中說話者的節奏和重音至關重要：
1. 重音落在關鍵資訊上，如“well supported”“simplify things”，突出核心觀點；
2. 保持自然的停頓，如在“Today we're not doing that. Instead...”處稍作停頓，增強表達層次感；
3. 運用升調表達疑問或強調，如“right?”“yeah?”。通過shadow speech練習，重複跟讀影片片段，能快速掌握這些技巧。此外，結合shadowspeaks或shadow speak工具，可即時對比發音，提升練習效率。

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
現在完成時 have/has + 過去分詞 — 過去發生但與現在仍有關聯的事	have opted · has been · It's been
定語從句 who / which + 從句 — 補充說明人或事物	block, which is · people who have · webpage, which is

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →

跟讀練習: Use these CSS features instead of JavaScript - 通過影片學習英語口語

選擇練習模式

下載應用

同頻道

Handy CSS layout patterns, and fun ways to elevate them

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

5 CSS fouls that I see way too often

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

推薦影片

We've got separation of concerns wrong

Usability Heuristic 2: Match Between the System and the Real World

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

The easy way to keep your repos tidy.

Video

How I Learned Procedural Generation

Learn 10X Faster In 10 Minutes