debug.css

The intention of the debug.css is to identify issues with the markup that might not be easily identified.

General Issues

• Inline styles:

  Why?

  Inline CSS should be avoided.

  These styles should be defined in an external stylesheet.

  background

  border

  float

  font-family

  font-size

  font-weight

  letter-spacing

  line-height

  list-style

  outline

  resize

  text-align

  text-decoration

  text-indent

  text-transform

  vertical-align

  width

  word-spacing

• Empty Elements

  Why?

  Elements that contain no text usually are in place to achieve a certain layout.

  The layout should be controlled by the CSS.

• <u> tag

  Why?

  Underlined text is commonly mistaken for a link.

  This text is underlined

• <font> tag

  Why?

  The <font> tag is sometimes used to style text.

  The style should be controlled by the CSS

  font tag example

• Align Attribute

  Why?

  The align attribute is obsolute. Layout should be defined in an external stylesheet.

  align attribute example

• Shape Attribute

  Why?

  SiteCore has a mind of its own. It will automatically add a shape attribute to links.

  This attribute is meaningless and should be removed.

  Example Link

Links

• href Attribute

  Why?

  An anchor tag should always have an href value defined.

  Missing attribute

  Empty attribute

  Hash (#) only

  Obtrusive JavaScript

• target Attribute

  Why?

  The target attribute should never be used.

  Example

Images

• Missing src Attribute

  Why?

  The src attribute is required on all img tags.

• Empty src Attribute

  Why?

  The src attribute is required on all img tags.

• Missing alt Attribute

  Why?

  The alt attribute is required.

  

• Empty alt Attribute

  Why?

  The alt attribute is required.

  

• Empty alt Attribute & Missing Image

  Why?

  This will highlight missing images with empty alt attributes

  

• height Attribute

  Why?

  Defining a height this way ruins the ability to make the site responsive

  

• width Attribute

  Why?

  Defining a width this way ruins the ability to make the site responsive