22 September 2014

Old web standards vs. new best practices

My professional life as a front-end developer started just before the Web Standards Project, everyone was working to make sure style was separated from content. It was drummed into me and I drummed it into you for many years, so it’s been difficult to forget.

19 September 2014

Autoprefixer – the write once works everywhere Gem

Are you bored of looking up which vendor-prefixes are still required for a particular rule on a particular day, or you want to remove the bloat that a catch-all mixin gives you? Then read on.

13 June 2014

Five front-end links for Friday

A few links I found interesting this week.

13 May 2014

Highlight dates from selection to hover position

This would be useful on a calendar when selecting a range between two dates.

View the demo

22 April 2014

Pure CSS Rollover Image Carousel

This might be useful for a list of search results where you want the ability to show more images without the distraction of using a full carousel.

View the demo

22 November 2013

Problem: Background image overlapping right-hand-side of the grid

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page.

16 August 2013

CSS opacity not working in iOS

I was having a problem where adding a basic css opacity on an element wouldn’t work when viewing in iOS. Looked fine on desktop.

I didn’t come across a specific solution to my problem, but someone else had a similar thing when using opacity with transitions.

2 August 2013

IE8 password input field displays square characters

Ever seen this when testing a website in IE8… Instead of the usual obfuscation using dots or stars, you see a square/rectangular symbol which usually shows up when the browser doesn’t have the entity available to display. The usual reason is that there is a custom font or webfont in use on the fields.

5 June 2013

Fluid width squares in CSS

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript?

15 March 2013

Click event handler iPhone: non-anchor elements

I have a results table where each row is a form and the user continues by pressing the submit button for that result. At smaller widths I collapse the table, hide the submit button and add a click event handler to the tr – it works fine, up to a point.

A filter bar was added that uses AJAX to reorder and add to the results so now the DOM is being generated with JS. Usually you can use .on(event, selector, handler) to catch any generated elements, but this won’t work on iPhone or iPad*.

5 May 2012

My responsive web development technique

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too.

3 March 2011

Chrome won’t center button using auto margins

Note: I’m not American, but it feels weird writing ‘centre’ if you code in CSS all day.

I’ve come across a problem I need solving and Google is not being my friend. I need to center a button on the page without specifying its width, because the text inside is of various lengths. The following works how I want in Firefox, Safari, Opera and even IE6, 7 and 9 (thanks to Sarah for testing).