Most recent post
iOS orientation change and automatic text resizing
Most web developers who have viewed their work in an iOS device know that Safari for iOS likes to zoom in on the page and do weird things to font size when you change the device’s orientation from portrait to landscape. A too common way to prevent that is to completely disable the user’s ability to zoom, which you really do not want to do.
Luckily there is A Fix for the iOS Orientationchange Zoom Bug, a very clever one too. I’ve been using this in a few projects and have found it to work well. I have however run into a couple of issues (that in hindsight are pretty obvious) that I want to note here as a reminder to my future self.
Slightly older posts
Make sure your HTML5 document outline is backwards compatible
When using the HTML5 sectioning elements, make sure the document outline created by the headings is backwards compatible.
Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap
As text columns become narrower, the risk of long words overflowing increases. Luckily you can use the hyphens and word-wrap CSS properties to prevent it.
End tags, semi-colons and maintainable code
Relying on browsers to magically insert missing code, like optional HTML tags or semi-colons and curly braces in JavaScript, is not developer-friendly.
The HTML5 placeholder attribute is not a substitute for the label element
The placeholder attribute is meant to give the user a nonessential hint before filling in a form field, not replace the label element.
Use only what you need
Don't add boilerplate code, polyfills, shivs, frameworks and other things that increase the weight of your site unless you actually need it.
Skip links and other in page links in WebKit browsers
In page links do not work as expected (or as in other browsers) when activated by keyboard in WebKit browsers like Safari and Chrome.
Using max-width on images can make them disappear in IE8
Images that have a CSS max-width, a width attribute in the HTML, and are children of a floated element that has no explicit width set may be invisible in IE8.