Browser Support: Is it okay if the layout is different in old browsers?

With things like flexbox, and more importantly css grid, becoming super useful tools for creating our websites, how much do we actually have to worry about browser support? Do things need to look perfect in IE10? Do we even care about IE10?

In this video, I explore the idea of partially supporting the older browsers, while focusing more of our time and resources on the newer ones. It's the idea of progressive enhancement, rather than pixel perfection.

It's more of a proof of concept video, rather than a real coding video, where I look at something that I already made rather than create something from scratch for this one.

What do you think about this approach? Does it make sense? Do you do this in the real world already, or would you're boss / client be willing to allow for something like this? Leave a comment and let me know what you think!

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[jimdart]

Thanks Kevin, as I for one get closer to developing for clients questions on this kind of situation become more and more of a concern. Now that I have a good idea of what the pros do I can learn to handle it like a pro. Also thanks for the links, and thank you for making me better. Please more tutorials of this kind. After all it is part of the development and design work as well. We just don't get much help on these parts.

[SushmitGaur]

Hey kevin can you please make a video on html emails. How to create them in 2018 ? What are the right approaches to follow ?

[sheikabdullah]

Kevin you are rocking man., your videos are very interesting and informative., I strongly recommend you who want to develop css., Lot of thank for your effort Kevin., do more and more video for us pls.

[harshpatel]

We can decrease the code by using mobile first approach. And then use @supports on your grid class or when you start media queries. So if browser does not support grid then it will show mobile version website to user. Checkout Wikimedia's mobile website on desktop. It really looks better!

[jojo_Ca]

If as a web developer you develop with a mind set of mobil first then wouldn't it make sense to just develop for newer browsers?

[jaimesastre]

Hello Kevin,
Sorry, Just a small stupid question. I don't remember what means autoflow/minmax(...). in the grid line, oups?

[seanpheneger]

With browser support as the topic, on many sites you'll see upon inspecting the markup commented if scripts. < -- [if lt IE 8] --> then link to stylesheet etc. Is this used in conjunction with the techniques in this video or is this just an older way to deal with compatibility?

[MuhammadAdnan-gxrd]

How to use box - shadow for Mozila_firefox webkit browser specially

[kayanthepioneer]

Hi Kevin, i have searched the entire internet on css skew property but so far been unable to find a good tutorial, so kinda making u this request to upload at least 1 such video which i really wish to be a thorough 1 & covering all the bases as the rest of ur videos which help me in self-tutoring myself in programming

[nickwoodward]

nice. will definitely look to implement this. does it mean though that you may have to repeat a fair few media queries? or is the idea to not really bother for the barebones version?

[sheikabdullah]

Kevin please do one short tutorial about css from basic to advance completely.

[justkailash]

i believe ... this treatment is not required now? .... as almost all browsers are now support grid and flex?

[anuvabkumarrit]

Hi Kevin can you give any new input on this topic in 2023?

[nathancornwell]

If they are still running windows XP and IE9 the least of their concerns is web experience lol But, honestly i think they should really try to push people to upgrade their browsers with this approach. Catering to old browsers seems to be a lot of the reason flexbox and grid took so long to become the standard when CSS had needed a layout tool for an incredibly long time.

[andrewt]

As far as I understand it, it's even better practice to put your grid styles in a block with these queries... @supports (display: grid) and (grid-area: auto) { /*--code here--*/ }. Credit: Morten Rand-Hendriksen

[enfant-soleil]

how do you still look like this omg

youve hardly aged at all int he last 6 years

[PetervandenHeuvel]

Very nice video, i more or less use the same approach when working on projects.

[AliAkbar-vote]

remove the second "can" in the title of video. Thanks.

[HoshCoding]

thanks for all the info
please if you can see my last video I need you opinion