Yet 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 Grid Video: • Learn CSS Grid in 20 M...
@supports Video: • How To Use Modern CSS ...
🌎 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:33 - clamp
02:25 - subgrid
05:28 - @supports
07:22 - Scroll Snap
09:04 - Logical Properties
#CSSTips #WDS #Top5CSS

[@camtelle557]

The clamp properties is amazing for adding responsive text to your website. Rather than manually changing the font size at different port sizes, clamp will smoothly change the text for you, I love it! It's transitions nicely too, no more sudden font size changes.

[@whoozy1555]

I love this series because you can learn so much useful stuff!

[@mariojagger7975]

I guess Im pretty randomly asking but do anybody know a good place to stream new movies online?

[@fanyinU]

Wow, THANK YOU Kyle! I didn't know those CSS before. Learned something new today.

[@ed1nh0]

Dude you nailed it! So much usefull stuff in just a few minutes. Always thumb up to you! Thanks mate!

[@IshanKesharwani]

This was such an insightful video

[@vedangkavathiya8652]

I love your videos ❤️ they are really helpful 👍

[@avaplain9505]

wow thanks for your amazing work! the sheet is awesome !!!

[@TomDoesTech]

Another great video in an awesome series, thank you son much :)

[@jenstornell]

Brilliant! Make more of these.

[@szpaklabs8893]

thank you! always good to know new insteresting features

[@clevermissfox]

@supports is one I’ve never heard of and is so so valuable !!! That’s amazing thank you!

[@techwake360]

Thank you very much for sharing valuable things with us

[@talalalam2621]

great cheat sheet man, thanks a lot.

[@christianmarquez6365]

Thank you so much for your videos!!!!

[@abhijeetnigam2630]

You are just awesome. Can you please create a video or tutorial on angular, jasmine, karma ?

[@johnkeck]

Another good video with helpful tips, thanks! I'm just wondering why/when writing text in different orientations is going to become so pervasive that this new syntax will change everything, especially when the parameter names are so long and awkward. But I can see it will be helpful in contexts where internationalization/localization is key (i.e., supporting Arabic and Hebrew language versions of a site).

[@franco-cespi]

What's the noise on 10:48? Creepy. Amazing content btw! 💪🏼

[@dariorey8092]

Thanks for the Timestamps!! Great Video!!

[@ayushdedhia25]

Love your videos ❤️🔥🙏

[@lakhveerchahal]

Thanks as always for teaching

[@oumardicko5593]

Him: ...when it will be available on all the browsers Safari: you sure about that ? 👀

[@jatinkukreja18]

These videos are so good😻

[@SirXtC]

chrome updated its inspect elements for flex and it shows some pretty cool icons to play with

[@kablamopow]

I did notice that recently, pretty cool

[@abdulazizmahmoud6263]

So wonderful of you 👍

[@voidmind]

The firefox dev tools are so great when you are working with grid and flexbox

[@VXTivkot]

tank you man awesome

[@tiagocreed]

Omg! excellent class about CSS

[@Sammorris207]

Thanks Kyle!

[@rahimco-su3sc]

your video are amazing !!

[@ukaszzbrozek6470]

This paddings rules are in use for a while. Some languages are read form right to left. The good practise is to inverse layout of the website when such language is selected. Programer need to think about it ahead to write CSS that can adjust.

[@Barnardrab]

Do you think scroll snap would be useful for a vector graphics modeling web app? Let's say, the user is working with points to connect lines and curves and they need precision.

[@suryapratapsingh5149]

Please make some video on how to create a cross JS framework component . Like use React component in Ember JS or in Angular JS

[@chinoyeochonogor7838]

Very helpful

[@Ivoshevo]

You teach so well enough for me not to even buy your courses again. Thank you very much for this tips :)

[@chezchezchezchez]

U da best Kyle!

[@lucaspiputto633]

Best series

[@kablamopow]

The last tip is very useful

[@ChungKang]

Hi Kyle, I just saw your Bootstrap to use or not to use... what do you think about Tailwind CSS??? Better to do plain CSS?

[@092_deepak_kumar3]

Isn't Tailwind just a bunch of templates?

[@DocDarkLord666]

Flex box is cool, but subgrid would be so nice to have universally

[@agu4071]

thanks!

[@arnavkanaujia3244]

Can you make a video on anime js or three js 😄😄

[@blackpurple9163]

Great thing about the cheat sheet is it's got files for both light and dark mode

[@whatthefunction9140]

If I use sass and subgrid will it compile down to something that works on all browsers?

[@thedeveloper4207]

Obviously

[@mmaranta785]

What editor do you use?

[@cytuber]

He's using VSCode (without any fancy themes)

[@adrihm8165]

Merci

[@manuelcasares7270]

But there are several browsers that doesn't support @supports :(

[@yadavdhakal2044]

What to do if the browser doesn't support @support syntax?

[@AnthonySherritt]

Completely new to me. 🤯

[@joeldcanfield_spinhead]

Clamp for borders. Booyah.

[@MiguelFelipeCalo]

Please note to always check if it works on ie, if you need to cover xbrowser compat.

[@krtirtho]

Content was amazing but audio was kinda lower than usual

[@calvinkoay1939]

Your tutorial provides me a brilliant guide on my first college lab task on web development, topic HTML and CSS. You know, I watched this while coding for my lab work before times up.

[@averstrum6372]

display contents is how I get around most subgrid issues.

[@IceMetalPunk]

The irony of @supports is that Safari... doesn't support it 😂 And with iOS's market share, that's worth noting.

