456 Berea Street

Roger Johansson is a web professional specialising in web standards, accessibility, and usability.
블로그 "456 Berea Street"에 대한 검색결과 290
  •  [비공개] How to adjust an iframe element’s height to..

    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..
  •  [비공개] Visited links can only be differentiated by..

    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..
  •  [비공개] The difference between width:auto and width..

    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% t..
  •  [비공개] Styling buttons in iOS WebKit and -webkit-a..

    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 a..
  •  [비공개] Screen readers and CSS

    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 fe..
  •  [비공개] JavaScript-created markup also needs to be ..

    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 bas..
  •  [비공개] An accessible, keyboard friendly custom sel..

    I’ve always been wary of styling form elements too much. Possible usability and accessibility issues, browser quirks, and the fact that the CSS specification does not define form control styling are the main reasons. With that said, sometimes you have to do things you don’t really want to. Like styling select elements, which I’ve recently had to find a way to do. There are quite a few wor..
  •  [비공개] No more conditional comments in IE10

    It’s not exactly news – it was announced in July in HTML5 Parsing in IE10 – but in case you missed it, Microsoft are removing support for conditional comments from IE10. I don't expect this to be a big deal. Actually I’m not sure it will have any impact at all, at least not for me. It’s already a rare thing to need to do something special for IE9.Read full postPosted in Browsers.Copyr..
  •  [비공개] Please provide a usable fallback for Flash ..

    Since uninstalling Flash I’ve noticed how common it is for sites that still use Flash to pay little or no attention to visitors that do not have Flash Player installed. Showing a “Missing plugin” message instead of navigation links or even worse, the entire site, is an efficient way of turning people away. There used to be a time when “everybody” had Flash player installed. These days..
  •  [비공개] Using display:table has semantic effects in..

    Sometimes you may want the layout properties that HTML tables have, but you don’t want the semantics of a table since you’re not really working with tabular data. A couple of examples are creating equal height boxes and making an unknown number of items flexibly occupy all available horizontal space. In situations like these you can use CSS to tell any HTML elements you want to behave like ..
  •  [비공개] Styling button elements to look like links

    Here’s a common scenario: you’re coding up a form with lots of buttons or need to add some elements that trigger JavaScript functions, and in the design comp some of these elements look like links. You intuitively reach for the a element, put some in the markup, add event handlers to them, and style them to match the design. But wait a bit. Leaving the issue of putting elements that may rel..
  •  [비공개] Authentic Jobs turns six

    On September 25, Authentic Jobs turned six (I’ve been a listing partner for almost five years). To celebrate that sixth birthday, this week you can save quite a bit when posting a job listing: Post a job on authenticjobs.com and get 50% off Post a job on uk.authenticjobs.com and pay just £1.00 But that’s not all. As part of the birthday celebration there is also a campaign to raise 60..
  •  [비공개] How to move VirtualBox machines to another ..

    Recently I needed to free up some space on my Mac’s internal hard drive and decided to move my Virtualbox virtual machine disk images to an external drive. At first I thought it was going to be as easy as just copying the .vdi files to the other drive and then pointing each Virtualbox machine to the new location of its corresponding .vdi file. Turned out it isn’t quite that easy.Read full p..
  •  [비공개] Screen readers, list items and list-style:n..

    It’s more or less common practice these days to use real HTML lists when what you’re marking up makes logical sense as a list. If you don’t want it to look like a standard ordered or unordered list, that’s easy to fix with a bit of CSS. The underlying semantics will still be there for people using browsers without CSS support or screen readers. But will it? The short answer is no, not a..
  •  [비공개] Block level links and accessibility

    One of the news in HTML5 is that links are now allowed to contain block level elements. In HTML 4, only inline elements are allowed. Linking block level elements such as headings and paragraphs can be useful, but there are some things to be aware of in order to avoid reducing the usability and accessibility of such links to screen reader users.Read full postPosted in Accessibility, HTML 5.Copyr..