Using CSS to control focus look and Spatial Navigation

Overview

In Mozilla, CSS controls the look and feel of all elements on the screen. There are many tutorial on CSS and there is always the W3C CSS Specification. After reading through those links, you will know that for every element type you can control the focus style. The important style in our context is that of outline which allows us to draw a border around an element. Note that outlines are very much like border styles but they do not take up any space in the layout of a document. The CSS21 define what properties we support. In addition, we support -moz-outline-radius which allows rounded corners.

CSS Focus Example

Consider the following CSS:

*:focus
{
-moz-outline: 3px solid #FFFF00 !important;
-moz-outline-offset: 1px         !important;
-moz-outline-radius: 5px         !important;
}

textarea:focus, button:focus, select:focus, input:focus
{
-moz-outline-offset: -1px        !important;
}

input[type="radio"]:focus
{
-moz-outline-radius: 12px        !important;
-moz-outline-offset: 0px         !important;
}

This focus style was ripped from bug 53927.

In the above style rules, there are three parts.

The first part defines that all elements have a focus that has an outline border of 3px, it should be solid, and that ugly hexadecimal string means that it should be yellow. To determine the color string for your application, you can do what I did.... search for a table that has a listing of all of the colors, and try each until you get something that you like.

The second applies to textarea, button, select, and input elements. We could have broken this out into four separate rules or just use one line to assert that these four element types require the same style.

The last rule only applies to radio input. Notice that we have already defined an input focus in the second part. In part three we define a focus style for only inputs that are of the type radio.

Note that is more recent versions of Mozilla, you do not have to prefix outline with -moz-.

Testing your style

Testing your style is most easily done in a webpage. You can basically copy the above style into the style portion of a html document. For example

<html>
<head>
<style>

put your style rules here to test.

</style>
</head>
<body>

Put some html here to test.

</body>
</html>

Applying your style

Once you are happy with your CSS, you can apply it to the application in two ways. If this CSS style is meant only for one person or profile, you can add it to the userContent.css file. You can find out how to do this here.

If you wish this style to apply to the entire application, which is very common for embedders, you would add these rules to the bottom of the file "ua.css" which is in your res directory next to the application.