Display:Contents and the Impact on Accessibility

I came across a bizarre experience while testing a Styled-Component prototype with VoiceOver and Chrome. This simple panel had an H2 in the code, but I couldn’t navigate to it with the screen reader. I opened the accessibility inspector in Chrome and sure enough, the H2 had no semantics. It was being rendered to the […]

Difference between :root and html

The :root selector targets the highest level parent, which would be the <html> tag in an HTML document. The :root has a higher specificity, as it is a pseudo-class instead of a plain element. CSS-Tricks has a great description on this: :root by Sarah Cope. In this example, the background of the page would be […]

YUI 3.0 Gallery now includes modernizr functionality

Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code. This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr). This is a wrapper for Modernizr library that is […]

Create a tabbed search form with YUI

Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms. Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the […]

Adding style to your rel attributes with CSS

View the finished example: Adding style to your rel link. There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your […]