John Main Logo

John Main

Code. Design. Hosting. Maintenance.

Mar '15

This will be a very short post but I’ve just discovered my favourite feature of CSS3 and I wanted to share in case any of you out there missed it. Ever find yourself with elements that, if populated, work really well in the page and give a lovely user experience but, if empty, just leave gaping holes in the page. I particularly get this situation with message bars in page headers, or in labels I create ready to receive validation error messages.

Now I know the true CSS ninjas will have a million and one ways to deal with this, but by far the simplest and most excellent approach I’ve found is the CSS3 :empty selector:

label.error:empty {
display: none;

Just like that! Any empty labels with the ‘error’ class will be hidden. As soon as they are populated they will show. Easy.
It’s worth noting though that even a single space within the element will cause it to be viewed as not empty – be careful with your whitespace out there!

<Insert note about CSS3 not being supported by all browsers here>

May '12

It amazes me how many people online are saying that CSS won’t natively support columns of data using lists. Everything from tables to Javascript functions are being suggested but it’s actually very very simple to do. To make the LI elements within and OL or UL list arrange themselves into two equal columns all you need to do is this:

li {
float: left;
width: 50%;

Equally to arrange themselves into three columns you just need to adjust the width value like so:

li {
float: left;
width: 33.3%;

I’m sure you’re getting the idea!