Submit a enquiry






    Back to all posts

    What are the advantages of CSS3?

    Guide
    by Iain Thomson Head of Projects

    CSS3 has been with us since 2011, but as is always the case with such things, it took a while for all the browsers, web clients and so on to support it.

    Now, it’s just part of the landscape, with all the major platforms being able to run the code. But there are still some developers who haven’t quite caught up with the benefits of the latest iteration of CSS. So what’s it all about? Here are the main advantages of CSS3.

    Animations and transitions

    In the past, it was quite tricky to program the transitions and animations that we associate with the modern website. That’s things like gradually changing colours, boxes changing shape or moving on the screen, moving shadows, fancy mouse-overs combining with borders and such like.

    For example, whereas in the past, a link might change colour instantly when you hover your cursor over it, now, it can be a gradual transition. With CSS3, a huge range of transitions comes out of the box. And best of all, you know it’s going to run just perfectly on websites and in emails, with minimal download time.

    Responsiveness

    CSS3 was designed to make responsive websites a doddle to build. That means that rather than having to build one website for desktops, another for phones and yet another for tablets, you just code the elements and let the browser detect the screen size and resolution, and reflow the part just as you want them to on the various devices.

    Rounded corners

    The web has always been a very square place, with boxes and images having 90 degree corners. If you did want rounded corners, you’d have to use JavaScript or PNGs. Now, with CSS3, you can set a diameter for corners of boxes and it’ll give you nice, organic curves.

    And best of all, you can give different radii to all the corners, or have top and bottom or left and right the same, so you can get some really creative shapes. It also works with images, too.

    Opacity

    A really cool feature is that you can make elements completely opaque, completely transparent or anywhere in between. That means you can arrange boxes and other elements above each other in layers (rather like Photoshop) and make them partially see-through, so you can have images, gradients and other elements underneath that are still visible. It’s fantastic for designing interesting websites.

    Content-visibility

    We’ve mentioned lazy loading in articles about improving page speed on your website. It’s where images aren’t loaded until they are just below the visible part of the screen, so as you scroll down, it’s continually loading and the page doesn’t take ages to load in the first instance.

    Well, thanks to CSS3’s content-visibility feature, the same effect can work for all the visible content on the page – not just images. It’s great for speeding up downloads and saving bandwidth for both the site owner and the visitor.

    There are plenty of other great features of CSS3, but this gives you a flavour of the kinds of features you can add to your website.

    New features are being added all the time, but it’s usually safer to wait a while before implementing them so you can be sure most of your site’s visitors are using browsers that can handle them. The best way to ensure your site’s features will be widely usable is to work with a professional front-end developer like Gooey, of course!