BlogmyQuery – BMQ

I’ve always been wary of styling form elements too much. Possible usability and accessibility issues, browser quirks, and the fact that the CSS specification does not define form control styling are the main reasons.

With that said, sometimes you have to do things you don’t really want to. Like styling select elements, which I’ve recently had to find a way to do. There are quite a few workarounds for doing this out there. However, most of the ones I looked at replace the select element with a bunch of links which changes semantics and behaviour a bit too much for my tastes. I couldn’t find any implementation that I was completely happy with, so I took the best one I could find and tweaked it.

Read full post

Posted in Accessibility, CSS, JavaScript.

Copyright © Roger Johansson

It’s not exactly news – it was announced in July in HTML5 Parsing in IE10 – but in case you missed it, Microsoft are removing support for conditional comments from IE10.

I don't expect this to be a big deal. Actually I’m not sure it will have any impact at all, at least not for me. It’s already a rare thing to need to do something special for IE9.

Read full post

Posted in Browsers.

Copyright © Roger Johansson

Since uninstalling Flash I’ve noticed how common it is for sites that still use Flash to pay little or no attention to visitors that do not have Flash Player installed. Showing a “Missing plugin� message instead of navigation links or even worse, the entire site, is an efficient way of turning people away.

There used to be a time when “everybody� had Flash player installed. These days there are many millions of iOS users that don’t. Apple does not include Flash Player with new Macs anymore (neither is it included with OS X 10.7 Lion). And then there are people who block Flash with browser extensions or uninstall it completely.

Read full post

Posted in Accessibility, Usability.

Copyright © Roger Johansson

Sometimes you may want the layout properties that HTML tables have, but you don’t want the semantics of a table since you’re not really working with tabular data. A couple of examples are creating equal height boxes and making an unknown number of items flexibly occupy all available horizontal space.

In situations like these you can use CSS to tell any HTML elements you want to behave like they were tables, table rows, and table cells by using a combination of display:table, display:table-row, and display:table-cell. You get the layout you want without littering your markup with tables that shouldn’t be there. But there is a slight catch.

Read full post

Posted in (X)HTML, Accessibility, CSS.

Copyright © Roger Johansson

Here’s a common scenario: you’re coding up a form with lots of buttons or need to add some elements that trigger JavaScript functions, and in the design comp some of these elements look like links. You intuitively reach for the a element, put some in the markup, add event handlers to them, and style them to match the design.

But wait a bit. Leaving the issue of putting elements that may rely on JavaScript to work in the markup for another time, should those elements really be links? What does the text on them say? What happens when you click them? If they trigger some kind of action that doesn’t match the normal link behaviour of going to another URL, it’s quite likely that you should really be using buttons.

Yes, I know. The designer says these elements need to look like links, period. And there was a time when making HTML buttons look like links wasn’t really possible in a cross-browser way. But these days you can get very, very close. It’s a bit tricky, but possible.

Read full post

Posted in CSS.

Copyright © Roger Johansson