Complete Css Style Sheet Resource: using

Showing posts with label using. Show all posts

Saturday, October 23, 2010

Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.

Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;

Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;

Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.

Monday, October 4, 2010

Using the Cascade in Css

CSS. Cascading Style Sheets. Cascading. Lovely word. Hmm. Many never stop to think about
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.

The Cascade Through Varying Methods of Application

In Chapter 1, you learned of the various methods for applying CSS—inline, embedded, external,
and importing. It is possible to combine these methods to have an effect on the cascade.
Let’s say that you are storing all of your CSS rules in an external style sheet that is dictating
the presentation across your vast web site. For whatever reason, you need to overrule some of
the external styles for just one web page.
Time to embrace the cascade. For that one web page, you could use embedded CSS in the
<head> of the page, redefining the appropriate rules right there. When that web page is loaded,
the browser will apply the CSS it first encounters—the embedded CSS—before looking at your
external CSS to apply the remaining rules. Any identical selectors in the external style sheet will
be ignored.
Need further control? No problem. At the top of the hierarchy are inline styles—the CSS
added directly to the (X)HTML elements. Whatever styles you apply inline will overrule any
declarations in the <head> of the page or in an external style sheet.

Example
To see this in action, you can run through the following simple example:
1. Open external.css and define the default paragraph color (as in Chapter 1) with
p {color#F00;} and save the file.
2. View external.html in your browser. Assuming you are still applying CSS using
external.css, any default paragraphs should be red.
3. Now open external.html and apply the embedded style <style type="text/css">p
{color: #333;}</style> in the head of the template and save the file.
4. Reload external.html in your browser. Now any default paragraphs should be dark
gray, as the embedded CSS is overriding the linked style sheet.
5. Finally, find a default paragraph in external.html and define it with an inline style, such
as <p style="color: #CCC">, and save the template.
6. Reload external.html in your browser. Now the paragraph to which you applied the
inline style should be light gray, as the inline CSS is overriding the embedded CSS and
the linked style sheet. Any other default paragraphs should still be dark gray based on
the embedded style.
Thus the hierarchy is in place. The browser performs the inline rule first, and then looks
to perform any other rules embedded in the <head>, and finally looks to any external files to
complete its understanding of the CSS you created.

The Cascade Through Multiple External Style Sheets
Another method of exploiting the cascade uses multiple external style sheets. You already
know how to link to one or more external style sheets for various platforms (such as printers
and mobile devices), and this approach is similar, except all the external files here are specifically
for the screen:

The Cascade Through Imported Style Sheets
The hierarchy is also present with imported style sheets. As with the previous examples, it’s all
about the order in which the style sheets are specified. In Chapter 1, we looked at modular CSS,
where the CSS for a site is organized into relevant style sheets, such as default styles, layout
styles, navigation styles, and so on. Here’s a similar example where four modules are imported
via a master external style sheet called external.css. external.css contains the following lines:
@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");
As you’d expect from the order, forms.css is highest in the hierarchy, whereas default.css
is apparently lowest. Let’s assume that in navigation.css (second in the hierarchy) there is a
class called highlight, used to render text red. Let’s also assume that highlight appears in
default.css, but is used to render text orange. As navigation.css has more weight due to its
place in the hierarchy, the rendered text will be red.
Yet still, forms.css isn’t necessarily top of the tree. Remember that these style sheets are
being imported via a master external style sheet. In Chapter 1, you used external.css to call in
two modular sheets. Here external.css can be used again to import the modular sheets. If you
define highlight in external.css, the declared color will override either the red or the orange
specified in the imported style sheets.
Even then, the rule in external.css can still be overridden using embedded or inline CSS
in the (X)HTML template. It’s up to you when you stop the cascade, but be careful not to get
washed away by the cascade and tie yourself in knots.

**■Note If another style sheet were to be imported through one of the modular style sheets using @import,
it would automatically be lower in the hierarchy. In a nutshell, a style sheet always has less weight than the
one calling it.

Wednesday, September 29, 2010

Using microformats to enhance contact information

As shown in the previous section, user feedback may come in the form of a telephone call
or letter, rather than an e-mail, and therefore you should always add other forms of contact
details to a website—even if the site is an online store, customers will need other ways
to get in touch (faceless multinational organizations, take note). In the most basic sense,
these can be marked up by using some headings and paragraphs, as follows:
<h1>Contact details</h1>
<h2>Mail</h2>
<p><strong>Company name</strong><br />
00, Street Name<br />
Town or City<br />
County or Region<br />
Postal/ZIP code<br />
Country name</p>
<h2>Telephone/fax</h2>
Tel: +1 (0)0000 555555<br />
Fax: +1 (0)0000 555556<br />
Mobile/cell: +1 (0)7000 555555</p>
Now, there’s nothing at all wrong with the previous block of code: it’s valid, it does the job
perfectly well, and it’s semantically sound, which also means it’s easy enough to style using
CSS. However, by utilizing microformats, the page’s functionality can be enhanced without
compromising the markup.
More about microformats can be found at the microformats website at www.
microformats.org, and in the book Microformats: Empowering Your Markup for Web 2.0,
by John Allsopp, so I won’t dwell on them too much. In short, though, microformats provide
a way of adding commonly used semantics to web pages, working with common technologies,
such as XHTML. For the example, you’re going to see how to take a basic set of
contact details and then use microformats to provide users with a means of efficiently
downloading and storing the information as a vCard—the vCard format being that
commonly used by address books). The semantic information is also of use to any other
application that is microformat-aware—for example, some Firefox plug-ins are able to
auto-detect microformat information on any web page and enable a user to browse and
manipulate it.

Using e-mail to send form data

In rare cases, it may not be possible to set up a form to send form data (although even
most free web hosts tend to provide users with some kind of form functionality, even if it’s
a shared script that doesn’t allow a great deal of customization). If you find yourself in this
sticky situation, it’s possible to use a mailto: URL for the form’s action attribute value.
This causes browsers to e-mail the form parameters and values to the specified address.
<form method="post" action="mailto:anemailaddress@somewhere.com"
å enctype="text/plain">
This might seem a simpler method than messing around with CGI scripts, but it has major
shortfalls:
Some browsers don’t support mailto: as a form action.
The resulting data may arrive in a barely readable (or unreadable) format, and you
have no control over this.
This method isn’t secure.
The user won’t be redirected and may therefore not realize data has been sent.
That last problem can be worked around by adding a JavaScript alert to the form start tag:
<form method="post" action="mailto:anemailaddress@somewhere.com"
å enctype="text/plain" onsubmit="window.alert('This form is being
å sent by email. Thank you for contacting us.')">
Of course, this relies on JavaScript being active on the user’s browser—but, then again, this
is a last resort.

GETTING USER FEEDBACK : Using mailto: URLs

One of the most common methods of providing immediate user feedback is by using
mailto: URLs within anchor tags. Instead of the anchor tag’s value being a file name or
URL, it begins with mailto: and is immediately followed by the recipient e-mail address.
<a href="mailto:someone@your.domain">Click to email!</a>
It’s possible to take this technique further. You can define multiple recipients by using a
comma-separated list, and by placing a question mark immediately after the final recipient
address, you can add further parameters, such as a subject and recipients to carbon copy
(cc) and blind carbon copy (bcc). If using more than one parameter, you must separate
them with encoded ampersands (&). Note that spaces within the subject should also
be encoded (as %20).
<a href="mailto:someone@your.domain,someoneelse@your.domain?subject=
åContact%20from%20website&cc=bigboss@your.domain">Click
å to email!</a>
Although this may sound great, there are several problems with such a system. First, e-mail
addresses online are often harvested by spambots. Second, a mailto: link relies on the
user having a preconfigured e-mail client ready to go—something that people working on
college and library machines most likely won’t have. Third, not all browsers support the
range of options explained earlier.A way to combat the spambots is presented in the next section. For the second issue (the
mailto: link’s reliance on a preconfigured mail client), I recommend using forms for any
complex website feedback, which we will come to later on in this chapter. For the third
issue (browser support for the more advanced mailto: options), I recommend just keeping
things simple. Place your e-mail address online as a mailto: and enable the user to fill
in any other details, such common as the subject line

Adding separator stripes with PHP

Adding separator stripes with PHP
If you’re creating a table from data stored in a database, automating separator stripes is a
relatively simple process. After the PHP for retrieving data and the opening table markup
(including headers), you add the following:
$alternate = TRUE;
while ($row = mysql_fetch_object($sqlresult)) :
if($alternate) :
$class = ' class="alt"';
$alternate = FALSE;
else :
$class = "";
$alternate = TRUE;
endif;
echo '<tr'.$class.'>';
echo '<td>' . $row->field1 . '</td>';
echo '<td>' . $row->field2 . '</td>';
echo '</tr>';
endwhile;
This is then followed by the markup to close the table. Note that in this example, the alt
class value is applied to alternate table rows, so the CSS from the previous exercise should
still work fine

Using table headers

Only a fraction of data tables on the Web make use of table headers, even though the
majority of tables include cell data that would be better placed within headers. The table
header cell element (<th></th>) performs a similar function to the standard table cell, but
is useful with regard to accessibility. Imagine a long data table comprised solely of standard
cells. The first row likely contains the headers, but because they’re not differentiated,
a screen reader might treat them as normal cells, read them once, and then continue reading
the remainder of the data. (If it doesn’t do this, it still has to assume which cells are
headers, and it might guess wrong.) When using table headers, the data is usually read in
context (header/data, header/data, and so on), enabling the user to make sense of everything.
Things can be sped up slightly by using the abbr attribute—long table headers can
be cut down, reducing what needs to be repeated when a table’s data is being read out.
An example of table header cells and a row of data cells follows:
<th>Country</th><th abbr="Capital">Capital city</th>
<td>France</td><td>Paris</td>
In this case, a screen reader should read the headers and then provide them with the data
of each cell (Country: France, Capital: Paris, etc.). But even with screen-based browsers, the
inclusion of headers proves beneficial for users, because table header cell content by
default is styled differently from data cell content, meaning the two cell types can be
easily differentiated.
Although headers are often at the top of a table, they may also be aligned down the lefthand
side. Therefore, you also need to specify whether the header provides header information
for the remainder of the row, column, row group, or column group that contains
it. This can be done with the scope attribute, which is added to the table header start tag
and given the relevant value (row, col, rowgroup, or colgroup). It’s also possible to use the
headers attribute in conjunction with id values. See the following “Scope and headers”
section for more information.

Sunday, September 26, 2010

Using CSS backgrounds to create a navigation bar

1. Edit the body element. Like in the previous exercise, edit the body start tag, adding
the id value shown.
<body id="homePage">

2. Style the structural divs. This page’s structure is simple, as are the CSS rules
required to style it. The #wrapper rule sets a fixed width (which is four times the
width of one of the tabs) and centers the design in the browser window. The
#masthead rule adds some padding at the top of the masthead, so the tabs won’t
hug the top of the browser window.
The #navContainer rule has a bottom border (to firmly separate the navigation
from the other page content) and a defined height, which is the height of a tab.
The height setting is useful, because these tabs will be floated, meaning they’re
outside of the standard document flow. By giving the container a fixed height, the
border is shown in the right place; without the height definition, the border would
be displayed at the top of the navContainer div, because as far as browsers are
concerned, floated elements technically don’t take up any height within the standard
document flow.
Finally, the #content rule gives that area a background color and some padding.
#wrapper {
width: 740px;
margin: 0 auto;
}
#masthead {
padding-top: 20px;
}
#navContainer {
height: 30px;
border-bottom: 5px solid #ad3514;
}
#content {
padding: 10px;
background-color: #eeeeee;
}

