Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

CSS zebra striping table rows

Posted: May 9, 2015
Written by: Saints At Play
Category: CSS

One of the great things about modern browser support for web standards is the amount of really cool things that become so much simpler to do than before.

Case in point: alternating the striping of table rows, lists etc - also known as zebra striping.

With CSS this now becomes almost trivial.

If you're using a pre-processor such as Sass (and if you're not you really should think about investing the time to implement this tool into your development process as it will completely change how you write your CSS....for the better) you can accomplish row striping with the following snippet:

More »

Preventing text scaling on iPhone landscape orientation change

Posted: April 25, 2015
Written by: Saints At Play
Category: CSS

You may have come across the following issue while developing responsive websites: you're testing your finely crafted pages on an iPhone and change to a landscape orientation only to find your page text has suddenly increased in size.

No, you didn't do anything wrong: it's simply a quirk of text rendering on Webkit, Gecko & Trident based smartphones and the fix is surprisingly simple.

More »

Customising a form select menu with CSS

Posted: April 11, 2015
Written by: Saints At Play
Category: CSS

CSS, when combined with modern browser support for the latest technologies, allows front-end developers a wider palette of options for crafting website and app interfaces than was possible 10 years ago. In this short tutorial we'll take you through how to customise a standard HTML select menu using nothing more complicated than CSS.

More »

Animating div height from bottom of container to the top instead of top to bottom

Posted: May 16, 2014
Written by: Saints At Play
Category: CSS

We came across some interesting behaviour while building a charting application with HTML, CSS and jQuery. When it came to animating the individual bars of the charts that we were generating the height would always grow downwards! As bizarre as this behaviour seemed fixing it proved to be relatively straightforward.

More »

CSS Hacks for Firefox

Posted: February 25, 2014
Written by: Saints At Play
Category: CSS

No matter how well you craft your CSS you will inevitably encounter a situation where a hack is the only solution to the problem you're facing. Normally this applies only to Internet Explorer but you may come across the odd time when, for whatever reason, Firefox is the misbehaving browser.

Now the question: how to go about targeting Firefox without affecting styles for other non-IE browsers such as Google Chrome, Opera and Safari?

More »

Essential rules for print CSS

Posted: February 10, 2014
Written by: Saints At Play
Category: CSS

One of the most overlooked and often neglected areas of CSS development is that of printing. All too often front-end developers concentrate only on crafting styles that are compatible across different browsers and devices and don't consider how their pages may look when printed.

Let's take a look at some of the challenges involved with creating print optimised CSS.

More »

Latest Tweets