Oh my goodness... I was always annoyed about how you start every video with "hello my friend and friends," and it finally just clicked for me that you say "front-end friends." I'm so happy!
Me too! It's so dorky, like, why are you calling me a friend yet acknowleding that there are multiple people watching who are also "friends" at the same time... so strange. I had no idea I was mishearing it - thank you for clarifying.
🎯 Key Takeaways for quick navigation: 00:00 🚀 *Introduction to CSS updates in 2023* - Introduction to the latest CSS features and browser support updates. - Announcement of the video's purpose: highlighting new CSS features and improved browser support. 01:25 💻 *CSS Feature: Nesting* - Introduction of CSS Nesting: supported by Chrome, Safari, and Firefox. - Explanation of nesting selectors, comparison with pre-processors, and upcoming relaxed syntax. 03:18 🎯 *CSS Feature: ':has' Pseudo Selector* - Introduction of the ':has' pseudo selector with nearly 90% browser support. - Firefox's recent support for ':has' and its capabilities in CSS. 04:59 🖋️ *CSS Feature: Text Wrap Balance* - Introduction of 'text wrap balance' and 'text wrap pretty': new features for text layout in CSS. - Supported by Chrome and Safari, these features address text balancing issues in web design. 07:02 🎨 *CSS Feature: Color Mix* - Exploration of the 'color mix' feature in CSS with approximately 85% support. - Description of color mixing capabilities and its impact on web design color schemes. 08:23 🌈 *CSS Feature: LCH and Lab Color Models* - Introduction of LCH and Lab color models in CSS. - Explanation of their benefits over traditional color models and practical use cases. 11:10 🧱 *CSS Feature: Relative Colors* - Discussion on 'relative colors' in CSS, a recent addition with growing support. - Detailed explanation of how relative colors can modify existing colors in CSS. 13:02 📦 *CSS Feature: Container Queries* - Introduction of container queries with nearly 90% support. - Description of how container queries enhance responsive design in CSS. 15:06 🔳 *CSS Feature: Cascade Layers* - Explanation of cascade layers in CSS with over 93% support. - Discussion on how cascade layers can improve CSS maintenance and organization. 17:38 📐 *CSS Feature: CSS Trigonometric Functions* - Introduction of CSS trigonometric functions with over 88% support. - Explanation of how these functions enable complex animations and designs in CSS. 19:15 🌐 *CSS Feature: Subgrid* - Discussion of the subgrid feature in CSS with about 79% support. - Detailing the use cases and advantages of subgrid in CSS layouts. 21:20 🔄 *CSS Feature: View Transitions* - Introduction of view transitions in Chrome for enhancing page transitions. - Explanation of its uses in creating SPA-like experiences on multi-page websites. 23:26 📜 *CSS Feature: Animation Timeline with Scroll* - Exploration of the animation timeline with scroll in CSS. - Demonstration of its capabilities in creating scroll-linked animations. 24:51 🔍 *CSS Feature: Scoped CSS* - Introduction to scoped CSS, a newly added feature in Chrome. - Explanation of how scoped CSS allows for more precise styling within specific areas. 26:51 ✔️ *CSS Feature: User Valid and User Invalid Pseudo Classes* - Discussion on 'user valid' and 'user invalid' pseudo classes in CSS. - Comparison with existing valid and invalid classes and their improved user interaction handling. 28:44 📐 *Upcoming CSS Feature: Text Box Trim and Text Box Edge* - Preview of upcoming CSS features: text box trim and text box edge. - Discussion on their potential impact on text layout and design in CSS.
Maybe you could also make a video about future features that are already in the specs but not in any browsers yet or are still discussed in the CSSWG. With that, people would get to know about upcoming features, how the CSSWG works and they'd learn that they can participate in those discussions or even make their own suggestions. Giving some examples of future things I am looking forward to: * Additive CSS (manipulating defined values instead of overwriting them) * Mixins * `@if` * Gap decorations (for Grid, Flexbox, Multi-column and Table layout) * Linked parameters to style SVGs and pass property values to s * Image manipulations via `@image` * Layout-dependent selectors (like `:stuck`, `:snapped`, or `:on-screen`) * `sibling-count()` and `sibling-index()`
We're quickly approaching the moment, when we'll have the support from CSS we've been dreaming of for the last twenty years or so! We're almost there! 😅
I'm working on a build that injects raw CSS into components and then uses @scope {:scope {. ..css }} to scope css to the parent DOM node , no classes needed! @@rumbazumba3189
Hey there - 'text-wrap:balance' is now in the latest FF Beta, and both Chrome and Safari Betas now support the cleaner CSS nesting without a necessary '&' - so all good on those in about a month or so. Hooray!
best thing about @scope is if you use it as an inline you dont have to tell it where is the start and end is. you can just do this: Foo bar baz @scope { :scope { display: grid } /* selects */ h1 { color: red } }
@@julio3592 why? its the new way, before you needed preprocessors or you had to use shadow-dom. now you can just do this, revolutionary. you know what is a "maintaining nightmare", firefox 😂😂😂
Meanwhile, the test of us learn about all the new features from Kevin ;-) Thanks for constantly providing the most reliable content on everything new and old in CSS 💚
About page transitions at 23:08 . “All new is well forgotten old” - indeed. I remember how in 2000 I made animated transitions between pages in Internet Explorer. This was done by adding literally one “meta” tag to the html header, even without CSS.
:has() is NOT coming out for Firefox v121 because there are still blocking bugs. If you paid attention to Caniuse it has been marking unreleased Firefox version as supporting :has() for a long time now, and always removing said support when the version gets released, I think it's only enabled during the beta/testing phase which trips up Caniuse.
I absolutely love the from color feature, I always had to create a second css variable --primary-values: 220, 50, 20; and then use it like this: rgba(var(--primary-values), 0.5); when I wanted to add glow, hopefully browser support will be getting better fast
Relative colors are a huge one for me. Sadly they aren't yet supported in FF, but they will make building "white label" software design systems so much easier.
Hey Kevin, love your content. I'm looking to get into frontend and been following your content for a bit. I'm an experienced backend dev, and what I find the most challenging to find content on is what are all the steps needed before you deployment. I'm always thinking of production and what to do for production, but I genuinely cannot find content on it. I read something about minify, I'm just think along all those lines on how to prepare your frontend for prod and deployment. Perhaps you could make a video on that?
I recently had to work on some super messy CSS on a large old project where a super stupid update of the theme library caused a ton of specificity issues and I so wished I could have used CSS layers there, it would have immediately solved all our problems and in general would allow making the code so much nicer. Unfortunatley, the browser support isn't quite good enough yet and sadly, it'll probably still take quite a while until the versions without support are so old that we can drop them. Luckily, we don't have to worry about mobile (or even worse, smart TVs). Some people there are still stuck on Android 4 or something and haven't gotten Chrome or Safari updates in years.
I can’t wait for cross-page transitions become mainstream. MPAs can really give spa and ssr a run for their money Layers + Nested, has and scoped would make building and extending components libraries far more simpler and manageable in the long run
I hadn't heard about nesting dropping the & requirement - which was the main reason I hadn't started using it (I knew I'd forget to include it somewhere).
It was a big complaint. The only reason it was there to start with was because the browser engineers said it wouldn't work otherwise, but from what I've heard, the workaround was found somewhat by accident. I'm not sure how long it'll be before that version makes its way into Chrome and Safari though.
I'm not sure if the whole css ecosystem is going in the right direction or not. It's getting more and more complex, while it's initial purpose was solely for styling, now it goes way beyond that, and I think it might ended up with a split in front end industry, where there will be people specialist in JS/front end frameworks and in the other side, the css specialists that will only do styling... This is more and more likely to happen as the complexity increase.
JS needs to be rendered by the browser, CSS doesn't... So you're right, CSS will be more complex, but these will be some JS standards like scrolling, don't worry. Everything will be easy for developers if they know CSS well enough lol.
@@depressito Because they're different things. If you're a master of JS, it doesn't mean you're a master of CSS, too. We should work hard on both, and it's so difficult.
It's actually funny that such life-changing heatures as :has pseudo class (which is also a parent selector) and container queries are added supported just now.
Subgrid is something I needed last year for a project at work, and not having it made my HTML, CSS, and JS more complicated. Maybe I can go in and refactor it now that Chrome has support for it. I needed to be able to scroll the page to any row, which I planned to do with location.hash, but since there wasn't subgrid I couldn't have a container around each row otherwise the columns wouldn't line up. I think I ended up hacking it with JS, by looking at the rendered size of the grid and calculating how far to scroll based on the known location of the row... Not ideal but it works.
Hello, Kevin! Just wanted to say that your videos are very interesting, informative and simply fantastic😊. Would be cool if you could build some simple layout, where you could use all the new features and best practices at once! Anyway, all the best luck to you!
Hi Kevin - an overlooked question: Do you still use YOUR version of 'Modern CSS Reset'? If not, which one do you use in your projects? And let's address the mamoth in the room - why don't you use the good ol' 'cssremedy'? Is this modern version superior in any way?
Dear first I want to thank you for your efforts,than i want to ask you if Can you advise me how to start on the right path on your channel to master CSS?
it would be good to do which of the new things can be used, i.e. when the last browser implements a new thing, I get excited and then I'm disappointed that browsers haven't implemented it, so it would be good to make a video when some new feature is implemented by most browsers
One of the reasons I mentioned a few things, like subgrid and :has(). I probably should have made a better distinction between "new stuff to CSS" and "things all browsers now support" though.
yeah, it's going to be one of those insanely useful things that people who are new to web development will take for granted, while the rest of us tell them they don't know how lucky they are 😅
@@KevinPowell exactly so :) I've been watching the spec, and the *only* shortcoming I see is the one use-case I anticipate it for: I want to have a bounding box around many elements. it *can* do it, I think, but it's definitely not elegant :/
I know this is shameful, but I learned CSS in 2006 and I realized I’m behind, I’ve been in denial about learning it again but badly need to take a refresher course.
thank you Kevin ☀ has: is still not working in FF, updated recently to the latest version, which was 120 not 121 (?) on Mac. --- i checked it: FF 121 release is in December 🙂
Not sure. We used to chat on Twitter a few years ago but I stopped using the platform. Maybe he's still active there. Or most likely he still active on GitHub.
How about features we want in 2024? I'd love to see a standardized hook for polyfills and custom functions, possibly something similar to a worker JS that is called once and killed when parsing the CSS. This has been called for in the past for polyfills, but it might be interesting (possibly too interesting) as a general tool. Variable fill-ins would provide high level control without a ton of var() properties listed over and over (does this exist? I haven't fully dug into nesting). Selectors for import would allow on-demand/lazy loading easily, especially with :has() from the root element: @import url('/assets/darkmode.css') when(body.darkmode); or @import url('/assets/card.css') when(:has(.card));. That last one complements the current supports() and media query options and is no more intensive than any other selector. Each of these introduces pitfalls of course, but also introduces opportunity. Another that I have wanted in the past was inheriting from a target element rather than the parent, especially if it were with a set of elements and/or virtual elements (@scope, unset, and initial are sort of similar in basic concept, breaking out of a strict top down DOM hierarchy inheritance without actually moving completely out of the DOM like Shadow DOM). In fact, @layer essentially does this within CSS's own hierarchy using what amounts to defining the order of virtual css files.
Hello Kevin, I tried to look up if you have a video about HTMX. The concept of replacing JS / PHP etc. sounds a bit tricky but interesting, yet it might not be as straightforward at it seems. I have seen a few tutorials on it around but did not really get it. Would it be possible, if you have not done it yet, to do a bit of series, going over possibilities of it with an examples?
You NEED to show @scope (.component) to (.content, .slot, .child-component) {} in your scope examples. This video, and MDN both fail to show that the "to" option can contain a comma separated list of selectors. Without that context scope is basically useless. I had to go to some random website to find that example (not good for propagating usage of new features). With that context it becomes clear that this could be used in an automated way identical to how Vue handles scoped styles, just without the added specificity. So component specific styles do not bleed up to parents, out to siblings, or down to child components, and even optionally not to slots.
Good question, but I think it would get messier in the end... I'd have to play around with it a little. I do agree the `to` seems a bit odd, but I think it's one of those things that you'd get used to once you start using it.
Kevin, amazing video as always! I have a question, though - why can't I use container queries inside my .scss files in my React apps? They just don't work ;(
How can I sell a website to a customer and how can I make sure the customer doesn't reuse my html codes to create other websites and sell in their names? I mean how can I sell websites without delivering the source codes? Thank you guys in advance, this is very important for me to know
I have an event in my calendar titled "Firefox has() released!" lol And I'm gonna spend the most cathartic twenty minutes deleting all the globs in my style framework commented "This is a hotfix class for Firefox"
Because it uses the sRGB color gamut, which isn't close to all the possible colors (I think it's under 40%). The new wide color gamut spaces we have have a lot more (like 50% more colors), which newer monitors are able to produce. This article does a great job explaining it lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/
Correction - Firefox support for both text-wrap:balance, and :has() begins in version 121... There was support for :has() behind a flag in earlier versions which might have caused confusion. As of 121 (in beta, nearly ready for release) we have both.
Is there any CSS property to ensure that the text inside a div follows the outline of the mask applied to the parent (clip-path)? Can I have the link to the pen where you can see the color slider that deforms the line to the left?
I don't mind at all. It's more of a marketing thing to highlight all the big changes that have been going on more than anything else, and to help group things a little bit, and a way to help make some "lines in the sand" on the growth/development of CSS.
Hello my favourite youtuber, so I recently upload a project with a hero banner and I noticed that the hero Image loads really slow. Would be really happy if you could show the best ways to create a hero banner, img tag vs background-img and how to make it load fast. What is the industry standard. Have a nice day
How large is the image? It must be huge. I would say make it a JPG with 80% quality. That should reduce the size to something reasonable. The testing I did with the art director involved us squinting at individual pixels looking for a difference with 80%. When you have to look that closely to spot any difference, it is good enough.
Hi, can you create, a new TH-cam subscribe interaction animation in CSS, if it is possible? , it is my request, can you please make a video on that TH-cam subscribe and like button interaction in CSS
Can you create an angular new dev site home page animation, angular dev, if it is possible do a video on that, please consider this as a serious request 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
Seems like they're using an SVG and draw the effects onto canvas with it. Would be interesting to see what they're using to extract and modify the paths for that animation though. Must be GSAP with the MorphSVG Plugin.
what is the point of section anymore, even though they made it for us to be working like this, we still keep using div. That don't make anysense to me anymore
Oh my goodness... I was always annoyed about how you start every video with "hello my friend and friends," and it finally just clicked for me that you say "front-end friends." I'm so happy!
I'm glad it's not just me .... That's what I thought he was saying until a few months ago
Me too! It's so dorky, like, why are you calling me a friend yet acknowleding that there are multiple people watching who are also "friends" at the same time... so strange.
I had no idea I was mishearing it - thank you for clarifying.
Omg you are so right. Thanks for clearing this up!
So glad to hear I wasn't the only one!
No way
🎯 Key Takeaways for quick navigation:
00:00 🚀 *Introduction to CSS updates in 2023*
- Introduction to the latest CSS features and browser support updates.
- Announcement of the video's purpose: highlighting new CSS features and improved browser support.
01:25 💻 *CSS Feature: Nesting*
- Introduction of CSS Nesting: supported by Chrome, Safari, and Firefox.
- Explanation of nesting selectors, comparison with pre-processors, and upcoming relaxed syntax.
03:18 🎯 *CSS Feature: ':has' Pseudo Selector*
- Introduction of the ':has' pseudo selector with nearly 90% browser support.
- Firefox's recent support for ':has' and its capabilities in CSS.
04:59 🖋️ *CSS Feature: Text Wrap Balance*
- Introduction of 'text wrap balance' and 'text wrap pretty': new features for text layout in CSS.
- Supported by Chrome and Safari, these features address text balancing issues in web design.
07:02 🎨 *CSS Feature: Color Mix*
- Exploration of the 'color mix' feature in CSS with approximately 85% support.
- Description of color mixing capabilities and its impact on web design color schemes.
08:23 🌈 *CSS Feature: LCH and Lab Color Models*
- Introduction of LCH and Lab color models in CSS.
- Explanation of their benefits over traditional color models and practical use cases.
11:10 🧱 *CSS Feature: Relative Colors*
- Discussion on 'relative colors' in CSS, a recent addition with growing support.
- Detailed explanation of how relative colors can modify existing colors in CSS.
13:02 📦 *CSS Feature: Container Queries*
- Introduction of container queries with nearly 90% support.
- Description of how container queries enhance responsive design in CSS.
15:06 🔳 *CSS Feature: Cascade Layers*
- Explanation of cascade layers in CSS with over 93% support.
- Discussion on how cascade layers can improve CSS maintenance and organization.
17:38 📐 *CSS Feature: CSS Trigonometric Functions*
- Introduction of CSS trigonometric functions with over 88% support.
- Explanation of how these functions enable complex animations and designs in CSS.
19:15 🌐 *CSS Feature: Subgrid*
- Discussion of the subgrid feature in CSS with about 79% support.
- Detailing the use cases and advantages of subgrid in CSS layouts.
21:20 🔄 *CSS Feature: View Transitions*
- Introduction of view transitions in Chrome for enhancing page transitions.
- Explanation of its uses in creating SPA-like experiences on multi-page websites.
23:26 📜 *CSS Feature: Animation Timeline with Scroll*
- Exploration of the animation timeline with scroll in CSS.
- Demonstration of its capabilities in creating scroll-linked animations.
24:51 🔍 *CSS Feature: Scoped CSS*
- Introduction to scoped CSS, a newly added feature in Chrome.
- Explanation of how scoped CSS allows for more precise styling within specific areas.
26:51 ✔️ *CSS Feature: User Valid and User Invalid Pseudo Classes*
- Discussion on 'user valid' and 'user invalid' pseudo classes in CSS.
- Comparison with existing valid and invalid classes and their improved user interaction handling.
28:44 📐 *Upcoming CSS Feature: Text Box Trim and Text Box Edge*
- Preview of upcoming CSS features: text box trim and text box edge.
- Discussion on their potential impact on text layout and design in CSS.
Mille grazie
Thanks alot
thank you
1:29 Nesting
3:21 Has pseudo selector
4:56 Text wrap balance
5:55 text wrap pretty
7:00 Color mix
8:11 LCH
11:00 OKLCH
11:31 Relative colors
13:03 Container queries
15:06 Cascade layers
Maybe you could also make a video about future features that are already in the specs but not in any browsers yet or are still discussed in the CSSWG. With that, people would get to know about upcoming features, how the CSSWG works and they'd learn that they can participate in those discussions or even make their own suggestions.
Giving some examples of future things I am looking forward to:
* Additive CSS (manipulating defined values instead of overwriting them)
* Mixins
* `@if`
* Gap decorations (for Grid, Flexbox, Multi-column and Table layout)
* Linked parameters to style SVGs and pass property values to s
* Image manipulations via `@image`
* Layout-dependent selectors (like `:stuck`, `:snapped`, or `:on-screen`)
* `sibling-count()` and `sibling-index()`
We're quickly approaching the moment, when we'll have the support from CSS we've been dreaming of for the last twenty years or so! We're almost there! 😅
I have a dream, where css enjoyers won't have to use post-processors
This!
Just don't forget to forget the 20 years of hacks and work arounds you have ingrained in your brain.... fml... I should have a been a plumber. 🤣
I'm working on a build that injects raw CSS into components and then uses @scope {:scope {. ..css }} to scope css to the parent DOM node , no classes needed! @@rumbazumba3189
Hey there - 'text-wrap:balance' is now in the latest FF Beta, and both Chrome and Safari Betas now support the cleaner CSS nesting without a necessary '&' - so all good on those in about a month or so. Hooray!
best thing about @scope is if you use it as an inline
you dont have to tell it where is the start and end is.
you can just do this:
Foo
bar baz
@scope {
:scope { display: grid } /* selects */
h1 { color: red }
}
Don't do that. You're creating a maintaining nightmare 😂
@@julio3592 why?
its the new way, before you needed preprocessors or you had to use shadow-dom.
now you can just do this, revolutionary.
you know what is a "maintaining nightmare", firefox 😂😂😂
Meanwhile, the test of us learn about all the new features from Kevin ;-) Thanks for constantly providing the most reliable content on everything new and old in CSS 💚
About page transitions at 23:08 . “All new is well forgotten old” - indeed. I remember how in 2000 I made animated transitions between pages in Internet Explorer. This was done by adding literally one “meta” tag to the html header, even without CSS.
well, it was a IE exclusive feature.
IE was the only one exclusive browser :)
On today, this Thanksgiving, I am thankful for Kevin's videos and the new relaxed nested syntax (which is news to me).
:has() is NOT coming out for Firefox v121 because there are still blocking bugs.
If you paid attention to Caniuse it has been marking unreleased Firefox version as supporting :has() for a long time now, and always removing said support when the version gets released, I think it's only enabled during the beta/testing phase which trips up Caniuse.
I absolutely love the from color feature, I always had to create a second css variable --primary-values: 220, 50, 20; and then use it like this: rgba(var(--primary-values), 0.5); when I wanted to add glow, hopefully browser support will be getting better fast
You are practically my biggest help for css stuff
Relative colors are a huge one for me. Sadly they aren't yet supported in FF, but they will make building "white label" software design systems so much easier.
cascade layers could be a real game changer. tbh 93% is not high enough for my taste at my day job but it will get higher
Super useful! Thanks Kevin
Wow, this is exactly what I've wanted to find!
Thanks, Kevin, you are awesome. Always tempting to use these edge CSS changes. It is often difficult to know when the right time is to do so :).
I think the last one about the selecting text bit is probably what I'm more excited for. Cool to see lch being used as well
Thank you for your awesome video, Kevin
Even when I'm lost in the weeds of these features, Kevin's enthusiasm pulls me along.
Hey Kevin, love your content. I'm looking to get into frontend and been following your content for a bit. I'm an experienced backend dev, and what I find the most challenging to find content on is what are all the steps needed before you deployment. I'm always thinking of production and what to do for production, but I genuinely cannot find content on it. I read something about minify, I'm just think along all those lines on how to prepare your frontend for prod and deployment. Perhaps you could make a video on that?
I recently had to work on some super messy CSS on a large old project where a super stupid update of the theme library caused a ton of specificity issues and I so wished I could have used CSS layers there, it would have immediately solved all our problems and in general would allow making the code so much nicer. Unfortunatley, the browser support isn't quite good enough yet and sadly, it'll probably still take quite a while until the versions without support are so old that we can drop them. Luckily, we don't have to worry about mobile (or even worse, smart TVs). Some people there are still stuck on Android 4 or something and haven't gotten Chrome or Safari updates in years.
I can’t wait for cross-page transitions become mainstream. MPAs can really give spa and ssr a run for their money
Layers + Nested, has and scoped would make building and extending components libraries far more simpler and manageable in the long run
Hi again, in some places I've seen "Form-sizing: content;" for autosize textareas according to their content. I think this is a marvelous things too.
Nesting, Container Queries, Subgrid, Scoped styles
These are the primitives we’ve been waiting 8 years for. The rest are just nice to have.
That' really nice, but what I'm really hoping for, is the masonry grid-template-columns!
:has selector and container media queries are an absolute game changer.
awesome overview, please keep these coming
I hadn't heard about nesting dropping the & requirement - which was the main reason I hadn't started using it (I knew I'd forget to include it somewhere).
It was a big complaint. The only reason it was there to start with was because the browser engineers said it wouldn't work otherwise, but from what I've heard, the workaround was found somewhat by accident. I'm not sure how long it'll be before that version makes its way into Chrome and Safari though.
I'm not sure if the whole css ecosystem is going in the right direction or not. It's getting more and more complex, while it's initial purpose was solely for styling, now it goes way beyond that, and I think it might ended up with a split in front end industry, where there will be people specialist in JS/front end frameworks and in the other side, the css specialists that will only do styling...
This is more and more likely to happen as the complexity increase.
JS needs to be rendered by the browser, CSS doesn't... So you're right, CSS will be more complex, but these will be some JS standards like scrolling, don't worry. Everything will be easy for developers if they know CSS well enough lol.
why can't we just get better at css while also getting better at js and other things at the same time?
@@depressito Because they're different things. If you're a master of JS, it doesn't mean you're a master of CSS, too. We should work hard on both, and it's so difficult.
@@alba4179 it's not a big deal imho to work on both even though they're completely different.
It's actually funny that such life-changing heatures as :has pseudo class (which is also a parent selector) and container queries are added supported just now.
Subgrid and container queries, man! We’re living in the future and the future is bright. 🚀
I thought i was pretty up to date but had not heard about animation-timeline: scroll () or view transitions!
Or user-invalid!
Before someone asks, Patrons get early access 😁
@@KevinPowell😂
Subgrid is something I needed last year for a project at work, and not having it made my HTML, CSS, and JS more complicated. Maybe I can go in and refactor it now that Chrome has support for it. I needed to be able to scroll the page to any row, which I planned to do with location.hash, but since there wasn't subgrid I couldn't have a container around each row otherwise the columns wouldn't line up. I think I ended up hacking it with JS, by looking at the rendered size of the grid and calculating how far to scroll based on the known location of the row... Not ideal but it works.
Hello, Kevin! Just wanted to say that your videos are very interesting, informative and simply fantastic😊.
Would be cool if you could build some simple layout, where you could use all the new features and best practices at once!
Anyway, all the best luck to you!
You are my CSS documentation Kevin ❤️
In this Thanksgiving Day, I thank you for all the amazing stuff you bring to the dev community. Have a nice day, lots of health, peace, and success.
It would be nice to see more videos like this for 2022 to 2019 features, if there's none already.
Cool thanks Kevin 👍
Pleease make a video of handling with browsers input autofill (how to change the way it styles) 🙏🏻
Hi Kevin - an overlooked question: Do you still use YOUR version of 'Modern CSS Reset'? If not, which one do you use in your projects? And let's address the mamoth in the room - why don't you use the good ol' 'cssremedy'? Is this modern version superior in any way?
You are the best, thanks a lot
These are amazing!
The :has() selector is finally coming to Firefox?!? HELL YEAH THAT'S GREAT NEWS! :D
This guy do such a good job!
Dear first I want to thank you for your efforts,than i want to ask you if Can you advise me how to start on the right path on your channel to master CSS?
Thanks Kevin. I really like the parallex feature. In my world the less Javascript the better! :)
it would be good to do which of the new things can be used, i.e. when the last browser implements a new thing, I get excited and then I'm disappointed that browsers haven't implemented it, so it would be good to make a video when some new feature is implemented by most browsers
One of the reasons I mentioned a few things, like subgrid and :has(). I probably should have made a better distinction between "new stuff to CSS" and "things all browsers now support" though.
I'm waiting for the caret-shape property to arrive in CSS for so long! It has no browser support rn but I'm hopeful.
Good stuff Kevin!! 😊
me coming back to css after 15 years: cool, this seems nearly usable now!
I'm very much looking forward to Anchor Positioning, personally.
yeah, it's going to be one of those insanely useful things that people who are new to web development will take for granted, while the rest of us tell them they don't know how lucky they are 😅
@@KevinPowell exactly so :)
I've been watching the spec, and the *only* shortcoming I see is the one use-case I anticipate it for: I want to have a bounding box around many elements. it *can* do it, I think, but it's definitely not elegant :/
Thanks for sharing
I feel like I just got out of a cave, everything is amazing!
I know this is shameful, but I learned CSS in 2006 and I realized I’m behind, I’ve been in denial about learning it again but badly need to take a refresher course.
Simply incredbile.
You are the best as always.
Thank you,
Those view transitions are amazing
Yes, where can we see that demo?
@@bvj011 don't know sadly
I would really like a more in-depth video on containers!
thank you Kevin ☀
has: is still not working in FF, updated recently to the latest version, which was 120 not 121 (?) on Mac.
---
i checked it: FF 121 release is in December 🙂
Shout out to @innovati for all his hard work on EQCSS and Element Queries. Without him, we wouldn't have container queries.
Whatever happened to him? He just went silent for many years
Not sure. We used to chat on Twitter a few years ago but I stopped using the platform. Maybe he's still active there. Or most likely he still active on GitHub.
Danke für deine tollen und informativen Videos :-)
How about features we want in 2024? I'd love to see a standardized hook for polyfills and custom functions, possibly something similar to a worker JS that is called once and killed when parsing the CSS. This has been called for in the past for polyfills, but it might be interesting (possibly too interesting) as a general tool. Variable fill-ins would provide high level control without a ton of var() properties listed over and over (does this exist? I haven't fully dug into nesting). Selectors for import would allow on-demand/lazy loading easily, especially with :has() from the root element: @import url('/assets/darkmode.css') when(body.darkmode); or @import url('/assets/card.css') when(:has(.card));. That last one complements the current supports() and media query options and is no more intensive than any other selector. Each of these introduces pitfalls of course, but also introduces opportunity.
Another that I have wanted in the past was inheriting from a target element rather than the parent, especially if it were with a set of elements and/or virtual elements (@scope, unset, and initial are sort of similar in basic concept, breaking out of a strict top down DOM hierarchy inheritance without actually moving completely out of the DOM like Shadow DOM). In fact, @layer essentially does this within CSS's own hierarchy using what amounts to defining the order of virtual css files.
Hello Kevin, I tried to look up if you have a video about HTMX. The concept of replacing JS / PHP etc. sounds a bit tricky but interesting, yet it might not be as straightforward at it seems. I have seen a few tutorials on it around but did not really get it. Would it be possible, if you have not done it yet, to do a bit of series, going over possibilities of it with an examples?
You NEED to show @scope (.component) to (.content, .slot, .child-component) {} in your scope examples. This video, and MDN both fail to show that the "to" option can contain a comma separated list of selectors. Without that context scope is basically useless. I had to go to some random website to find that example (not good for propagating usage of new features). With that context it becomes clear that this could be used in an automated way identical to how Vue handles scoped styles, just without the added specificity. So component specific styles do not bleed up to parents, out to siblings, or down to child components, and even optionally not to slots.
Can you use :has and :not in @scope? Seems like that might be pretty useful and maybe less messy than ‘to’ as demonstrated.
Good question, but I think it would get messier in the end... I'd have to play around with it a little. I do agree the `to` seems a bit odd, but I think it's one of those things that you'd get used to once you start using it.
I didn't even know I wanted some of these.
Ive always solved the last one wiht line-height: 1; for 1 line texters
About scroll timeline. Any ideas, how to make this parallax work for any position on the page, not only for the top of the page?
I would really like to see video about how your career works outside of this TH-cam challenge
Kevin, amazing video as always! I have a question, though - why can't I use container queries inside my .scss files in my React apps? They just don't work ;(
What a great time to be alive. Indeed.
OOO
--x: balance;
text-wrap: var(--x, pretty);
will be nice in a reset
I am a CSS dev - looking from job (remote)
Ana Tudor always makes me wish I knew Math as well as she does
How can I sell a website to a customer and how can I make sure the customer doesn't reuse my html codes to create other websites and sell in their names? I mean how can I sell websites without delivering the source codes? Thank you guys in advance, this is very important for me to know
I have an event in my calendar titled "Firefox has() released!" lol
And I'm gonna spend the most cathartic twenty minutes deleting all the globs in my style framework commented "This is a hotfix class for Firefox"
INCREDBILE
any hectic day, if i see your calc method will get mad 😀
How can anything offer more colours than RGB? With every pixel on the screen being off or full on RGB covers every possible combination.
Because it uses the sRGB color gamut, which isn't close to all the possible colors (I think it's under 40%). The new wide color gamut spaces we have have a lot more (like 50% more colors), which newer monitors are able to produce. This article does a great job explaining it lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/
Correction - Firefox support for both text-wrap:balance, and :has() begins in version 121... There was support for :has() behind a flag in earlier versions which might have caused confusion.
As of 121 (in beta, nearly ready for release) we have both.
CSS Wrapped
Is there any CSS property to ensure that the text inside a div follows the outline of the mask applied to the parent (clip-path)? Can I have the link to the pen where you can see the color slider that deforms the line to the left?
for the first thing, nothing that I can think of. As for the link: codepen.io/thebabydino/pen/qByGqOm
@@KevinPowell
I've seen some of this guy's work... maybe it's better for me to change jobs
give all the navigator that still have to implemented nested correctly.... yeah :(
Your thoughts on the CSS4(and beyond) move?
I don't mind at all. It's more of a marketing thing to highlight all the big changes that have been going on more than anything else, and to help group things a little bit, and a way to help make some "lines in the sand" on the growth/development of CSS.
@@KevinPowell thank you❤️.
CSS becomes like yet another programming language.
Adding new features and functionality makes it inevitable.
Css is going to become javascript one day
Hello my favourite youtuber, so I recently upload a project with a hero banner and I noticed that the hero Image loads really slow. Would be really happy if you could show the best ways to create a hero banner, img tag vs background-img and how to make it load fast. What is the industry standard. Have a nice day
How large is the image? It must be huge. I would say make it a JPG with 80% quality. That should reduce the size to something reasonable. The testing I did with the art director involved us squinting at individual pixels looking for a difference with 80%. When you have to look that closely to spot any difference, it is good enough.
and use lossless compression
@@jeffreysmith9837 Absolutely not. Use JPEG lossy compression. As long as you don't set the quality too low, you won't notice a difference.
Chroma browser in comma, lol.
Wait for “old css that you probably still don’t know” video
Hi, can you create, a new TH-cam subscribe interaction animation in CSS, if it is possible? ,
it is my request, can you please make a video on that TH-cam subscribe and like button interaction in CSS
When my friends ask how I keep up with CSS updates:
"I know a guy..."
Can you create an angular new dev site home page animation, angular dev, if it is possible do a video on that, please consider this as a serious request 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
Asking the wrong person, I've touched Angular once in my life, like 5 years ago 😅
@@KevinPowell no I just asking that home page have the animation could you please recreate that animation in css, is it posible ?
@@KevinPowellya just the website the doc website check it out man you would wanna want to recreate it.
Seems like they're using an SVG and draw the effects onto canvas with it. Would be interesting to see what they're using to extract and modify the paths for that animation though. Must be GSAP with the MorphSVG Plugin.
It looks so cool id love to see a video on that 😭
I don't need the lch because regular colors work with me in # lol
what is the point of section anymore, even though they made it for us to be working like this, we still keep using div. That don't make anysense to me anymore
Then stop using DIV. I use SECTION all the time.
:has , nested @media are gonna change the game,
i cannot wait