Another 5 Must Know CSS Tricks That Almost Nobody Knows

🚨 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

[@4499664]

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.

[@WebDevSimplified]

Good point. I didn't think of that.

[@subhasvj7260]

Bro 👍

[@nicolas.chauvet]

After 20 years of battling with css, I'm starting to love it!

[@shaderone07]

Whoa!! 20years ...

[@nicolas.chauvet]

@@shaderone07 I'm not so old, CSS is 25 years old!

[@lelandhamza9245]

i guess it is kind of off topic but does anybody know a good place to watch new series online ?

[@nikoaldo4394]

@Leland Hamza i use FlixZone. Just search on google for it =)

[@ethanarjun3798]

@Niko Aldo Yea, I've been watching on Flixzone for months myself :)

[@mrbjjackson]

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!

[@nevadadimitri4153]

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; }

[@devashishbahri3353]

Out of all the coding channels on KZbin, 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!

[@lbobrov]

conic-gradient - W-O-W !!! That really looks like a cone! :)

[@Krokodil986]

I love these videos, u can literally make as many of them as you want and we'll still watch them 😉

[@deansprivatearchive]

Same

[@brianevans4]

Next video: how to fetch a document from mongo db using only CSS

[@alihasnain8097]

conic gradient property is very cool. I will use this in my future projects. Thanks Kyle

[@parahumanoid]

way to go! you do have tricks up your sleeve! thanks for posting these.

[@willianandrade1357]

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!

[@scotthclay]

These are great, Thank you. Any idea how these effect accessibility? For example, the counter?

[@sweetpotatoS2]

thank you so much! super informative video👍

[@Z3ROR]

Why not making those flex gaps like this: .flex > * + * { margin-left: ... } You wont need that lastchild thing then.

[@WebDevSimplified]

Good call!

[@awekeningbro1207]

also .flex > *:not(:last-child) {...} works

[@mauricemakesmovies]

You're amazing! Thank you for your service. I also like your guitar haha

[@cmtg4471]

This is nice stuff learning new things really makes you love and appreciate more in coding

Amazing as usual.

[@CodeWithTomi]

Another great video!

[@theresamclaird1572]

Flexbox was such a game changer for me. I have been using gap for personal projects because it is just so darned easy.

[@AmodeusR]

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.

[@radekpiekny2837]

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.

[@user-cq3hr5op5q]

Goog job, this css tricks are simplified ! Thanks !

[@sanjibchanda21]

Awesome thanks ❤️

[@Hangoutapp]

Your video really helpful

[@saghait]

awesome, and at the end, you're real my online mentor

[@ZacharyDuvallT]

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

[@noozzoo5152]

Thanks! Also, what do you play on the Dinky? (Edit: I have a circa '98 Jackson Performer PS-2)

[@rangabharath4253]

Awesome as always 👍😀

[@scribblingjoe]

Your videos are always so useful.

[@basix250]

The counter literally blew my mind 🤯

[@saurabhfegade3713]

Quality tips!

[@IAmSamuelCharpentier]

The :is() selector has a lower level of specificity I believe, so you should be careful when using it!

[@eddier.6749]

Great video! Thank you!

[@rb7997]

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!

Thanks Kyle!

[@zigaudrey]

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.

[@Maruth]

Last year get to know counter from an interview and i am amazed

[@andreaskarz]

You blow my mind 🙂

[@awekeningbro1207]

can we make some sort of data visualization using conic-gradient and css variables?

[@ZackPyle]

I don't normally learn a new property in videos like this but I love counter() and never new about counters()... 🤯

[@m2kdevelopments]

Awesome video!

[@JulienReszka]

This is awesome

[@nirke_]

until flex gap has wide compatibility, you can save a bit of code by using: .flex > :not(:last-child) { margin-right: 5px }

[@iakhimsh375]

This is gold.

[@nirmesh44]

This really have blown my mind. 👀

[@KrishnaKumar-jr7qq]

flex gap really wow .. You just saved my life.

[@luissutil9595]

33 seconds in and i already subscribed

[@sapindersingh1165]

I rarely hit like on youtube videos but yours always compel me to do so

[@mohamedamin7326]

Thanks

[@qwerty-wk4pz]

You're a fking genius, omg I just need some more videos like that srzl. Amazing content!!! Love you

[@KaroCodes]

Why do I find this so entertaining 🤯

[@rafaelmenna8384]

Did it blew your mind when you first see it?

[@funnehhhh]

Subbed

[@papanokiss]

Looking forward to gap support :)

[@lumiuko]

12:22 now Safari supports it as well

[@fahad.hossain]

you are great.

[@peterpiper3291]

About tooltip, how u gonna put tooltip below button if button on top of page?

[@arctan2]