3. Style list items. Items within the list are styled to float left. The background value
includes the location of the rollover image, with additional settings being
no-repeat (to stop it from tiling), and then 0 and 0, to ensure the relevant portion
of the rollover image is seen by default. The width and height values are the same
as that of the image: 185px and 30px, respectively.
#navigation li {
float: left;
background: url(css-tab-rollover-image.gif) no-repeat 0 0;
width: 185px;
height: 30px;
}

4. Next, style the links. The text is rendered in white, uppercase, and in Arial, and the
default underlines are removed. Setting display to block makes the entire link
container into an active link, thereby making the navigation bar work in the traditional
manner (rather than just the text being active). Finally, the padding settings
position the text correctly over the background images. The height setting, combined
with the padding top setting of 9px, adds up to the height of the container—
30px. Without this, the space underneath the text would not be active.
#navigation a:link, #navigation a:visited {
font: bold 1.1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
height: 21px;
padding: 9px 0px 0px 30px;
}

5. Style other link states. For the hover and active states, you define which portion
of the rollover graphic is supposed to be visible. This is done via background position
values. The first of these remains 0, because you always want to see the image
from its far left. The vertical reading depends on where the relevant portion of the
image appears in the rollover graphic.
If you check css-tab-rollover-image.gif in an image editor, you’ll see the hover
state graphic is 40 pixels from the top and the active state graphic is 80 pixels
from the top. This means the image needs to be vertically moved –40 pixels and
–80 pixels for the hover and active states, respectively. Therefore, the rules for
these states are as follows:
#navigation a:hover {
background: url(css-tab-rollover-image.gif) 0 -40px;
}
#navigation a:active {
background: url(css-tab-rollover-image.gif) 0 -80px;
}

