Skip to content

6.1 Customize: CSS

bmorton edited this page Oct 20, 2011 · 8 revisions

Index

Overview
HTML Tag xmlns Attribute
Clearfix
Incompatible CSS – Internet Explorer
A Customization Example

Overview

The stylesheets that can be generated during the installation of the Formtastic gem (formtastic.css and formtastic_changes.css) are a proof of concept, intended to show how one might approach styling forms based on Formtastic’s markup choices.

Most notable is the choice to wrap each “input” in an <li> tag, and each group of inputs in an <ol> and <fieldset>. The FAQ provides a detailed discussion on this choice.

The provided stylesheets are general purpose, meaning that they’re trying to solve a problem for a lot of people, in a lot of very different contexts, websites and layouts. This means a few things:

  1. they can’t and won’t suit all situations
  2. they’re relatively bloated and verbose, when compared to purpose-built styles for a given situation

If you have a skilled stylesheet author in your team, you may choose to simply write your own CSS. Justin French (the creator of Formtastic) doesn’t use the default stylesheets on any of his own projects, as it’s far faster to write styles that suit the rest of his layout, only styling the parts of Formtastic he needs.

If your team lacks CSS-fu, it suggested that you put formtastic.css in place as a default, then make any changes you need in formtastic_changes.css. It’ll save you a heap of time up front, and you can always remove them later. The styles are name spaced well and shouldn’t interfere with the rest of your layout.

Design decisions in the supplied stylesheets:

  • The use of order lists (<ol><li></li></ol> as containers for labels, inputs, hint text, inline error messages etc. A design choice that favours ordered lists makes intuitive sense in that a form is a listing of data input fields.
  • The html tags <fieldset></fieldset> and <li></li> have the css float clearfix set of declarations applied to them – clearfix will be discussed later.
  • Within <li></li> list items, labels are styled using display:block; and float:left;
  • Inputs or selects are also included in the <li></li> container with the floated labels and thus the need for the use of clearfix.
  • Labels are given 25% of the width of the <li></li> container and inputs 74%

As a result of these styling choices, labels and their associated inputs are displayed as a vertical listing of a single label and input pair on separate lines.

HTML Tag XMLNS Attribute

Let’s review some background information that has an impact on Formtastic’s default styling. The standard document type declaration, as well as, <html> tag produced by the Rails scaffold generator are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Note the xmlns attribute included in the <html> root element tag. If the <html> xmlns attribute is not included with an XHTML document type then the document will fail WC3 markup validation .

XMLNS is an attribute selector assigned to the root <html tag. It, in effect, creates a whole new xml name space that is available under css 2.1 styling. As a name space identifier, it is available as a selector for any other document tags contained by the <html> tag.

Clearfix

The Formtastic file formtastic.css contains a set of css declarations know as clearfix.

Clearfix is a solution for the problem of overlapping containers. It’s a solution that uses css hacks, as well as, specific declarations to fix the overlapping container problem.

Clearfix will likely be replaced by a much simpler solution in a later version of Formtastic.

Here’s one example of that simpler solution devoid of any hacks. For comparison purposes, an extract of Formtastic’s clearfix method is shown below this simpler solution. In the future, hacks will not likely be needed based on these I. E. browser market share trends .

/* One possible 'simple' solution */

.containingElement{
overflow: hidden;
height: 100%;
 }

Despite being somewhat complex and convoluted, the following clearfix solution has one very big advantage; it is know to work across a braod selection of browsers and browser versions.

Here’s clearfix as included with the current formtastic.css file for both fieldsets and ordered lists

/* clearfixing the fieldsets */

form.formtastic fieldset { display: inline-block; }
form.formtastic fieldset:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset { display: block; }
* html form.formtastic fieldset { height: 1%; }

/* clearfixing the li's */
form.formtastic fieldset > ol > li { display: inline-block; }
form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset > ol > li { display: block; } 
* html form.formtastic fieldset > ol > li { height: 1%; }

Briefly, the purpose of each clearfix declaration is:

  • form.formtastic fieldset > ol > li { display: inline-block; } – this is a hack required by I.E. for the MacIntosh – a browser that is no longer supported by Microsoft.
  • form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } is the set of core clearfix declarations.
  • html[xmlns] form.formtastic fieldset > ol > li { display: block; } – this overrides the display: inline-block; hack that what was done to accommodate the incorrect or poor implementation by IE/MAC of display:. IE/MAC doesn’t respond to the xmlns attribute selector.
  • * html form.formtastic fieldset > ol > li { height: 1%;} this is a hack for older versions of IE – this selector sequence should fail but IE 5.5, 6 and 7 respond to it and apply the style associated with it as does Opera 9.2.

