5 EXCITING New CSS Features That You NEED To Know

Courses - slayingthedragon.io
Here are 5 EXCITING new CSS features that you NEED to know!
Thumbnail CSS icon from icons8.com/
0:00 Intro
0:39 Container Queries
4:02 Has-Selector
6:46 Cascade Layers
8:52 Subgrid
10:37 Comparison Operators

[@anton9410]

Subgrid is a game changer, appreciate your well paced content 👍

[@ahmedabdelaalweb]

The comparison operators are such a simple but long overdue addition. I don’t know why it took me so long to wrap my head around the old wording. Great stuff man. Thank you for all the time and effort

[@SamuelGfeller]

OMG I was so hyped for the container queries, I immediately knew where I could use them. I wished that something like this would exist and couldn't believe it did not when I searched, but it does exist, It's just too new to use, but man am I looking forward to it. It will greatly improve the quality of my responsive web designs.

[@slayingthedragon]

Absolutely !! We just need Firefox to add support for it and we'll be good to go :p

[@dieselvin592]

Let me see your work,haha

[@rockertechs1117]

​@@slayingthedragon Your channel is a blessing for web developers using CSS 🤌🏻✨

[@Harlem1991]

A great video. One of the best most straightforward videos I have seen. I look forward to seeing more.

[@slayingthedragon]

Thank you ☺

[@davidallred991]

Great videos, you use good examples and pace your explanations really well. Subbed

[@rickeisner]

Excellent tutorial. And several extra points for the measured clarity of your voice: very easy to understand! Thanks!

[@slayingthedragon]

Thank you :) !!

[@danderbunkle1721]

Keep up the great work. I've learned a lot from these videos. Very well done.

[@juliusbusiness4283]

Thank you for posting these kinds of simple but straightforward videos.

[@fatehaligolani7751]

Excellent video! Your video was to the point and engaging. Everything was explained very clearly. And I learned a lot. Thank you so much. Keep it up!

[@slayingthedragon]

Honored that you learned something, thank you so much !

[@joep1131]

very good inside and also good effort to make it readable ! thanks

[@atilagamasilva508]

Thank you so much for your videos! Great content! It helped me a lot to properly deal with CSS and HTML.

[@briankgarland]

Finally a clear explanation on container queries and subgrids. Thanks!

[@RikThePixel]

This was lovely! Really well made dude!

[@slayingthedragon]

Thank you ☺️

[@anouar9259]

thank you i was looking for respensive way great content keep going you are amazing

[@theresa_arethuza]

Just found your video, and I love it, keep up the good work~!

[@slayingthedragon]

Thank you ☺️☺️

[@shineLouisShine]

Awesome content! keep on and on and on.. And shine on!

[@GameProgrammer79]

very useful tips. .subscribed. please keep these coming

[@skinnyPH.]

Wow... Really great video and content, i'm glad that youtube recomended it to me !!

[@slayingthedragon]

Thank you so much ☺️

[@streamxprimium3103]

please come with more content like this.. it is truly very awesome

[@coil8906]

Immediate sub. Efficient, attractive, succinct, and valuable content. Please please continue. Your channel will be (and already is) an invaluable resource. Keep on this way.

[@slayingthedragon]

Wow thank you sooooo much ☺️ !!

[@luismiguelescobarfalcon9812]

Yout contents are awesome. Thanks a lot!

[@vedymin7]

Immediate sub. Also watched about css animations. Best explanations ever! Thank You, keep doing content please! I like this music :)

[@bigpoppa6658]

One minute into the video and I already subscribed to your chanel. Great work mate

[@slayingthedragon]

Thank you 😁

[@licokr]

Subgrid, wow... that's so cool. Great Video!

[@slayingthedragon]

Thank you ☺️

[@Bekizkez]

Amazing! thank you for the video

[@ontheruntonowhere]

Great job! Keep them coming, subscribed.

[@slayingthedragon]

Thank you :)

[@HealmaTech]

Wow, clear, direct to point and wonderful voice. Keep it up, You Are Good!

[@slayingthedragon]

Thank you so so much !

[@sanmeetsingh4538]

Simple explanation and use cases ... Just awesome 😊

[@slayingthedragon]

Thanks :)

[@giacomo1215]

Good video and really interesting stuff. Keep it up!

[@slayingthedragon]

Thank you ☺️

[@sayanghosh6996]

you are good, providing quality (not just flair like some channels) content. i subscribe

[@slayingthedragon]

Thank youuu 😊

[@joshuamorley6051]

Awesome video, it's encouraging me to get good at frontend!

[@slayingthedragon]

Thank you thanks awesome !!

[@shubhamdhiman7516]

Thankyou for such amazing information. Subgrid is amazing.

[@yashwantsahu3198]

Great insight 👍🏼 👏 👌🏼 🙌

