BlogmyQuery – BMQ

Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing. An obvious example is whether or not a vertical scrollbar, should one exist, is included when the viewport’s width is calculated.

I made a note about this two years ago in Media queries, viewport width, scrollbars, and WebKit browsers. In that post I also pointed to the following statement in the Media Queries specification:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

So it’s pretty clear what browsers are supposed to do. But in reality this varies. It doesn’t just depend on the browser and operating system but also on user settings. To find out what current browsers do, I created a simple Media Query width test document with a number of breakpoints and opened it in a lot of browsers.

I saw three different behaviours.

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson

A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason.

I first noticed it in narrow mobile viewports when testing changing the orientation from landscape to portrait in the iOS Simulator, which made me think that it happened only in iOS WebKit. However when I made a minimal test case to try to isolate the problem it turned out that it happens in WebKit-based desktop browsers like Safari, Chrome, and iCab as well. I haven’t been able to reproduce it in any other browsers though.

After a lot of testing I found the culprit, and it was a quite unexpected one to me.

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson

One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the browser will automatically zoom in on the entire page a little when you tap the form control.

The intention is likely to be helpful and ensure that you can see the text you’re typing or the options in the select element. This is fine, of course. What’s annoying is that the browser doesn’t zoom back out once you’re done with the control, so you have to pinch the screen and manually zoom out. Not showstopping, but rather annoying. This behaviour seems to be the same for all browsers that use WebKit, which as far as I know means all iOS browsers except Opera Mini (which does not auto-zoom form controls).

For end users I don’t know if it is possible to avoid this, but for web developers there are a couple of ways.

Read full post

Posted in CSS, iOS.

Copyright © Roger Johansson

Every now and then I’m handed a design comp that has customised checkboxes and radio buttons. This used to make me think “Oh no, not again� because I simply didn’t know of a reliable way to customise these particular form controls.

Sure, if all you care about is replacing the browser default with a custom graphic it isn’t that hard. But if like me you’re also interested in doing so without degrading user experience, especially during keyboard interaction, you have a number of problems to deal with.

Fortunately the situation is a lot better now than it was a few years ago. My first attempts at custom checkboxes and radio buttons involved quite a bit of JavaScript trickery to toggle between different states of the buttons, and I never got it to work perfectly cross-browser, cross-input device. However, since recent versions of all major browsers support the :checked CSS pseudo-class, you can now leave it to the browser to handle the states and focus on the CSS. No JavaScript involved.

Read full post

Posted in Accessibility, CSS.

Copyright © Roger Johansson

Sometimes it’s useful to know if images are enabled in the user’s browser, so that you can adjust your CSS and/or JavaScript to make sure that important content is not hidden and that the page is still usable even if images aren’t loaded.

Steve Faulkner describes one example of such a scenario in Detecting if images are disabled in browsers – using an image to convey information that is also available in text that is positioned off-screen. In a CSS on + images off scenario, sighted users won’t get any information.

It’s often possible to write your markup and CSS in a way that avoids this problem, but it isn’t always practical. Hence knowing whether images will be displayed or not is helpful.

Read full post

Posted in Accessibility, CSS, JavaScript.

Copyright © Roger Johansson