Over the weekend, I spent some time updating the CSS (cascading stylesheet) of this blog. There were two main purposes for this: Less and @media queries.
First of all, LESS. This is an open source compiler that imposes some much needed structure and programming ability to CSS. For example, it gives you variables, mixins, nested rules, arithmetic expressions, and so on. The compiler will compile code written as LESS into a standard CSS file, which the browser then uses as normal.
I’ve now rewritten my main CSS file as LESS – and in doing so found a whole bunch of small errors with the original CSS. This was a little painful to do, but rewarding in the end. The ability to declare colors and margin/padding values as variables was a huge benefit. I still have some tweaking here and there to tidy things up, but all in all I’m much happier with what I now have.
Second, @media queries. This is the ability, introduced in CSS2, to detect the abilities of the device the content is being displayed on and to introduce specific CSS behaviors depending on the screen size. I’ve had a few complaints over the years that my blog was not “netbook-” or “tablet-friendly”. The main text column is the only part that is resizable and on these devices it just gets squished to the point of being tedious to read.
As mentioned, this is a work in progress. Tweaks will happen here and there, but this will remain the look for a while.