One of the coolest features of CSS3 is the ability to create newspaper-like columns on your layouts without any extra markup. We always find ourselves “cheating”, using things like <div id="column-one"> which is not very good, so this property would save us a lot of time and unnecessary code.

CSS3 solves all this with the use of some really cool properties: column-width, column-gap and column-rule. I guess they’re pretty self explanatory, except for column-rule which basically behaves like a border in between columns, so it can be treated like one, using width, style, etc. If you need more details, you can go to the source.

The problem? you guessed it! It’s still not supported by some browsers, namely IE and Opera (need to check IE8 and Chrome, though). Anyway, for this blog post I decided to start testing cross-browser solutions for the problem and this is what I’ve come up with so far.

First, we use the property for the browsers that support it, so if we have something like:

<div id="content">
<p>The quick brown fox jumped over the lazy dog</p>
…
<p>And they lived happily everafter</p>
</div>

we then style it like this:

div#content {
	-moz-column-count: 4;
	-webkit-column-count: 4;
}

Notice the prefixes -moz and -webkit. The reason for their presence lies in the fact that amazingly enough, the specification is still a draft (it was originally suggested in 2004!), so we need those. They’re obviously not 100% standard but in this case I would favour common sense as opposed to standards compliance. The styles themselves can get immensely fancier, using the column-gap and column-rule properties, but let’s keep it simple for the purposes of this post.

If you use a decent browser and look at that code, you should see something like this:

Everyone else should see the style-less rendering:

Taking care of all other browsers

So, to make sure no one else misses out on the fun, we can use a little jQuery. There are many jQuery plugins to deal with multi-columns, but Systemantics’ columnize plugin was the best-suited one I could find, so cheers to them!

We don’t want to apply the columnize styles to the browsers that support column-width, so we need to serve the javascript only to those that absolutely need it. You can do so by using jQuery’s browser detection, but I would suggest using get_browser() instead. It gives you much more control:

<?php if ( ($browser != 'Firefox') && ($browser != 'Safari') ) { ?>	
	// enter columnize code here
<?php } ?>

Using columnize is pretty straightforward. You invoke jquery and the plugin, and then simply do something like:

$("#content").columnize({columns: 4});

By default, columnize adds the class .column to each of the generated columns, so be sure to style it properly. The overall width of each element should be equal to the width of the parent element, divided by the number of columns, so for instance, if your parent element is 1200px wide and you have four columns, the overall width of each .column element should be 300px. Columnize has tons of other options as well, so be sure to check them out.

You can look at the demonstration here. As usual, comments and questions are always welcome. Thanks for reading!

OK, this one’s a bit more technical than usual!

On a previous post, I discussed how you could use PHP’s get_browser() function to detect your users’ browser information. You may need to do this for a number of reasons: fixing small CSS details (for instance, positioning <button> elements next to input fields and getting them to display correctly) and preventing your users from seeing stuff reserved for the googlebot^† are some examples that come to mind.

If all you want is to load an extra style sheet for Internet Explorer, you can do so with conditional comments, but what about if you want to fix an Opera or Safari issue? What if you want to be nice to Konqueror users and fix that small detail that prevents your site from displaying exactly as you want it to? Enter PHP and its get_browser() function. According to the manual, the function will return an array or an object filled with information about the user’s browser.

However, I’ve heard many people complain about how the function just doesn’t work on their site. If you take a careful look at the manual, you’ll notice the following notice further down:

In order for this to work, your browscap configuration setting in php.ini must point to the correct location of the browscap.ini file on your system.

As it turns out, you need a file called browscap.ini (or php_browscap.ini) which doesn’t come bundled with PHP so chances are that your web host doesn’t have it installed by default.

† Careful with this one. You need very good reasons to serve the googlebot different content. Exercise common sense.

Checking for (and installing) browscap.ini

The first thing you need to do is to check if your system has browscap.ini installed and if not, can you do so by yourself. Open your favourite text editor and invoke the phpinfo() function. This will help you gather some information about your system:

<?php phpinfo(); ?>

Save the file. You can name it info.php and upload it to your server’s root directory. Now, browse to said page and use the find tool on your browser and look for the word “browscap”. You should come across a table with three columns. Look at what the values are next to the word browscap. If there’s a path to a file, you’re set! Skip to the next section of this post. However, if you see no value, you need to do a little bit more work, so keep reading.

The PHP manual points users to this file, which is kindly maintained by Gary Keith, so koodoz to him. Download it and upload it to your server, preferably outside the root www folder. Keep in mind the file’s absolute path on your server.

Now go back to that info.php page and look for Configuration File (php.ini) Path. This is where your PHP configuration file is located. Download the php.ini file and open it with your text editor.

N.B: If your host doesn’t give you access to this folder, they need to do all the work. Get in touch with them and ask them to install browscap.ini.

Again, look for the word browscap and enter the absolute path to your newly-uploaded browscap file. After you’re done, it should look something like this:

[browscap]
browscap = /path/to/your/php_browscap.ini

Save and re-upload the file. Depending on your host, they might need to restart the http server, but if you have access to the php.ini file, chances are you don’t, so that’s it. If everything’s been done correctly, you can now use get_browser().

Using the get_browser() function

There are millions of ways in which you can use the power of this function. To start, open your text editor and create the following file:

<?php
$browser = get_browser(null, true);
?>

<pre>
<?php print_r($browser); ?>
</pre>

Take a look at the results, they’re pretty detailed! $browser['platform'], $browser['browser'] and $browser['majorver'] show you the operating system, browser and version respectively (bo-ring!), but then you have stuff like $browser['cssversion'], $browser['issyndicationreader'] and $browser['ismobiledevice'] which can be used to do all sorts of things! Endless potential, I say.

Anyway, hope this was useful and feel free to comment to discuss or get some extra help :)