hey can you use counter() in calc() ? because staggering animations will be so much easy😵

[@WebDevSimplified]

I wish, but you cannot.

[@yamogebrewold8620]

Why did you comment out the code in 5:36? Is it because of a specificity issue? How specific is the :is() selector?

[@CathrineMacNiel]

:is has no specificity.

[@carterjm]

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?

[@tylovset]

I'm a c/c++/python developer, but love these videos none the less. Soon time to do some js css coding I guess...

[@gamewebdevchannel3116]

Ok

[@awekeningbro1207]

Ok

[@whatthefunction9140]

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?

[@CathrineMacNiel]

just use webpack

[@DasBauer]

Would like to see you struggle with WCAG 2.1 And remember: the specifity of :is is 0

[@ioratv]

14:24 Why is there a black line between green and blue?

[@johncena-qr4yg]

Make tutorial on how to create code generator. Eg: css or js code generator

[@iury664]

Does it only work on buttons ? i tried to an img and didn't show up the text

[@ThePaulohubert]

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.

[@leofun01]

5:15 - ? ... CSS: li li { ... } , man.

[@TurtleKwitty]

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

[@manuelcasares7270]

Thx for sharing this

[@TurtleKwitty]

@@manuelcasares7270 Absolute pleasure, always fun to have tricks that play well with wrapping

[@JoaoPedro-qt7dc]

You can also use .child + .child { margin-left: 1rem; } It works like a charm. Margin-top works too

[@TurtleKwitty]

@@JoaoPedro-qt7dc That breaks in multi line though

[@whynot9963]

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!

[@noozzoo5152]

For Safari mobile, this should work: .flex:nth-child(n+2):nth-last-child(n+2){ margin-right: 10px; }

[@superchrishovids]

or use attr html tag to make a hacky tooltip hover? saves on all the extra css

[@confushiarch3421]

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..

[@jcubic]

You can use gap with lobotmized owl: .flex * + * { margin-left: 10px; }

[@grzegorzt]

.flex > *:last-child is unnecessary, enough .flex > * + * { margin-left: 10px; }

[@joelqrq]

Nice video but is there any performance impact?

[@Endrit719]

I doubt, as these are new features they try to always bring optimal solutions

[@zakuguriin4521]

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.

[@sayamqazi]

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.

[@huevitofeliz]

Why I can't use :is( ) in css???

[@gamewebdevchannel3116]

Will you make a tut on game development

[@gamewebdevchannel3116]

Does anybody know @dev ed

[@snehalambatkar9910]

That would be great

[@snehalambatkar9910]

@@gamewebdevchannel3116 yeah

[@susmitdas]

Please make video on mern/react google classroom clone.

[@jonasboardwalker]

“Drop some cheap sh*t” 😂

[@Matalina]

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?

[@hineko_]

strangely that "left: 50%" works for button but doesn't work for things like

[@nikolaymatveychuk6145]

why not to do "li li { blablabla }" instead of using ":is"? :) WOW! The thing about gradient is awesome. Thank you!

[@xdiepx]

Tool tip- i wish you can do that with dropdown menu

[@jasonlough6640]

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?

[@MultiMigh]

Or you go .flex > * + * {margin-left: 10px;} so you don't need to deal with :last-child, but gap is definitely nicer.

[@arkusss]

*Does his Chrome refresh itself?* Or he just Ctrl + R it?

[@daleryanaldover6545]

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.

[@arkusss]

@@daleryanaldover6545 is the "Hot Reloading" thing can be a Chrome Extensions?

[@CathrineMacNiel]

@@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.

[@arkusss]

@@CathrineMacNiel okay okay thank you very much. This is so helpful.

[@axiezimmah]

Have you ever made a functional todo list with ONLY css? (so no javascript at all?). It's possible.

[@StrikerFeed]

It sounds like a fun challenge, but for real - unnecessary idea))

[@c__beck]

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

[@filthymitch]

Flex gap just dropped in Safari - caniuse hasn't updated yet. :)

[@manuelcasares7270]

This is a really good new

[@a.anvarbekov]

"Your job is to simplify the web dev for us, so we like your video, then you ll make money"

Talking about tooltip: What's the matter with good old "title"?

[@chocodil2]

Next video title: Language almost nobody really knows ... _CSS_

[@ScaramoucheFandango]

You've caught a bit of sun 🌞

[@denzel420]

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

[@colinm3130]

Irony being that Safari added flex gap support on just about the same day this video came out.

[@ScaramoucheFandango]

I don't understand the is ul ol section very well. Why did you have to repeat is:(ul, ol) twice?

[@dooddotjs3910]

.WDS[data-is-cool="yes"] { display: block; }

[@ChrisAthanas]

Bad ass

[@bvaroni]

Can you say Cheatsheet once more please :D