You may remember a while back, I coded up some nice CSS3 social media icons, to which I have had to remove from my website due to the fact I cannot run PHP on this Jekyll server, or even wanted to quickly convert them to HTML. Time would be better spent taking action into enhancing those icons, and creating some much better ones with better practices, with performance and retina displays in mind.
Table of contents
Here’s what I’ve learned since creating those previous icons:
- Using an OOCSS method for creating the buttons
- Better CSS techniques, enhanced performance
- Graphic optimisation to limit HTTP requests, increase speed using CSS sprites
- Not relying on 'hacky' techniques
So that’s where this article is headed, I’m going to talk you through the process of creating the new buttons, and how I’ve adapted from my previous post.
First thing’s first, I love SVG. I’ve written a few posts on the subject and use it in all my projects. It’s just what social icons need, scalability and high performance/compatability. To use SVG, it’s probably a good idea to detect if the browser supports it first, as older browsers and IE6/7/8 have no support. So let’s setup the detection script for this progressive technique:
Then we need to add .svg or .no-svg depending on if the browser supports SVG. Let’s do that:
This sets us up nicely for a progressive approach. Our base layer of support needs to include a working site in all browsers, so that will be using PNGs instead of SVG for images.
We can then use a .svg or .no-svg class to take priority depending what the browser supports, PNG for .no-svg, and SVG for .svg.
Using an OOCSS method for creating the buttons
Let’s create some markup then, minimising the HTML as much as possible, but making use of more classes. Using an OOCSS technique, we can create an icon like so:
This is OOCSS at its most minimal form, adding a separate class (with some nice naming conventions to show relationship between classes) to help with the construction of the element. The markup is minimal in this instance, helping us easily maintain it in the CSS. Previously, I used an <img> tag for each button, which would result in lots of HTTP requests to download each image.
Better CSS techniques, enhanced performance
When you get your hands on CSS3, it’s amazing, you can make everything super-slick, colourful and looking like a PhotoShop design in seconds. I admittedly went overboard with my previous set of buttons, creating triple the amount of code that I should have. I created a generic state, a hover, and active for each icon, which looked like so:
After each CSS3 declaration on each button name, the CSS was huge. But at the time it didn’t really bother me as it was all about diving into CSS3 - but it should have; as performance, speed and manageability should be at the forefront of each piece of code you write. Taking this knowledge, I’ve come up with a better way to do this using the opacity property which is applied to each icon.
This is done like so:
Let’s look at the full picture though, here’s how we can construct an icon now:
To achieve our progressively enhanced icons, we need to add the .svg class to the CSS, and feed off the SVG background:
Graphic optimisation to limit HTTP requests, increase speed using CSS sprites
I’ve used an SVG/PNG sprite in this instance, which means no individual images, all buttons feed off the same image, and we use a CSS sprite to show different parts of the image using the background-position property on each class name. HTTP requests: 1.
We then manipulate the sprite for each item very easily. To keep CSS sprites manageable, it’s best to think about them before creating them. Each icon is fixed at 32px width and 32px height, which I’ve used in my Illustrator design to create the icons to sit directly in the center of the 32px box. We can move the background sprite and change the background colour in the CSS on each icon, giving us massive flexibility on the icons:
Here’s an example of two icons:
Not relying on ‘hacky’ techniques
The image downscaling technique, a good idea at the time but with terrible output. I say this because of a few things. Creating x2 images is such a bad solution to overcoming retina displays, then downscaling the image to achieve a good ‘retina’ image. It’s a drag on performance, a cheap technique which was popularised at the time, but SVG is the real future of website graphics, creating infinitely scalable graphics that are super-futureproof. Image downscaling is not future proof at all, and when a proper solution comes along, previous techniques will be obsolete and not even part of any standard.