 Okay, so hi everyone, my name is Daniel. I, yeah, so hope you're all having a great evening and as for Eric, well, I'm sure yesterday it's been hell of a day for him and this morning. And well, I hope he's had a good rest and I, yeah, and enjoy his talk too. I remember the first time he unveiled his website redesign and just as everyone else, I was pretty impressed. And he, I remember, I remember him publishing a post about how he did the background effects as well. So that was, that was something good to learn from. And well, I should have known that he would use it as a topic today. So, but just to be clear, I'm, I'm not speaking today specifically because of Eric, but I mean, we, we, we know, we all know that he's one of the big shots in CSS. And, and yeah, he's very well respected and, and all, but the, you know, I'm not here just for the clouds. I'm not just here to write on his coattails. I'm most, the real reason I'm here is because of, because I switching said it is the last top CSS. And I've been, I've been attending this meetup for a couple of years now. And as I say here, I have a speech disability. So I, I started out not really saying a word and over time as I got more comfortable I started speaking to people. And that inspired me to, to think, you know, maybe I could give this a try. Maybe I could give speaking a try and talk CSS seems like a good place to start because it's small community. It's a local community and it's CSS. CSS, you know, it's one of my favorite things. So I only problem is I wasn't expecting the, I wasn't expecting the meetup to, this to be the last meetup ever. And I'm still kind of bummed out about it. Then I first, when I first heard the news last week, I, I was like, you know what? Yeah, let's do it. I'm going to give a talk. And I kind of scrambled to find the topic, but I think I finally found one. So in this talk, I'll be introducing the new is and where CSS selectors and these. Okay, so, okay, so let me introduce myself a little bit first. Yeah, so, so my name is Daniel. These are my pronouns, they damn, in case you want to treat about me. They damn, or he even swine, you know, I'm okay with either. So I was born and raised Singaporean, but my English, CMI, CMI stands for cannot make it, you know? I mean, yeah, I did grow up in Singapore, but my English is not so great. So I'm just going to speak the way I normally do. So I got my start on the web, learning HTML, and I learned it from Neopads and I was just eight years old. So even back then, they had, they had this little small little section where you could read it, where they had a tutorial that will walk you through the basics of HTML, like paragraphs, formatting, lists, that kind of stuff, and you could customize pages for your Neopads. And that's where a lot of people my age started to explore our creativity. So I think some of you here who are around my age range, I'm actually 28 now. So it's kind of weird to think that I've known HTML for 20 years. So a number of you probably grew up around my time as well. So probably remember Neopads and some of you might have gotten your start on there as well. But I only, but I actually went with just HTML for about six years. I wasn't actively making websites, making my own websites for all six years, but it was only six years later that I started to take CSS seriously because I remember at the time when I first saw CSS, I was pretty daunted at having to learn the second language. So at 14 years old, when I did the first redesign of my side, I picked up CSS. So fast forward a few years later, I've been making, I haven't actually been doing this professionally. I've been doing it as a hobby all this time. And I didn't really dive deep into CSS and web development until a couple of years later when I was in college. And then I started getting active on Tagglebuffalo. And I've been, and I found my niche. I realized that CSS was my forte and I realized that I really enjoyed following the development of CSS and HTML and the web platform. And I really enjoyed explaining it to other developers as well. So answering the questions, getting reputation, and somehow I found myself pretty much leading these technologies on the site. So many of you who use Tagglebuffalo have, chances are you've probably come across a couple of my answers on the site. So, and I'm, yeah, I'm pretty proud of the impact that I've had. Yeah, I'm pretty proud and at the same time humbled by it. And I'm a moderator there. And Samuel, who's been attending, talks CSS quite regularly as well. He's another of the moderators. Yeah, and I believe John Clemens and Rob should be in the audience as well. Hi, yeah, and, oh my, of course, okay, nevermind, I'll, I got a couple more shallows actually, but I'll wait until the end of the talk to do that. So my contributions on the Tagglebuffalo along with the stuff that I've been quoting on the site didn't go unnoticed by Microsoft. So as Huiting mentioned, I was a Microsoft MVP and I was given the award in recognition of my contribution. So I was an MVP for three years and I, and even prior to that I have been working closely with the Microsoft Edge team as well, with the IE and Microsoft Edge team to improve the web platform, to improve their implementation as well as to improve web standards for everyone. And I actually really support Microsoft on this front because they used to be, they used to have this monopoly within the Explorer, but they've since changed their way and they're really embracing open source and open web. And I started attending Fox CSS in 2018, yeah. So like Huiting, I love reading CSS specifications. They're not the most reader friendly thing in the world, but personally I really like understanding all the underlying theory of how CSS works from syntax to error handling to box model to media queries and all the mechanical stuff, as well as all the little edge cases of layout and all that. So a lot of my activity on site overflow is mostly pertain to explaining the spec for others to understand, so understand how things work. So just a few of my favorite specs, I hope this is not too visually much, but syntax, all the parsing and reading of tokenization and stuff, conditional rules, which ties into another one. So there's media queries and supports feature queries. There's the really brand new nesting module that's derived from pre-processors. There's the Cascade, you're gonna find that, to be honest, a lot of developers, they misunderstand the Cascade, they kind of hate the Cascade, they think that it really works against them when really the Cascade, I believe that the Cascade is a friend, not your enemy, but that'll be for another time. And sorry to flexbox users, I prefer grid, cause I know that these are two different layout modes that have their own different users and you can even combine them together, there's nothing stopping you from combining them, but I personally just prefer grids. So the next tier will be color, as Huixin mentioned, as Huixin mentioned, the color of the month is Rebecca purple and that's really, really significant, really meaningful color, and actually I do use Rebecca purple in my site, in fact. In fact, I think I don't remember if I have any Rebecca purple items in this presentation, we'll probably get to that, but I do use Rebecca purple for things like highlighting on my website, not just because I'm Eric, but because, not just because I'm Rebecca, because it's my favorite color. Yeah. And there's media queries, there's custom properties, CSS favorable, and solo elements, and of course my number one, my specialty is in CSS selectors. Made it pretty simple, they just say, which of these elements in the page do I want to select? What do I want to do with them? But there are a lot of different techniques you can use to match elements, applying a variety of conditions, and even though right now CSS three selectors, they are not as powerful as they can be in, like this four, there's still quite a fair bit you can do with them, even if you get into CSS hacks territory, CSS hacks territory. So let's talk about CSS selectors. So we recently, if you've been following CSS news, you've probably heard of the recent is and where solo classes. So these are part of selectors level four, the latest working draft, but these selectors aren't as new as you might think. So a little bit of a history lesson, these selectors have been, have been wanted by developers for many, many, many years, because everyone hates repeating, everyone hates repeating selectors, because we will get to an example later, but it's a problem that's faced by pretty much every CSS user for years and years and years. So somebody proposed a syntax that was friendly to the existing selected syntax, the form of a pseudo class called any. So this was back in 2008, and in the next couple of years, there will be some kind of specific implementations by Ozilla and by WebKit. So these came in prefixes and they were used in the internal user agent strategies. But because of the prefixes, you can't use them in production because you have to use both prefixes and that would mean repeating everything and that would defeat the purpose altogether. So that's why you don't, you never see any in a while. But later that year, the first public working jobs like this fall came out and it showed up as matches. So the definition wasn't the same. So it's a single pseudo class that measures one element, but it will match the element if it satisfies any of these conditions. So if you put it next to like a type selector, you didn't have to repeat that type selector as many times as there were other alternatives. And this was un-prefixed in Safari 9 back in 2015. So 2015 that was five years ago and Safari has had a number of selectors for features for five years and things have been moving really so these things, but things have been ramping up in recent years when in 2018 it was redefined as is and where. So why to select this separately? We will get to that, we'll get to that soon. And is and where finally landed in 5478 and Safari 14. So Microsoft Edge and Google Chrome have implementations as well in Blink, but according to MDN there's a little bit of buggy behavior. So they're still under the experimental flag right now. So you can't quite use it in production yet, but they're getting there and that's exciting for us developers. So what are these two selectors for? Put simply when we have multiple selectors, especially when they get pretty long. Some portions need to be repeated multiple times to cover all bases. So like the different example I mentioned, or in this case, here's one of the examples. So let's say we have some heading elements and we have headings of different levels and each one of them has an ID. So you can use the ID to navigate to each section on the page using the URL fragment and to highlight to, for example, highlight and highlight the heading text and color differently. We can use the target to the class. So if we want to apply the same style to all four of these types of headings, we have to say each one target, each two target, each two target and each four target. And you got to repeat the target four times. And that's kind of clunky. It works by its clunky and but then when we consider something like a table, for example, if we have a table that has zebra striping, we want not only zebra striping and full, but zebra striping of row groups. So each row group is represented by a separate T of all the elements. And we want to apply a background color to the table heading and the table cell. So that's represented by the TH and TD elements. So when we want to apply zebra striping to every odd T body, we can see that we have to repeat this condition once for the TH and another time for the TD. And because we don't want to, we don't want to mess up nesting tables, we can't use a single space as a descent as an selector between the T body and the cell. We have to chain it with a TR and that makes it even longer. So this is where it allows us to reduce the number of times we write certain selectors. It allows us to eliminate this repetition. So for example, with the headings, we only, you can see here that we only need to write target once. Then we use the IS to the class and in the IS to the class between the brackets we use, we specify the four different headings. So we attach a single IS to the class to the target. We only need to use it once and it's all just one line. And this is much easier to read as well. And because these two to the classes are simple selectors, you can arrange them in any order. Type select does not withstand it, but yeah, you can arrange them in any order. You could put the target after the IS, but I kind of like how it says target IS, H1, H2, H3, H4. As for the table example, here you can see that our TH and TDR goes all the data into the IS to the class. So with one IS to the class, we only need to change this to one T body, TR. It's either TH, TD. And same with the zebra stripe with the N child odd. So this really, really simplifies our table set rules. So why do we have two to the classes? Why do we have an IS and why do I have a WHERE? Well, the difference is specificity. With the IS to the class, specificity rules apply in normally. With the section that the IS itself does not count. Because if the IS to the class counted then, then it will not actually be a proper expansion of that. So if you look here, for example, if you had a pre-processor that had a hypothetical IS to the class, what you would do is, you might expand this into these four rules for using current versions of browsers. And I believe the naive implementation of that in browsers themselves, it might look like that as well. But of course we don't know the full, in the workings, the optimizations that they might have. But that's how you might think of it in theory. So if the IS to the class counted, then this expansion wouldn't work because you would have to factor in for the specificity. So to counteract that, it doesn't count. So with this diff example, we want a diff that is either of this class or this ID, or it can be both. Or we have to satisfy at least one of these conditions to apply the styles. So the specificity is one ID for the bar, one class for the full, and one type selector for the diff. As for the whereas to the class, the whereas to the class has no specificity. So it's always zero. That means with our example here, if we change the IS to where diff, where full bar, the specificity is only the diff type selector. And this makes overriding arbitrary selectors easier. For example, if we have a series of these styles with a link, a visited, a hover, a active, and let's say we want to apply a different style to navigation links. So you might say something like, I'm sorry, I don't have a code example for this, but you can imagine that a nav has less specificity because it doesn't have a sort of class. So you would not be able to override that. So using where with the links to the classes makes this easier to override. But I do have a more, I guess a more clinical example, but this example actually demonstrates what exactly happens when you use either of these to the classes. So in everyday use, you might use the cascade. You might just use the cascade, it's normal when you might say, color all paragraphs red, and after that say, I want full and bar to be blue. You might place the P full and P bar at the bottom. So then that little rule will override the P and because it's more specific as well. So with this is actually, for example, because of the more specific selectors, but with the where you can see that even though I added these two class selectors, it's still being overwritten by the general rule because these two classes don't count for specificity. So as a result, these two rules have equal specificity and the leader overrides the format. But what are the benefits of having these two to the classes anyway? So I mean, besides repetition, what's the benefit of eliminating this repetition? Why can't we just continue with our own way and continue what we've been doing for years and years and years and why can we just continue to get frustrated and all that? Well, we've taken to using strategy preprocesses such as SES and one of the most common features of preprocesses is to nest rules to reduce this like the repetition. And even nesting is being defined in another CSS spec which I actually blocked about a few months back. Yeah, so isn't where not only do they reduce this like the repetition like nesting rules does but they also eliminate that nesting itself. For example, if we had this P full bar you or even the H1, H2, H3, H4 target, you might say you might have a target rule and then a nested rule with all the getting elements or that's like additional calibrations, additional indentation, that's just not necessary so we can consolidate all that down into just an extra selector. And this improves with ability and main ability. So as you can, because you are able to see this isn't when say, oh, we are looking for an element that matches any of these conditions. So unknown error handling, I was gonna cover this, but yeah. So in a CSS rule, in a normal CSS style rule, the normal thing that happens is when you have a list of common separated selectors, if any one of them is embedded or unsupported by older browser, the whole rule becomes embedded. So developers exploited this behavior to create CSS hacks. So for example, some of the famous inline explorer hacks, for example, HTML greater than body, something something, this was to hide rules from IE6 which didn't support the child, which didn't support the child combinator greater than side. And this worked very well even if you had longer selected list because you just needed to use the hack once and it will invalidate the whole rule and hide it from IE6. But the problem is that this behavior can work against us when we are not expecting it. And especially now that we're going to use isn't where, for example, if we wanted to use a selector that we know is unsupported in some browsers, but we want to progressively enhance, for example. But this error handling can work against us because we can't progressively enhance because the rule just break entirely for older browsers. So this was addressed by change to the specification and the spec introduced this concept of forgiving selectors, which is, or rather forgiving select the list. So what happens with a forgiving select list is that you have multiple selectors and maybe one or two of them are unsupported or invalid. And even though a browser may not recognize them, it would still try to match the rest of the selectors that it does understand. So the rule will still work. Even in the presence of those unsupported selectors. So I wasn't able to figure out to do transitions for this part. Yeah, so we have this example where we have a read-only attribute selector and the read-only pseudo-class. Now, this example isn't perfect because the read-only pseudo-class has been around for quite some time. It's been well supported for quite some time, but this is just for demonstrating the error handling of these two pseudo-classes. So even without the pseudo-class, if we have input read-only attribute and input read-only pseudo-class, in browsers that didn't support the pseudo-class, the whole rule would break. So you need to split them into two different rules and you need to repeat this color declaration for the fallback rule to work. So what happens here is that in the original case, because this selector is not supported, it invades the whole rule. So with the new error handling, even if read-only is not supported in the browser, the read-only attribute selector was to work. And so the rule can still apply and the color declaration can still apply to the input element. And this saves having to split the rule with an unsupported selector into two rules. That's all allowing you to really maximize the use of the benefits of Ease and Wear to reduce duplication. Yeah, so that's about the introduction to the Ease and Wear pseudo-classes.