6. Define the active section state. As per step 8 of the previous exercise, the active
state graphic can be set. In this case, this is done by displaying the fourth state in
the rollover image via the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: url(css-tab-rollover-image.gif) 0 -120px;
}
Again, you can change the id value of the body element to one of the other list
item id values to change the active section link.

Using HTML lists and CSS to create a button-like vertical navigation bar

1. Create the list structure. Add the following code block to create the structure of
the navigation bar. By using nested lists, you can provide the navigation bar with a
hierarchical structure (and you can style each level in CSS). In this example, the list
has two levels. (Refer to Chapter 3 for an overview of correctly formatting lists.)
This list is nested within a div with an id value of navigation, which we’ll later take
advantage of by using contextual selectors. (For this example, dummy href values
of # are being used, but in a live site, always check that your links lead somewhere!)
<div id="navigation">
<ul>
<li>
<a href="#">Section one</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li>
<a href="#">Section two</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>

<li>
<a href="#">Section three</a>
<ul>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>
</div>

2. Add some padding to the body element, so page content doesn’t hug the browser
window edges. Also, add the background-color pair shown following:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
background-color: #aaaaaa;
}

3. Style the list. Add the following rule to remove the
default bullet points from unordered lists within the navigation
div, define a width for the lists, and also set the
default font style.
#navigation ul {
list-style-type: none;
width: 140px;
font: 1.2em/1 Arial, Helvetica, sans-serif;
}

