BlogmyQuery – BMQ

As all widely used web browsers (unless you still consider IE7 as being widely used) now support the :before and :after pseudo-elements along with the content property, using those pseduo-elements has become more and more common.

There are many clever CSS tricks they can be used for, like implementing a particular design without having to insert extra markup into your HTML. There is one catch though, and many developers seem unaware of this: several screen readers will speak content that is created this way. VoiceOver does (in both OS X and iOS). NVDA does when used with Firefox, though not with IE. I made a CSS generated content demo page so you can try it yourself.

Read full post

Posted in Accessibility, CSS.

Copyright © Roger Johansson

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.

Read full post

Posted in CSS, JavaScript, iOS.

Copyright © Roger Johansson

This is just a short reminder of something I wrote about in On using h1 for all heading levels in HTML5: make sure your HTML5 document outline is backwards compatible.

The reason is simple. Browsers and assistive technology haven’t implemented the HTML5 outline algorithm yet (the only exception I’m aware of is JAWS, which gets it wrong, as Jason Kiss explains in JAWS, IE and Headings in HTML5).

Read full post

Posted in Accessibility, HTML 5.

Copyright © Roger Johansson

A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

As columns of text become narrower, the risk of a single word being longer than the column width increases. When that happens, the text normally extends outside the column (unless the column element’s overflow property has been given a different value than the default visible). The effect can be anything from just a slight visual glitch to unreadable text. Either way it’s something you don’t want to happen.

Read full post

Posted in CSS.

Copyright © Roger Johansson

In Of parser-fetishists and semi-colons, Chris Heilmann brings up the importance of code maintainability, something that I feel is overlooked a bit too often.

The main issue Chris talks about is omitting semi-colons at the end of JavaScript statements, the subject of a current JavaScript drama. Doing so is valid syntax in many cases, and browsers parse and execute the code fine. However, it does not improve code readability for humans, who are often as important to target as the browsers that run the code.

Read full post

Posted in Coding, HTML 5, JavaScript.

Copyright © Roger Johansson