Require use of known properties

The list of supported CSS properties is growing quite large, and it's very easy to miss a typo in a single property when the property name isn't checked.

The CSS outline property is used to define a border around elements. Unlike the border property, the outline property does not alter the size or layout of the element. Because of this, browsers frequently use outline as the specification for an active state. In Internet Explorer and Firefox, the outline of a selected element is a single pixel dotted line when focus has moved to that element.

The focus outline is important for accessibility because it gives a visual indication as to where the focus is on the page. For keyboard-only users, tracking the focus on a web page is impossible without the visual indication given by the focus outline. Unfortunately, some consider the focus outline to be "ugly" or unappealing, and remove it using code such as :

a {
    outline: none;
}

Or:

a {
    outline: 0;
}

Both of these will remove the outline from an element, so it won't appear even when focus has moved to that element. This is very bad for accessibility.

Of course, there are times when you may want to provide a custom focus decoration for users instead of the default dotted border. In those instances, it's appropriate to remove the outline and add another treatment. The best way to do this is to use :focus and provide the alternate treatment along with resetting outline, such as:

a:focus {
    border: 1px solid red;
    outline: none;
}

Rule Details

Rule ID: known-properties

This rule checks each property name to make sure that it is a known CSS property. The CSS property list is maintained as part of the CSS parser and this rule uses the parser information to determine whether or not the property has been verified. This list will need to be updated as CSS continues to develop, but is a good start for avoiding errors. The intent of this is to warn when there are misspellings.

All vendor-prefixed properties (those beginning with a -) are ignored because vendors may add in their own properties at any point in time, and there are no canonical lists of these properties. This behavior is different than a CSS validator, which warns when a vendor-prefixed property is used.

In addition to checking the property name, this rule also checks the property value against the property name to ensure proper values are being supplied. Not all properties are supported yet, but a large number are.

The following patterns are considered warnings:

/* clr isn't a known property */
a {
    clr: red;
}

/* 'foo' isn't a valid color */
a {
    color: foo;
}

The following pattern is considered okay and does not cause a warning:

/* -moz- is a vendor prefix, so ignore */
a {
    -moz-foo: bar;
}