Pratique du Shadowing: 8 New CSS, JS and HTML Features You Should Know - Apprendre l'anglais à l'oral avec la vidéo

Welcome to Syntax Today.

We've got eight amazing new CSS, HTML, and JavaScript APIs that you need to know about.

Wes has put together eight new demos to showcase these things.

And let me tell you, there's some cool stuff in here that I didn't even know about.

So Wes, I'm so stoked to see some of these things.

Which one do you want to start with first?

Yes, let's get into the CSS alpha being added to relative color.

I didn't even know that this was coming.

I think with a lot of these, we've been so obsessed with AI for the last six months.

There's been so much that's been added to CSS, HTML, JavaScript, that I've been looking through all this stuff.

I'm like, wow, that's awesome.

So first one, very simple, CSS relative color, which is you'd be able to take a specific color and then return the R,

the G, the B, and the A, or the HDS, the L and the A.

Now we have a short form for that, which is simply just, I want to take a color

and then I want to make it semi opaque or have transparency, right?

So this is simply just CSS background alpha.

You give it the color.

So from whether you pass it a hex, HSL, whatever, and then forward slash the percentage value that you want it to do,

then you can make, simply just make a color semi-transparent.

That's crazy.

This is something that has been what this was in like SAS.

This was in Silas.

This was in all of them.

And it was so nice when we got relative time.

Yes.

To do this dynamically in the browser.

People might say, why not just use SAS?

Well, SAS has done a build time.

We want something that's done it for in time here.

And my gosh, the browser support for this is actually pretty dang good.

It's in everything.

And I mean, it's in Safari technology preview, but it's in Firefox

in the nightly build currently

which means it'll be here soon it's been in chrome since version 151

so as of july 27 2026 and it will be in safari 27

so my gosh

that means i have it on my computer yeah i'm running i'm running safari 27 not

that i'm using it but i'm running it

it all just got added like in the last month or

so it's been added to every single browser which i think

because now that they have relative color implemented it's just a simple syntax ad i I think it's pretty low lift.

I don't think I knew that this was happening. So sick.

And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io forward slash syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it.

So head on over to sentry.io forward slash syntax.

Again, we've been using this tool for a long time and it totally rules.

All right.

Next one we have here is the CSS progress function.

This is something you will often do with calc, where you have a starting value and an ending value, and then you have your own value,

and you want to know where in the middle of that is this thing.

What this progress function will allow you to do is you pass it where you're at.

These values can be anything.

Dynamic.

Yes yeah you could pass it like i'm at two ems

and i want to start at eight pixels

and go to a hundred percent like that's that's the beautiful part of it is

that you can say where am i in between these two values even

if they are not of the same unit um which is

so cool so uh here i have opacity progress i'm at 300

or or 150 and i want to know where i am extrapolate that up to between zero

and a thousand and that's not hard to do with a css calc

but when you start getting into these things where you're like where am i at in between 20 pixels

and 400 percent width you know right yeah yeah this will

just do the math for you this has nothing to do with the css

or the html progress element

which i initially thought it was it is simply just how far am i in between these two values that's

so cool yes yeah it gives you a unit list value

so it you still have

if you do want it to be like a like a percent

or em or px

and you still have to coerce it with your um with

the calc yeah cool i had no idea about this one either

and it seems like this is available in everything except for firefox

so and the the reason why i'm doing this is

because uh gecko which is the engine in Firefox is intent to ship.

So all of the ones that I'm, like, where you get all of these,

like, what's new in CSS is you can look at the intent posts on the Google groups of intent.

And basically, the people who work on these browsers will say, I intend to ship this.

I intend to turn this on in all the browsers.

We intend to prototype this specific feature.

And it's kind of a cool way to see, especially a lot of these are, oh, wow, this feature is finally coming to Firefox.

Now we can start using it.

Yeah, I love that.

And the next one here is a JavaScript one, which is promise.allkeyed.

We actually talked about this recently on a syntax live.