4. Set an override for nested lists. As you can see from the
previous image, the nested links have much larger text.
This is because font sizes in ems are inherited, and therefore
the font size within the nested lists ends up at
1.2ems multiplied by 1.2ems. By adding the following
rule, the font size of nested lists is reset to 1em, making
nested lists look the same as top-level lists.
#navigation ul ul {
font-size: 1em;
}

5. Style the buttons. Use a contextual selector to style links within the navigation div
(i.e., the links within this list). These styles initially affect the entire list, but you’ll
later override them for level-two links. Therefore, the styles you’re working on now
are intended only for level-one links (which are for sections or categories). This
first set of property/value pairs turns off the default link underline, sets the list
items to uppercase, and defines the font weight as bold.

#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

6. Set button display and padding. Still within the same rule, set the buttons to
display as block, thereby making the entire container an active link (rather than
just the link text). Add some padding so the links don’t hug the edge of the
container.
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
}

7. Define colors and borders. Define the button background and foreground colors,
setting the former to gray and the latter to white. Then add borders to create a 3D
effect. Borders can be styled individually. By setting the left and top borders to a
lighter shade than the background, and the right and bottom borders to a darker
shade, a 3D effect is achieved. (Don’t use black and white, because it will make the
result is too harsh.)
#navigation a:link, #navigation a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #666666;
color: #ffffff;
border-top: 1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
}

