4 ways to use modern CSS with old browsers

Itching to use the newest CSS features, but know that many of your users don't have modern browsers? CSS expert Rachel Andrew explains how to use modern features that will fallback gracefully on older browsers.

Don't forget Rachel is running a session on CSS Grid Layout at Generate London in September, so head over here if you'd like to get a ticket for that.

CSS Shapes

The CSS Shapes specification gives you the power to curve text around shapes, using the shape-outside property. It’s supported by Chrome, Opera and with the -webkit prefix in Safari. Shapes have to be applied to floats so users of browsers that don’t have support will simply get a squared off floated image as normal.

You can find out more about CSS Shapes in my article How to get started with CSS Shapes.

Multiple Column Layout

Much of the Multiple Column Layout specification has good support in browsers, however IE9 and below has no support for this useful spec. Rather than thinking about multi-col as used for creating big, newspaper-like designs instead consider how it can be used for small UI elements. It can then become useful as a progressive enhancement for your users of newer browsers.

You can use multiple-column layout to do things like tidy up a long list of checkboxes in a form, compacting them into columns. If they get displayed as a long list in an older browser – no harm is done and the form is still completely usable.

Modern mobile browsers

If you separate your desktop visitors from those using a mobile device you may be pleasantly surprised. Typically you will discover that your mobile visitors have far more capable browsers, the majority using Chrome or something else that uses the Blink rendering engine, or Safari for iOS.

You can use this to your advantage serving more modern CSS inside your media queries for these browsers, falling back to something else for the desktop.

Flexbox

Flexbox solves many of the tricky problems in laying out UI elements with CSS, so it can be really frustrating when we can’t use it. With careful structuring of your CSS however, you can add Flexbox with a fallback for older browsers.

Read this article to see different ways you can use Flexbox even when you need good levels of support for your layout in older browsers.

See Rachel speak at Generate London - buy your ticket here

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.