[@Bot-lj6nu]

Your video are so op and straight forward. Keep making more of those

[@slayingthedragon]

Thank you 😁

[@mambi74]

wow. excellent no-nonsense recap!

[@Lik4nGaming]

Great content. thanks for sharing your knowledge with us.

[@slayingthedragon]

Thanks for watching ☺️

[@bogsp]

nice work.. a lot less fluff than other tutorial videos is good.. hope to see more

[@slayingthedragon]

Thank you !

[@leomacdon7858]

Thank you.. Your contents are beautiful..

[@AbdulRehman-bn1qn]

great work!!!

[@richardleenders9110]

Underrated channel my guy!

[@slayingthedragon]

Thank you so much !

[@kazisadibreza6984]

great video bro. thanks for the information.

[@slayingthedragon]

Thank you !

[@balubalaji9956]

subscribed . thanks for the video

[@abdulrahmanalniema7182]

Great!.. Subscribed..

[@scribbleui]

Good content.. subscribed👍

[@slayingthedragon]

Thanks 😊

[@davidremis9913]

Bro just single handedly solved 99.9% of my problems👌.

[@gautam_vaishnav]

Awesome bro 😍

[@yourchoice5453]

👍 Awesome video!

[@aruncoder]

Pls do a css project for knowing all concept well for beginners

[@hientran1822]

greet video, thanks for sharing your knowledge with us, keep it up man!

[@slayingthedragon]

Thank you 😁

[@amanverma5131]

Great content!

[@davidschaer]

surprisingly good content..! +one sub

[@slayingthedragon]

Thank you !!

[@User-404]

This is a life saver!

[@shawalkabirchy.5437]

Wowww!!! What a tutorial 🤩

[@mrwhispersofficial]

Nice informations ♡♡♡

[@simpleedge]

You’ve got to highlight browser support. :has() isn’t fully supported (very close!) and subgrid’s support is minimal.

[@ssk7690]

keep making these videos man

[@slayingthedragon]

Than you !

[@kennikollemorten4184]

Super awesome video😁

[@slayingthedragon]

Thanks :)

[@luxmiyu]

great video!

[@slayingthedragon]

Thanks ☺️

[@princetajik9319]

really helpful tips, thank you. amazing video. you look cool btw :)

[@slayingthedragon]

Thank you ! ☺️

[@waly92]

Thanx for this content, I've really learned a lot 😁🙏. But the music in the background is a little disturbing, it gave me a headache 😭. I think considering this for your next videos Ill level up your videos quality 😉

[@slayingthedragon]

Thank you so much ! Yea definitely trying out different things see what works and what doesnt, I agree about the music for sure, thanks for the feedback and honored that you learned something !! ☺️

[@asmodeus5506]

Thank you

[@Fully_Coded_]

Excellent

[@Fully_Coded_]

Keep up with the content, i pray for you

[@slayingthedragon]

Thank you ☺️

[@romanthemrb]

You won my support. 😊😊🤝🤝

[@slayingthedragon]

Thank you ! 😃

[@DrNio-sh5mx]

I love this work

[@slayingthedragon]

Thank you 😊

[@rfatunji1043]

Great video tutorial. Can you do a tutorial on html?

[@slayingthedragon]

Do you mean a tutorial about new HTML features or do you mean an actual html tutorial? Thank you btw ☺️

[@aruncoder]

Omg amazing

[@lazycat4349]

What video overlay are you using? And also your background music please.

[@VansElite]

Wow, it was blow my mind xD

[@broadshare]

Subgrid is powerful though browser support is not full yet

[@shutka_nomer]

Awesome

[@jake445]

there's too much to learn, now this makes it even harder for aspiring front end dev who are finding it very difficult to learn and apply the front end technologies.

[@slayingthedragon]

You don't need to learn everything, just learn the fundamentals and everything else can be learned in a need to know basis! Plus a lot of the things covered in this video are not fully supported by all browsers. There's no rush in learning them.

[@blueblue9410]

The ending got me "This is me" xDDD

[@user-mo6yo4kz1m]

is that not him tho

[@florianvanbondoc3539]

Nice video

[@slayingthedragon]

Thank you ☺️

[@williamt.roberts4771]

Are you still doing video tutorials? I find your videos very good, and the presentation excellent.

[@slayingthedragon]

Yes however I'm finishing up my CSS course which is taking up all my time now. Once the course if fully out I'll be releasing weekly videos on KZbin. The course is already out but the chapters are being released incrementally on a daily basis.

[@pritiroy6849]

which microphone do you use?

[@slayingthedragon]

Shure MV7

[@siyedyoussef3202]

You're way of explaining the css topic was great for a new channel #subscribe

[@slayingthedragon]

Thank you 😊

[@RichardCalder67]