8. Define other link states. The hover state is defined by
just changing the background color, making it slightly
lighter.
#navigation a:hover {
background-color: #777777;
}
The active state enables you to build on the 3D
effect: the padding settings are changed to move the text up and left by 1 pixel, the
background and foreground colors are made slightly darker, and the border colors
are reversed.

#navigation a:active {
padding: 2px 13px 4px 7px;
background-color: #444444;
color: #eeeeee;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}

9. Style nested list item links. The selector #navigation li li a enables you to style
links within a list item that are themselves within a list item (which happen to be in
the navigation div). In other words, you can create a declaration for level-two links.
These need to be differentiated from the section links, hence the following rule
setting them to lowercase and normal font weight (instead of bold). The padding
settings indent these links more than the section links, and the background and
foreground colors are different, being very dark gray (almost black) on light gray
rather than white on a darker gray.
#navigation li li a:link, #navigation li li a:visited {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
padding: 3px 3px 3px 17px;
background-color: #999999;
color: #111111;
}

10. Style nested item hover and active states. This is done in the same way as per the
section links, changing colors as appropriate and again reversing the border colors
on the active state.
#navigation li li a:hover {
background-color: #aaaaaa;
}
#navigation li li a:active {
padding: 2px 4px 4px 16px;
background-color: #888888;
color: #000000;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}
The navigation bar is now complete and, as you can see from the following images
(which depict, from left to right, the default, hover, and active states), the buttons
have a tactile feel to them. Should this not be to your liking, it’s easy to
change the look of the navigation bar because everything’s styled in CSS. To expand
on this design, you could introduce background images for each state, thereby
making the navigation bar even more graphical. However, because you didn’t

simply chop up a GIF, you can easily add and remove items from the navigation bar,
just by amending the list created in step 1. Any added items will be styled automatically
by the style sheet rules.

Creating a pop-up window

Pop-up windows are mostly an annoyance, especially when automated and when they
remove browser controls. However, they are occasionally useful, such as for providing a
user with brief access to terms and conditions without interrupting a checkout process.
Some portfolio sites also use pop-up windows to display larger versions of images
(although we’ll later see a better method of creating an online gallery).
Should you require a pop-up window of your very own, the JavaScript is simple:
function newWindow()
{
window.open("location.html");
}
And this HTML calls the script using the onclick attribute:
<a href="location.html" onclick="newWindow(); return false;">Open a
å new window!</a>
Note how the href attribute still has a value, which caters to users with JavaScript disabled
(loading the document into the current window). The return false part of the onclick
value ensures the href value is ignored for browsers with JavaScript activated (otherwise
both the original and pop-up window would display with the new web page).
Creating a system to open windows with varied URLs requires only slight changes to both
script and HTML. The script changes to this:
function newWindow(webURL)
{
window.open(webURL);
}

