Hey Kyle, watching the conical gradient tip has just helped me solve a problem I've been having over the last two days. I was looking for a way of revealing an image in a kind of circular wipe reveal. I was trying to do it using clip-path but it wasn't working in Safari. I've now switched my method by using a conical gradient with two colours. One of these colours has an alpha value of 0 and I've animated it so as it animates round the circle, it reveals the image underneath. It looks great and was much simpler than the other method I was using and it's cross-browser compatible. Thanks so much for the tip!
Out of all the coding channels on RUclips, yours and Max's (Academind) are the best! Excellent video as always.. always excited for your videos because there's always something new to learn irrespective of how experienced of a coder I am. Keep up the great work man!
additionally, for the tooltip, instead of the "top position + transform" combination you can use "bottom: 100%;", which will position tooltip exactly at top of its parent. or "bottom: calc(100% + any positive value);" to make a bit distance between tooltip and its parent.
Regarding the flexbox gap (11:00): While we wait for those other browsers to catch up, we can simplify it further by using :not... .flex :not(:last-child) { margin-right: 10px; }
11:24 I think it's better to make .flex + .flex { margin-left: 10px;}, you don't need to rewrite the "last child" thing and reach the same effect. It looks for a .flex item that has another one before it, if it has, it gets the properties given, if not, it doesn't, which is exactly what we want to achieve; give a margin for every .flex item except the first one, which doesn't have any other .flex item before it.
All tips are kind of not great when you already work as a web dev doing SPAs and there are better ways how to deal with the problem but dude that conical gradient is AMAZING. That really does have huge value that I can use. Thanks for that.
I really do like videos like this one for css and general layout because you actually give us examples of use cases for the thing you're talking about instead of just explaining the documentation for that particular selector. Ps: This video came in an awesome time for me. I'm actually having a lot of problems trying to code projects of my own because I can't seem to grasp how to create my own layouts and choose colors well. Knowing these new selectors can help me a lot! Thank you!
This is pretty cool, but I was taught by Epicodus that you should never mix CSS into HTML outside of the styles file. If these can be used in the styles file then this would be useful.
Oh, I heard the counter before. I saw it in a page. There is also a CSS code that order a list by alphabetic or numeral order. Perfect for imitating a TvTropes Page. I never though using this counter properties for my Tumblr Archive.
Just curious... I don't know if this is the correct forum to ask this but I will ask anyway... When it comes to CSS tags, does sequence matter? I like to put them in alphabetical order just to see if it already exists. For example, I always put "background" before "margin" just to see if it's already there but I don't know if it matters. So far, I haven't seen any difference but just want to know if it matters. Thanks!
Do you have any suggestions for using this tooltip strategy for non-container elements? Such as an img or an input tag? Preferably in a way that doesn't mess up other styling -- we could just wrap those tags in a span or div and then put the tooltip on that, but that can effect the styling in annoying ways
Although this does point some pretty nice features, i would say most of these are really niche, and almost never used in production, hence why nobody knows about them. Most of these are redundant since nowadays nobody uses plain html, but rather some sort of templating. I am not trying to be a hater, i really like your content, but i think as an educator you should somehow point out to those that are just now beginning that some stuff, while cool, should not be used in production. Keep up with great work!
Actually for the flex trick without gap, I set margin to half the gap I want, if I dont want there to be a padding on the exterior then the flex element itself gets a padding of minus half the gap, that way they're all even without having to do the last child trick
Regarding his cheatsheets: theyre legit. They make some funky parts of css very clear, connecting some dots in very nice visual ways. Ive seen it worse explained in $50 books. In fact, I wonder... @kyle: are these cheatsheets licensed for use in schools by teachers?
wonder if there is a rng function... one could use cirular gradient and that to animate some kind of spoke of retro snes era smoke effect or something hmmm..
Mere days after recording this video the flexbox gap property became supported on Safari and Safari iOS (caniuse.com/flexbox-gap): released April 25th…two days before this episode dropped :p
Change the tooltip hover, I tried for a project but I didn't manage to change the css. I assumed it wasn't native html but a part of the bootstrap I was using, so I stop.
I want to use a css preprocessor and use all the newest css tools, is there a tool what will let me use all the new css then compile it down to cross browser supported css?
Was this video just to show that you can do these things in css now OR another purpose? Yes you did say “traditionally you could only do with js” but I’d say that I’d still do it in js because it’s simpler to do in js. There’s this weird culture where devs make things more complex than they need to be & I don’t understand it 🤷🏻♂️ To be fair, each way of doing things can be done 100 different ways in both css & js BUT if I’m being honest there is a place & time for each as well as being better in one or the other.
@@CathrineMacNiel I mentioned nothing about speed. I stated my preference based on simplicity. In a simple app the speed differences are negligible. You can make your argument if we’re discussing complex web apps.
I don't like CSS counters. In my opinion we should keep apart models and views. OL tag is enough for this purpose. This is a reason why most text and style formatting attributes and tags were deprecated in HTML5, right?
Make an extension for VScode like "SimplyKyle" which will automatically simplify code and offer alternatives with explanations, some kind of study assistant :D that would shake the IT study ground 100% guaranteed :D
Before with a single ':' was kind of a mistake. A single ':' is meant to be for pseudo classes like hover. ::before is the more accepted way as '::' refers to a pseudo element. It's funny though as :before has more support as it was first. So whichever you'd rather.
![Quando Rondo - Life Goes On [Official Music Video]](http://i.ytimg.com/vi/eIf3fhMXAow/mqdefault.jpg)
Hey Kyle, watching the conical gradient tip has just helped me solve a problem I've been having over the last two days. I was looking for a way of revealing an image in a kind of circular wipe reveal. I was trying to do it using clip-path but it wasn't working in Safari. I've now switched my method by using a conical gradient with two colours. One of these colours has an alpha value of 0 and I've animated it so as it animates round the circle, it reveals the image underneath. It looks great and was much simpler than the other method I was using and it's cross-browser compatible. Thanks so much for the tip!
After 20 years of battling with css, I'm starting to love it!
Whoa!! 20years ...
@@shaderone07 I'm not so old, CSS is 25 years old!
i guess it is kind of off topic but does anybody know a good place to watch new series online ?
@Leland Hamza i use FlixZone. Just search on google for it =)
@Niko Aldo Yea, I've been watching on Flixzone for months myself :)
Out of all the coding channels on RUclips, yours and Max's (Academind) are the best! Excellent video as always.. always excited for your videos because there's always something new to learn irrespective of how experienced of a coder I am. Keep up the great work man!
additionally, for the tooltip, instead of the "top position + transform" combination you can use "bottom: 100%;", which will position tooltip exactly at top of its parent. or "bottom: calc(100% + any positive value);" to make a bit distance between tooltip and its parent.
Good point. I didn't think of that.
Bro 👍
Regarding the flexbox gap (11:00):
While we wait for those other browsers to catch up, we can simplify it further by using :not...
.flex :not(:last-child) {
margin-right: 10px;
}
Flexbox was such a game changer for me. I have been using gap for personal projects because it is just so darned easy.
conic-gradient - W-O-W !!!
That really looks like a cone! :)
conic gradient property is very cool. I will use this in my future projects. Thanks Kyle
I don't normally learn a new property in videos like this but I love counter() and never new about counters()... 🤯
11:24 I think it's better to make .flex + .flex { margin-left: 10px;}, you don't need to rewrite the "last child" thing and reach the same effect.
It looks for a .flex item that has another one before it, if it has, it gets the properties given, if not, it doesn't, which is exactly what we want to achieve; give a margin for every .flex item except the first one, which doesn't have any other .flex item before it.
I love these videos, u can literally make as many of them as you want and we'll still watch them 😉
Same
All tips are kind of not great when you already work as a web dev doing SPAs and there are better ways how to deal with the problem but dude that conical gradient is AMAZING. That really does have huge value that I can use. Thanks for that.
Next video: how to fetch a document from mongo db using only CSS
I really do like videos like this one for css and general layout because you actually give us examples of use cases for the thing you're talking about instead of just explaining the documentation for that particular selector.
Ps: This video came in an awesome time for me. I'm actually having a lot of problems trying to code projects of my own because I can't seem to grasp how to create my own layouts and choose colors well. Knowing these new selectors can help me a lot! Thank you!
Why not making those flex gaps like this: .flex > * + * { margin-left: ... }
You wont need that lastchild thing then.
Good call!
also .flex > *:not(:last-child) {...} works
until flex gap has wide compatibility, you can save a bit of code by using:
.flex > :not(:last-child) { margin-right: 5px }
Your video really helpful
awesome, and at the end, you're real my online mentor
way to go! you do have tricks up your sleeve! thanks for posting these.
This is nice stuff learning new things really makes you love and appreciate more in coding
These are great, Thank you. Any idea how these effect accessibility? For example, the counter?
Goog job, this css tricks are simplified ! Thanks !
The counter literally blew my mind 🤯
Another great video!
The :is() selector has a lower level of specificity I believe, so you should be careful when using it!
This is pretty cool, but I was taught by Epicodus that you should never mix CSS into HTML outside of the styles file. If these can be used in the styles file then this would be useful.
Yes you can do this in separate style files. In fact you can do anything in a style file which you can do in a style tag and vice versa.
I'm a c/c++/python developer, but love these videos none the less. Soon time to do some js css coding I guess...
Ok
Ok
Last year get to know counter from an interview and i am amazed
You're amazing! Thank you for your service. I also like your guitar haha
flex gap really wow .. You just saved my life.
Oh, I heard the counter before. I saw it in a page. There is also a CSS code that order a list by alphabetic or numeral order. Perfect for imitating a TvTropes Page. I never though using this counter properties for my Tumblr Archive.
Just curious...
I don't know if this is the correct forum to ask this but I will ask anyway...
When it comes to CSS tags, does sequence matter?
I like to put them in alphabetical order just to see if it already exists.
For example, I always put "background" before "margin" just to see if it's already there but I don't know if it matters.
So far, I haven't seen any difference but just want to know if it matters.
Thanks!
Amazing as usual.
Do you have any suggestions for using this tooltip strategy for non-container elements? Such as an img or an input tag? Preferably in a way that doesn't mess up other styling -- we could just wrap those tags in a span or div and then put the tooltip on that, but that can effect the styling in annoying ways
Would like to see you struggle with WCAG 2.1
And remember: the specifity of :is is 0
Awesome thanks ❤️
Although this does point some pretty nice features, i would say most of these are really niche, and almost never used in production, hence why nobody knows about them. Most of these are redundant since nowadays nobody uses plain html, but rather some sort of templating.
I am not trying to be a hater, i really like your content, but i think as an educator you should somehow point out to those that are just now beginning that some stuff, while cool, should not be used in production. Keep up with great work!
.flex > *:last-child is unnecessary, enough .flex > * + * { margin-left: 10px; }
Looking forward to gap support :)
I rarely hit like on youtube videos but yours always compel me to do so
Thanks Kyle!
thank you so much! super informative video👍
12:22 now Safari supports it as well
Your videos are always so useful.
Why do I find this so entertaining 🤯
Did it blew your mind when you first see it?
Awesome video!
Actually for the flex trick without gap, I set margin to half the gap I want, if I dont want there to be a padding on the exterior then the flex element itself gets a padding of minus half the gap, that way they're all even without having to do the last child trick
Thx for sharing this
@@manuelcasares7270 Absolute pleasure, always fun to have tricks that play well with wrapping
You can also use
.child + .child {
margin-left: 1rem;
}
It works like a charm. Margin-top works too
@@JoaoPedro-qt7dc That breaks in multi line though
33 seconds in and i already subscribed
why not to do "li li { blablabla }" instead of using ":is"? :)
WOW! The thing about gradient is awesome. Thank you!
Great video! Thank you!
Why did you comment out the code in 5:36?
Is it because of a specificity issue? How specific is the :is() selector?
:is has no specificity.
hey can you use counter() in calc() ?
because staggering animations will be so much easy😵
I wish, but you cannot.
Thanks!
Also, what do you play on the Dinky?
(Edit: I have a circa '98 Jackson Performer PS-2)
This is gold.
Thanks
This really have blown my mind. 👀
You blow my mind 🙂
or use attr html tag to make a hacky tooltip hover? saves on all the extra css
5:15 - ? ... CSS: li li { ... } , man.
Or you go .flex > * + * {margin-left: 10px;} so you don't need to deal with :last-child, but gap is definitely nicer.
You can use gap with lobotmized owl:
.flex * + * {
margin-left: 10px;
}
Awesome as always 👍😀
strangely that "left: 50%" works for button but doesn't work for things like
Talking about tooltip: What's the matter with good old "title"?
Have you ever made a functional todo list with ONLY css? (so no javascript at all?). It's possible.
It sounds like a fun challenge, but for real - unnecessary idea))
For Safari mobile, this should work:
.flex:nth-child(n+2):nth-last-child(n+2){
margin-right: 10px;
}
can we make some sort of data visualization using conic-gradient and css variables?
Quality tips!
How do you wrap the flex items in a single div and the first item in each row marginLeft: 0 and the last item has marginRight: 0?
Regarding his cheatsheets: theyre legit. They make some funky parts of css very clear, connecting some dots in very nice visual ways. Ive seen it worse explained in $50 books. In fact, I wonder... @kyle: are these cheatsheets licensed for use in schools by teachers?
Nice video but is there any performance impact?
I doubt, as these are new features they try to always bring optimal solutions
This is awesome
Will you make a tut on game development
Does anybody know @dev ed
That would be great
@@gamewebdevchannel3116 yeah
The is selector is cool. But the css could have just been li li and it would get all nested li's no matter how deep. Am I wrong?
Tool tip- i wish you can do that with dropdown menu
14:24 Why is there a black line between green and blue?
About tooltip, how u gonna put tooltip below button if button on top of page?
Please make video on mern/react google classroom clone.
Subbed
wonder if there is a rng function... one could use cirular gradient and that to animate some kind of spoke of retro snes era smoke effect or something hmmm..
“Drop some cheap sh*t” 😂
Make tutorial on how to create code generator.
Eg: css or js code generator
Irony being that Safari added flex gap support on just about the same day this video came out.
You're a fking genius, omg I just need some more videos like that srzl. Amazing content!!! Love you
Why I can't use :is( ) in css???
Mere days after recording this video the flexbox gap property became supported on Safari and Safari iOS (caniuse.com/flexbox-gap): released April 25th…two days before this episode dropped :p
Change the tooltip hover, I tried for a project but I didn't manage to change the css. I assumed it wasn't native html but a part of the bootstrap I was using, so I stop.
I want to use a css preprocessor and use all the newest css tools, is there a tool what will let me use all the new css then compile it down to cross browser supported css?
just use webpack
Does it only work on buttons ? i tried to an img and didn't show up the text
I don't understand the is ul ol section very well. Why did you have to repeat is:(ul, ol) twice?
Was this video just to show that you can do these things in css now OR another purpose? Yes you did say “traditionally you could only do with js” but I’d say that I’d still do it in js because it’s simpler to do in js. There’s this weird culture where devs make things more complex than they need to be & I don’t understand it 🤷🏻♂️ To be fair, each way of doing things can be done 100 different ways in both css & js BUT if I’m being honest there is a place & time for each as well as being better in one or the other.
Hold up hold up, ima just watch this again to make sure I completely understand the point before I comment again.
so you probably like Houdini? Its made in css because the layouting engine is faster than the script engine.
@@CathrineMacNiel I mentioned nothing about speed. I stated my preference based on simplicity. In a simple app the speed differences are negligible. You can make your argument if we’re discussing complex web apps.
@@Digital963 so it's simpler to pull several DOM operations causing several redraws than to simply write some lines of css instructions?
@@CathrineMacNiel yep! It’s waaaaaayyyyyyyyyyyy simpler to write any of these examples in JavaScript. Any other pointless questions?
I don't like CSS counters. In my opinion we should keep apart models and views. OL tag is enough for this purpose. This is a reason why most text and style formatting attributes and tags were deprecated in HTML5, right?
you are great.
Can you say Cheatsheet once more please :D
I just want the browsers to put the full print specifications in 😭
You've caught a bit of sun 🌞
Make an extension for VScode like "SimplyKyle" which will automatically simplify code and offer alternatives with explanations, some kind of study assistant :D that would shake the IT study ground 100% guaranteed :D
Safari added support for Flexbox gaps 4 days after this video, guess someone's watching :)
Believe me I haven't been writing a single line of CSS for almost 1/2 year. Now I'm confused with :before & ::before
Same.
::before is official, :before is now supported in modern browsers
Before with a single ':' was kind of a mistake. A single ':' is meant to be for pseudo classes like hover. ::before is the more accepted way as '::' refers to a pseudo element. It's funny though as :before has more support as it was first. So whichever you'd rather.
"Your job is to simplify the web dev for us, so we like your video, then you ll make money"