Speaker wants to know if people are going to try new music as soon as it comes out or wait a little while. They send their friends some traveling music.

Speaker doesn't have the version for deep pink, so it's not working for them. They will add it. Speaker explains how to organize files for refactoring. They explain to me the difference between a nested child selector and a nested parent selector. Speaker explains how nesting works in CSS. They explain how the nesting works and how the spacing works.

Speaker has created a website about CSS. It's similar to a GitHub repo. Speaker explains to Speaker that H1 doesn't start with a symbol so they can't use H1, but they can do an ampersand. They want to give people a heads-up about selectors not being strings object references. Speaker is not going to play around with it until it's in the main version of Chrome.

Speaker is getting their laundry done. They are working on their project. Speaker is working on a project in which they are been using some new CSS stuff that they are never used before. They like it and thinks it's cool.

Speaker uses Crossfade CSS function to make selecting things easier. They have a link to all the CSS functions they use. Speaker has never used Crossfade CSS function before. It can be used for many simple image manipulations such as tinting an image with a solid color, highlighting a particular area of AP of the Page by combining an image and a radial gradient.

Speaker is talking about CSS and how it's getting more powerful. They are in Chrome 112. Css nesting has finally come to fruition and it's going to be in the Chrome 112 browser. Speaker explains to Speaker how selector nesting works. They explain how the nesting works.

• crossfade css function
• current implementations
• developers
• component
• ampersand symbol
• css class

Welcome back that same old place that you will the new but those dreams everything, and they have turned around There's only on Welcome Back.

Give a stretch real quick oh yeah.

Oh yeah.

Alright hopefully that last work session was productive.

I am getting my laundry done so that's In the washing machine now.

So, looking over this view, transitions API thing for my project.

It's Will be more involved than I thought it would be by thinking, get it to work.

So, yeah, some kind of like working through this article and it's kind of like going through it, so they can get it to work.

I think understanding, I am grasping the concept I think so should be cool.

Alright, so, but I want to talk about another thing is, how CSS is pretty awesome?

Because even in this project that I am working on, now, I have been using some new CSS stuff.

I have never met.

Messed with before really?

I saw it but I never really had like opportunity to use it.

So in this new project I am using it and it's kind of cool to do.

Like one of the things I am using it is the pseudo class function like there're functions in CSS.

So I don't want people I want to hear people saying how CSS is not like a language or anything but Pedo.

So here we go.

So yeah.

So I was using this.

I think I spoke about this before, right?

And so it allows you to kind of Select things a little bit easier, right?

Because before let us say, I think there's an example like you have to do this right to be able to get all the different iterations to be able to have this list type of square.

But if you have the is its just this now All right, because it goes through and matches all the different iterations that could be and does it.

So I use that.

And we see, I think the was pretty good.

The yeah.

And so, really good compatibility with browsers.

Another one I use was where recently, and this one is also pretty cool.

And the kind of talk about the difference between is and where and like, one is forgiving one is like, specific, something like that and so you can read more about it.

Oh, let me add a link to all.

These things since I am talking about him right now.

Now, I will just kind of, like, looking through the list, and then I saw that there's an actual like function section, right?

And so, I will just scrolling through, and they actually have like, a Crossfade CSS function.

So I am going to copy places as well.

If the thing I don't think you can really use maybe.

I am not sure if that's awesome.

There's like a warning there.

I have never used it before, but The Crossfade CSS function can be used to blend two or more images at a defined transparency.

It can be used for many simple image manipulations such as tinting an image with a solid color or highlighting a particular area of AP of the Page by combining an image with a radial gradient.

Gradient great.

But says the specifics of the warning is specification and current implementations have different syntaxes The specification syntax of the explain first.

So they talk about different stuff here, bunch of things home, or lot more things they show you like an actual.

There's some accessibility concerns.

And then here're some examples.

So, like here it is here now, are they?

It's have Crossfade.

So the div Okay.

Oh, so these are like PNG.

So they're actual images, okay?