And this is something that you said you've been doing for many years with libraries and stuff.

But now it is going to be native.

Yes.

So if you have three or four promises, like say, for example, you want to fetch a podcast, you want to fetch your users, you want to fetch a bunch of posts,

you want to do that concurrently, or most people will think you want to do that in parallel, you know, fetch them at the same time.

And if you want to have multiple promises fetched at the same time,

you use promise.all or promise.all settled right yeah and the problem with

that is that those only take arrays meaning that the order

at which they come back is is important

so you have to do this like weird loop over the results

and use the index of the value this you simply just make an you make an object

and then instead of the the properties on that object can be promises

so fetch user fetch posts and then you can just await

that object and it will know that there are keys in

100

that object that need to wait to be resolved

101

and then once it is done it'll return

102

that entire object with the resolved keys

103

or you can a lot of people are going to just simply destructure those values straight on out

104

yeah that rips and it just feels like a nice quality of life thing

105

that will make your code read better anything you couldn't do

106

before lots of utilities to do this type of thing but like like we're at a point now where like,

107

yeah, we can really make the JavaScript language itself have some really nice APIs.

108

A lot of people are like, oh, why don't we just use a library for that?

109

I don't want a library for this.

110

This is something I do all the time.

111

Yes, okay.

112

Something also here that it feels like an HTML element

113

that should have been added a long time ago or two HTML elements.

114

I'm not sure about this one.

115

I'm curious to see what you think.

116

And this one is just in prototyping stage.

117

Okay.

118

Well, if you're asking me, it does feel like, so this is to say, this is the camera and the microphone HTML elements.

119

For me, it feels like a nice way of,

120

what's the word that they use for declaratively writing things that use the camera and the microphone,

121

which for some reason, because they are physical objects, they have like this, like that feels like they deserve to be represented in that way.

122

But they are these things even useful without connecting them with JavaScript.

123

I mean, I like this.

124

Yeah.

125

You have if you want to access somebody's camera or microphone, there are new elements.

126

I believe there's also a media element, which is a little further ahead than this.

127

And it will simply just request access to those things.

128

And typically what you'd have to to do is you'd have to programmatically do it like navigator.media.devices.getusermedia.

129

And that would then say, hey, can I access your webcam?

130

Can I access your microphone?

131

And then they would say yes, you would get the stream.

132

And then you take that stream and then you put it into whatever you want.

133

You display it on a video element.

134

You start recording it with a media recorder, et cetera.

135

This is a declarative way to do that, which I don't know.

136

it doesn't make much sense to me because you still have to like, once you have that track, then you still have to listen for the events of like,

137

someone gave you access to the camera and then you, you, you still have to use regular JavaScript.

138

So like, I don't, I don't see the benefit of this unless like

139

so much of the recent HTML that we've gotten are trying to do things declaratively without needing JavaScript.

140

Yeah.

141

Like invokers or yeah.

142

Yeah, maybe this is going to play on with the Invokers API,

143

where you could just click together a very basic photo booth without any JavaScript.

144

Yeah, I don't know.

145

I'm not sure about this one.

146

But it seems interesting.

147

I think you've talked me out of it yeah i thought

148

at first i thought i was like oh this is cool

149

and then you're like why did this yeah i don't know

150

yeah i guess kind of right um this next one here

151

which is the css attribute function

152

or attr now this function has been around in the web

153

for a billion years uh this this function was back

154

when the dinosaurs were roaming the earth they were writing the css attribute function.

155

But what's changed in this modern implementation of the attribute function is that you can actually use the values in a,

156

like a real way, kind of turning this into almost like props for CSS, like directly in the browser.

157

You could only use it ATTR with what, like content?

158

And now you can use it with anything, background, width, height, et cetera.

159

Yeah, now you could pass this stuff directly into your CSS.

160

Basically, you could set a property on a div and have

161

that act as like a prop and access that value directly in your CSS.

162

It's sick.

163

I'm curious if you'd be able to use value here because value in HTML is like input value.