The has example is over complicated. Add the border to the card class by default, remove it in the has condition.

[@funtrap2289]

Please do more css content with projects Love from India 🤎

[@minhhoangtran1276]

Are there any ways to make a container overflow-x scroll and overflow-y visible?

[@slayingthedragon]

Is this what you mean? itnext.io/horizontal-overflow-with-flexbox-css-64f530495303

[@minhhoangtran1276]

@@slayingthedragon I meant I want a container to be able to scroll horizontally and when click in an element, it could show a dropdown, which in theory means overflow x should be scroll and overflow y should be visible. I'm clueless about this and haven't found any good answer online 😅

[@slayingthedragon]

@@minhhoangtran1276 Oh, well yea it's definitely possible but there's no short answer. Having a clickable dropdown inside a horizontally scrolling container sounds like something you need to hack your way into making. Does the dropdown follow the button if you're scrolling the button? If so that's not going to be easy. Do you have an example of what your trying to do? Maybe an example from another website?

[@wyvrendragon4175]

What song do you use?

[@slayingthedragon]

I used the melody of a random song from a paid website called epidemic sound. The song is called Helios from Lexica. I don't think you'll find it anywhere else other than on epidemicsound.com

[@HocineKamikaz]

A face reveal 🤣🤣 no one expected that in the end.. Great content like always ❤️

[@slayingthedragon]

Haha thanks 😂❤️

[@HocineKamikaz]

@@slayingthedragon ur wlcm bro keep up the good Content.. I'm really enjoying it although i'm a little bit late

[@Batareika007]

you said that you're new to youtube, but you don't learn from other channels. the Has-Selector - not supporter by firefox and you should mention it before say that "we need to know", for now it's useless (I hope it will support soon). the small sentence or screen shoot from 'can i use' can make a bit different and help to make your video more useful =) thanks for sharing and continue your work !

[@slayingthedragon]

You're not wrong, I will do better in the future ☺️

[@Luxcium]

So I was thinking a lot about your voice and it’s specific… specifically no it’s accent or origins and then I don’t know how it popped into my mind it sounds like people talk in my province but in English instead of in French then I looked at your profile and got surprised 😮 I am from Québec City 🇨🇦 😅😅😅😅

[@slayingthedragon]

Ayy what's up fellow French Canadian :pp

[@9_falcon]

please upload CSS and JS full video needed for web development

[@slayingthedragon]

Both a full course on CSS and JavaScript are on my roadmap of videos to make brother

[@girishanker3796]

Gold ⭐

[@saugat746]

How do you move the selected text? Like in 8:34

[@slayingthedragon]

Damn this is a hard video too watch, surprised you made it this far lol, anyways just press and hold the alt key on your keyboard

[@saugat746]

@@slayingthedragon haha I just need to ask more

[@SivaxReddy]

Does chrome and other browsers support these ?

[@slayingthedragon]

Container Queries are supported in major browsers except Firefox but support for Firefox is coming. Has-selector is also supported in major browsers except Firefox but support for it is being worked on. Subgrid is supported in only Firefox and Safari but others browsers are adding it soon. Cascade layers are supported on all browsers. The Media query range operators are supported on all major browsers except Safari

[@alexandreevich2278]

Container queries support is only 73% (flex for ex. 99.74). Technology support does not allow you to use this in production.

[@stbuchok]

If you have a public facing site and want it to cover the most number of browsers, sure, don't use it. But everyone seems to forget about internal tools and sites where controlling what browser can be used is easier.

[@martinmengh]

the old web really wasn't that bad. perceived improvement mostly from increased bandwidth. the web ui actually got worse in many respects in recent years

[@JawsoneJason]

Except Subgrid is still not supported in Chrome :(

[@slayingthedragon]

Yea, let's hope they'res more support next year :/

[@JawsoneJason]

Here's hoping!

[@Trevi4kochannel]

Make your own discord

[@slayingthedragon]

I'll think about it !

[@amdjed_mijoukh]

it doesn't look like its your voice

[@slayingthedragon]

Compared to my newer videos you mean? I just improved how I speak over the microphone over the months of releasing videos

[@amdjed_mijoukh]

i mean't compared to your face, but gj your video are very informative.

[@amdjed_mijoukh]

can you do a video about color please and talk about solid gradient linear and other color property. ty

[@MyDpop]

get rid of the annoying background music please. 🙏 So I can also follow your channel without getting a headache. 👍

[@slayingthedragon]

👍

[@AliHusnain01]

can't understand 😒 because its not in urdu

[@slayingthedragon]

I'm sorry.. I'm Canadian

[@TheDiveO]

nope, don't "need to know" advertising channel

[@user-dk7hr1ss1j]

the background music is so annoying and distracting, and the fact that it has stereo effects just worsens it

[@AungBaw]

Now CSS is Turning complete ?