Makes sense.

Okay, so they do like say five percent so huh?

Okay, that's pretty much it, but see no, no compatibility for Firefox.

All right.

Cool now.

Okay, so that's all that's, that's cool, right?

But the main thing I want to talk about was like I was saying with CSS getting more and more powerful as like I got a programming language.

The now we spoke about it before it because they're kind of talking about how they wanted it to look as far as like the what you actually type in to the browser.

So it looks like CSS nesting has actually like come to fruition like it's out there.

Air and it's going to be in the Chrome 112.

I think, I think, right now I am in 111 and that gave me the whole view, transitions API goodness, and so CSS nesting.

One of our favorite CSS.

Preprocessor features is now built into the language nesting style rules.

Because before you use like SAS or yeah, I think SAS is the one I was using.

And it is it lets you write like is like a cascading layer like it you everything would be like you have the top layer, then you get more specific as it went in.

And so I am going to talk about here.

So they said before, nesting every selector needed to be explicitly declared separately from one another, this leads to repetition, stylesheet bulk and Scattered authoring experience, right?

So for example, you have this class nesting, Have one that's within the nesting and it is a class.

That's awesome.

Well then you can make a deep pink.

Alright so you can see you have to do each one individually but with nesting now selectors can be continued and related style rules to make to what.

Okay, hold on.

After nesting, selectors can be continued and related style rules to it.

Oh, can be continued and related style rules to it so you can relate style rules to it and can be grouped within.

Okay?

So basically taking this whole thing, we're separate.

And then grouping them together.

So this is the same thing.

You can see now you have the top one here and then you have this middle layer and then you have the inner 12 which is pretty cool.

And since you can try in the browser, so let me try another browser.

Now, I don't think I have one Chrome 112.

So let us see.

That work looks like it might have worked.

So you can see here, here's the nesting.

The class and then within that there is.

And then within that is the class.

Awesome.

All right.

So if I moved, Hmm.

So, I took off this class here and it should turn purple, right?

I think Oh wait, no.

If I just yeah, let me see here.

Hold on.

Remove that.

No.

Is this hot pink or deep pink?

I don't even know the problem is I don't think I have the version for it.

I am assuming let us deep pink.

So I am assuming this could be hot pink here.

Let us see what deep pink looks like.

I think that's what it's doing.

I don't think I have Yeah, okay.

So yeah, I don't have the version for it to work.

So yeah.

So it's not working for me.

Okay, cool.

So yeah.

So nesting helps developers by reducing the need to repeat selectors while also co-locating style rules for related elements.

So, that way everything is like in one space because sometimes I am guilty of this also, like I will think about, oh, wait.

I need to add this style, so I will add.

It's like the end of the stylesheet.

Not knowing, I never really looked to see if it was anywhere above their.

I just like and to the last part.

That's why I think a lot of times like doing it.

Alphabetical order hell?

Oops.

So sometimes I will do like my classes or whatever in alphabetical order just, so I can look for it.

If the nesting component in the previous example was removed from the project, you could delete the entire group instead of searching files for related.

So yeah, so if that whole component, the nesting on the outer one was removed then you know like all right, all the nesting stuff is within this nesting class everything that it relies on, it's in there.

So, yeah.

So organization reducing file size of refactoring, you lot easier.

And then again, so it's nesting is available from chrome.

112 and also available in to try and Safari technical preview wanting to do.

So it's not even really out yet.

So there's just iteration.

So now this is pretty cool.

I couldn't get this work either.

So okay.

So, that's some examples here.

So you got like the parent and the child.

They got like walking through.

So, in this example, that the dot child class selector is nested within the parent class selector, right?

So you kind of see that this means that the nested child selector will only apply to elements that are child of a parent selector.

So you can have child somewhere else, right?

But it won't take on this color, I guess, because if there's no parent class surrounding it then it won't.

Do it, I guess.

And so they have another way of writing it to me.

More explicit.