The HTML changes to this:
<a href="location-one.html" onclick="newWindow('location-one.html');
å return false;">Open location one in a new window!</a>
<a href="location-two.html" onclick="newWindow('location-two.html');
å return false;">Open location two in a new window!</a>
Note how the target location is now within the single quotes of the onclick value. This
could be any file name, and the link type can be absolute, relative, or root-relative. To provide
a warning when a pop-up is opened (as recommended by WCAG—Web Content
Accessibility Guidelines), you can add a single line to the JavaScript:
function newWindow(webURL)
{
alert("You are about to open a new window.");
window.open(webURL);
}
It’s also possible to control the settings of a pop-up window. To do so, the script needs to
be amended as follows:
function newWindow(webURL)
{
alert("You are about to open a new window.");
var newWin = window.open(webURL,"new_window",
å"toolbar,location,directories,
åstatus,menubar,scrollbars,resizable,
åcopyhistory,width=300,height=300");
newWin.focus();
}
The values within the set of quotes that begin "toolbar, location... enable you to set
the pop-up window’s dimensions and appearance. There must be no whitespace in the
features list, and it must all be on one line. Most of the items are self-explanatory, but
some that may not be are location, which defines whether the browser’s address bar is
visible, and directories, which defines whether secondary toolbars such as the links bar
are visible. Note that if you specify one or more of these, any you don’t specify will be
turned off—therefore, you must specify all the features you want in the pop-up window.
Now, a word of warning: as alluded to earlier, having control of the web browser wrenched
away from them makes some users want to kick a puppy. Therefore:
Never use JavaScript to pop up windows without the user knowing that it’s going to
happen. (The integrated alert mentioned earlier is one thing, but you should always
also mention next to the relevant link that a pop-up will be created if the link is
clicked.)

*Never create a site that automatically pops up a window and removes the window
controls.

*Never use a pop-up window unless it’s absolutely necessary.

Some designers might argue about aesthetics and for the clean nature of a browser window
at full-screen, devoid of its controls, but there are no real reasons for using pop-up
windows in this manner other than that; there are, however, counterarguments, such as
taking control from the user, the general annoyance factor, a full-screen window suddenly
covering everything else, and so on. Ultimately, pop-ups and nonrequested new windows
are a very bad thing, so avoid using them.

Enhanced link accessibility and usability

The title attribute

Regular users of Internet Explorer for
Windows may be familiar with its habit of
popping up alt text as a tooltip. This has
encouraged web designers to wrongly fill alt
text with explanatory copy for those links that
require an explanation, rather than using the
alt text for a succinct overview of the image’s
content. Should you require a pop-up, add a
title attribute to your surrounding a element
to explain what will happen when the
link is clicked. The majority of web browsers
display its value when the link is hovered over
for a couple of seconds (see right), although
some older browsers, such as Netscape 4,
don’t provide this functionality.
<a href="large-image.html" title="Click to view a larger image">
å<img src="image.jpg" alt="This is some text that explains what
å the image is" width="400" height="300" /></a>
There are a few things to be mindful of when using title attributes. The first is that
behavior varies slightly between browsers, and the positioning and style of the tooltip cannot
be controlled. Internet Explorer exhibits some particularly quirky behavior. In addition
to displaying alt text as a tooltip, alt text defined within an img element will override (and
therefore be displayed instead of) title text for a surrounding a element. However, if the
title and alt attributes are both placed within the img element, the title attribute wins
out. Therefore, some technically unnecessary duplication of content is required to ensure
compliance from Internet Explorer. Also, Microsoft’s browser does not display title text
when you mouse over area elements within image maps.

Using accesskey and tabindex

I’ve bundled the accesskey and tabindex attributes because they have similar functions—
that is, enabling keyboard access to various areas of the web page. Most browsers enable
you to use the Tab key to cycle through links, although if you end up on a web page with
dozens of links, this can be a soul-destroying experience. (And before you say “So what?”
you should be aware that many web users cannot use a mouse. You don’t have to be
severely disabled or elderly to be in such a position either—something as common as
repetitive strain injury affects plenty of people’s ability to use a mouse.)
The accesskey attribute can be added to anchor and area elements. It assigns an access
key to the link, whose value must be a single character. In tandem with your platform’s

assigned modifier key (Alt for Windows and Ctrl for Mac), you press the key to highlight or
activate the link, depending on how the browser you’re using works.
<a href="index.html" accesskey="/">Home page</a>
An ongoing problem with access keys is that the shortcuts used to activate them are
mostly claimed by various technologies, leaving scant few characters. In fact, research conducted
by WATS.ca (www.wats.ca/show.php?contentid=32) concluded that just three
characters were available that didn’t clash with anything at all: /, \ and ]. This, combined
with a total lack of standard access key assignments/bindings, has led to many accessibility
gurus conceding defeat, admitting that while there’s a definite need for the technology, it’s
just not there yet.
The tabindex attribute has proved more successful. This is used to define the attribute’s
value as anything from 0 (which excludes the element from the tabbing order, which can
be useful) to 32767, thereby setting its place in the tab order, although if you have 32,767
tabbable elements on your web page, you really do need to go back and reread the earlier
advice on information architecture (see Chapter 1). Note that tab orders needn’t be consecutive,
so it’s wise to use tabindex in steps of ten, so you can later insert extra ones
without renumbering everything.
Not all browsers enable tabbing to links, and others require that you amend some preferences
to activate this function, and so tabindex ultimately only really comes in handy
when working with forms, as you’ll see in Chapter 8. When used for too many other elements,
you also run the risk of tabindex values hijacking the mouse cursor, meaning that
instead of the Tab key moving the user from the first form field to the second, it might end
up highlighting something totally different, elsewhere on the page. What’s logical to some
people—in terms of tab order—may not be to others, so always ensure you test your websites
thoroughly, responding to feedback.