The Position is Everything web site gives a detailed explanation of clearfix. It also contains a link to an explanation of the much cleaner solution for the clearing of floats .

Here’s another recent (April 2010) discussion of clearfix found at the Think Vitamin Blog – the comments related to this article contain some good points for and against clearfix as a solution.

One difference from the PIE implementation of clearfix and that of Formtastic, is the use of the xmlns attribute in the declaration
html[xmlns] form.formtastic fieldset > ol > li { display: block; } which, as mentioned above, IE/MAC does not respond to.

Incompatible CSS: Internet Explorer

As IE 6’s market share drops, this sub-topic may only be relevant for a client group, that for some reason, is still locked into using IE 6.

With that introduction, the formtastic.css file, as of Formtastic version 0.98, uses the css child selector operator (>) which IE 6 does not support.

form.formtastic fieldset > ol > li.string input { max-width: 74%; }

Since IE 6 does not recognize the child selector, the quality of its styling is impacted by the formtastic.css (version 0.98) as shown by this screenshot

When the child selectors are removed from a css file such as this iefixes.css example file and as shown in the code snippet below

form.formtastic fieldset ol li.string input { max-width:74%; }

the styling improves as seen in this screen shot . In the above case, the styling uses descendant selectors rather than child selectors.

If your client base uses EI 6, you may want to make use of it’s conditional comment statement to include an ie6fixes.css file as part of the css file linking sequence.

<%= stylesheet_link_tag  'formtastic','formtastic_changes' %>

<!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="/stylesheets/iefixes.css" />
![endif]-->

Javascript can also be used to selectively load external css files based on browser and browser version.

CSS Customization Example

This sub-section reviews a Formtastic css customization example.

The example re-styles Formtastic’s default listing of radio buttons (vertical listing) and displays them in-line across the width of the form. The objective is to achieve a somewhat more user friendly listing for a long listing of radio buttons.

In Line Radio Buttons

These changes are made to the formtastic_changes.css file:

/* RADIO OVERRIDES - display radio buttons in line
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.radio fieldset ol li {
    margin:0.1em 0.5em 0.5em 0;
    display: inline-block;
}

and for IE 6 and 7 these are the styling declarations required to accommodate the fact that to achieve display: inline-block; it is incorrectly implemented by these two browsers via the the declaration display: inline;

/* RADIO OVERRIDES - IE 6 and 7
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.radio { }
form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em;}
form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0.5em 0.5em 0; display:inline; }
form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; display:inline; }
form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }

This in-lining of the radio buttons is included in the example file iefixes.css discussed in the previous sub-section.

The above in-line listing of radio buttons has been tested using Adobe’s Browser Lab for the following browsers:

  • Chrome 3.0
  • Firefox 2.0, 3.0, 3.6 Windows, OSX
  • Safari OSX 3.0, 4.0

and Microsofts’ SuperPreview for IE 6 and IE 7

These solutions were also tested against the latest windows versions of Chrome, Firefox, Internet Explorer and Opera.

Firefox 2.0 (Windows and OSX) were the only browsers that failed to render the buttons in-line and are not likely worth any effort to get them to do so. They continued to render the buttons vertically.

Here’s an example of IE 6 with the radio buttons displayed in-line as styled by the iefixes.css file.

Something went wrong with that request. Please try again.