I am developing responsive websites which supports IE from 11 and other browsers. I am mostly using Flexbox for most of the layouts and curious if anyone here supports older IE browsers (IE8, IE9 and IE10). If yes, can you also provide some tricks and techniques in using CSS for developing for these browsers?
As long as you produce responsive views using progressive enhancement, Modernizr is a great way to make it backwards compatible for specific, unsupported code.
The trick is only using it for what's needed, not the whole, unjustified ball of wax.
For responsive web design, generally speaking anything that works in an older browser will continue to work in all newer browsers that have been released after it. This means that when you think about the technology and features you use to build your website, what you will be able to use is limited by the oldest browser you need to support.
For example, IE8 doesn't support CSS Media Queries, so any kind of 'responsive' design that must support IE8 will need some JavaScript to work. If you are developing a site that's IE9+ you can use CSS Media Queries.
Flexbox and Grid also have different support, you can check on caniuse.com to see the support in browsers:
It is possible to build sites using features more advanced than the oldest browser you need and to try to handle those older browsers separately, but that gets complicated quickly. An older layout will work just fine in a newer browser without extra help, so it's a lot better to build with the oldest browser you actually must support in mind and then you can be sure it will work everywhere.
IE11 I think because everyone can upgrade to that browser, my sites are closed so I don't care about Google starts etc, that you have to take into account for the question.
As I build with progressive enhancement, ignoring the new pointlessly redundant HTML 5 "strutural" tag asshattery (aka the ignorant halfwitted useless section, article, aside, main, header, footer, nav), my pages gracefully degrade as USABLE in legacy IE in most cases.
Much of this stems from that when I build my layout I start with legacy desktop as my baseline for screen media. All the people saying "mobile first" have it COMPLETELY backwards since small screen is what we CAN target with media queries for changes. What can't we target? Legacy desktop IE... So that's the obvious and logical starting point. Start with what doesn't have media queries FIRST, using layout techniques you know work for that.
That starting layout should be elastic (built in EM not px), dynamic (containers adjust to fit the content, so no fixed height declarations), and semi-fluid (having a max-width so long lines aren't hard to follow). For really old IE that can't do max-width, if you care about that far back THEN you throw a fixed width at it -- in EM so at least it's elastic.
THEN you can use fancy CSS3 stuff to enhance the appearance. Legacy browsers don't get rounded corners, drop-shadows, or flex behaviors? OH HUFFING WELL!!! Seriously, don't bend over backwards for that artsy fartsy BS if the page is at least USABLE. AGAIN as I'm always saying people don't visit websites for your goofy layout tricks, goofy script kiddie BS, or goofy nonsense some artist wants to hang around the content; they visit FOR the content.
THEN you shrink the window, when the layout breaks figure out how many EM that is, give yourself a 5% extra as a buffer to account for different font rendering engines and behaviors, and that's your first media query. Lather, rinse, repeat until you're down to a single column of minimal padding. DONE!
Of course this is why you design in the CSS not some goofy half-assed overglorified paint program like Photoshop. ANYONE telling you that Photoslop, Gimp, whatever are "design tools" doesn't know enough about websites to be designing a blasted thing!
AGAIN, progressive enhancement. You start with your content or a reasonable facsimile of future content and organize it in a flat text editor so that it makes sense as if HTML and CSS didn't even EXIST. THEN you apply markup to say what things are, NOT what they look like. THEN you apply your layout CSS for legacy desktop adding semantically neutral tags (div, span) where and only as needed. THEN you shrink the window testing for media query creation. THEN you hang any extra graphics and appearance tweaks on the working layout. THEN you consider applying JavaScript to enhance the working site if desired.
You do that, the page will gracefully degrade in a useful manner as any fancy bits of the process -- like JavaScript, like CSS3, like all CSS and layout -- are missing, blocked, or otherwise unavailable/inapplicable.
Vary from that, and you probably have little if any business building websites. That goes double if you start out "designing" in a paint program like Photoslop, TRIPLE if you are building websites that work scripting only.... at least if you care about accessibility, usability, and speed.
People using IE 10 or earlier don't deserve to use the Internet, am I right? 😉
I won't support IE below 11 without shitload of money. :) So the trick is very simple. I can do anything but you probably can't afford it.
Over here, we only support IE11 as the lowest browser version, because nearly no one uses older browser anymore. When we start a project today, usually enough time flies so that even IE11 might not matter anymore, so no one cares about even older browsers.
To be honest, modern browsers update themselves automagically, so that we hopefully can get rid of legacy stuff, soon, and only develop for the latest browser versions :)
Well at here IE10 and below will be supported if demanded (which cost a lot more money) and comes with the limitations of that browser versions. Currently IE11 is the lowest but with our coming major release of our product, IE11 will be also discontinued (I work at the project based department but the system requirements of the product is also valid for us).
Jason Knight
The less code you use, the less there is to break
Ben Buchanan (200ok)
I make some bits of the web.
I'm presuming this is not driven by an unusually high share in your stats? Because if that's the case you need to look at old techniques like Conditional Comments.
But for a general build with reasonably common stats... you can support the old browsers via graceful degradation. A simple way is to give the old browsers a linear layout, much like you probably serve to mobiles. Don't worry about making them responsive, just show the content.