The MDN page titled Sections and Outlines of an HTML5 Document includes the following warning:
There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents […] authors are advised to use heading rank (
h1–h6).
Given the speed at which CSS3 is implemented, this is disappointing. Visitors to this site use modern, capable browsers; it’s a shame not to be able to use the most logical document outline.
For years, Firefox has taken the prize for the single most frustrating rule in a UA stylesheet.
input {
line-height: normal !important
}In my last post, I mentioned I was trialling the SUIT CSS naming convention as I redevelop this site. More generically, let’s address why a naming convention should be used at all.
For the purposes of this post, I’m talking specifically about class naming conventions. (While one may have naming conventions for JavaScript functions, variables, and HTML IDs too, they’re not the focus of this post.)
I’m in the process of redeveloping this site. The site will still use WordPress but I’ll be adding a custom skin.
I’ve been wanting to try Pattern Lab for a while, so the first step is to create a pattern library. It’s early days, today’s task it to set up a reset and base styles.
Additionally, I’ll be sampling a CSS naming convention I’ve been meaning to try for a little while. A personal project is the perfect opportunity.
As a tribute to Eric Meyer’s daughter Rebecca, the named colour rebeccapurple has been accepted into the CSS spec. Rebecca passed away on her sixth birthday recently.
Based on the standard browser font-size of 16px, the following media query to have an affect on screens 160 pixels wide and up.
@media only screen and ( min-width : 10em ) {
html {
background-color: #ddd;
}
}Now, I would expect adding the following code would cause the media query above to have an affect on screens 320 pixels wide and up.
html {
font-size: 2em;
}Pattern libraries are becoming better known as sites such as the BBC and A List Apart release their pattern libraries publicly. For the uninitiated, a pattern library is a collection of elements used on a web site. They define everything from the base font to page layouts.
Brad Frost and Dave Olsen’s Pattern Lab is one tool for creating a style guide. As the demo shows, it combines both a style guide and a method for testing the responsiveness of a web site.
When creating a style guide using Pattern Lab for your site, it’s necessary to store the /source directory in your Git repo.
The HTML5 Boilerplate popularised the html tag conditional classes pattern. This pattern is usually some variation of:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The Typekit kit editor provides two versions of the embed code, the default version blocks rendering and the asynchronous version which can produce a flash of unstyled content (FOUC).
In the case of Typekit, I prefer the FOUC over slowing down rendering. The asynchronous code also offers the advantage of your site staying online should Typekit go down.
I decided to spend a little time optimising the asynchronous code Typekit provides.
For several years I’ve used Paul Irish’s technique for avoiding the FOUC caused by JavaScript kicking in. I’ve recently changed to a slightly improved version.