Looks like, so this example could alternatively be written using the Ampersand symbol to explicitly signify where the parent class should be placed.

Okay.

So these two examples are functionally equivalent and the reason you have options will become clearer, as more advanced examples are exploring its articles.

Yeah.

So it can get wild cause looking through it before and it's wow.

So.

So now, for the first example, the task is to add styles to fade and blur just a circles inside the demo.

So, normally, this is how you do it.

So, you have like, demo and circle right now, we have nesting there are two different ways so you saw before the Ampersand, all right?

And then you can also do without it.

Just like nested inside of it.

All right, so if you want to be explicit like you don't want to like accidentally miss it, you put like the Ampersand I guess.

Okay.

So yeah.

So happens that you blurt out these joints here.

Cool.

I am not going to try a demo because not going to work and you can go selecting the selecting any triangles and squares, right?

So this task requires selecting multiple nested elements also called a group selector.

So it's CSS.

Oh see, I use the is so that's the whole is thing.

So demo.

So if you like demo triangle or demo square, right?

That's how that works.

So yeah.

So otherwise you'd have to do this separately.

So you see how there's like their comma, there seems like these two several things like we showed before is makes it kind of groups it all together.

Now, with the nesting you can then do this.

So triangle and square are both on the same as level.

Right?

They only have like the calming there so that this goes for that.

But then, demo is applied to each one separately.

That's pretty cool.

Or you can do that without the ampersands.

Okay.

So I guess you if you use a Sans each of these both ampersands owner how the spacing also works, but you have to use both.

I wonder if you just had it on the triangle but not on the Square.

What would happen?

I am not sure.

Oh so what happens is?

These will just use his pretty much so that's why they're the same, so I guess it depends on.

If you're familiar with is or not, then you can do it back.

So all right, that's cool.

They got a bunch of stuff here.

A lot of things are using like, is stuff again.

Cool.

They go through more stuff here.

So yeah there's a lot of cool stuff happening with CSS and so this is kind of walks you through.

So that's kind of wanted to we spoke about how they wanted to like, kind of like form the way you write things out that was that one is like a GitHub repo.

I think the issue or something or discussion we're like, hey, kind of like vote for which one you like, or whatever.

And so yeah, it's like that one.

And this is the one that I was kind of like a.

Yes to me makes a little bit more sense.

I believe and so wow, this damn okay.

This one's interesting.

So we have like the card and you want the featured and so it's going to be featured card.

Wow, that's a lot of, okay.

Oh, and it looks like huh.

So I guess you can't use H1 because it doesn't start with like a symbol.

So I guess you didn't like a, like a hashtag or period or something.

But you could do an ampersand.

Okay.

Interesting.

Well that's cool.

Then even do like the, I guess.

Bam kind of thing where many CSS class in conventions count on nesting being available to concatenate or a pen.

Some so also this does not work and CSS nesting.

As a selectors are not strings object references so that's not going to work.

A lot of stuff to kind of like look through.

So it's want to let get his give folks the heads-up if you are, you know, it's coming like at least in the next Chrome version I believe so.

And then a whole nother thing that I just like the scope and the layer stuff I am like touched yet.

So that's there's so many cool stuff coming down the pipeline.

But again, I am not going to play around with it until it's in the version that I use any like.

It's the main version, right?

So I don't know.

What do y'all think?

Are you the type to try things like as soon as they come out or do you wait a little while, right?

So All right.

Well, with that being said, I am gonna send you all off with some traveling music.

Again, thanks for hanging out and this is share my screen.

Eventually, so this is new Jabez.

Share cool.

So this is new Jabez featuring a Pawnee.

Be the track is called.

Thank you.

I will see you all 15 minutes after the hour for the final work break session of the day and what take a look at an artist's website, maybe listen to music watching videos and yeah, maybe you will become a fan.

So again, thanks for hanging out.

I wish you much productivity to the next time we meet and here we go.

New Jabez featuring a Ponte di.

Thank you.

All right.

See you later.

I will be easy.