Skip navigation links
Designers who work with CSS layouts tend to focus on information structure, rather than
blindly putting together layouts in a visual editor. This is good from an accessibility standpoint,
because you can ensure information is ordered in a logical manner by checking its
location in the code. However, when considering alternate browsers, it’s clear that some of
the information on the page will be potentially redundant. For example, while a user surfing
with a standard browser can ignore the masthead and navigation in a split second, rapidly
focusing on the information they want to look at, someone using a screen reader will
have to sit through the navigation links being read out each time, which can prove
extremely tedious if there are quite a few links.
Various solutions exist to help deal with this problem, and although you can use CSS to
reorder the page information (most commonly by placing the code for the masthead at
the end of the HTML document and then using absolute positioning to display it at the top
when the page is viewed in a browser), it’s more common to use what’s typically referred
to as skip navigation

Editing link styles using CSS

Along with changing link colors, CSS enables you to style links just like any other piece of
text. You can define specific fonts; edit padding, margins, and borders; change the fontweight and style; and also amend the standard link underline, removing it entirely if you
wish (by setting the text-decoration property to none).
a:link {
color: #3366cc;
font-weight: bold;
text-decoration: none;
}
Removing the standard underline is somewhat controversial, even in these enlightened
times, and causes endless (and rather tedious) arguments among web designers. My view
is that it can be OK to do so, but with some caveats.
If you remove the standard underline, ensure your links stand out from the surrounding
copy in some other way. Having your links in the same style and color as other words and
not underlined is a very bad idea. The only exception is if you don’t want users to easily
find the links and click them (perhaps for a children’s game or educational site).
A common device used by web designers is to recolor links, in order to distinguish them
from body copy. However, this may not be enough (depending on the chosen colors),
because a significant proportion of the population has some form of color blindness. A
commonly quoted figure for color blindness in Western countries is 8%, with the largest
affected group being white males (the worldwide figure is lower, at approximately 4%).
Therefore, a change of color (to something fairly obvious) and a change of font weight to
bold often does the trick.
Whatever your choice, be consistent—don’t have links change style on different pages of
the site. Also, it’s useful to reinforce the fact that links are links by bringing back the
underline on the hover state. An example of this is shown to the right (see editing-linkstyles-
using-css.html and editing-link-styles-using-css.html in the chapter 5
folder of the completed files).

Links are bold and orange, making them stand out from surrounding text. On the hover
state, the link darkens to red and the standard underline returns. The second of those
things is achieved by setting text-decoration to underline in the a:hover declaration.
Note that even when presented in grayscale, such as in this book, these two states can be
distinguished from surrounding text.

You can also combine pseudo-classes. For example, if you add the rules shown following
to a style sheet (these are from the editing-link-styles-using-css documents), you’d
have links going gray when visited, but turning red on the hover state (along with showing
the underline). Note that because the link and visited states are exclusive, the bold
value for font-weight is assigned using the grouped selector. It could also be applied to
individual rules, but this is neater.
a:link, a:visited {
font-weight: bold;
}
a:link {
color: #f26522;
text-decoration: none;
}
a:visited {
color: #8a8a8a;
}
a:hover {
color: #f22222;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
If you decided that you wanted visited links to retain their visited color on the hover
state, you could add the following rule:
a:visited:hover {
color: #8a8a8a;
}

Pages

Saturday, October 23, 2010

Monday, October 4, 2010

Wednesday, September 29, 2010

Sunday, September 26, 2010