5 EXCITING New CSS Features That You NEED To Know

Рет қаралды 37,977

Күн бұрын

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

Пікірлер: 163

@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

@anton9410 Жыл бұрын

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

@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 🤌🏻✨

@davidallred991 Жыл бұрын

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

@briankgarland Жыл бұрын

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

@juliusbusiness4283 Жыл бұрын

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

@Harlem1991 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you ☺

@danderbunkle1721 Жыл бұрын

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

@shineLouisShine Жыл бұрын

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

@joep1131 Жыл бұрын

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

@rickeisner Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you :) !!

@atilagamasilva508 Жыл бұрын

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

@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

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

@luismiguelescobarfalcon9812 Жыл бұрын

Yout contents are awesome. Thanks a lot!

@streamxprimium3103 Жыл бұрын

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

@Bekizkez Жыл бұрын

Amazing! thank you for the video

@GameProgrammer79 Жыл бұрын

very useful tips. .subscribed. please keep these coming

@licokr Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you ☺️

@theresa_arethuza Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you ☺️☺️

@skinnyPH. Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you so much ☺️

@mambi74 Жыл бұрын

wow. excellent no-nonsense recap!

@ontheruntonowhere Жыл бұрын

Great job! Keep them coming, subscribed.

@slayingthedragon Жыл бұрын

Thank you :)

@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 ☺️ !!

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

@yashwantsahu3198 Жыл бұрын

Great insight 👍🏼 👏 👌🏼 🙌

@sanmeetsingh4538 Жыл бұрын

Simple explanation and use cases ... Just awesome 😊

@slayingthedragon Жыл бұрын

Thanks :)

@giacomo1215 Жыл бұрын

Good video and really interesting stuff. Keep it up!

@slayingthedragon Жыл бұрын

Thank you ☺️

@shubhamdhiman7516 Жыл бұрын

Thankyou for such amazing information. Subgrid is amazing.

@mahmudadamusman8264 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you so so much !

@leomacdon7858 Жыл бұрын

Thank you.. Your contents are beautiful..

@Bot-lj6nu Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you 😁

@AbdulRehman-bn1qn Жыл бұрын

great work!!!

@joshuamorley6051 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you thanks awesome !!

@bogsp Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you !

@sayanghosh6996 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank youuu 😊

@Lik4nGaming Жыл бұрын

Great content. thanks for sharing your knowledge with us.

@slayingthedragon Жыл бұрын

Thanks for watching ☺️

@kazisadibreza6984 Жыл бұрын

great video bro. thanks for the information.

@slayingthedragon Жыл бұрын

Thank you !

@balubalaji9956 Жыл бұрын

subscribed . thanks for the video

@gautam_vaishnav Жыл бұрын

Awesome bro 😍

@abdulrahmanalniema7182 Жыл бұрын

Great!.. Subscribed..

@richardleenders9110 Жыл бұрын

Underrated channel my guy!

@slayingthedragon Жыл бұрын

Thank you so much !

@shawalkabirchy.5437 Жыл бұрын

Wowww!!! What a tutorial 🤩

@User-404 Жыл бұрын

This is a life saver!

@hientran1822 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you 😁

@scribbleui Жыл бұрын

Good content.. subscribed👍

@slayingthedragon Жыл бұрын

Thanks 😊

@yourchoice5453 Жыл бұрын

👍 Awesome video!

@slayingthedragon Жыл бұрын

Thank you ☺️

@blueblue9410 Жыл бұрын

The ending got me "This is me" xDDD

@user-mo6yo4kz1m Ай бұрын

is that not him tho

@amanverma5131 Жыл бұрын

Great content!

@slayingthedragon Жыл бұрын

Thanks 🙂

@davidschaer Жыл бұрын

surprisingly good content..! +one sub

@slayingthedragon Жыл бұрын

Thank you !!

@kennikollemorten4184 Жыл бұрын

Super awesome video😁

@slayingthedragon Жыл бұрын

Thanks :)

@ssk7690 Жыл бұрын

keep making these videos man

@slayingthedragon Жыл бұрын

Than you !

@davidremis9913 Жыл бұрын

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

@mrwhispersofficial Жыл бұрын

Nice informations ♡♡♡

@simpleedge Жыл бұрын

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

@slayingthedragon Жыл бұрын

Yea I know unfortunately there's not much I can do about it now, at least I don't think there is but anyways I won't make this mistake again in the future

@luxmiyu Жыл бұрын

great video!

@slayingthedragon Жыл бұрын

Thanks ☺️

@princetajik9319 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you ! ☺️

@Fully_Coded_ Жыл бұрын

Keep up with the content, i pray for you

@slayingthedragon Жыл бұрын

Thank you ☺️

@romanthemrb Жыл бұрын

You won my support. 😊😊🤝🤝

@slayingthedragon Жыл бұрын

Thank you ! 😃

@Fully_Coded_ Жыл бұрын

Excellent

@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

@DrNio-sh5mx Жыл бұрын

I love this work

@slayingthedragon Жыл бұрын

Thank you 😊

@aruncoder Жыл бұрын

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

@aruncoder Жыл бұрын

Omg amazing

@VansElite 7 ай бұрын

Wow, it was blow my mind xD

@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 ☺️

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

@broadshare Жыл бұрын

Subgrid is powerful though browser support is not full yet

@lazycat4349 9 ай бұрын

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

@siyedyoussef3202 Жыл бұрын

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

@slayingthedragon Жыл бұрын

Thank you 😊

@shutka_nomer Жыл бұрын

Awesome

@florianvanbondoc3539 Жыл бұрын

Nice video

@slayingthedragon Жыл бұрын

Thank you ☺️

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

@pritiroy6849 Жыл бұрын

which microphone do you use?

@slayingthedragon Жыл бұрын

Shure MV7

@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

@RichardCalder67 Жыл бұрын

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

@williamt.roberts4771 10 ай бұрын

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

@slayingthedragon 10 ай бұрын

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 KZfaq. The course is already out but the chapters are being released incrementally on a daily basis.

@saugat746 8 ай бұрын

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

@slayingthedragon 8 ай бұрын

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 8 ай бұрын

@@slayingthedragon haha I just need to ask more

@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 ☺️

@funtrap2289 Жыл бұрын

Please do more css content with projects Love from India 🤎

@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

@Luxcium 9 ай бұрын

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 9 ай бұрын

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 ⭐

@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

@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

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

@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 6 ай бұрын

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 ?