164

Let's say you have a range.

165

But does that update when the JavaScript value updates as you scroll it?

166

I'm not quite sure.

167

It would be really nice if you could, because then you could just take the, you could pipe that into the progress function we talked about earlier, right?

168

Yeah, right.

169

Yeah, can I use value?

170

Yeah.

171

This has been in everything for quite a while, except for Firefox.

172

And now we're finally in a spot where it's in intent to ship in Gecko.

173

So it's one of those things where you can just finally use it.

174

And this is, again, this is make declarative work a lot easier especially

175

if you have like a library where you want to pass

176

in things like button data dash size small medium large right any of these like modifiers

177

that you're used to passing in to each of them now

178

you can simply just pass them as attributes likely data dash

179

attributes though it doesn't it's not entirely necessary to have the

180

data dash on it yes this next one here is css sibling index function

181

and the sibling count function if you've ever watched any of our css battles on this channel.

182

You've seen us use these functions in your options.

183

So what these do, they give you the current index of an item

184

or the count of how many items there are that are siblings.

185

And the only way you could do this type of work

186

where you don't know how many items are in a list or in our siblings is by counting them with JavaScript.

187

That's the only way you could have done it before

188

or you could just have nth child one nth child two nth child until every single possible use case

189

and that's like yeah that's not the way to do it right

190

so tell us about sibling index

191

and sibling count yeah it's very simple it tells you how many items are of a sibling

192

so here i have a circle

193

and like the example where we've done it in our css is we did this navigation that was a 360 degree circle.

194

And if you don't know if you have three items in there

195

and you want to evenly space them around in a circle

196

and you want to calculate the rotation value or the rotation angle of that item.

197

So if you have four of them, it's going to be 0, 25, 50, 75, right?

198

But if you have five of them, then that value changes.

199

And the more you add, the less of an angle each one needs to be.

200

So previously, yeah, you'd have to do like, okay, well, if the nth child five exists, then there must be five, then do this.

201

And you'd have to do every single instance of it, or you would calculate them in JavaScript, like you said, and you'd pass that in via variable.

202

So this just makes it so much easier.

203

And we've done many, many in all of our CSS challenges.

204

I think we always reach for this one.

205

And then you guys gave me a hard time for using it in my challenge because it didn't work.

206

in any of the other browsers, but now we can.

207

I gave you a hard time because very specifically, I had made two versions of my app,

208

one without JavaScript and one with JavaScript to just showcase the need for that.

209

And I could have used it, I knew about it, but I chose not to.

210

And so you were like trying to be like, mine's better.

211

Yeah, so.

212

Again, it's another one of these that Firefox has just shipped, meaning that it is now in all the browsers and you can go ahead and start to use it.

213

It's been in Safari since 26.2.

214

It's been in Safari for almost a year.

215

So we're in good shape now.

216

Yes.

217

Heck yes.

218

Heck yes.

219

All right.

220

Next one here is shrink to fit container.

221

I, I don't necessarily understand this one.

222

I mean, I understand it, but I don't get the usage for it.

223

Yeah.

224

This, I can tell you, I have run into this once before.

225

So what, what this does is if you have some content and the width of that content,

226

you set to fit content.

227

The width of that element, like let's say we have a paragraph tag and it wraps around.

228

Normally, it's a block element, so it's just going to take 100% width as much as it has, right?

229

But if you want that paragraph to just be as wide as it is,

230

especially with text wrapping, then you say width equals fit content, meaning that be as wide as the actual element.

231

Now, the problem is, is that if you have an element that wraps some fit content, then that thing is still with 100%, right?

232

And you can't do with the fit content on that as well.

233

And it's a bit of a pain.

234

And then you're getting into like, maybe I should float this and it's a nightmare.

235

So now there is a property max content sizing shrink to fit.

236

and that will simply just allow you to suction the parent element to the size of some fit content

237

which again maybe not something you're hitting every single day

238

but i can tell you i run into it once yeah

239

