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 postPosted in...

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 postPosted in CSS, JavaScript, iOS.Copyright © Rog...

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 postPosted 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 postPosted in CSS.Copyright © Roger Johan...

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 postPosted in Coding, HTML 5, JavaScript.Copyright © Roger Johansson

One of the useful things in HTML5 is the placeholder attribute that lets you specify a short hint for text input fields (textarea elements and the text states of the input element). In browsers that implement placeholder according to the specification, the hint text is displayed only when the field is empty and unfocused.This is good since it gives you an opportunity to provide the user with hints regarding what they are expected to enter in the field. What is not good is that the placeholder attribute is often used as a substitute for the label element. I've seen this in various demos of the placeholder attribute as well as in demos for scripts that emulate the placeholder attribute in b...

The other day Rachel Andrew posted Stop solving problems you don't yet have, where she brings up an increasingly common problem with front-end development - unnecessary bloat.I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.Read full postPosted in CSS, Coding, JavaScript.Copyright © Roger Johansson

Recently a coworker pointed me to an article explaining Why your 'Skip to Content' link might not work in WebKit-based browsers like Safari and Chrome. Read the article for details or read my post from September 2005 about Keyboard navigation problems in IE and Safari for a briefer explanation.In summary: following an in page link (a link that targets an element on the same page, like <a href="#main">Skip to main content</a>) does not properly move keyboard focus in WebKit browsers. This means that when you press tab after activating an in page link, focus is moved to the first focusable element after the link rather than the first focusable element after the target.Read full ...

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.It worked great everywhere... until I went to check in IE8. The site's logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.Read full postPosted in Browsers, CSS.Copyright © Roger Johansson

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don't always have any of those options.Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround....

Showing whether a link on a web page has been visited or not can be very useful. One example that many will be familiar with is how it helps you know which links you have already followed from a Google search results page - links to pages you have already visited are a different colour than the other links.Changing only the colour can be a bit subtle though, especially for people with colour vision deficiency. Depending on which colours are used to differentiate between visited and unvisited links it can be hard to tell them apart. To make the difference more obvious, there are a number of techniques involving background images, generated content (like the one I describe in Check marking ...

When adapting a layout for different viewport widths (a.k.a. responsive design) or media (like print), it's common to reset any float and width values on major layout blocks to linearise their display.Unfloating a floated element is as simple as specifying float:none. Width doesn't seem to be quite as straightforward - lately I've come across several cases where people use width:100% to undo explicitly specified widths when they should be using width:auto instead. So here's a brief explanation of the difference.Read full postPosted in CSS, Quick Tips.Copyright © Roger Johansson

I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn't applied.This was pretty puzzling as I couldn't remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference.Read full postPosted in CSS.Copyright © Roger Johansson

As I have noted in a couple of blog posts recently, there are some cases when CSS has quite unexpected results in screen readers (or the way web browsers create the accessibility information they hand over to screen readers). If you haven't read them, the posts are Screen readers, list items and list-style:none and Using display:table has semantic effects in some screen readers.Here are a few examples: Using display:table on non-table elements to get the visual layout characteristics of an HTML table without actually using one may cause screen readers to act as if there was a real table Using display:block or float on table-related elements may cause screen readers to treat the table as a...

Back in the day you used to be able to view source on a web page to see the markup used to create it. These days, on many sites, a large portion of the markup is not visible when you view source because it is inserted by JavaScript functions.That isn't necessarily a problem provided that you use progressive enhancement and unobtrusive JavaScript. If you follow those principles, content and basic functionality will still be there when scripting is unavailable. Many of us understand that. But one thing I've noticed is that some developers forget to consider semantics or accessibility in the markup they use JavaScript to insert.Read full postPosted in (X)HTML, Accessibility, JavaScript.Copyr...