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!
- Free your web layouts with CSS Shapes
- How to build an app (opens in new tab): try these great tutorials
- Free Photoshop actions (opens in new tab) to create stunning effects
