Another 5 Must Know CSS Tricks That Almost Nobody Knows
Vložit
- čas přidán 13. 06. 2024
- 🚨 IMPORTANT:
CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS is a vast language with tons of features and it is impossible to know them all. In this video I will be covering another 5 features in CSS that nobody knows but are incredibly useful.
📚 Materials/References:
CSS Only Tooltips Video: • How To Make Tooltips W...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:32 - attr
02:28 - BONUS: Transform Positioning
03:57 - :is
05:56 - Counters
10:59 - Flexbox Gap
12:35 - conic-gradient
#CSSTips #WDS #Top5CSS
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!
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 👍
Out of all the coding channels on CZcams, 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!
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 :)
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;
}
conic-gradient - W-O-W !!!
That really looks like a cone! :)
I love these videos, u can literally make as many of them as you want and we'll still watch them 😉
Same
way to go! you do have tricks up your sleeve! thanks for posting these.
conic gradient property is very cool. I will use this in my future projects. Thanks Kyle
Goog job, this css tricks are simplified ! Thanks !
This is nice stuff learning new things really makes you love and appreciate more in coding
Next video: how to fetch a document from mongo db using only CSS
thank you so much! super informative video👍
You're amazing! Thank you for your service. I also like your guitar haha
Another great video!
Flexbox was such a game changer for me. I have been using gap for personal projects because it is just so darned easy.
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!
Your videos are always so useful.
Great video! Thank you!
awesome, and at the end, you're real my online mentor
Amazing as usual.
Awesome thanks ❤️
Awesome as always 👍😀
These are great, Thank you. Any idea how these effect accessibility? For example, the counter?
Your video really helpful
Awesome video!
I don't normally learn a new property in videos like this but I love counter() and never new about counters()... 🤯
Thanks Kyle!
Quality tips!
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
Last year get to know counter from an interview and i am amazed
The counter literally blew my mind 🤯
This is awesome
I rarely hit like on youtube videos but yours always compel me to do so
Thanks!
Also, what do you play on the Dinky?
(Edit: I have a circa '98 Jackson Performer PS-2)
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.
This is gold.
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
You blow my mind 🙂
33 seconds in and i already subscribed
Looking forward to gap support :)
Thanks
flex gap really wow .. You just saved my life.
This really have blown my mind. 👀
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.
You're a fking genius, omg I just need some more videos like that srzl. Amazing content!!! Love you
Why do I find this so entertaining 🤯
Did it blew your mind when you first see it?
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.
can we make some sort of data visualization using conic-gradient and css variables?
The :is() selector has a lower level of specificity I believe, so you should be careful when using it!
12:22 now Safari supports it as well
Subbed
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!
you are great.
until flex gap has wide compatibility, you can save a bit of code by using:
.flex > :not(:last-child) { margin-right: 5px }
hey can you use counter() in calc() ?
because staggering animations will be so much easy😵
I wish, but you cannot.
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?
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
About tooltip, how u gonna put tooltip below button if button on top of page?
Would like to see you struggle with WCAG 2.1
And remember: the specifity of :is is 0
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.
or use attr html tag to make a hacky tooltip hover? saves on all the extra css
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
14:24 Why is there a black line between green and blue?
5:15 - ? ... CSS: li li { ... } , man.
Does it only work on buttons ? i tried to an img and didn't show up the text
Nice video but is there any performance impact?
I doubt, as these are new features they try to always bring optimal solutions
Please make video on mern/react google classroom clone.
You can use gap with lobotmized owl:
.flex * + * {
margin-left: 10px;
}
“Drop some cheap sh*t” 😂
Make tutorial on how to create code generator.
Eg: css or js code generator
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
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.
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..
Tool tip- i wish you can do that with dropdown menu
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
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.
For Safari mobile, this should work:
.flex:nth-child(n+2):nth-last-child(n+2){
margin-right: 10px;
}
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!
why not to do "li li { blablabla }" instead of using ":is"? :)
WOW! The thing about gradient is awesome. Thank you!
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?
Will you make a tut on game development
Does anybody know @dev ed
That would be great
@@gamewebdevchannel3116 yeah
strangely that "left: 50%" works for button but doesn't work for things like
Bad ass
Or you go .flex > * + * {margin-left: 10px;} so you don't need to deal with :last-child, but gap is definitely nicer.
Irony being that Safari added flex gap support on just about the same day this video came out.
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?
Why I can't use :is( ) in css???
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))
.flex > *:last-child is unnecessary, enough .flex > * + * { margin-left: 10px; }
Talking about tooltip: What's the matter with good old "title"?
Flex gap just dropped in Safari - caniuse hasn't updated yet. :)
This is a really good new
Can you say Cheatsheet once more please :D
😮😮😮
"Your job is to simplify the web dev for us, so we like your video, then you ll make money"
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
Next video title:
Language almost nobody really knows ... _CSS_
Super Super Super
8:35
*Does his Chrome refresh itself?*
Or he just Ctrl + R it?
it's a feature like "Hot Reloading", most JavaScript framework have this kind of feature. When you hit "save" after editing the file it instantly reloads the browser for you.
@@daleryanaldover6545 is the "Hot Reloading" thing can be a Chrome Extensions?
@@arkusss its actually an extension of vscode called live-server. See in VScodes statusbar on the right side, you see "Port: 5500" that's live-server. And no, it can't be a chrome extension, as chrome has no access to the server.
@@CathrineMacNiel okay okay thank you very much. This is so helpful.