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

  • #Facebook’s #FacialRecognition tool faces class action suit over mishandling #biometric #data

    twitter.com/i/web/status/9… Published 5 days ago
  • #ElonMusk drafts in humans after #Robots slow down #teslamodel3 production

    twitter.com/i/web/status/9… Published 5 days ago
  • Mastering @ionicframework #appdevelopment

    twitter.com/i/web/status/9… Published 12 days ago
  • Working with #php & #sqlite in @Ionicframework #Apps

    twitter.com/i/web/status/9… Published 13 days ago
  • Take the Wolfowitz doctrine add the Project for a new American Century combine with compliant/compromised… https

    twitter.com/i/web/status/9… Published 13 days ago
  • First the #RussianSpyPoisoning, now the #SyriaGasAttack - NO independently verified evidence for ANY of the… https

    twitter.com/i/web/status/9… Published 13 days ago
  • The whole #SyriaGasAttack narrative (repeated HOW many times over the past 5 years??! [each time independent inspec… https

    twitter.com/i/web/status/9… Published 13 days ago
  • Managing @ionicframework #application #data with #pouchdb

    twitter.com/i/web/status/9… Published 13 days ago
  • Developing cross platform @Ionicframework #apps with #capacitor

    twitter.com/i/web/status/9… Published 14 days ago
  • #AssadHitsDoumawithChemicals right when he's on the verge of #victory??? Yeah, that makes sense..I totally trust ou… https

    twitter.com/i/web/status/9… Published 16 days ago
  • How many times has the #West tried to blame #Assad for every single previous #ChemicalAttack in #Syria and been pro… https

    twitter.com/i/web/status/9… Published 16 days ago
  • Even #CaptainAmerica needs some #MeTime! https

    Published 17 days ago
  • Share your @Ionicframework #ebook testimonial here

    twitter.com/i/web/status/9… Published 17 days ago
  • @historylvrsclub Enough with the liberal, pro-migrant narrative @historylvrsclub. It was an American family and Ame… https

    twitter.com/i/web/status/9… Published 18 days ago
  • Unit testing @ionicframework #apps with #jest

    twitter.com/i/web/status/9… Published 18 days ago
  • @historylvrsclub Conor McGregor!

    Published 19 days ago
  • @historylvrsclub Yeah, it’s called chemical enhancement

    Published 19 days ago
  • @historylvrsclub Enough with the lies/sneaky liberal agenda @historylvrsclub - He was the abandoned son of a Syrian… https

    twitter.com/i/web/status/9… Published 19 days ago
  • Using #angular pipes with @ionicframework #apps

    twitter.com/i/web/status/9… Published 19 days ago
  • Share your experiences with my @ionicframework #ebooks

    twitter.com/i/web/status/9… Published 20 days ago