Compatibility & standards

Cross-browser compatibility

Fusion uses a number of approaches that make it bulletproof cross-browser (yes, even IE6) as long as you implement your theming with an understanding of these approaches.

The following browsers are actively tested and supported:

  • Firefox 3.5+
  • Internet Explorer 6 (Drupal 6 only) / 7 / 8
  • Safari 4+
  • Chrome
  • Opera 10+

For IE6 (and to a much lesser extent, IE7 and Opera), we take a stance of progressive enhancement, forging ahead with exciting new web development features while focusing on maintaining standards and a solid baseline performance across browsers. Fusion does not use CSS selectors unsupported by some browsers (such as child selectors) and chaining of CSS classes (.myclass.secondclass {}) in Fusion Core or any subthemes. This will likely be re-evaluated in mid-2010 when dropping IE6 support will be considered.

Fusion’s grid implementation does away with a number of pesky structural cross-browser issues, including dropping columns and doubling margins. The nested fluid grid layout is particularly tricky, which required hand-tuning of percentages due to the differences in rounding across browsers – this is something to keep in mind if you will be defining your own fluid grid layout.

Fusion uses conditional CSS files for IE-specific styles to avoid using hacks and non-compliant code. Where necessary to overcome a browser deficiency (such as IE6’s lack of support for :hover on elements other than <a>), Javascript may be used.

Browser-specific code or properties only supported by some browsers may be used where it is for subtle enhancements, such as -webkit/-moz-border-radius or text-shadow.

Permalink

HTML/CSS validation

Fusion and our themes validate as XHTML 1.0 strict. They also validate as CSS 3 except for browser-specific properties, such as opacity or -moz/-webkit-border-radius, used sparingly for visual enhancements where needed.

Note that not all Drupal modules produce valid code, so your site may no longer validate if you have added third party modules.

Permalink

Accessibility & Section 508

We use Section 508 as a guideline for accessibility. In particular, semantic naming and proper source hierarchy are used, with valid markup. Also, the dropdown menu is keyboard navigable and functional without Javascript enabled, and links are highlighted on :focus. There is also a skip-to-content link as the first link in the source order that becomes visible when activated. When text is replaced with images, it is moved off-screen rather than hidden so that it is legible by screenreaders. In addition, care is taken to ensure that text is resizeable as much as possible without breaking the layout, for those with visual disabilities.

However, most of the burden for accessiblity in Drupal is on what goes into the content added to the site, or features supported by additional modules. For example, images in nodes or blocks should have alt text, and videos should have transcripts or subtitles.

Permalink

Internationalization & RTL (right-to-left) Drupal theming

Drupal’s best practices are followed in Fusion to ensure that themes are multilingual-compatible. Text is passed through translation functions, elements that can be translated (such as taxonomy terms) are not modified in a way that diminishes this function, and styles are coded such that the amount of text that can be contained within them is flexible (important when one language is more verbose than another).

Fusion is RTL-capable, supporting bidirectional theming out of the box. In Fusion Core, you will see many files ending in -rtl.css. These are the RTL equivalents of all stylesheets, where needed, including in browser-conditional stylesheets.

It also has the following features:

  • Content direction and layout (floats, margins, etc.) are automatically reversed in RTL.
  • A ‘rtl’ body class is added whenever the current language is RTL. This can make it easier to add .rtl selectors to stylesheets for small changes instead of adding separate -rtl.css files.
  • Fusion’s included special features (eg. dropdown menus) and block styles (eg. menus, login block) have accompanying RTL CSS.

NOTE: in RTL, some block styles (“Float block right”, “Align content right”) are reversed from the direction the text indicates if you are administering your site in a RTL language. These are noted with a small [LTR]. This can be confusing but is necessary to have the proper opposing layouts for a site that is available in both directions.

Doing your own right-to-left Drupal theming

RTL theming is a bit conceptually confusing if you’re new to it, but the basic principle is that you’re reversing values for floats, margins, padding, absolute or relative positions, text alignment, borders, background positioning, and image direction.

Let’s say you had the following declaration for styling a block title with padding and an icon on the left:

h2.block-title {
   background: transparent url(images/icon.png) no-repeat scroll left center;
   padding: 0 0 0 20px;
   text-align: right;
}

The RTL equivalent would become:

h2.block-title {
   background-position: right center;
   padding: 0 20px 0 0;
   text-align: left;
}

Add this to your Fusion subtheme’s -rtl.css file and it will be loaded after your main CSS file, adding the above properties when the site is viewed in RTL.

That’s it! Go through your CSS and look for any direction-specific properties, and then override these in the RTL stylesheet.

We have not tested this module but it may come in handy: CSS Flip.

Permalink