I cannot contain my excitement!!! Only thing I dislike is creating markup for flex/grid, we should have container-type: flex; and container-type: grid;
🎯 Key Takeaways for quick navigation: 01:10 📏 Container queries focus on component-based layout adaptation within containers, overcoming limitations of viewport-based media queries. 03:46 🔄 Container queries directly target the nearest container's size, providing more precise responsiveness within components. 07:46 🔄 Named containers enable applying container queries to specific components, allowing for fine-grained styling based on container context. 11:15 📐 Using `size` for container type affects both width and height, requiring careful consideration; prefer `inline size` for most cases. 18:42 📐 Applying container queries within Flexbox or Grid layouts might need additional adjustments due to container behavior; consider the layout structure carefully. 19:50 🛠️ Container queries can be limited by parent grid dimensions; to target individual grid items, use intermediate div containers as parents. 21:10 🧩 When working with flex layouts, applying container queries might require adjusting flex properties to prevent children from collapsing to zero width. 23:18 🧐 Understanding container implications is crucial; they establish new formatting contexts, affect layout behaviors, and eliminate margin collapsing. Made with HARPA AI
What every website UI/UX designer saves: *Kevins videos* I swear every videos of this dude is a gem! These are the videos newbies look for and people with experience will search for when they forgot how to do something.
Brilliant! This was needed for many years, but better late than never. I've hit this wall with media queries almost a decade ago when I was designing themes for forums, where posts can have sidebars, user profile block and so on, so content could be wrapped in multiple layers of stuff, making it impossible to use media queries. My solution was similar to containers, but with JavaScript that toggled classes on container elements. It was a nightmare to maintain. I don't work with forum themes anymore, but PTSD from attempting to design proper responsive themes still remains.
I swear Kevin’s channel is a goldmine, it’s just so nice to know I have just one channel to follow to keep up with CSS evolution; thank you for your hard work Kevin !
I love your videos because css is so overlooked in the web developer landscape and honestly I think it can become the most fun part of the process if you know how to have fun with it
Absolute gamechanger feature! You, mr Powell, are a true legend! Especially these days where every job opportunity screams for React, Vue or Angular, a true frontend spec named CSS is becoming more and more overlooked whilst there is so many development in there. To me personally you really succeeded in your mission keeping CSS fun. Thanks, much much appreciated. 🙌
The ".super-simple-example" class made me laugh in a good funny way, don't get me wrong i learn many new things from you, even at 16 years in my career there are many things i still don't know yet and some i have forgotten. Thanks to you!
Been learning react for a week or two now and I just couldn't find mentions of how people use a component multiple times with different stylings. This solves so much of that for me and it's such a relief that you even mention this in the video because I was going crazy. I ended up thinking most people just use tailwind or something and use the medium, small and large media query for everything. What an amazing video, Kevin.
Hey Kevin, I have a suggestion for your next video, a video about all the important CSS media queries (screen, print, orientation, prefers-color-scheme…)! For the time being, awesome video mate!
@@love.ly. Why did my RUclips app translate your comment to have one more "s" when I clicked "Translate to English"? (I am not actually asking you, it's just strange that it happened)
The container query and especially range syntax is awesome. I don't think container queries undermine media queries, however they let us to add more complexity which helps websites to be more flexible and responsive ! Thank you Kevin, I can't leave watching your videos everyday for a week ! I... I guess I fell in love with css as a backend developer 🤭
I would like to say sorry for tell you that your videos wasn't good because was too long. I was passing through some problems at the time and I still do but now I know that I was the problem not you. Your content are great. Please keep helping people.
Kevin, thanks for the great work and keeping us up to date with the latest CSS features. As a front end developer there is always so much new stuff to keep track of, and having a single reliable place like this to keep up to date with CSS is extremely valuable!
Hey, Kevin! Do you plan on doing some content on image optimization and how to get your images ready to be used on websites? Thanks in advance and keep up the great work!
🧡🧡 I love container queries 😊🧡 .. have been waiting for it for years! .. I already implemented it in my free wp plugin (Block Designer) .. actually a polyfill because of browser support 😏 .. I’m so happy this is finally coming! 🥳
GAME CHANGER feature right there, and I’m so glad browser support is very good for this one right now. One thing that came to my mind, specially to avoid dealing with the grid/flexbox issue you pointed out: if you’re breaking your UI up into components, doesn’t it make more sense to make the component’s container itself into a container (that would be .call-to-action in your example)?
Kevin, you need to make a new course on web layouts especially different patterns and how to implement them with modern css. Lots of outdated material out there. Instantly would buy such a course from you!
Really excited for the container queries, but i am quite sad the the element itself (the container) cannot be styles in the container query, which will make us write unnecessary markup. Such a turn down...
block-size and some others should come eventually :) The issue with `height: 100%` is we don't always want that either though. But yes, it could be pretty useful in the right situation. In my video where I look at container units coming later this week, I found a few better use cases for dealing with heights :)
Super pertinent video, as always! I was wondering if the container shouldn't be the call to action itself. That way, wherever it's used, it's relying on it's own width to adapt it's style, even if it's not under .content-sidebar.
An item can't be its own container. You could have the call to action, as the container and then a div inside it that looks at it, and then all the content in there? Seems like an awkward pattern though
@@KevinPowell Ok, I'll dive deeper (it's my first look at Container Queries) but for me, the idea was to make single components responsive wherever they're used and not have to declare rules for every spot you could use the component. Thanks!
We've gone from: Use more divs than you need to style. To: Use div just for markup, use CSS to style the page. To: now we need more divs again, forgot what we said about using HTML for semantic.
8:35 couldn't you assign the container-type directly to aside and article? since container doesn't change anything per se, you could let it be the default behavior for these tags, isn't it?
Hi Kevin, awesome video as always thank you! I was curious as to why you used the data-type attribute to set the container stylings in the beginning. Would it not be more appropriate to have these as classes?
More common, yes, but no reason it's more or less appropriate. I've taken that idea from CUBE CSS, and personally I find I like it a lot, using data-attributes as modifiers instead of classes. As long as you have a consistent system, either approach is fine :)
I noticed recently that adding container-type to the class of an element seems to be making it z-order on top of an element that is positioned absolute via javascript. I wonder if you have any observations of whether this is expected and if you have any suggestions for how to plan for or manage this?
14:05 I wonder how hard would it be to make the inline-size the first property instead of the second, hence allowing us to use it as a shorthand property without needing to declare both values...
4:38, while not as convenient as containers you can achieve the same with media queries, if you can do it with old css then you should, then you won't have stubborn mules who use the old **** complaining at you.
this could be awesome for items in a gallery... set the background to display an image depending on the container size, not the viewport width. esp if the number of photos in the gallery changes on the width of the grid say.
Hey Kevin... completely random one: I'm watching your video fullscreen on my right-hand monitor, so it's kinda trippy the way your DevTools window "disappears" off the left of my screen.. I keep half expecting it to magically appear on my left monitor for some reason. (: With that said, it definitely was not distracting though, so don't stress. Very cool video though, thanks for the nice clear presentation.. Container Queries really are incredible, I need to go play in my sandbox now... :D
Hi Kevin. Great demo. I was trying to create a demo of container queries to explain this concept to my colleagues. I used this as a basis for my demo. Also, just curious why you chose to use data attributes for the sizes and not just a classes. Any particular reason?
Thanks for sharing this! You become my number one resource for new features, I don't care about the sites you are looking for. ;-) Anyway, working as a front-end for more than 23 years and also being a lecturer for students, this video was hard to follow. It's not because of the new stuff, it's because of your preparations upfront. Without knowing your code, I can't judge what the outcome will be. My suggestions: Build simple markup in the video as well. Using Sass and it's grouping could also help. I have to try it myself this time to understand it completely. And this is different for your other videos.
It's frustrating to me, but when doing @container (width < 940px), the width it uses is the width of the content box of the element and does not include padding. When padding is applied, it will actually apply the styles when the element (including padding) is less than 957px (padding left and right is 8px). So the only option I see is to modify my container query to take into account the applied padding, which is not great readable code. And if I ever decide I need to change the padding of my container for whatever reason, I'll need to update the query to account for it. Changing the box-sizing property of the container does nothing to change this behavior. It always in relation to the width of the content-box of the container. Frustrating.
Thanks for the video Kevin. It worked on Chrome. This didn't work on Firefox. MDN says: "Last updated on 15 September 2021 to add details of the new properties container-type, container-name, and container."
Is there some kind of preprocessor or polyfill for this feature to make it more accessible? Kind of neat, but I don't really find it that useful as is as long as it is not supported in firefox.
nope, cause there is no 'max-content' at that stage, it effectively can't see it's children anymore. This is on purpose, because without doing that, it would be very easy to create recursive behavior with endless loops between 2 states
42% support on caniuse :( Why don't browsers use dynamic engines which can Fetch features from a server whenever a spec update happens. That way a soft/mini/cloud update happens on all browser versions, meaning even browsers from 5 years ago can have most of 1 month old features
This complementary to media queries, not contrasting. Both shall be used to make the best possible product. I already do this in jquery using the outer width method.
Would it work with ::before or ::after pseudo selectors? I think not since they don't have children, but that's the way I was thinking about when solving the problem in the flexbox example.
Very possible it does, yes, because it sets tthe "contain" property on the layout, as well as styles, so styles from that element cannot "escape" out of it, so mix-blend-mode not working would make sense. One of the side effects we're going to have to live with if we want this to be possible!
@@KevinPowell So most likely it's a technical limitation and not just me. Thank you Kevin. I was losing it already. Decided to scrap all container queries and :has selectors from my code and start from scratch. Using them on a real project was not smart 🙂 But it was really interesting nontheless, all thanks to you. Love your videos.
Would you ever design a component and make the container query for that component? (e.g. Card Component) With this approach couldn't you make sure that a card would behave how you want regardless of where its placed within a grid
If I have an absolutely-positioned div with no width/height set, it will fit itself to any relative content inside it (like a stack of divs or images or something). So if the widest child element is 200px, the parent div will have a width of 200px as well. As soon as I give the absolutely-positioned parent div a container-type (of any value), it "loses" its children elements and collapses down to the smallest possible size, typically 0px. Is this a bug or am I missing something?
Great explanation! However, I'm a little disappointed that we have to add a bit of div-itis when using flex/grid. Having said that, it's a small price to pay for all this extra goodness. 😁
I cannot contain my excitement!!! Only thing I dislike is creating markup for flex/grid, we should have container-type: flex; and container-type: grid;
Whyy RUclips 👊👊👊
Patron's get my videos 2 days early :)
🎯 Key Takeaways for quick navigation:
01:10 📏 Container queries focus on component-based layout adaptation within containers, overcoming limitations of viewport-based media queries.
03:46 🔄 Container queries directly target the nearest container's size, providing more precise responsiveness within components.
07:46 🔄 Named containers enable applying container queries to specific components, allowing for fine-grained styling based on container context.
11:15 📐 Using `size` for container type affects both width and height, requiring careful consideration; prefer `inline size` for most cases.
18:42 📐 Applying container queries within Flexbox or Grid layouts might need additional adjustments due to container behavior; consider the layout structure carefully.
19:50 🛠️ Container queries can be limited by parent grid dimensions; to target individual grid items, use intermediate div containers as parents.
21:10 🧩 When working with flex layouts, applying container queries might require adjusting flex properties to prevent children from collapsing to zero width.
23:18 🧐 Understanding container implications is crucial; they establish new formatting contexts, affect layout behaviors, and eliminate margin collapsing.
Made with HARPA AI
What every website UI/UX designer saves: *Kevins videos*
I swear every videos of this dude is a gem! These are the videos newbies look for and people with experience will search for when they forgot how to do something.
When I scroll down KPs channel and list of videos, pretty much all of them for the past 2years have been watched all the way through. So grateful!
Brilliant! This was needed for many years, but better late than never.
I've hit this wall with media queries almost a decade ago when I was designing themes for forums, where posts can have sidebars, user profile block and so on, so content could be wrapped in multiple layers of stuff, making it impossible to use media queries. My solution was similar to containers, but with JavaScript that toggled classes on container elements. It was a nightmare to maintain. I don't work with forum themes anymore, but PTSD from attempting to design proper responsive themes still remains.
I had similar problems, and currently use ResizeObserver in JS to set CSS variables to a container to be used in CSS.
Yeah. I guess humanity has finally reached a state of technology to make it happen.
I swear Kevin’s channel is a goldmine, it’s just so nice to know I have just one channel to follow to keep up with CSS evolution; thank you for your hard work Kevin !
I love your videos because css is so overlooked in the web developer landscape and honestly I think it can become the most fun part of the process if you know how to have fun with it
Absolute gamechanger feature! You, mr Powell, are a true legend! Especially these days where every job opportunity screams for React, Vue or Angular, a true frontend spec named CSS is becoming more and more overlooked whilst there is so many development in there. To me personally you really succeeded in your mission keeping CSS fun. Thanks, much much appreciated. 🙌
DAYUMN, next step, editing videos and 3D in minutes
The ".super-simple-example" class made me laugh in a good funny way, don't get me wrong i learn many new things from you, even at 16 years in my career there are many things i still don't know yet and some i have forgotten. Thanks to you!
Been learning react for a week or two now and I just couldn't find mentions of how people use a component multiple times with different stylings. This solves so much of that for me and it's such a relief that you even mention this in the video because I was going crazy. I ended up thinking most people just use tailwind or something and use the medium, small and large media query for everything. What an amazing video, Kevin.
I feel like I'm going to be using this A LOT! You're awesome Kevin!
In 5 years.
I just sometimes get back to these videos to get the full picture again. Thanks Kevin.
I honestly enjoy your videos a lot. I love discovering new stuff with someone as bespoken as you.
I’m deeply and madly in love with css thanks to Kevin.
Hey Kevin, I have a suggestion for your next video, a video about all the important CSS media queries (screen, print, orientation, prefers-color-scheme…)!
For the time being, awesome video mate!
been planning a media query deep dive for awhile, I should probably get around to actually making it!
Yesss
@@love.ly. Why did my RUclips app translate your comment to have one more "s" when I clicked "Translate to English"? (I am not actually asking you, it's just strange that it happened)
The container query and especially range syntax is awesome. I don't think container queries undermine media queries, however they let us to add more complexity which helps websites to be more flexible and responsive ! Thank you Kevin, I can't leave watching your videos everyday for a week ! I... I guess I fell in love with css as a backend developer 🤭
I would like to say sorry for tell you that your videos wasn't good because was too long. I was passing through some problems at the time and I still do but now I know that I was the problem not you. Your content are great. Please keep helping people.
This is sorely needed, I'm about to research browser support 🤞
Quality of Content and Quality of Production is Top-Notch
Container queries are amazing, but wait, there's more!🎉🎉🎉
Wonderful content, thank you Kevin!
This is super cool, hope this get supported by every browser really fast.
I've been waiting for this for like 5 years!
Those extra classless divs near the end, I really felt that.
Kevin, thanks for the great work and keeping us up to date with the latest CSS features. As a front end developer there is always so much new stuff to keep track of, and having a single reliable place like this to keep up to date with CSS is extremely valuable!
a
I never heard about container query before but now I will start using it heavily.
Hey, Kevin! Do you plan on doing some content on image optimization and how to get your images ready to be used on websites? Thanks in advance and keep up the great work!
Really Help..
Kevin pls can you help on this
This strikes me as vaguely scam-ish.
@@eggkookoo One can only try... 😂
@@Brechtvdh I mean the "helpline" message stuff.
cam on ad da co nhung bai giang huu ich cho moi nguoi chuc ad luon thanh cong trong moi viec
@container is the future for responsive typography
Hi Kevin! Thanks FOR THIS SERIOUSLY!
🧡🧡 I love container queries 😊🧡 ..
have been waiting for it for years!
.. I already implemented it in my free wp plugin (Block Designer) .. actually a polyfill because of browser support 😏 .. I’m so happy this is finally coming! 🥳
GAME CHANGER feature right there, and I’m so glad browser support is very good for this one right now.
One thing that came to my mind, specially to avoid dealing with the grid/flexbox issue you pointed out: if you’re breaking your UI up into components, doesn’t it make more sense to make the component’s container itself into a container (that would be .call-to-action in your example)?
just wondering did you figure out the answer to this question? I want to know as well
Kevin, you need to make a new course on web layouts especially different patterns and how to implement them with modern css. Lots of outdated material out there. Instantly would buy such a course from you!
Once I finish Beyond CSS, I'll be doing a layout course :)
When this was showcase for the first time I literally danced for joy
Really excited for the container queries, but i am quite sad the the element itself (the container) cannot be styles in the container query, which will make us write unnecessary markup. Such a turn down...
this guy loves css
Genuinely game-changing.
amazing explanation simple and easy ..cover all used cases ...thank you
you are a very good instructor kevin....
Actually { container-type: size; height: 100%; overflow: auto; } seems very usefull.
And it's a bit strange there's no container-type: block-size yet.
block-size and some others should come eventually :)
The issue with `height: 100%` is we don't always want that either though. But yes, it could be pretty useful in the right situation. In my video where I look at container units coming later this week, I found a few better use cases for dealing with heights :)
Super pertinent video, as always! I was wondering if the container shouldn't be the call to action itself. That way, wherever it's used, it's relying on it's own width to adapt it's style, even if it's not under .content-sidebar.
It would also manage the flexbox no?
An item can't be its own container. You could have the call to action, as the container and then a div inside it that looks at it, and then all the content in there? Seems like an awkward pattern though
@@KevinPowell Ok, I'll dive deeper (it's my first look at Container Queries) but for me, the idea was to make single components responsive wherever they're used and not have to declare rules for every spot you could use the component. Thanks!
Ok, I wrote too quickly, it makes more sense the more I look at it!
We've gone from:
Use more divs than you need to style.
To:
Use div just for markup, use CSS to style the page.
To: now we need more divs again, forgot what we said about using HTML for semantic.
thank you for the detailed guide, it helped me install this soft
Here is a Unique content
Css 💫 kevin
Nice 👍👍👍
next gen css is going to be bonkers
8:35 couldn't you assign the container-type directly to aside and article? since container doesn't change anything per se, you could let it be the default behavior for these tags, isn't it?
Straight forward and very helpful. Thank you!
The hero we always need. Thank you!
Hi Kevin, awesome video as always thank you! I was curious as to why you used the data-type attribute to set the container stylings in the beginning. Would it not be more appropriate to have these as classes?
More common, yes, but no reason it's more or less appropriate. I've taken that idea from CUBE CSS, and personally I find I like it a lot, using data-attributes as modifiers instead of classes. As long as you have a consistent system, either approach is fine :)
Amazing!! Can not wait to back this into my daily builds!
Thank you Mike! I'm just starting out and tNice tutorials video really helped get the basics down!
I noticed recently that adding container-type to the class of an element seems to be making it z-order on top of an element that is positioned absolute via javascript. I wonder if you have any observations of whether this is expected and if you have any suggestions for how to plan for or manage this?
this is gonna take me awhile to wrap my head around.
14:05 I wonder how hard would it be to make the inline-size the first property instead of the second, hence allowing us to use it as a shorthand property without needing to declare both values...
Awesome lecture. Thank you so much 🤯
all those years of frustration... i wish i had this back then!
Awesome content! Thanks for sharing.
I dunno how you can smile and look at CSS at the same time, lol.
Improved control is certainly on it's way, and about time too!
wtf
how did you comment yesterday
RUclips BUG🌝
Againnnnnnnn
He's a Patron, so he gets them 48 hours in advance :)
I am coming from soft one 4.6 and I am so torn with soft soft. It seems great as it is so in-depth in its' capabilities but, so fiddly to get
4:38, while not as convenient as containers you can achieve the same with media queries, if you can do it with old css then you should, then you won't have stubborn mules who use the old **** complaining at you.
this could be awesome for items in a gallery... set the background to display an image depending on the container size, not the viewport width. esp if the number of photos in the gallery changes on the width of the grid say.
at 9:44 i shed a nerd-tear.
Hey Kevin... completely random one: I'm watching your video fullscreen on my right-hand monitor, so it's kinda trippy the way your DevTools window "disappears" off the left of my screen..
I keep half expecting it to magically appear on my left monitor for some reason. (:
With that said, it definitely was not distracting though, so don't stress. Very cool video though, thanks for the nice clear presentation.. Container Queries really are incredible, I need to go play in my sandbox now... :D
Hi Kevin. Great demo. I was trying to create a demo of container queries to explain this concept to my colleagues. I used this as a basis for my demo. Also, just curious why you chose to use data attributes for the sizes and not just a classes. Any particular reason?
Thanks for sharing this! You become my number one resource for new features, I don't care about the sites you are looking for. ;-) Anyway, working as a front-end for more than 23 years and also being a lecturer for students, this video was hard to follow. It's not because of the new stuff, it's because of your preparations upfront. Without knowing your code, I can't judge what the outcome will be. My suggestions: Build simple markup in the video as well. Using Sass and it's grouping could also help. I have to try it myself this time to understand it completely. And this is different for your other videos.
It's frustrating to me, but when doing @container (width < 940px), the width it uses is the width of the content box of the element and does not include padding. When padding is applied, it will actually apply the styles when the element (including padding) is less than 957px (padding left and right is 8px). So the only option I see is to modify my container query to take into account the applied padding, which is not great readable code. And if I ever decide I need to change the padding of my container for whatever reason, I'll need to update the query to account for it.
Changing the box-sizing property of the container does nothing to change this behavior. It always in relation to the width of the content-box of the container. Frustrating.
Thanks for the video Kevin. It worked on Chrome. This didn't work on Firefox. MDN says: "Last updated on 15 September 2021 to add details of the new properties container-type, container-name, and container."
tbh, this is pretty awesome.
what kind of css you use because for me container-type or any of container property doesn't work can you give me a clue please
this is amazing
Just watched the video but it's the writing isn't clear enough but love the video though i just think you should increase the font size of the letters
The real problem for now is Firefox. They have to solve a bug and when they will release the fix we could finally develop with container queries
Regarding the 3-card grid layout: Why not set .even-columns > .call-to-action { container-type: inline-size; } ?
sadly, this only made me more confused. A little all over the place. Will have to watch it a third time and slow it down. Thank you for all you do.
Is there some kind of preprocessor or polyfill for this feature to make it more accessible? Kind of neat, but I don't really find it that useful as is as long as it is not supported in firefox.
17:04 Could you use "min-height: max-content;" to fix this, though?
nope, cause there is no 'max-content' at that stage, it effectively can't see it's children anymore. This is on purpose, because without doing that, it would be very easy to create recursive behavior with endless loops between 2 states
@@KevinPowell Oh :(
Well okay. That's a shame, but it makes sense. Still a very useful too for laying stuff out.
Good video... But what is with this attribute selectors. Attribute selectors are longer and slower. Why not use: `.container.medium`?
concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.
Do container queries have an influence on the formatting context? Ie/ do they get rid of collapsing margins?
42% support on caniuse :(
Why don't browsers use dynamic engines which can Fetch features from a server whenever a spec update happens. That way a soft/mini/cloud update happens on all browser versions, meaning even browsers from 5 years ago can have most of 1 month old features
the @container rule is not yet supported in vscode, how do you manage to use it here?
@containter isn't supported in vscode yet, how are you managing to use it ?
This complementary to media queries, not contrasting. Both shall be used to make the best possible product.
I already do this in jquery using the outer width method.
What plugin do you use in vscode for auto indentation after saving?????
I remember trying to explain to people in 2016 why container queries were important. Now it seems like most people get it. It's nice.
Hello, is it possible to get the .html and .css code to dive more in depth with the container queries? Like in codepen or so?
Would it work with ::before or ::after pseudo selectors? I think not since they don't have children, but that's the way I was thinking about when solving the problem in the flexbox example.
weird question. does container-type:inline-size break mix-blend-modes of its children? for me it breaks and can't seem to figure it out.
Very possible it does, yes, because it sets tthe "contain" property on the layout, as well as styles, so styles from that element cannot "escape" out of it, so mix-blend-mode not working would make sense. One of the side effects we're going to have to live with if we want this to be possible!
@@KevinPowell So most likely it's a technical limitation and not just me. Thank you Kevin. I was losing it already. Decided to scrap all container queries and :has selectors from my code and start from scratch. Using them on a real project was not smart 🙂 But it was really interesting nontheless, all thanks to you. Love your videos.
This is great! Do you have a codepen for it? (I can see a lot, but not the base styles)
mind-blowing
Beautiful
ladies and gentlemen, what is the theme on this in vscode? :)
Would you ever design a component and make the container query for that component? (e.g. Card Component) With this approach couldn't you make sure that a card would behave how you want regardless of where its placed within a grid
If I have an absolutely-positioned div with no width/height set, it will fit itself to any relative content inside it (like a stack of divs or images or something). So if the widest child element is 200px, the parent div will have a width of 200px as well. As soon as I give the absolutely-positioned parent div a container-type (of any value), it "loses" its children elements and collapses down to the smallest possible size, typically 0px.
Is this a bug or am I missing something?
19:27
Yeah, I can't see it. Where's your cursor?
More interesting is how to adjust CSS not only for desktop but for e-ink, color e-ink and some other devices
How do you show a line connecting tags in the editor? I couldn't find a plugin that works with HTML. It works only with js and css
Best of the best
Great explanation! However, I'm a little disappointed that we have to add a bit of div-itis when using flex/grid. Having said that, it's a small price to pay for all this extra goodness. 😁
My inspiration 🤩