The Magic of Feature Queries, Part 1 - 5/7 Resilient CSS
HTML-код
- Опубликовано: 27 фев 2018
- To make awesome new designs work in all browsers, sometimes you’ll want to prevent older browsers from running an entire block of CSS unless that browser understands a certain new feature. Enter, the Feature Query. It let's us write one set of code to sometimes work, and sometimes not work, depending on the age of the browser.
Наука
Never knew about @supports until this video. Thank you!
This is a great series Jen. You do a great job. I've read your tweets where you mention wanting to do more of these. I hope you do. We can all benefit from your knowledge and your style !
Wow you speak so well.
I'm Latino but i can understand almost 80% of what you say
Thank you so much for that good explanation, you saved my life
I love your videos! It’s great to hear an actual expert explain CSS.
Thank you, Jen!!! I have been told repeatedly not to use CSS Grid, etc. because there were still browsers out there that don't support these new things. I am old enough, though, to know that were people saying the same sort of thing in the early 2000s. I am also old enough to know that people will be using older browsers for a long, long time. Not using such cool things such as Grid just didn't make sense.
Glad I found your material.
This series is fantastic, Please keep sharing your wisdom it's helping..
Great content, love the way it is structured and presented, really learning a lot. Thank you!
This is great! Thanks!
Thanks for the video. You rock!
thank you so much for this series! I have learned a lot just from a few videos. A few things cross my mind though. What are the drawbacks of having so much non applicable css code for a user who has the latest browsers? Is there a problem in speed of loading the pages? Media queries tend to slow down the front end experience. Do we need to weigh this when using @support? Also speeding up to video 6 of edge case where you have a browser that doesn't recognize @support but the feature is supported, what are the benefits of using @support in general than say creating a class that is for the latest browsers but that is more at the bottom of the css file? Maybe I missed the benefits of @support other than it being super cool for new browsers and syntax that we can detect easily as programmers.
You are a diamond gem..! - Thank you :D
Amazing. Thanks for this. You feel like a true professional talking. I wonder, is there a NOT supports also, where it'll run code if a feature is not supported?
What is your opinion for using UL > LI for categorisation/organisation of information or in say menu categories/sub categories? At 5:55 I noticed you have used LI for blocks of styled text instead of single line items.
Awesome! You're alleviating my fear of css grid. It's so awesome, but I'm still a bit scared to use it for fear of ticking off clients who are still using I. E. to review my work.
Dave Cruickshank why people why do you use IE. Let's do a media query that gives them a computer virus that installs Chrome
Tigershot People use Internet Explorer because it's integrated into Windows and has the best user experience of any browser!
Google Chrome is a virus and should be exterminated!
u r GOD Damn awesome !
I question about code bloat. As a front-end developer our job is accessibility so using a lot of feature queries wouldn't be responsible as it continues to increases load time and cost.
Very cool
but I have a question
If we wanted to enlarge the first word of a text
What shall we do?
Short answer: there is not currently a ::first-word selector, but there's the option of wrapping the word in a span. Longer answer: the concept of a word varies between cultures and content, see accepted answer and comments on StackOverflow: questions/55612/css-to-increase-size-of-first-word#55624
Damn youre making a lot of content
And it is really great :)
Lubomir Herko Indeed a Hustler.
It's funny how you guys call it a "code " 😂❤❤
Damn mami you fineeeeeeeeeeeeee!!!!!!!!
HOw about we make a media query with a redirect to a page that says "If you're reading this you need to upgrade your browser already!" lol kidding..sort of
David Miller lol dead
This already existed back in the era of IE6, reminding users they could have better experience if they UPDATE. I think this was the moment when IE lost its dark powers...
😄
Because that's not how the Web works!
Web sites are only valid if they work with ALL user agents, not just your favourite pet browser!
If you want to tell users which system to use, then you're in the wrong line of work!