[@blackpurple9163]

Well I guess I'll notify them to switch to something better than that the next time some element on my website doesn't work as it should because it detects the safari browser. That should let the user know why it looks different across different browser right?

[@cerealrakist7360]

So webkits won’t allow sub grid to work on browsers either?

[@KunalSinghh]

Google Chrome summit had the writing mode ... interesting content ❤️

[@SkuezTech]

damn, we need babel but for css haha

[@LabhamJain]

Knew about all of these before :laughing with tears:

[@marvelouswalrus949]

Now you know all of these ::after.

[@LabhamJain]

@@marvelouswalrus949 content: 'yes';

[@minnuss]

CLAMP for the win ! :P

[@Barnardrab]

I tried clamp with a th and td element, but nothing happened. I had to change it back to max-width. Here's my exact code: headerCell.setAttribute("style", `clamp(${rowConfiguration.columnWidths[index]}px, ${rowConfiguration.columnWidths[index]}vw, ${rowConfiguration.columnWidths[index]}px);`); footerCell.setAttribute("style", `clamp(${rowConfiguration.columnWidths[index]}px, ${rowConfiguration.columnWidths[index]}vw, ${rowConfiguration.columnWidths[index]}px);`); footerElement.setAttribute("style", `clamp(${rowConfiguration.columnWidths[index] - 40}px, ${rowConfiguration.columnWidths[index] - 40}vw, ${rowConfiguration.columnWidths[index] - 40}px);`);

[@theepicgamer1196]

Every time you have your camera full-screen, I always look at that beautiful Jackson electric guitar.

[@ChungKang]

cool!

[@schizoramen]

clamp is op

[@6848811]

More Unknown CSS properties videos

[@6848811]

I'm asking for more **

[@Downbo435]

I am understanding.

[@cerealrakist7360]

I guess I’m just old school because I don’t see how the last one will make such a big difference. It’s just as easy to say padding right or margin right and input the value as it is to do the new one .

[@ContinuumGaming]

I would just not use a function that is not supported by the major browsers yet. Doing checks and working with work arounds is a lot more trouble especially if you have a working workaround for everybody. In general I do not like Chrome much (Google... data protection, monopolistic behaviour, etc. it is just the worst thing that could win the browser war) so I do not care much, but still... it feels like IE6 with little forced errors to bring down interpretation for things a specific browser while keeping it at another again.

[@user-ik7rp8qz5g]

From the historical look of subgrid, we should not expect it to be in chromium browsers at all (which means we never get to use it in real sites). This feature is under development for so many years with no progress at all and no sign of it coming closer to being finished.

[@alexey-ym]

- This final property is going to change the way that we write css - No, it's not Everything else is usefull, thank you

[@iamacyborgbutthatsok1334]

I am in love with your voice!

[@thetrends5670]

ME: Watching this video who even don't know CSS

[@elle9834]

Am i the only who thinks your voice sounds somewhat rough today. Kyle are you okay?

[@JulienReszka]

probably lost bunch of money on the crypto markets

[@KRock921]

@@JulienReszka We all did :(

[@peshotod]

Clamp does not work on Safari and Edge

[@niteshkhatri6224]

Video volume is not to loud, specially if we are listening on phone speakers.

[@ChanyArpin]

The property on the thumbnail doesn't exists, it should be padding-block-start.

[@WebDevSimplified]

🤦‍♂️

[@ChanyArpin]

@@WebDevSimplified Are you alright?

[@EmilYOo0]

i am the only one whos confused why @support doesn't support in IE? this is where i need it the most XD

[@nilpo]

IE. If you're coding for IE you need more than that! This is 2021.

[@EmilYOo0]

@@nilpo lol. ok let my explain: im not coding for ie cause I want to. where I work as a *web developer*, some of our clients needs specific products to be built to support on ie for several of reasons which I'm unaware of. trust me, I know it's 2021 but part of my job is to solve problome even if that's ie. ☺️ have a good day!

[@nilpo]

@@EmilYOo0 My guess is they have some crazy legacy ActiveX stuff they are trying to keep using. Real world IE usage is almost non-existent now (and it couldn't come soon enough!)

[@EmilYOo0]

@@nilpo well, its like 10‰ of our clients.. still k, thought, the @suoprt would be nice to feature on ie.

[@YanasChanell]

I'm writing some robust fallback code for ie, then I'm adding @support and now I write a modern code. Or do you need to write a code for different ie versions?

[@lbobrov]

2ndddd

[@uaplatformacomua]

🌺👍🙋‍♀️

[@JulienReszka]

the incomplete subgrid is so uncomfortable to watch 😅

[@balajiravi9259]

Don't use these gap, clamp() this two are not supported in all browsers. Instead @support() as fallback for those properties. You can check this with caniuse.com

[@hafizhuseynov6055]

My friend, the videos are super. But when you speak, you speak monotonously. It would be great if you could use a slightly more exciting, motivating, accentuated tone of voice.

[@donniedamato]

The text in your thumbnail is wrong. There's no such thing as padding-block-top

[@bradyfractal6653]

This clickbait shit is so obnoxious- it’s too bad people are so dense that they reward it.

[@LunarRed]

So to be clear, “padding-block-top” that you show in the thumbnail is NOT valid CSS, right? Why would you make that the thumbnail?!?

[@nilpo]

Another misleading click bait title. No surprise there.

[@perkin524]

But I wish you wouldn't speak so fast...

[@aakarshitrekhi8071]

please increase volume of your videos otherwise they're awesome

[@alexmahone501]

14 dislikes. Seriously?