Display: Flex

Back when I was little, we made websites using HTML and a bit of CSS, with PHP or ASP or Python to do server-side stuff and Javascript to do client-side stuff. These days, we still use HTML and a bit of CSS, alongside all those other things. But thanks to, well, science, technology and the W3C I guess, we can do soooo much more with just HTML and CSS.

Like, for example, rounded corners.

In the old days, we had to use images for rounded corners, or weird janky hacks if we wanted rounded corners on anything related to Internet Explorer. Now, we can just use border-radius and set the roundness of our corners as we desire. You still might need some janky hacks for Internet Explorer but… well, it’s Internet Explorer.

The same goes for things like gradients and animations. In the past, the ONLY way to have a gradient as part of your website, as a background for example, was to make an image. These days, not only can you make a gradient using pure CSS, but there’s a number of styles available, from vertical gradients to diagonal or even radial. To make life easier, there’s also a billion generators for gradients that work similarly to what you’d see in Photoshop. The generator on CSSmatic is a particularly nice one.

Animations are a little more complicated but they are totally doable in CSS only. You basically give an animation a name, set what you want the animation do to over specific amounts of time – its keyframes (for example, you want something to be blue for 3 seconds and red for 4 seconds) – then stick that animation on a class or ID alongside how often you want it to repeat and you’re done. Okay I made it sound really simple but it is genuinely quite simple once you get the hang of it.

But then there is the wonder that is Flex. Or Flexbox, or Box, if you live in the past. Basically, Flex is a way of displaying objects. By default, objects are either blocks or inline and they always sit one underneath the other unless you tell them otherwise. To get a bunch of items to sit neatly in a line with equal space around them generally involves messing with percentages or margins. Thanks to display: flex though, this can all be done… pretty much automatically, and you can also add rules as to what items in a display: flex object do when there’s too much or too little space.

Frankly, display: flex is amazing, and so is its buddy, display: grid. Gone are the days where we had to use tables to lay out our websites. Gone are the days of struggling to keep everything in order. Display: flex and display: grid are amazing.

I kinda feel like it’s wrong to call these things objects, when most of the time we’re talking about DIVs, but any of this could apply to an ordered (ol) or unordered (ul) list with its items (li), paragraphs, tables, spans, canvases all sorts. Just saying objects is easier to understand. Even though I don’t think any of these can actually be called objects.

The only trouble with some of these fancier new CSS rules is that you need prefixes for a lot of them, so they work on every browser.

For example, the very nice box-shadow (which gives boxes shadows) doesn’t require a prefix for each type of browser. But for the aforementioned animations, you will need to write lines for both normal @keyframes and @-webkit-keyframes for maximum browser compatibility. The fancy Transform CSS effect, which can do things like rotate or move objects, requires -webkit-transform, -ms-transform: rotate(30deg) and transform: rotate(30deg) to cover most major browsers, including Internet Explorer 9.

A quick aside, if you’re still using Internet Explorer, please try some other browser. Or, more importantly, upgrade to Internet Explorer 11, the latest version. You’re missing out on a lot.

But frankly, prefixes aren’t that bad. Sure you have to repeat yourself (sometimes a lot) but frankly, it’s bloody worth it. CSS has come so far and can do so much, it’s utterly wonderful.