Тёмный

5 EXCITING New CSS Features That You NEED To Know 

Slaying The Dragon
Подписаться 110 тыс.
Просмотров 38 тыс.
50% 1

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

Наука

Опубликовано:

 

13 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 163   
@ahmedabdelaalweb
@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
@anton9410 Год назад
Subgrid is a game changer, appreciate your well paced content 👍
@SamuelGfeller
@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
@slayingthedragon Год назад
Absolutely !! We just need Firefox to add support for it and we'll be good to go :p
@dieselvin592
@dieselvin592 Год назад
Let me see your work,haha
@rockertechs1117
@rockertechs1117 Год назад
​@@slayingthedragon Your channel is a blessing for web developers using CSS 🤌🏻✨
@joep1131
@joep1131 Год назад
very good inside and also good effort to make it readable ! thanks
@Harlem1991
@Harlem1991 Год назад
A great video. One of the best most straightforward videos I have seen. I look forward to seeing more.
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺
@skinnyPH.
@skinnyPH. Год назад
Wow... Really great video and content, i'm glad that youtube recomended it to me !!
@slayingthedragon
@slayingthedragon Год назад
Thank you so much ☺️
@rickeisner
@rickeisner Год назад
Excellent tutorial. And several extra points for the measured clarity of your voice: very easy to understand! Thanks!
@slayingthedragon
@slayingthedragon Год назад
Thank you :) !!
@juliusbusiness4283
@juliusbusiness4283 Год назад
Thank you for posting these kinds of simple but straightforward videos.
@danderbunkle1721
@danderbunkle1721 Год назад
Keep up the great work. I've learned a lot from these videos. Very well done.
@davidallred991
@davidallred991 Год назад
Great videos, you use good examples and pace your explanations really well. Subbed
@fatehaligolani7751
@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
@slayingthedragon Год назад
Honored that you learned something, thank you so much !
@briankgarland
@briankgarland Год назад
Finally a clear explanation on container queries and subgrids. Thanks!
@atilagamasilva508
@atilagamasilva508 Год назад
Thank you so much for your videos! Great content! It helped me a lot to properly deal with CSS and HTML.
@shineLouisShine
@shineLouisShine Год назад
Awesome content! keep on and on and on.. And shine on!
@anouar9259
@anouar9259 Год назад
thank you i was looking for respensive way great content keep going you are amazing
@GameProgrammer79
@GameProgrammer79 Год назад
very useful tips. .subscribed. please keep these coming
@luismiguelescobarfalcon9812
Yout contents are awesome. Thanks a lot!
@Bekizkez
@Bekizkez Год назад
Amazing! thank you for the video
@licokr
@licokr Год назад
Subgrid, wow... that's so cool. Great Video!
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@theresa_arethuza
@theresa_arethuza Год назад
Just found your video, and I love it, keep up the good work~!
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️☺️
@streamxprimium3103
@streamxprimium3103 Год назад
please come with more content like this.. it is truly very awesome
@vedymin7
@vedymin7 Год назад
Immediate sub. Also watched about css animations. Best explanations ever! Thank You, keep doing content please! I like this music :)
@RikThePixel
@RikThePixel Год назад
This was lovely! Really well made dude!
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@bigpoppa6658
@bigpoppa6658 Год назад
One minute into the video and I already subscribed to your chanel. Great work mate
@slayingthedragon
@slayingthedragon Год назад
Thank you 😁
@yashwantsahu3198
@yashwantsahu3198 Год назад
Great insight 👍🏼 👏 👌🏼 🙌
@coil8906
@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
@slayingthedragon Год назад
Wow thank you sooooo much ☺️ !!
@mambi74
@mambi74 Год назад
wow. excellent no-nonsense recap!
@davidremis9913
@davidremis9913 Год назад
Bro just single handedly solved 99.9% of my problems👌.
@richardleenders9110
@richardleenders9110 Год назад
Underrated channel my guy!
@slayingthedragon
@slayingthedragon Год назад
Thank you so much !
@leomacdon7858
@leomacdon7858 Год назад
Thank you.. Your contents are beautiful..
@shubhamdhiman7516
@shubhamdhiman7516 Год назад
Thankyou for such amazing information. Subgrid is amazing.
@AbdulRehman-bn1qn
@AbdulRehman-bn1qn Год назад
great work!!!
@sanmeetsingh4538
@sanmeetsingh4538 Год назад
Simple explanation and use cases ... Just awesome 😊
@slayingthedragon
@slayingthedragon Год назад
Thanks :)
@ontheruntonowhere
@ontheruntonowhere Год назад
Great job! Keep them coming, subscribed.
@slayingthedragon
@slayingthedragon Год назад
Thank you :)
@sayanghosh6996
@sayanghosh6996 Год назад
you are good, providing quality (not just flair like some channels) content. i subscribe
@slayingthedragon
@slayingthedragon Год назад
Thank youuu 😊
@HealmaTech
@HealmaTech Год назад
Wow, clear, direct to point and wonderful voice. Keep it up, You Are Good!
@slayingthedragon
@slayingthedragon Год назад
Thank you so so much !
@Bot-lj6nu
@Bot-lj6nu Год назад
Your video are so op and straight forward. Keep making more of those
@slayingthedragon
@slayingthedragon Год назад
Thank you 😁
@balubalaji9956
@balubalaji9956 Год назад
subscribed . thanks for the video
@giacomo1215
@giacomo1215 Год назад
Good video and really interesting stuff. Keep it up!
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@kazisadibreza6984
@kazisadibreza6984 Год назад
great video bro. thanks for the information.
@slayingthedragon
@slayingthedragon Год назад
Thank you !
@Lik4nGaming
@Lik4nGaming Год назад
Great content. thanks for sharing your knowledge with us.
@slayingthedragon
@slayingthedragon Год назад
Thanks for watching ☺️
@gautam_vaishnav
@gautam_vaishnav Год назад
Awesome bro 😍
@abdulrahmanalniema7182
@abdulrahmanalniema7182 Год назад
Great!.. Subscribed..
@bogsp
@bogsp Год назад
nice work.. a lot less fluff than other tutorial videos is good.. hope to see more
@slayingthedragon
@slayingthedragon Год назад
Thank you !
@joshuamorley6051
@joshuamorley6051 Год назад
Awesome video, it's encouraging me to get good at frontend!
@slayingthedragon
@slayingthedragon Год назад
Thank you thanks awesome !!
@User-404
@User-404 Год назад
This is a life saver!
@aruncoder
@aruncoder Год назад
Pls do a css project for knowing all concept well for beginners
@yourchoice5453
@yourchoice5453 Год назад
👍 Awesome video!
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@shawalkabirchy.5437
@shawalkabirchy.5437 Год назад
Wowww!!! What a tutorial 🤩
@scribbleui
@scribbleui Год назад
Good content.. subscribed👍
@slayingthedragon
@slayingthedragon Год назад
Thanks 😊
@mrwhispersofficial
@mrwhispersofficial Год назад
Nice informations ♡♡♡
@amanverma5131
@amanverma5131 Год назад
Great content!
@slayingthedragon
@slayingthedragon Год назад
Thanks 🙂
@davidschaer
@davidschaer Год назад
surprisingly good content..! +one sub
@slayingthedragon
@slayingthedragon Год назад
Thank you !!
@ssk7690
@ssk7690 Год назад
keep making these videos man
@slayingthedragon
@slayingthedragon Год назад
Than you !
@hientran1822
@hientran1822 Год назад
greet video, thanks for sharing your knowledge with us, keep it up man!
@slayingthedragon
@slayingthedragon Год назад
Thank you 😁
@simpleedge
@simpleedge Год назад
You’ve got to highlight browser support. :has() isn’t fully supported (very close!) and subgrid’s support is minimal.
@slayingthedragon
@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
@luxmiyu Год назад
great video!
@slayingthedragon
@slayingthedragon Год назад
Thanks ☺️
@asmodeus5506
@asmodeus5506 Год назад
Thank you
@princetajik9319
@princetajik9319 Год назад
really helpful tips, thank you. amazing video. you look cool btw :)
@slayingthedragon
@slayingthedragon Год назад
Thank you ! ☺️
@kennikollemorten4184
@kennikollemorten4184 Год назад
Super awesome video😁
@slayingthedragon
@slayingthedragon Год назад
Thanks :)
@Fully_Coded_
@Fully_Coded_ Год назад
Keep up with the content, i pray for you
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@romanthemrb
@romanthemrb Год назад
You won my support. 😊😊🤝🤝
@slayingthedragon
@slayingthedragon Год назад
Thank you ! 😃
@DrNio-sh5mx
@DrNio-sh5mx Год назад
I love this work
@slayingthedragon
@slayingthedragon Год назад
Thank you 😊
@Fully_Coded_
@Fully_Coded_ Год назад
Excellent
@blueblue9410
@blueblue9410 Год назад
The ending got me "This is me" xDDD
@user-mo6yo4kz1m
@user-mo6yo4kz1m 2 месяца назад
is that not him tho
@VansElite
@VansElite 7 месяцев назад
Wow, it was blow my mind xD
@aruncoder
@aruncoder Год назад
Omg amazing
@broadshare
@broadshare Год назад
Subgrid is powerful though browser support is not full yet
@rfatunji1043
@rfatunji1043 Год назад
Great video tutorial. Can you do a tutorial on html?
@slayingthedragon
@slayingthedragon Год назад
Do you mean a tutorial about new HTML features or do you mean an actual html tutorial? Thank you btw ☺️
@waly92
@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
@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 !! ☺️
@lazycat4349
@lazycat4349 9 месяцев назад
What video overlay are you using? And also your background music please.
@shutka_nomer
@shutka_nomer Год назад
Awesome
@florianvanbondoc3539
@florianvanbondoc3539 Год назад
Nice video
@slayingthedragon
@slayingthedragon Год назад
Thank you ☺️
@RichardCalder67
@RichardCalder67 Год назад
The has example is over complicated. Add the border to the card class by default, remove it in the has condition.
@funtrap2289
@funtrap2289 Год назад
Please do more css content with projects Love from India 🤎
@jake445
@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
@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.
@siyedyoussef3202
@siyedyoussef3202 Год назад
You're way of explaining the css topic was great for a new channel #subscribe
@slayingthedragon
@slayingthedragon Год назад
Thank you 😊
@pritiroy6849
@pritiroy6849 Год назад
which microphone do you use?
@slayingthedragon
@slayingthedragon Год назад
Shure MV7
@williamt.roberts4771
@williamt.roberts4771 11 месяцев назад
Are you still doing video tutorials? I find your videos very good, and the presentation excellent.
@slayingthedragon
@slayingthedragon 11 месяцев назад
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 RU-vid. The course is already out but the chapters are being released incrementally on a daily basis.
@minhhoangtran1276
@minhhoangtran1276 Год назад
Are there any ways to make a container overflow-x scroll and overflow-y visible?
@slayingthedragon
@slayingthedragon Год назад
Is this what you mean? itnext.io/horizontal-overflow-with-flexbox-css-64f530495303
@minhhoangtran1276
@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
@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?
@girishanker3796
@girishanker3796 Год назад
Gold ⭐
@HocineKamikaz
@HocineKamikaz Год назад
A face reveal 🤣🤣 no one expected that in the end.. Great content like always ❤️
@slayingthedragon
@slayingthedragon Год назад
Haha thanks 😂❤️
@HocineKamikaz
@HocineKamikaz Год назад
@@slayingthedragon ur wlcm bro keep up the good Content.. I'm really enjoying it although i'm a little bit late
@Batareika007
@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
@slayingthedragon Год назад
You're not wrong, I will do better in the future ☺️
@saugat746
@saugat746 8 месяцев назад
How do you move the selected text? Like in 8:34
@slayingthedragon
@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
@saugat746 8 месяцев назад
@@slayingthedragon haha I just need to ask more
@wyvrendragon4175
@wyvrendragon4175 Год назад
What song do you use?
@slayingthedragon
@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
@Luxcium 10 месяцев назад
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
@slayingthedragon 10 месяцев назад
Ayy what's up fellow French Canadian :pp
@9_falcon
@9_falcon Год назад
please upload CSS and JS full video needed for web development
@slayingthedragon
@slayingthedragon Год назад
Both a full course on CSS and JavaScript are on my roadmap of videos to make brother
@SivaxReddy
@SivaxReddy Год назад
Does chrome and other browsers support these ?
@slayingthedragon
@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
@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
@alexandreevich2278 Год назад
Container queries support is only 73% (flex for ex. 99.74). Technology support does not allow you to use this in production.
@stbuchok
@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
@JawsoneJason Год назад
Except Subgrid is still not supported in Chrome :(
@slayingthedragon
@slayingthedragon Год назад
Yea, let's hope they'res more support next year :/
@JawsoneJason
@JawsoneJason Год назад
Here's hoping!
@Trevi4kochannel
@Trevi4kochannel Год назад
Make your own discord
@slayingthedragon
@slayingthedragon Год назад
I'll think about it !
@MyDpop
@MyDpop Год назад
get rid of the annoying background music please. 🙏 So I can also follow your channel without getting a headache. 👍
@slayingthedragon
@slayingthedragon Год назад
👍
@TheDiveO
@TheDiveO Год назад
nope, don't "need to know" advertising channel
@amdjed_mijoukh
@amdjed_mijoukh Год назад
it doesn't look like its your voice
@slayingthedragon
@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
@amdjed_mijoukh Год назад
i mean't compared to your face, but gj your video are very informative.
@amdjed_mijoukh
@amdjed_mijoukh Год назад
can you do a video about color please and talk about solid gradient linear and other color property. ty
@AliHusnain01
@AliHusnain01 Год назад
can't understand 😒 because its not in urdu
@slayingthedragon
@slayingthedragon Год назад
I'm sorry.. I'm Canadian
@user-dk7hr1ss1j
@user-dk7hr1ss1j 6 месяцев назад
the background music is so annoying and distracting, and the fact that it has stereo effects just worsens it
@AungBaw
@AungBaw Год назад
Now CSS is Turning complete ?
Далее
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 466 тыс.
Top 10 CSS Features You Should Know & Use in 2023
19:56
Probably the most underrated (and useful) CSS feature
21:11
Use Arc Instead of Vec
15:21
Просмотров 134 тыс.
Responsive Flexbox Layout in 2 Minutes
2:41
Просмотров 17 тыс.
Modern CSS Features You Should Know About
27:48
Просмотров 10 тыс.
Top 5 CSS Tricks You NEED To Know
5:03
Просмотров 20 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 54 тыс.
Top 5 CSS Features for 2024
9:08
Просмотров 18 тыс.
The problems with viewport units
13:23
Просмотров 353 тыс.
How to take control of Flexbox
16:01
Просмотров 107 тыс.
AI от Apple - ОБЪЯСНЯЕМ
24:19
Просмотров 88 тыс.
Ноутбук без экрана
0:22
Просмотров 15 тыс.
don't throw your faulty fan
0:24
Просмотров 2,4 млн
iPhone 12 socket cleaning #fixit
0:30
Просмотров 31 млн