BlogmyQuery – BMQ

When working around bugs and different levels of support in various browsers, a common approach is using conditional comments to target certain versions of Internet Explorer. Come to think of it, it’s pretty rare to need to fix something for an older version of any other browser. People who do not use IE tend to upgrade quicker and CSS-related bugs in other browsers tend to be less severe than in IE, especially compared to IE7 and older.

Anyway, while working on a lot of responsive layouts lately I’ve started using an approach that I’ve found reduces the risk of more advanced CSS, especially CSS3, tripping up older browsers. I simply wrap any CSS that I know won't work at all or may only half-work in a very basic media query, like this:

@media only screen {
    /* "Advanced" CSS2 and CSS3 goes here */
}

Read full post

Posted in CSS.

Copyright © Roger Johansson

If you like to spread your CSS over multiple files, as many people do (but I don’t), it is generally a good idea to concatenate them before deployment to reduce the number of HTTP requests.

There is one thing to be aware of when doing this – if you use any @import rules they must precede all other rules in that file, as per the CSS 2.1 specification. So if any other than the very first of the CSS files you concatenate has an @import rule, the combined file will violate the specification.

Read full post

Posted in CSS.

Copyright © Roger Johansson

A recurring problem when making sites fit in a narrow viewport is navigation. The most common approach on larger screens is to use a horizontal navigation for the top level items. Sometimes such menus are complicated/complemented by drop-downs listing sub-items, but I’ll leave that out of this post and focus on how to handle just the horizontal navigation bar.

Now, you could simply let the menu items wrap as they need to on small screens. In some cases that is a completely acceptable option, but often that can make the menu take up too much vertical space. One common design pattern (there are more, as evidenced by Brad Frost in Responsive Navigation Patterns) for avoiding that is to convert the navigation items into a select element on small screens. While doing so does save space and may initially feel like a smooth solution, there are a number of drawbacks, some of which Andy Clarke mentions in The select menu navigation pattern. I think there are better options.

I’ve always felt that using select elements for navigation is a bad idea, be it on the desktop, mobile, wide screens, or narrow screens. Form elements are simply not meant for navigation. So here is an alternative way of solving the problem.

Read full post

Posted in Accessibility, CSS, JavaScript, Mobile Web.

Copyright © Roger Johansson

Sometimes you need to hide parts of a web page, either permanently or temporarily. A common use case is content that becomes visible only after the user has interacted with a control on the page, for instance by clicking a button that reveals more content or activating a tab in a tab system.

Hiding content from all users, including screen reader users, is easy – just use display:none. Add visibility:hidden if you want to be extra sure that it is hidden, since Screen readers sometimes ignore display:none. However in some cases you want to hide something from sighted users without hiding it from screen reader users. In those cases you can use the off-screen and clip techniques. But what if you want screen readers to ignore content that is visible?

Read full post

Posted in Accessibility.

Copyright © Roger Johansson

You’ve heard it many times before: make sure your JavaScript plays nice with other code, especially if you package it up as a plugin and share with other developers. Perhaps the most obvious thing to think about is global variables, which you want to avoid creating since they can easily clash with other global variables.

How you apply and remove event handlers may also cause problems that can be really hard to troubleshoot. Recently I was working on a project where I had attached a function to the window.resize event. But my function simply would not run, and it took me forever to figure out why.

Read full post

Posted in JavaScript.

Copyright © Roger Johansson