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 […]

CSS3 Gradient Backgrounds and Controlling Their Height

Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.

A quick CSS3 sibling test with the video tag

I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net. I wanted to display related information when the video is playing. The sibling selector makes this easy. Here’s the basic markup <li> <video>…</video> <p>…</p> </li> I wanted the paragraph to appear when the video is […]

Dive into HTML5 should be everyone’s intro to the standard

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is. I […]