yeah i i once is enough i guess i maybe i will hit this

240

and be like oh shrink to fit container the next one

241

here though is something i do hit all the time which is text box trim and text box edge, text, man, fonts, they are all wacky.

242

And now you're rendering them and too many times you're just trying to get your freaking button to look good, right?

243

Yeah, so what this will do is it will allow you to trim,

244

like basically if you think about like a line height one and like how that is calculated on some texts, right?

245

It will take into account the very highest of the capitals in the very lowest of the descenders, right?

246

So if you have big capital A, a Y that goes down, then the height of that text, even if you don't use those letters,

247

the height of that line or that text box is going to be huge.

248

And where you can get into trouble, let me show you on the mad CSS website that we did it.

249

We have this admit one right here.

250

And I put text box trim cap alphabetic.

251

So if I take that off, you can see that the bottom of this text here, and if you're audio listeners,

252

imagine that the bottom of the text being larger than the top, and it's not perfectly vertically centered.

253

And this drives you mad because I don't have any letters here that are ascending or descending.

254

It's all capital.

255

So what I did is I said text box trim, cap alphabetic, and that just trimmed it directly to all of the letters.

256

And then that allowed me to put a padding on the top and the bottom.

257

And it was exactly the same on the top and the bottom, which I absolutely love.

258

So again, this has been in all the browsers except for Firefox.

259

And now they are finally, it's an intent to prototype.

260

So not just quite yet.

261

But yes, this has been in Chrome since February 2025.

262

So yes, that's before Opus 4.5 came out.

263

That's how long ago this thing was.

264

But I don't know, man, I hope I hope we get this soon because this is one of the things where you can add it already.

265

You can start using it today and then in browsers that don't support it.

266

It just looks a little bit weirder, but progressive enhancement at all.

267

Yes, exactly.

268

You can decide where you would like to trim the top and the bottom of your pieces of text.

269

I'll be using this one.

270

Beautiful.

271

Yes, absolutely.

272

Wes, thank you for putting together these demos.

273

You're going to make this page available for people who are

274

audio listeners who want to see what you're talking about and give it a try.

275

I'll slap it up.

276

We'll put the link in the notes.

277

All right.

278

Slap that bad boy up.

279

Thank you so much for this, Wes.

280

Thank you.

281

All right.

282

Thanks for tuning in.

283

Peace.

284

Peace.

285

Thank you.

📺 Même chaîne

✨ Vidéo recommandée

185 phrases

Use these CSS features instead of JavaScript

University StudentsBusiness English+1

28 phrases

Gemma 4 Just Released - Whats In? In 2026!

University StudentsBusiness English+1

131 phrases

macOS 27 Released! What's New?

University StudentsBusiness English+1

49 phrases

Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions

University StudentsBusiness English+2

345 phrases

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

University StudentsBusiness English+1

239 phrases

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

University StudentsBusiness English+1

14 phrases

CS50x 2026 - Introduction

University StudentsBusiness English+1

137 phrases

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

University StudentsBusiness English+1

309 phrases

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

University StudentsBusiness English+1

45 phrases

The plan to break apart Google... RIP Chrome

en-USUniversity Students+3

132 phrases

Qu'est-ce que la technique du Shadowing ?

Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.

Technique du shadowing : lire le guide complet étape par étape →

Pratique du Shadowing: 8 New CSS, JS and HTML Features You Should Know - Apprendre l'anglais à l'oral avec la vidéo

Can This Robot Be My Personal Assistant

I bought Black Market AI Tokens on Chinese Amazon

STOP Running Code On Your Computer

8 Tech Choices to Lock In Before Agentmaxxing

AI Is Stealing From You

Use these CSS features instead of JavaScript

Gemma 4 Just Released - Whats In? In 2026!

macOS 27 Released! What's New?

Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

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

CS50x 2026 - Introduction

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

The plan to break apart Google... RIP Chrome

Video

À propos de cette leçon

Qu'est-ce que la technique du Shadowing ?