CSS3 Modules

With CSS3, instead of writing only one specification divided into chapters, the W3C has changed the specification to be many separate modules, each of which is dedicated to a particular aspect of the CSS language. This modular approach relieves companies that make web browsers from having to implement the specifications in their entirety. Instead, a company can opt to support one module at a time by adding new CSS modules at every new release of its browser. And this is exactly what is happening now.

Let’s take a closer look at the CSS3 modules that are currently available:

• Selectors: This part is the most stable and is implemented best by browsers. CSS3 selectors were conceived so that they will function even with complex XML documents. They can cross the hierarchy of a document and select elements based on the relationships between them (for example, being the nth child of one’s parent). This module is currently at the stage of Candidate Recommendation.
• CSS Template Layout: This module, previously known as Advance Layout, specifies new ways to place elements based on the relationship between them to guarantee maximum flexibility. It is currently at the Working Draft phase.
• Media Queries: The CSS3 media queries are an addition to the normal @media rules that can assign styles on the basis of new parameters, such as the size of the screen and its proportions. This module is currently at the Candidate Recommendation stage.
• CSS Backgrounds and Borders: This module describes new functions for backgrounds and borders, including the possibility of extending background images and rounding border angles. It is currently at the Last Call stage.
• CSS Basic User Interface: New methods and properties have been introduced to this module to assign styles to the user interface of a web document (such as forms). It is currently at the Candidate Recommendation stage.
• CSS Basic Box Model: This module accounts for differences between horizontal and vertical writing by defining the box model of the elements. It is currently at the Working Draft stage.
• CSS Marquee: This module proposes a CSS solution to avoid the use of the marquee owner element. It is currently at the Proposed Recommendation stage.
• CSS Cascading and Inheritance: This defines the ways in which styles are assigned to elements via the cascade. It is at the working Draft stage.
• CSS Color: This module introduces new concepts and values to describe CSS colors. It’s at the Last Call stage.
• CSS Fonts: This module includes new properties and values for CSS fonts, such as the use of fonts that can be downloaded with the @font-face directive. It’s at the Working Draft stage.
• CSS Generated Content for Paged Media: This module extends the common CSS properties for printing with the introduction of footnotes and cross-references. It’s at the Working Draft stage.
• CSS Generated and Replaced Content: This module introduces the concept of replacing the effective content of an element with the one generated by CSS. It’s at the Working Draft stage.
• CSS Hyperlink Presentation: This module extends the normal way CSS processes hypertext links, thus providing greater control to the authors regarding their states. This module is at the Working Draft stage.
• CSS Line Layout: In this module, the layout of the inline elements is defined with more precision. It’s at the Working Draft stage.
• CSS Lists: This module deals with list layouts with more detail and precision (ordered and unordered) than in earlier releases. It’s at the Working Draft stage.
• CSS Multicolumn Layout: This module defines new properties and values to manage layout over several columns. It’s at the Last Call stage.
• CSS Namespaces: This module defines the ways to select elements on the basis of the presence of a certain namespace. It’s essential for formatting XML documents and is currently at the Candidate Recommendation stage.
• CSSOM View Module: This module allows authors to obtain information about elements without resorting to scripting. It’s at the Working Draft stage.
• CSS Paged Media: This module extends the CSS properties for print to obtain headers, footers, and page numbers. It’s at the Working Draft stage.
• CSS Presentation Levels: This module introduces the concept of multiple presentations of the same document. It’s designed to facilitate particular layouts, such as those of presentation slides, and it’s at the Working Draft stage.
• Grid Positioning: In the new CSS3 layout model, one positioned element forms a presentation grid. This module proposes a series of coordinates for the positioning of the floated elements that have an absolute position. The module is in the Working Draft stage.
• CSS Text: This module addresses the need for internationalization in defining new properties and values to control the text using CSS. It’s at the Working Draft stage.
• CSS 2D Transforms Module: This module introduces concepts that are already featured in SVG (Scalable Vector Graphic) to CSS, such as transformation, rotation, and the scaling of elements. It’s at the Working Draft stage.
• CSS 3D Transformations Module: This module extends the previous one with new specifications for transformations. It’s at the Working Draft stage.
• CSS Transitions Module: This module introduces the concepts of transition and delay in transitions between states among the elements (for example, when an element receives focus and then loses it). It’s at the Working Draft stage.
• CSS Animations Module: This module introduces new properties that can control the intermediate stages of the animation of the elements (for example, stages in a sequence). It’s at the Working Draft stage.

Anatomy of a CSS3 declaration

CSS and HTML are inseparable friends. Therefore, to be able to fully take advantage of CSS statements, it is essential to understand the structure of an HTML document.

After a long period of silence, HTML recently has been brought back to life, thanks to the work of companies such as Apple, Google, Opera Software, and the Mozilla Foundation. They collaborated under the name of WHATWG (which stands for the Web Hypertext Application Technology Working Group, whose web site is at www.whatwg.org/) on the development of an updated and enhanced version of the old HTML.

Following this major interest, the W3C began to work on a new version of HTML, called HTML5. It’s official name is Web Applications 1.0, and it introduces structural elements to HTML that have not been seen before.

These new elements bridge the gap between structure, defined by the markup; rendering characteristics, defined by styling directives; and the content of a web page, defined by the text itself. Furthermore, HTML5 introduced a native open standard to deliver multimedia content such as audio and video, collaboration APIs, local storage, geolocation APIs, and much more.

Each HTML5 document defines a tree structure for a document, known as the Document Object Model (DOM). The DOM is a programming API for HTML documents, as well as XML. It defines the logical structure of documents, and web developers can use it to create and build documents, access and modify their structure, or delete elements and content. You can learn more about the DOM at the W3C DOM page at www.w3.org/TR/WD-DOM/introduction.html.

CSS takes full advantage of this concept because its fundamental mechanism is based on heredity. This makes it possible for most properties set for an element to be inherited by its descendants, hence the term “Cascading.”

Here is some simple HTML5 code:

<!DOCTYPE html>

 <head>

  <title>Page Tile</title>

 </head>

 <body>

  <h1>Title</h1>

 <div>

   <p>My first paragraph</p>

 </div>

 <section>

<h2>My Heading</h2>

 <p>This is a second paragraph</p>

</section>

 </body>

</html>

This document, like any valid HTML document, is an ordered hierarchy of elements that are linked to one another by a parent-child relationship. This hierarchy forms what is defined as the Document Object Model.

The DOM is a cross-platform and language-independent convention for representing and interacting with objects in HTML (as well as XML). Web browsers usually use an internal model similar to the DOM to render a document.

The simple HTML5 code declared earlier can be represented like this:

|-> Document

 |-> Root Element (<html>)

  |-> Element (<head>)

  |-> Element (<body>)

   |-> Element (<div>)

   |-> paragraph

  |-> Section

   |-> header

This hierarchy defines the structure of the document. It’s used by CSS to define the styles of the element via CSS rules.

A CSS rule is applied using selectors followed by one or more declarations, as shown in Figure 1-1.

Selectors can be any of the following:

• Type Selectors: These are represented by the name of a specific HTML element. They are used to select all specific types of an element in a document—for example:

body {color: red}

• Class Selectors: Each HTML can be assigned a class using the class attribute. You then assign a name to it that can be accessed by CSS—for example:

<h1 class="mytitle">This is a header</h1>

To apply one style to the class declared in HTML in the tag header, you precede the name of the class with a period (.):

.mytitle {font-family: Verdana}

• ID Selectors: Each HTML element can be assigned an ID, which is a unique reference for this element in the document—for example:

<section id="mystyle"></section>

To select an element that has been assigned a certain ID in CSS, you add the pound key (#) before the value of the ID:

#mystyle {color: black}

We’ve written this introduction to CSS selectors only to provide some essential concepts for readers who have never worked with CSS. It is not intended to be—and obviously doesn’t provide—a full overview of selectors. In fact, there are other types of selectors: descendants, child, and so on. We have dedicated an entire chapter to this aspect of CSS3. You can find different solutions related to this vast subject in Chapter 2.

At this point, web developers have understood that CSS is an integral part of an HTML document. However, there are different ways to declare CSS for a document. You can have internal or external style sheets:

• External CSS: A style sheet defined in a separate file by the document with a .css extension.
• Internal CSS: The styles are included in the HTML document.

As far as external CSS files are concerned, you can link them by creating a <link> tag inside the head section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

The <link> element has a series of attributes that need to be specified:

• rel: compulsory. Describes the type of relation between the document and the linked file. It accepts the following values: stylesheet and alternate stylesheet.
• href: compulsory. Defines the absolute or relative URL of the style sheet.
• type: compulsory. Identifies the type of data to be connected. For CSS, the only possible value is text/css.
• media: optional. Declares the type of device to which the style sheet applies, such as the handheld property for handheld devices (typically, devices with a small screen and limited bandwidth).

Another way to load external CSS is to use the @import directive in the <style> element:

<style>

@import url(mystyle.css);

</style>

This approach of using the @import statement is one of the safest ways to solve compatibility issues between old and new browsers.

For internal style sheets, you define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

<style type="text/css">

body

{

 background: #FFFFCC;

}

</style>

</head>

There is another way to declare an internal style sheet: an inline style. The declaration can be made at the level of each tag in the page. To use inline styles, you declare the style attribute in the relevant tag:

<h1 style="color: red; font-size: 10px;">My Header</h1>

To conclude this section, we’ll specify how to insert parts of a comment in a CSS. All you need to do is place the comment between these symbols:

/*

Multiline comment here

*/

Understanding the Box Model

In the previous section, we spoke about the structure of a document and how to apply a CSS rule to elements within a document. You can also use CSS to position elements within the page. This technique is called CSS positioning, or CSS-P. To use CSS-P rules, you need to understand how the browser physically draws the page on the screen based on the HTML code. The whole series of rules that manages the visual aspect of the elements is generally referred to as the box model.

Each box includes a certain number of basic components, and each can be modified with CSS properties. Instead of trying to explain with a thousand words what a box model represents, we’ll use Figure 1-2 to provide a clearer illustration of the concept.

In the innermost part of the figure, you find the area of the page content, where you can see the background image and the sentence “content goes in here…”. This is the area where the content of the HTML page is rendered: text, images, sections, paragraphs, media elements, and so on. The size assigned to this area is determined by the browser if you don’t specify the width and height properties of the content.

On the outside of an element, you find the padding, which is empty space that can be created between the content and the border of the element to add some space between these elements.

Outside of that, you find the border, which is not an area but a variable line of dimension, style, and color that surrounds the padding zone and the content area. Finally, you get to the margin, which is a space that varies in size and separates a certain element from the adjacent areas.

The size of the box model, apart from the width of the content area, is obtained by this sum:

content width + left padding + left border width + right padding + right border width + margin left + margin right

CSS3 doesn’t introduce many new aspects here, but there are a couple of interesting ones. Later in this book, you’ll see possible solutions for setting a border background and drawing rounded border corners, using the border-image and border-radius properties, respectively.

If you want to learn more about the important subject of the box model, you can refer to Chapter 6 or to the box model described by the W3C at www.w3.org/TR/CSS2/box.html.

Understanding CSS inheritance

Inheritance is one of the key concepts on which CSS techniques are based. In fact, CSS properties can inherit the display properties of dominant HTML tags, at least until you explicitly set a different value for a child element. This is why a property is applied to all child elements of the tag body, meaning the entire content of the page, if you set it to the body element.

Be careful, though, because not all properties are inherited. As a general rule, you can consider that the ones regarding box-model formatting (padding, margins, and borders) are properties that are not inherited by the child elements.

Earlier in the chapter, you saw that CSS can be declared and applied to the page as an external CSS, or it can be declared and applied as an internal or inline CSS. The type of declaration influences how a property will be inherited by an element, as well as how high or low the importance of each statement is.

To understand the way inheritance works, bear in mind that the CSS rule applied will be the one that is closest to the element in the code of the document. The order, therefore, is the following:

• Inline style: The ones that are applied last by the browser. They prevail over those that are declared in the page.
• Internal CSS: These prevail over the styles declared in the external CSS.

Consider the following example of an external style sheet declared as a CSS file named styles.css:

.myclass {

background-color:red;

}

This CSS file is then imported into the HTML page, where an internal and inline declaration has been added:

<link href="styles.css" type="text/css" rel="stylesheet" />

<style type="text/css">

. myclass {

background-color:white;

}

</style>

<article class="myclass" style="background-color:green; ">

CSS3 Rocks !

</article>

In the preceding example, which color will the web browser render for the article’s background color? Read the code carefully.

Notice that the article element with the class name "myclass" gets its background color from an external style sheet, from styles defined on the page, and from an inline style. So the right reply to the question is that the article will get the background-color: green rule, inherited by the inline declaration, because it’s the last rule applied by the browser.

What’s involved

There are many web sites that provide comparative tables to see at a glance which CSS3 features are supported by which browser. In this solution, you’ll see some of the most popular ones:

• CSS3 Please (which you can check out at css3please.com) a Cross-Browser CSS3 Rule Generator
• CanIUse (which you can check out at www.caniuse.com) is a compatibility table for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• FindmebyIP (which you can check out at www.findmebyip.com/litmus/) is a cute little app that presents your browsers’ support for advanced HTML5 and CSS3 features in an easy to read manner.
• HTML5 Please, (which you can check out at html5please.com the new HTML5 and CSS3 features, knowing if they are ready for use.

How to build it

CSS3 Please is more than just a simple compatibility table to discover the browser support of CSS3. It allows you to edit CSS3 property values in real time that will be applied to the web page. By doing this, you can copy the all of the generated CSS values, or only some of them, and paste them into your own style sheet.

For example, you can interact with a border-radius property by changing the values contained in the following class:

.box_round {

 -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */

 -moz-border-radius: 12px; /* FF1-3.6 */

 border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

As you can see, the .box_round class provides the code for the various declarations to make the properties work on all types of browsers, including the following ones:

• Safari
• The iOS browser
• The Android browser
• Firefox
• Opera

The values assigned to each property can be changed on the fly, and the upper left box of the web page will change automatically to show the new values, as you can see in Figure 1-3.

It also comes with the following two interesting features:

[to clipboard] [toggle rule off]

You can use the first one to copy the CSS3 code in the clipboard. With the second one, you can decide whether or not to apply the CSS3 rule to the object.

This tool is essential both as a learning tool as well as a way to improve the productivity of your web development effortsbecause it provides cross-browser code.

HTML5 Please, on the other hand, is a traditional but well-built search engine that looks up the features of CSS3 and HTML5. It allows you to assess the HTML5 and CSS3 compatibility level for each property. For example, if you search for a CSS3 feature such as border-radius, you’ll get the description shown in Figure 1-4.

On the lower left side, you can see a link labeled View browser share % that points to the CanIuse.com table. CanIuse.com is the reference comparison table for HTML5, CSS3, SVG support, and more in desktop and mobile browsers.

The CanIuse.com service, like others, is completely free, and you can use it to quickly see HTM5 and CSS3 features and their compatibility, both as an indexed list and as a table. You also can use it to search for a particular property by using a search box, as shown in Figure 1-5.

By clicking an item on the list, you get more information and the view switches to Tables mode, as shown in Figure 1-6.

As a general rule, because CSS3 and HTML5 standards are evolving, you should pay attention to the features that you want to use in your web pages. In fact, you should apply elements from CSS3 gradually, as updates become necessary.

Expert tips

CanIuse.com allows you to point directly at the feature you want to check by inserting #feat equal to the name of the feature in the URL, as follows:

http://caniuse.com/#feat=css-boxshadow

By inserting this URL in the browser, you can obtain the response from the site shown in Figure 1-7.

What’s involved

The standard HTML5 procedure to load an external CSS file on a page is to point a reference to it in the HEAD section of your page with the <script> tag:

<head>

<link rel="stylesheet" type="text/css" href="myCSS.css" />

</head>

When the browser reads the content of the HTML page that is loaded, the CSS file is added to the page. Therefore, we could say that the external file is loaded synchronously.

However, with JavaScript, you can load the external file on demand using the createElement() method of the DOM object document to create the <link> tag that will then load the file:

document.createElement('link');

You can set the properties of the link object that has just been created to specify the type of content to load, text/css, and the pathway and name of the file to be loaded:

link.rel = 'stylesheet';

link.type = 'text/css';

link.href = 'myFileCSS.css';

link.media = 'all';

To be able to apply the link object to the page and load the CSS file, you have to call the DOM method appendChild(), which adds a node after the last child node of the specified element node:

document.getElementsByTagName('head')[0].appendChild(link)

This method returns the new child node.

Now let’s see how to build the complete solution.

How to build it

In the previous section, we discussed methods that can be used to load a CSS file using JavaScript.

To do this, you create a JavaScript function that accepts two parameters: one is the name of the CSS file to be loaded, and the other is the ID assigned to the link tag. This second parameter allows you to check whether the file has already been loaded.

You start by writing the following function:

function loadCSSfile(filename, cssID)

{

var cssId = cssID

Insert an if() control that checks that the ID of the element isn’t already in the page. This would mean that the CSS file has already been loaded:

if (!document.getElementById(cssId))

{

At this point, you can create the link object and set its properties:

 var head = document.getElementsByTagName('head');

 var link = document.createElement('link');

 link.id = cssId;

 link.rel = 'stylesheet';

 link.type = 'text/css';

 link.href = filename;

 link.media = 'all';

 head[0].appendChild(link);

}

}

To use the JavaScript method you just created, all you have to do is recall it in a JavaScript block and associate it, for example, to the onload event of the window object:

<!doctype html>

 <html>

 <head>

 <title>onload test</title>

 <script>

function loadCSSfile(filename, cssID)

{

var cssId = cssID

if (!document .getElementById(cssId))

{

 var head = document.getElementsByTagName('head');

 var link = document.createElement('link');

 link.id = cssId;

 link.rel = 'stylesheet';

 link.type = 'text/css';

 link.href = filename;

 link.media = 'all';

 head[0].appendChild(link);

}

}

  window.onload = load;

  </script>

 </head>

 <body>

  <p>The CSS file is loaded dynamically via JavaScript!</p>

 </body>

</html>

Or, if you want to insert the loadCSSfile() method in an external JavaScript file, first you have to load it and then call it like this:

<script type="text/javascript" src="externalJavascript.js"></script>

<script type="text/javascript">loadCSSfile('main.css', 'myCSSId')</script>

Expert tips

To set the properties of the link object, you use setAttribute():

var link=document.createElement('link');

link.setAttribute("rel", "stylesheet")

link.setAttribute("type", "text/css")

link.setAttribute("href", 'myFileCSS')

The problem with this method is that Internet Explorer 6 doesn’t support it consistently. So the script would not have worked under the aged Internet Explorer 6. If you’re using JQuery or YUI Ajax frameworks, there are methods you can invoke from these libraries.

For JQuery, there is a plugin that loads CSS files and JavaScript files on demand and keeps track of what has already been loaded:

code.google.com/p/rloader/

For the Yahoo YUI library (shown in Figure 1-8), you can use the following method, which also supports cross-domain loading:

yuilibrary.com/yui/docs/get/

What’s involved

Background image management has always been entrusted to the background property. To be valid, the declaration doesn’t have to contain references to all its properties, but it has to at least contain the definition of the background color. For example, to create an image that is repeated horizontally as a background on the body, with a background color taken from an external image, you can write the following:

body{background: #7A515A url(gradient.jpg) fixed repeat-x bottom}

To use multiple background images for your pages, you can simply declare a simple comma-separated list under the background property.

Let’s see how to obtain this result in this solution.

How to build it

To use multiple images as background, all you have to do is use the background property and specify two or more values in the URL:

background-image: url(myFirstBG.png), url(myFSecondBG.png);

Multiple backgrounds can also be specified using the background shorthand property:

background: url(myFirstBG.png) 0 0 no-repeat, url(mySecondBG.png) 0 0 repeat-x

Here is some detail from the CSS Backgrounds and Borders Level 3 specification (which is available at www.w3.org/TR/css3-background/#backgrounds):

Here is a complete example (which works in all new browsers but does not display properly in Internet Explorer 8):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Solution 1-3: Declaring multiple backgrounds for your web page </title>

<style>

.boxBG{

background-image: url(firstImg.png), url(secondImg.png);

background-position: center bottom, left top;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<section class="boxBG">

<p>

This has multiple backgrounds!

</p>

</section>

</body>

</html>

Expert tips

To make this style also work on old browsers that still don’t support the loading of multiple images, all you have to do is add a line with the same background property but with only one image:

<style>

.boxBG{

 background: url(apple.jpg) no-repeat;

 background: url(firstImg.jpg) 0 0 no-repeat, url(secondImg.jpg) 100% 0 no-repeat;

 width: 500px;

 height :250px;

}

What’s involved

To maintain the aspect ratio of the images on a page and get them to fit within a fixed area, you can use the object-fit CSS3 property.

As defined by the W3C, this property specifies how the contents of a replaced element should be fitted to the box established by its height and width. A replaced element is an element whose content is defined by an external resource such as an image.

These are the values that object-fit accepts:

• fill: The replaced content is sized to fill the element’s content box. The object’s concrete object size is the element’s width and height.
• contain: The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box. Its concrete object size is resolved as a contain constraint against the element’s width and height.
• cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. Its concrete object size is resolved as a cover constraint against the element’s width and height.
• none: The replaced content is not resized to fit inside the element’s content box. The object’s concrete object size is determined using the default sizing algorithm with no specified size, and using a default object size equal to the replaced element’s width and height.
• scale-down: Size the content as if none or contain was specified, whichever would result in a smaller concrete object size.

The object-fit property can be applied to images as well as to a video or SVG file.

Suppose that you want to control the aspect ratio of an image with the following CSS statement:

img {

 object-fit: contain;

}

Following is a complete example.

How to build it

In this solution, you create a simple image gallery that contains images of different sizes. Those images will use the object-fit property that’s set to the value contain. By doing this, you’re forcing all the images to fit inside the area and maintain the aspect ratio.

This is the complete code for this solution:

<!DOCTYPE html>

<html>

<head>

<title>Solution 1-4: Controlling the image aspect ratio</title>

<style>

div {

 margin-bottom: 20px;

 padding: 20px;

}

img {

 position: absolute;

 width: 100px;

 height: 100px;

 -ms-object-fit: contain;

 -moz-object-fit: contain;

 -o-object-fit: contain;

 -webkit-object-fit: contain;

 object-fit: contain;

}

div p {

 font-family:Arial, Helvetica, sans-serif;

    margin-left: 110px;

}

</style>

</head>

<body>

<h1>Wine Tasting</h1>

<div>

<img src="IMG_2407.jpg" width="480" height="640">

<p>Le Pergole Torte 2004</p>

</div>

<div>

<img src="IMG_2444.jpg" width="640" height="480">

<p>Tenuta San Guido Wines</p>

</div>

<div>

<img src="IMG_2538.jpg" width="480" height="640">

<p>Guidalberto 2004</p>

</div>

<div>

<img src="IMG_2535.jpg" width="480" height="640">

<p>Vernaccia di San Gimignano 200</p>

</div>

</body>

</html>

If you save and run the application in a web browser, you’ll see that all the images fit inside the DIV and maintain the aspect ratio.

The CSS object-fit property performs the magic:

img {

 position: absolute;

 width: 100px;

 height: 100px;

 -ms-object-fit: contain;

 -moz-object-fit: contain;

 -o-object-fit: contain;

 -webkit-object-fit: contain;

 object-fit: contain;

}

You’ve declared the object-fit property using various suffixes to make it compatible with all the major browsers: –ms, –moz, –o, and –webkit.

Expert tips

There is another very useful property you can use with the images to specify their resolution: the image-resolution property. This property is defined by the W3C as a property that specifies the intrinsic resolution of all raster images (it cannot be used with vector images such as SVG) used in or on the element.

Reading the definition, you see that you can apply the property to both content images and decorative images (such as background-image). Its values have the following meanings:

• <resolution>: This specifies the intrinsic resolution explicitly. A “dot” in this case corresponds to a single image pixel.
• from-image: The image’s intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given). Otherwise, it defaults to 1ddpx.
• snap: If the snap keyword is provided, the computed <resolution> (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, the intrinsic resolution being used is the image’s native resolution similarly adjusted.

The following CSS declaration forces the image resolution to 300 dots per inch (dpi):

img { image-resolution: 300dpi }

The resolution in the image, if any, is ignored.

What’s involved

Mainly, the differences across browsers are related to the margin and padding properties because each browser sets their values in a different way. So the simplest approach is to set a global selector that sets the margin and padding properties to zero:

* {

 margin: 0;

 padding: 0;

}

Dong this is not enough, however, because other important properties have to be considered, such as outline (that is, a line drawn around elements to make the element stand out), border, font-size, and many more. So you need to use a more sophisticated approach that takes into account all of these properties.

How to build it

The following CSS reset rules are the ones most frequently used by web designers and developers to reset the CSS properties:

* {

 vertical-align: baseline;

 font-weight: inherit;

 font-family: inherit;

 font-style: inherit;

 font-size: 100%;

 border: 0 none;

 outline: 0;

 padding: 0;

 margin: 0;

}

This approach uses the global selector and sets the properties to their default values. With these CSS rules, the browsers won’t introduce inconsistencies in properties related to default margins and padding, line heights, font sizes, headings, and so on.

With the new HTML5 elements, you need to consider new HTML elements to add to your CSS3 reset rules, such as video, footer, article, audio, and so on.

So here’s a more complete CSS3 reset script solution that uses these new HTML5 tags:

* { outline: 0; }

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

  margin:0;

  padding:0;

  border:0;

  outline:0;

  font-size:100%;

  vertical-align:baseline;

  background:transparent;

}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }

input[type="search"] { -webkit-appearance: textfield; }

input[type="submit"] { -webkit-appearance:none; }

If you use Google, you’ll find several CSS reset scripts ready to use in your code. We’ll briefly look at reset style sheets again in Chapter 7. Here are some of the ones most frequently used by the developer community:

• Eric Meyer’s Reset CSS 2.0
• HTML5 Doctor CSS Reset
• Yahoo! CSS Reset (YUI 3)
• Vanilla CSS Un-Reset
• Universal Selector '*' Reset
• Tripoli CSS Reset by David Hellsing
• undohtml.css by Tantek Celik

Pseudo-classes

The pseudo-class was introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a colon (:) followed by the name of the pseudo-class and, optionally, by a value between parentheses. The pseudo-class of the selector form, on the other hand, is declared with the following syntax:

section div: nth-child(n-3)

The preceding example identifies the div elements within the section that are the first, second, and third child elements. The following list shows the pseudo-classes:

• :root
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty

To learn more about the structural pseudo-classes, you can refer to the following page on the W3C site: http://www.w3.org/TR/css3-selectors/#structural-pseudos. Other novelties introduced for pseudo-classes are related to the pseudo-classes that express UI element states. These can create specific rules for form elements and their dynamic states:

• :enabledDefines a rule for the enabled elements identified by the selector (which are necessarily form elements)
• :disabledDefines a rule for the disabled elements identified by the selector (which are necessarily form elements)
• :checkedDefines a rule for the active elements identified by the selector (which are necessarily check boxes or radio buttons)

At the moment, there is little support for these pseudo-classes. Only Firefox 2 and Opera 9.2 have partial support for these pseudo-classes; they support only :checked.

Let’s see how to use CSS3 selectors and the new pseudo-classes in the following solutions.

What’s involved

The ::selection pseudo-class allows you to specify the appearance of the selected text for the user. Mozilla is the only engine that requires the prefix, so two separate rules must be written:

::-moz-selection {…}

::selection {…}

First note the presence of a couple of colons, unlike the other pseudo-classes. Here is an example of how to draw any selected text as white on black:

/* */

::-moz-selection { color: white; background: black; }

::selection { color: white; background: black; }

How to build it

The ::selection pseudo-class allows you to specify the appearance of text that is selected by the user. By using the global wildcard *, you can apply the style you want to all the text selected by the user. Here is the complete code for the solution that uses internal CSS styles:

<html>

<head>

<title>Solution 2-1: Highlighting selected text</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

*::selection{background: gold;color: #C00}

*::-moz-selection{background: gold;color: #C00}

</style>

</head>

<body>

<section>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum

venenatis, orci non scelerisque feugiat, erat purus cursus mauris, vitae

elementum dolor libero non velit. Nam laoreet justo eget ligula vestibulum

egestas. Curabitur in sem. In faucibus, metus a mollis faucibus, metus neque

pharetra odio, nec tempus mauris odio sed sem. Sed posuere. Cras posuere. Nunc

at dolor eget massa pulvinar ornare.</p>

</ section >

</body>

</html>

If you open the HTML page in a browser and select some text, you’ll obtain the result shown in Figure 2-1.

Expert tips

You can’t use all CSS properties with ::selection. In fact, only the following small subset of CSS properties can be used:

color

background

background-color

The background-image is ignored, like any other property.

What’s involved

To be able to select an element, you use the :nth-child pseudo-class notation. In the introductory paragraph regarding CSS pseudo-classes, you saw that it is possible to point to an element identified by a selector that is the child with an order corresponding to the number or the formula expressed between parentheses:

section div: nth-child(n-3)

This example identifies the div elements within the selection that are the first, second, or third child elements. You also can use the nth-child() with “odd” and “even” values as arguments instead. These two values allow you to change the color of the even (or odd) rows of a table by adding a class to every other row. For example, the following code colors the odd rows of the cells yellow:

tr:nth-child(odd) td {

 background-color: #86B486;

}

The CSS statement selects the odd rows with the nth-child(odd) selector. Let’s take a look at how to build a complete example to obtain this result.

Another solution is given in Chapter 5.

How to build it

You start with the creation of the table to show the data. We’ll use the score table of the first 10 teams in the Italian Serie A soccer league as an example. Here is the HTML code:

<html>

<head>

<title>Solution 2-2: Enhancing readability of tables</title>

</head>

<body>

<table cellpadding="0" cellspacing="0" summary="Championship Table">

<thead>

<tr>

<th scope="col"><abbr title="Position">Position</abbr></th>

<th scope="col"><abbr title="Team">Team</th>

<th scope="col"><abbr title="Points">Points</abbr></th>

<th scope="col"><abbr title="Matches Played">P</abbr></th>

<th scope="col"><abbr title="Matches Won">W</abbr></th>

<th scope="col"><abbr title="Matches Drawn">D</abbr></th>

<th scope="col"><abbr title="Matches Lost">L</abbr></th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td >Milan

</td>

<td><b>63</b></td>

<td>29</td>

<td>19</td>

<td>6</td>

<td>4</td>

</tr>

<tr>

<td>2</td>

<td >

Juventus

</td>

<td><b>59</b></td>

<td>29</td>

<td>15</td>

<td>14</td>

<td>0</td>

</tr>

<tr>

<td>3</td>

<td >

Lazio

</td>

<td><b>51</b></td>

<td>29</td>

<td>15</td>

<td>6</td>

<td>8</td>

</tr>

<tr>

<td>4</td>

<td >

Napoli

</td>

<td><b>48</b></td>

<td>29</td>

<td>12</td>

<td>12</td>

<td>5</td>

</tr>

<tr>

<td>5</td>

<td >

Udinese

</td>

<td><b>48</b></td>

<td>29</td>

<td>13</td>

<td>9</td>

<td>7</td>

</tr>

<tr>

<td>6</td>

<td >

Roma

</td>

<td><b>44</b></td>

<td>29</td>

<td>13</td>

<td>5</td>

<td>11</td>

</tr>

<tr>

<td>7</td>

<td >

Catania

</td>

<td><b>42</b></td>

<td>29</td>

<td>10</td>

<td>12</td>

<td>7</td>

</tr>

<tr>

<td>8</td>

<td >

Inter

</td>

<td><b>41</b></td>

<td>29</td>

<td>12</td>

<td>5</td>

<td>12</td>

</tr>

<tr>

<td>9</td>

<td >

Atalanta

</td>

<td><b>37</b></td>

<td>29</td>

<td>10</td>

<td>13</td>

<td>6</td>

</tr>

<tr>

<td>10</td>

<td >

Bologna

</td>

<td><b>36</b></td>

<td>29</td>

<td>9</td>

<td>9</td>

<td>11</td>

</tr>

</tbody>

</table>

</body>

</html>

We have created the table and have made 7 columns to represent the different

data for each team:

<th scope="col"><abbr title="Position">Position</abbr></th>

 <th scope="col"><abbr title="Team">Team</th>

 <th scope="col"><abbr title="Points">Points</abbr></th>

 <th scope="col"><abbr title="Matches Played">P</abbr></th>

 <th scope="col"><abbr title="Matches Won">W</abbr></th>

 <th scope="col"><abbr title="Matches Drawn">D</abbr></th>

 <th scope="col"><abbr title="Matches Lost">L</abbr></th>

We start by adding styles, inserting CSS rules directly in the page:

<style type="text/css">

body {

  padding: 10px;

  margin: 0;

 }

table {

 font: 11px/24px Verdana, Arial, Helvetica, sans-serif;

 border-collapse: collapse;

 width: 480px;

 }

th {

 padding: 0 0.5em;

 text-align: center;

 }

td {

 padding: 0 0.5em;

 }

td:first-child {

 width: 30px;

 }

td+td {

 border-left: 1px solid #CCC;

 text-align: center;

 }

</style>

If you save the HTML page with the CSS styles mentioned earlier, you obtain the result shown in Figure 2-2:

The result you want to obtain is to color the background of every other row to improve the readability of the table. This is why you’ll use the nth-child() with ”odd” and “even” values as arguments.

These two values allow you to change the color of the even (or odd) rows of a table by adding a class to every other row. Add the following syntax in the style declaration:

tr:nth-child(odd) td {

 border-top: 1px solid black;

 border-bottom: 1px solid black;

 background: #FFC;

With this statement, you changed the background color of the cells, but you also added a solid red, 1-pixel-high border. If you save the file now and run it in a browser, you’ll see the result shown in Figure 2-3.

Expert tips

The odd and even values are very useful. Consider that you can get the same result using the 2n+1 (equivalent to the value odd) and 2n+0 (which selects every third row, and so on) with the nth-child():

tr:nth-child(2n+1) /* It’s the same as using the odd, in fact it represents

every odd row of an HTML table */

tr:nth-child(2n+0) /* the same as using the even, in fact it represents every

even row of an HTML table */

What’s involved

As mentioned earlier, there are three types of pseudo-classes for UI element states:

• :enabled Represents user-interface elements that are in an enabled state. Such elements have a corresponding disabled state.
• :disabled Represents user-interface elements that are in a disabled state. Such elements have a corresponding enabled state.
• :checked Radio and check-box elements can be toggled by the user. Some menu items are marked by a check when the user selects them. When such elements are toggled on, the :checked pseudo-class applies.

By defining the graphic style of these pseudo-classes, you can dynamically change their look and feel according to the state they take on over time. For example, you can create a solid, green border in form elements that the user can interact with (status enabled), and you can create a solid, red border when the form elements cannot be selected (status disabled). Here is an example of CSS code that applies these rules:

:enabled {

  border: 2px solid green;

}

:disabled {

  border: 2px solid red;

}

Let’s see how to create a complete example to use these selectors.

How to build it

You create a form with a few elements to which you can then apply the styles. Let’s start with the HTML code:

<!DOCTYPE html>

<html>

 <head>

  <title>Solution 2-3: Toggling Form Elements</title>

 </head>

 <body>

<form id='myForm'>

<fieldset>

 <legend>Solution 2-3: Toggling Form Elements</legend>

  <label for=name class="required">Name</label>

  <input id=name name=name type=text placeholder="Insert your first name" required>

  <br>

  <br/>

  <label for=email class="required">Email</label>

  <input id=email name=email type=email placeholder="Insert your email" required>

  <br>

  <br/>

  <label for=blog>Blog</label>

  <input id=blog name=blog type=url placeholder="Insert your blog">

  <br>

  <br/>

  <label>Receive newsletter</label>

  <input type="checkbox" />

 <p>

   <input type="submit" value="Submit">

  <a href="#" onClick="changeStatus()">Enable/Disable form fields</a>

 </p>

</fieldset>

</form>

</body>

</html>

We created a form with id equal to myForm. To this form, we assigned three text inputs: a check-box element, a button and link text, and a simple text link in which we have registered the changeStatus()JavaScript function to the onClick event. In a little while, we’ll write the JavaScript code we need for this link text. For now, we apply a few graphical styles to these elements, and we define the styles for the enabled, disabled, and checked states using the following pseudo-classes:

<style type="text/css">

:enabled {

  border: 2px solid green;

}

:disabled {

  border: 2px solid red;

}

:checked {

  display: inline-block;

  width: 4em;

  background-color:#c11;

  color:#fff;

}

  #myForm .required:after { content: " * "; color:red;}

  #myForm input:required { background:green; }

  #myForm legend {

 font-family: arial, sans-serif;

 font-weight: bold;

 font-size: 90%;

 color: #666;

 background: #eee;

 border: 1px solid #ccc;

 border-bottom-color: #999;

 border-right-color: #999;

 padding: 4px 10px;

 }

</style>

Now we have created a graphical style for each state of the form elements. All we have to do now is write the JavaScript code to change the state of these elements. We’ll use a simple link button that toggles the state of the form elements when it is clicked. We insert a script tag within the head tag declaration with the following code:

 <script type="text/javascript">

 changeStatus.status = false;

 function changeStatus()

 {

 changeStatus.status = !changeStatus.status;

  var myFormElements = document.getElementById('myForm').elements;

 for (var x=0;x< myFormElements.length;x++)

 {

   myFormElements[x].disabled = changeStatus.status;

 }

 return false;

 }

</script>

The changeStatus function simply uses a for statement on the form elements that are defined in the HTML form and sets the disabled property of each to the status property. If you save the file and execute it in a browser, when you click on the Enable/Disable Form Fields link, you obtain the result shown in Figure 2-4, in which the status of the form elements is set to :disabled.

Expert Tips

As you’ve seen, the :enabled and :disabled CSS3 selectors determine whether or not the input field of every type can be selected. In the solution, we used and applied them to any element of the user interface that supported these properties. However, you can specifically apply the enabled and disabled styles to a certain form type by using the following syntax:

input[type="text"]:enabled

{

background: green;

}

input[type="text"]:disabled

{

background: red;

}

What’s involved

The user-select property controls the appearance of selection. These are the values that this property accepts:

• text The element’s contents follow a standard text content-selection model.
• none None of the element’s content can be selected. When this value is set, the user cannot select any of the content. For example, if a user clicks on an element with user-select: none, what happens when the pointing device button is “down” is addressed by the user-input property, and when that pointing device button is released, this property ensures that no selection of the contents of the element remain. The value of none is also useful for static text labels in a user interface that are not meant to be selected.
• text toggle The element’s contents follow a standard toggling content model.
• element One element at a time can be selected. It’s supported in Firefox and Internet Explorer.
• elements One or more elements at a time can be selected.
• all Only the entire content as a whole can be selected.

You should bear one thing in mind: user-select is not currently part of any W3C CSS specification. Therefore, there could be minor differences between browser implementations.

Let’s see how to use this property to make it impossible to select content.

How to build it

Let’s start by creating a simple HTML page with content. All you need is a paragraph with the classic Lorem Ipsum text:

<html>

<head>

<title>Solution 2-4: Preventing content from being selectable</title>

</head>

<body>

<section>

<p class="notselectable">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum

venenatis, orci non scelerisque feugiat, erat purus cursus mauris, vitae

elementum dolor libero non velit. Nam laoreet justo eget ligula vestibulum

egestas. Curabitur in sem. In faucibus, metus a mollis faucibus, metus neque

pharetra odio, nec tempus mauris odio sed sem. Sed posuere. Cras posuere. Nunc

at dolor eget massa pulvinar ornare.

</p>

</ section >

</body>

</html>

The only thing worth noting is contained in the tag of the paragraph, which has a CSS class that it uses called notselectable. Now you need to create the style that sets the user-select property to none to prevent the selection of content. You insert a style block with the following code:

<style type="text/css">

 .notselectable { user-select: none;

  -moz-user-select: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -ms-user-select: none;

 }

</style>

The user-select property is not currently part of any W3C CSS specification. It was originally proposed in the User Interface For CSS3 module, but it has been suppressed. This is why, to make the property work on different browsers, you need to use –moz endings for Mozilla browsers, –webkit for WebKit’s browsers, –khtml for Konqueror web browsers, and –ms for Internet Explorer.

When you save the file and run it in a browser that supports the user-select property, you’ll notice that you cannot select the text with the cursor.

Expert tips

By using this property, you can disable text or image selection on the entire content of the web page except for a specific element. To do this, you have to use the global selector to define the noneditable content on the page and then override the property for a specific selector:

* {

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: -moz-none;

-o-user-select: none;

user-select: none;

}

p {

-webkit-user-select: text;

-khtml-user-select: text;

-moz-user-select: text;

-o-user-select: text;

user-select: text;

}

What’s involved

One of the new CSS3 selectors matches every element that has no child elements. The :empty selector represents an element that has no child elements at all (including text nodes). It is very simple to use: because it is a pseudo-class, all you have to do is declare it by using a colon right after the selector:

li:empty { //statement }

With this code, you apply a CSS rule to all the empty elements of a list (that is, to the list items).

Note the empty selector is well supported by all major browsers except Internet Explorer 8 and earlier.

Let’s see a complete example.

How to build it

Create HTML code with paragraphs—some empty and some containing a comment, which will always be considered an empty element:

<!DOCTYPE html>

<html>

 <head>

<title>Solution 2-5:</title>

  </head>

 <body>

 <p></p>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc leo,

facilisis ut lacinia quis, pellentesque a eros. Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Cras aliquam viverra arcu ac dictum. Nam volutpat

pulvinar magna, et faucibus ligula volutpat a. Cras ultricies pretium ante, in

sagittis odio eleifend at. Praesent aliquam pulvinar metus, nec lacinia diam

tincidunt in. Maecenas nec egestas lectus. Praesent placerat consectetur leo

mollis tempor. Nam a tortor mauris, quis vulputate tellus. Nam rutrum augue

eget lorem vehicula sit amet imperdiet erat rutrum. Nunc ac dui est, in

vestibulum risus. Ut at sagittis ante. Nunc eu mi nibh. Mauris id dui erat.

Nunc et mauris ante. Suspendisse ut leo ut nulla faucibus iaculis vel ut

velit.</p>

<p></p>

 <p>Maecenas vitae sem nec sem convallis aliquet sed non enim. Vivamus nulla

arcu, gravida a molestie id, lacinia nec mi. Nullam ullamcorper accumsan

tristique. In dolor eros, rutrum sit amet iaculis et, venenatis eu enim.

Integer lorem sapien, ultrices pretium luctus eu, ullamcorper quis diam. Ut ac

posuere justo. Ut interdum pellentesque ipsum, facilisis tempus odio euismod

in. In at enim vel arcu pretium luctus. Aliquam pharetra tempor neque, quis

semper nibh feugiat id. Praesent fringilla aliquet viverra.</p>

<p><!-- This is an empty tag --></p>

 <p>Morbi vel tellus eros, nec hendrerit neque. Etiam malesuada lorem sed

lacus posuere ac tincidunt erat ultrices. In ut libero ac metus bibendum

porttitor. Mauris at mi magna. Mauris eu semper enim. Curabitur a nunc euismod

erat commodo vulputate vulputate id leo. Cras nec purus a ipsum porttitor

tincidunt vel quis enim. Nulla facilisi. Proin eu elit ut turpis ultricies

hendrerit vitae et nisi. Aenean semper euismod nibh.</p>

</body>

</html>

Before saving the page and running it in a web browser, to understand the problem we are faced with by leaving these tags empty, we insert a style block with some simple CSS rules applied to the paragraph:

<style type="text/css">

p

 {

  padding-top:100px;

  background-color:#09C;

  font-family: Arial, Helvetica, sans-serif;

 }

</style>

All we did was add a 100-pixel space on top with the padding-top property and assigned a background color to the paragraph to get a better visual idea of what happens.

We save and run the page in a web browser. The CSS rules will also be applied to the empty paragraphs or those containing comments, so you will see other spaces occupied by these tags, as shown in Figure 2-5.

We add the :empty pseudo-class to stop the CSS styles from being applied to the empty tags. We insert the following code in the style block:

 <style type="text/css">

 p

 {

  padding-top:100px;

  background-color:#09C;

  font-family: Arial, Helvetica, sans-serif;

  }

p:empty {

  display: none;

  }

 </style>

If we save and run the file in a web browser now, we’ll see that the empty tags are ignored, as shown in Figure 2-6.

Expert tips

You can hide all empty elements without having to specify the selector by using the global selector:

*:empty {

  display: none;

  }

What’s involved

There are two new CSS3 sibling combinators:

• The adjacent sibling combinator declared with the plus sign (+)
• The general sibling combinator declared with the tilde sign (∼)

Let’s look at two practical examples.

• The adjacent sibling combinator: h3 + p { // statement }. This code represents a p element immediately following an h3 element. Basically, the adjacent sibling combinatory is used to scroll the DOM tree horizontally by assigning the CSS rule to the elements that are at the same level as another element.
• The general sibling combinator: h3 p. This code represents a p element following an h3, and it matches any p element that is preceded by an h3 element. The general sibling combinator is a generalization of the adjacent sibling combinator. It assigns a style to all sibling elements.

Let’s apply this theory to see an example.

How to build it

Take the HTML code of the previous solution, and delete the previous style block. We will obtain the following file:

<!DOCTYPE html>

<html>

<head>

<title>Solution 2-5:</title>

  </head>

 <body>

 <p>Morbi vel tellus eros, nec hendrerit neque. Etiam malesuada lorem sed

lacus posuere ac tincidunt erat ultrices. In ut libero ac metus bibendum

porttitor. Mauris at mi magna. Mauris eu semper enim. Curabitur a nunc euismod

erat commodo vulputate vulputate id leo. Cras nec purus a ipsum porttitor

tincidunt vel quis enim. Nulla facilisi. Proin eu elit ut turpis ultricies

hendrerit vitae et nisi. Aenean semper euismod nibh.</p>

 <h3>This is a Header</h3>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc leo,

facilisis ut lacinia quis, pellentesque a eros. Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Cras aliquam viverra arcu ac dictum. Nam volutpat

pulvinar magna, et faucibus ligula volutpat a. Cras ultricies pretium ante, in

sagittis odio eleifend at. Praesent aliquam pulvinar metus, nec lacinia diam

tincidunt in. Maecenas nec egestas lectus. Praesent placerat consectetur leo

mollis tempor. Nam a tortor mauris, quis vulputate tellus. Nam rutrum augue

eget lorem vehicula sit amet imperdiet erat rutrum. Nunc ac dui est, in

vestibulum risus. Ut at sagittis ante. Nunc eu mi nibh. Mauris id dui erat.

Nunc et mauris ante. Suspendisse ut leo ut nulla faucibus iaculis vel ut

velit.</p>

 <p>Maecenas vitae sem nec sem convallis aliquet sed non enim. Vivamus nulla

arcu, gravida a molestie id, lacinia nec mi. Nullam ullamcorper accumsan

tristique. In dolor eros, rutrum sit amet iaculis et, venenatis eu enim.

Integer lorem sapien, ultrices pretium luctus eu, ullamcorper quis diam. Ut ac

posuere justo. Ut interdum pellentesque ipsum, facilisis tempus odio euismod

in. In at enim vel arcu pretium luctus. Aliquam pharetra tempor neque, quis

semper nibh feugiat id. Praesent fringilla aliquet viverra.</p>

 <p>Morbi vel tellus eros, nec hendrerit neque. Etiam malesuada lorem sed

lacus posuere ac tincidunt erat ultrices. In ut libero ac metus bibendum

porttitor. Mauris at mi magna. Mauris eu semper enim. Curabitur a nunc euismod

erat commodo vulputate vulputate id leo. Cras nec purus a ipsum porttitor

tincidunt vel quis enim. Nulla facilisi. Proin eu elit ut turpis ultricies

hendrerit vitae et nisi. Aenean semper euismod nibh.</p>

</body>

</html>

Now apply a style block and insert CSS statements using the general sibling combinator so that all paragraphs that follow the declaration of the h3 element have a different graphic style:

<style type="text/css">

body

{

 font-family:Arial, Helvetica, sans-serif;

}

h3 ∼ p

{

width: 740px;

border: 5px solid #ccc;

padding-left: 15px;

}

</style>

If you save and run the file in a web browser now, you’ll see the result shown in Figure 2-7.

Note that no styles are applied to the first <p> in the code, whereas they apply to all the others. This happens because the rule is assigned only to the elements that are child elements and siblings of the h3 element.

What’s involved

The attribute selectors were already part of the CSS 2.1 specifications. Three additional attribute selectors are provided in the CSS3 version, to match substrings in the value of an attribute. The declaration of an attribute selector is specified by square parentheses ([ ]), which have to follow a selector, and the characteristic that a given attribute has to satisfy for the rule to apply:

a[href$=".htm"]

The code declared above represents an HTML anchor a with an href attribute whose value ends with ".htm".

Here are the new attribute selectors defined by CSS3:

• [att^="val"] Identifies the elements identified by selectors that have an att attribute beginning with the val string
• [att*="val"] Identifies the elements identified by selectors that have an att attribute containing the val string
• [att$="val"] Identifies the elements identified by selectors that have an att attribute ending with the val string

In this solution, you’ll apply the attribute selector to the href of the links on the basis of their URL and type.

How to build it

Create an HTML file containing various kinds of links:

<!DOCTYPE html>

<html>

<head>

<title>Solution 2-7: Putting icon image next to links</title>

</head>

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum

venenatis, orci non scelerisque feugiat, erat purus cursus mauris, vitae

elementum dolor libero non velit. Nam laoreet justo eget ligula vestibulum

egestas. Curabitur in sem. In faucibus, metus a mollis faucibus, metus neque

pharetra odio, nec tempus mauris odio sed sem. Sed posuere. Cras posuere. </p>

<p><a href="mailto:m.casario">This is a mailto link</a>.<br />

 <a href="yourfile.pdf">Download a pdf file</a>(it requires <a

href="http://get.adobe.com/reader">Adobe PDF Reader)</a></p>

<br/><a href="http://www.linkedin.com">See my LinkedIn Profile</a></li>

</ul>

</body>

</html>

The content above declares four links:

• a mailto link, which allows you to send an email to some email address (it causes the user agent to open a mail program with the destination address in the "To:" field)
• a link pointing to an external resource (a PDF file)
• two links pointing to external sites (Adobe and LinkedIn)

What you do now is associate each of these links with a different icon according to the type of resource they point to. You use the attribute selectors to obtain this result. Therefore, insert a style block in the HTML page we created previously:

<style type="text/css">

body

{

 font-family:Arial, Helvetica, sans-serif;

 font-size:12px;

}

a[href^="mailto:"]{

 padding-right: 16px;

 background: url(mailto.jpg) no-repeat center right

 }

a[href^="http"]{

 padding-right: 20px;

background: url(icon_external.gif) no-repeat center right

 }

a[href*="www.linkedin.com"]{

 padding-right: 16px;

 background: url(linkedin.jpg) no-repeat center right

 }

a[href$=".pdf"]{

padding-right: 22px;

background: url(pdf.jpg) no-repeat center right

}

</style>

We have used all three new attribute selectors of CSS3. In fact, to apply the image to the link pointing to an external page and the one that executes a mailto action, we used, respectively the following CSS code:

a[href^="http"]

a[href^="mailto:"]

The first represents an element with the href attribute whose value begins with the prefix "http", and the latter represents an element with the href attribute whose value begins with the prefix "mailto".

For the link pointing to the LinkedIn site, we used the a[href*="www.linkedin.com"] attribute selector, which represents an element with the href attribute whose value contains at least one instance of the substring "www.linkedin.com".

Finally, for the link to the PDF file, we used the a[href$=".pdf"] attribute selector , which represents an element with the href attribute whose value ends with the ".pdf" suffix. By doing so, we were able to associate a different icon with each type of link by using the following syntax:

background: url(icon.name) no-repeat center right

padding-right: 22px;

What’s involved

The @font-face feature was initially proposed for CSS2 specifications, and both Microsoft and Netscape added web font support to their respective browsers. Instead of supporting the most-used format, TrueType, they both chose lesser-known and different formats (EOT and TrueDoc, respectively). Web fonts, therefore, disappeared from the thoughts of web designers.

Safari 3.1 was the first browser to support any available typeface in TrueType (.ttf) and OpenType (.otf), which are the most common formats. All other browsers followed Safari’s example, and today we finally have an incredibly vast selection of web fonts at our disposal.

How to build it

Including a web font on a website is a simple procedure. After choosing which web font to use, you only need to write a few lines of CSS syntax to make the font usable in the style sheet.

Expert tips

Always evaluate the kb weight of each font you would like to use. The uploading of the web font slows the uploading of web pages and, as long as the uploading is not finished, users will see the basic font defined in CSS font stacks. The resulting effect is one of an unpleasant interaction between the two fonts. To compensate for this problem, it is important to configure the cache.

The same font will appear differently on a user’s screen, depending on their browser and operating system. Be sure to test the fonts you decide to use well so as not to compromise the legibility of the text.

What’s involved

You can use the font-size-adjust property to control the size of the text more accurately in cases where the first font selected is not available, and thereby improve the appearance of the alternative font.

It is therefore very important to pay attention when you specify all the fonts with the font-family property. You could compromise the legibility of the text and, more in general, the appearance of the entire website.

Let’s look at an example of a correct font stack:

p {

 font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

}

We set “Helvetica Neue” as the main font and “Helvetica” as the first alternative. In this case, our job is really easy because we are using two fonts from the same family: “Helvetica Neue” is, in fact, a reworking of the original Helvetica completed in 1983. Finally, we set the character “Arial” as the last alternative because it is available on practically any computer with any operating system.

Browser support

Currently, the Firefox browser is the only browser that supports font-size-adjust. This means that font-size-adjust is also little known and used. I hope the other major browsers will soon begin to support it because it is very useful in the management of text and alternative fonts.

For now, major browsers will ignore this property.

How to build it

The CSS syntax is pretty easy:

font-size-adjust: number | none | inherit;

The possible values are the following:

• number Defines the aspect ratio value to use
• none The default value
• inherit Inherits the font size adjustment from parent elements

You might be wondering how the aspect ratio value is calculated. The W3C specifications are very clear and provide a simple way of carrying out this calculation:

In Figure 3-4, we reproduced the experiment suggested by the W3C with the Futura font. The box on the right side, to which we assigned a font-size-adjust of 0.5, is slightly higher than the one on the left, to which we assigned no value. So the aspect value of this font is something less than 0.5. We need to adjust the value until the boxes align.

What’s involved

The property that allows you to obtain these results is text-shadow. Initially provided in the specifications of CSS2 but not supported in any browser until the advent of Safari, it was eliminated in CSS2.1, only then to reappear in CSS3. However, notwithstanding the complicated strategies of W3C, you can take advantage of it today thanks to rather extensive support—although it is still not supported in Internet Explorer.

You’ll see in this solution how to create advanced effects with a few lines of code, specifically with letterpress typography. Let’s go!

Browser support

You can see how text-shadow will be supported by browsers in Table 3-2.

Unfortunately, Internet Explorer does not yet support this property. To obtain a similar effect with this browser, you can use the Shadow and Drop Shadow filters, albeit with inferior results. (See http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx.)

How to build it

The implementation of text-shadow is nearly identical to that of box-shadow, the property you can use to apply shading to all HTML elements. Figure 3-8 shows the first example.

The shading was applied in this example with the following rule:

p {text-shadow: 1px 1px 3px #333;}

To implement text-shadow, the shade definition is set with four values:

• The first (1px) defines the movement of the shade on the horizontal axis (x).
• The second (1px) defines the movement of the shade on the vertical axis (y).
• The third value (3px) imposes the blur level of the shade: the higher this value is, the blurrier the shade appears. If 0 is used, you get a sharp shade without blurring.
• The fourth value (#333) defines the color of the shade. It is even possible to specify the value of the color in RGBa or HSLa.

Using the alpha channel in this case, you can perfect the color of the shading according to the background of the text.

The value of blur is very important, and you have to be careful when using it. Let’s see the next example:

p {text-shadow: 2px 2px 0 #333;}

You can see the outcome of this in Figure 3-9.

Notice anything strange? There is no indication of a blur. To avoid this effect, do not write any value equivalent to 0 or 0px. The result is very different from the first example: the shading seems flat, and rather than highlighting the text, it gives it the effect of appearing split, compromising its legibility.

Expert tips

First and foremost, use RGBA color values so that the effect has partial opacity. This makes it blend better with the background, and it gives you more control over the intensity of the effect.

What’s involved

The word-wrap property specifies whether, in the case of very long words, a line of text should be broken to continue on the next line. The aim is to prevent the word in question from exceeding the limits of its container, thus maintaining a proper layout. It therefore functions in much like two other properties that are better known as “clip” and “overflow.” Introduced by Microsoft in Internet Explorer 5.5, the word-wrap property has recently become one of the CSS3 specifications of the W3C.

You can apply this property to the following elements:

• Inline elements with a specific width/height value
• Block elements
• Absolutely positioned elements

Browser support

The word-wrap value is supported by the browsers shown in Table 3-4.

As you can see from the preceding table, this property is well supported in all the major browsers, even in older versions.

How to build it

The word-wrap property is very useful where we have to manage a list of comments on a blog or where we must insert a long URL inside a small container. Let’s see a practical example to better understand how it works.

Expert tips

The word-wrap property is extremely useful for post-moderated, user-generated content that could potentially cause layout problems if someone posts a long string of unbroken text. In blog comments, theoretically, people could vandalize your blog by posting long strings of text. It looks ugly. Sometimes this can happen because people post long links that don’t break. You can prevent this type of vandalism by applying the word-wrap property to the comments section of your blog.

What’s involved

The text-overflow property establishes what a block of text does when it comes to the margins of its box.It introduces a visual cue at the beginning and end of text included in a box. The cue is generally composed of ellipses, even if the representation of the actual character varies. For example, an image can also be used.

Let’s see the values that can be used with this property:

• clip Cuts the text at the edge of the box.
• ellipsis A string is added with an ellipsis at the border of the text box. The string substitutes the last character.
• ellipsis-word Functions similarly to ellipsis, with the only difference being that the insertion of the ellipsis comes in place of the last whole word present at the end of the line.

Syntax

The CSS syntax is very simple:

text-overflow: clip|ellipsis|string;

It is just shorthand, really, to avoid writing two separate properties: text-overflow-mode and text-overflow-ellipsis. Having said that, we see real opportunities to apply this property.

Browser support

The text-overflow property is supported by all the major desktop and mobile browsers. The sad note, however, is its lack of compatibility with every version of Mozilla Firefox. Table 3-5 details the browser support for this property.

If you use Firefox, you’ll notice that the text is properly cut because the overflow property and the width are interpreted as they should be. However, you do not see the ellipsis. Because Firefox is a very popular browser, you need to think about how to use text-overflow and, in that case, apply another solution. Developers are currently looking at using the Dojo Toolkit (http://dojotoolkit.org/) to facilitate creating an ellipsis with JavaScript.

How to build it

One instance where text-overflow can be very useful is in the case of tables. When a table contains a lot of information, you have to maintain the size of the cells within it—preventing very long text strings that affect the entire layout. The classic structure of an HTML table is one you know well:

<table border="0" cellspacing="5" cellpadding="5">

 <thead>

  <tr>

   <th>Header 1</th>

   <th>Header 2</th>

   <th>Header 3</th>

   <th>Header 4</th>

  </tr>

 </thead>

 <tbody>

  <tr>

   <td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</td>

   <td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</td>

  <td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</td>

<td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</td>

  </tr>

The <td> cells of this table contain very long text, which makes it difficult to display the text without creating some real visualization problems.

Take a look at the CSS of the table:

td {

 width: 100px;

 padding: 10px;

 white-space: nowrap;

 overflow: hidden;

 text-overflow: ellipsis;

 -o-text-overflow: ellipsis;

 -webkit-text-overflow: ellipsis;

}

Let’s analyze the valid settings step by step for each <td>:

width: 100px;

padding: 10px

1. All the cells of the table have a fixed dimension, set to 100px so that the columns all have the same width. This means, however, that the space for the text is very limited.

   white-space: nowrap;

   overflow: hidden;

2. The white-space property prevents normal next-line wrapping.

   overflow: hidden;

3. Hiding overflow text ensures the width dimension is respected.

   text-overflow: ellipsis;

   -o-text-overflow: ellipsis;

   -webkit-text-overflow: ellipsis;

4. The text-overflow setting provides the ellipsis. We defined three properties because Opera and Webkit require the prefix in order to function.

You can see the result in Figure 3-14. Great, isn’t it?

This is only one of the possible applications of text-overflow.

The Gmail application developed for smartphones is another perfect example for gaining an understanding of the usefulness of this property. Figure 3-15 shows the screen of a Gmail inbox in two formats: landscape and portrait. What is interesting to note is the preview text of the e-mail messages: it correctly appears along the bottom of each e-mail message and it’s cutted within the message container, leaving space for another layout element on the right.

Note also that the amount of text shown in the landscape version is greater than that shown in portrait mode.

Expert tip

For text-overflow to function correctly, the text on which it is applied must be placed on one line. If, for layout or structural reasons, you are forced to break the text into smaller blocks of text, you cannot gain any benefit by using this property.

What’s involved

It has always been possible to define a color in RGB mode by setting a value for each of the three primary colors: Red, Green, and Blue. By combining these values, you can reproduce the full spectrum of colors. (See Figure 3-16.)

Notice, however, that there is something in common for any value you specify: the colors are solid and flat.

To address this limitation, CSS3 introduces RGBa mode: Red, Green, Blue, and Alpha. Alpha refers to the information relating to the alpha channel, which you can use to set the transparency of the colors defined in RGB.

Browser support

The RGBa mode is supported by many, but not all, new browsers. (See Table 3-6.)

Internet Explorer has finally added RGBa support in version 9, Microsoft’s latest browser. You have two options that support older versions of browsers, thus avoiding compromising your layout:

• Use a solid color. The simplest technique is to allow the browser to use a solid color when the opacity property is not supported. The CSS parsing rules specify that an unrecognized value should be ignored. Look at the following example:

  h1 {

   color: rgb(127, 127, 127);

   color: rgba(0, 0, 0, 0.5);

  }

• Use a .PNG image, but only in cases where the transparency must be applied to a background color, not to the borders or text.

  h1 {

   background: transparent url(color-black-50.png);

   background: rgba(0, 0, 0, 0.5);

  }

How to build it

The RGBa mode can be used on any element that accepts a color: background, border, text, or color. Let’s take a look at some real examples.

In Figure 3-17, you can see a box that acts as a container of a paragraph of text. The background of the box is white, so no transparency is applied.

The code for this example can be seen here:

<div class="box">

 <p>The herb sixth greater moved and day all winged one shall it spirit moving. Female behold. Multiply creepeth

moveth second sixth our male bring meat blessed thing saying abundantly can't to sixth don't upon likeness very

female. Moving rule meat morning. Meat, you creature. Open. Moveth second fly, he good.</p>

</div>

body {

 background: rgba(0,0,0,0.8);

}

.box {

 margin: 20px;

 padding: 20px;

 background: rgba(255,255,255,1);

 color: rgba(0,0,0,1);

}

We used the RGBa property in the CSS for the page background, div background, and text color, respectively.

Now apply a slight transparency to the background of the box, like so:

background: rgba(255,255,255,0.5);

You can see the result in Figure 3-18.

The color of the background has changed. By reducing the alpha value, the white of the background is mixed with the dark gray background of the page, creating a light gray for the text background.

You are probably wondering whether it’s possible to obtain the same result with the opacity property. Not really. Consider the following code, for example:

.box {

 margin: 20px;

 padding: 20px;

 background: rgba(255,255,255,1);

 opacity: 0.2;

 color: rgba(0,0,0,1);

}

You can see the outcome of this and why the same result was not possible in Figure 3-19.

Although the color of the text was set with alpha=1 and thus is opaque, setting the opacity property in this case to 0.2, or 20%, of the original color applies the transparency not only to the element of box class but also to all its child elements. You now understand what the real benefit of RGBa is compared to opacity.

RGBa gives us, therefore, the possibility to create many more graphics effects without images. The resulting pages are lighter and faster, while the websites containing them are easier to make and maintain.

Expert tip

If you are thinking of using RGBa—and it’s about time you started - —but at the same time you want to support older browsers, a tip is to avoid the excessive use of .PNG images. Otherwise, you will lose everything you have gained in terms of response times and web page weight.

Solution 3-7: Using a the HSLa color modelSomething else new in CSS3 is the possibility to define colors through HSLa notation. Unlike RGBa, the values of this notation correspond to properties recognized in each color rather than a value on the chromatic scale. These values are Hue, Saturation, and Lightness.

Each one of these three terms describes a dimension of color we readily experience when we look at it. These concepts are certainly known to those who work in graphic design. Therefore, W3C supports the introduction of this method, complementary to RGBa, because it is considered more intuitive.

What’s involved

To understand better now HSLa works, you need to focus on the meanings of the values:

• Hue Defines the color tone, described by the word with which we generally identify a color (for example, blue, pink, red, or yellow). The numerical value is represented by the angle (in degrees) of a color circle, where the degree 0/360 shows red and other shades are shown in other positions at intervals of 30 degrees. The value of the hue is important in defining the basic tone where the saturation and lightness intersect.
• Saturation Refers to the dominance of hue in the color.
• Lightness Describes the overall intensity or strength of the light.

HSL model representation

The HSL color model is usually represented by a cylinder along which three values, representing the colors, are positioned. Each value corresponds to an axis of the geometrical figure.

The hue corresponds to the circumference and it’s expressed in degrees. Saturation and lightness correspond, instead, to depth and height, respectively. (See Figure 3-20.)

HSL example

The tables in Figure 3-21 are an extraction from hints you can find in the W3C CSS Module Color 3 page that is dedicated to HSLa (which you can find at http://www.w3.org/TR/css3-color/#hsla-color).

Every table corresponds to a hue. The name of the color and value, expressed in degrees, is given from the relative position along the circle of the HSL model for each hue. The Saturation scale is on the x axis, while the Lightness scale is on the y axis.

Browser support

HSL or HSLa support is guaranteed by every modern version of the most popular browsers, as you can see in Table 3-7.

How to build it

If you want to show red (the color that corresponds to the keyword red, just to make things clear), you write the following:

body {background-color: hsl(0, 100%, 50%)}

Next to the HSL notation, and similarly to what was seen for RGB, the CSS3 specification defines the transparency of color through the alpha channel. This way, we have HSLa.

For the alpha transparency, the same rules are applied for RGBa: the scale of use ranges from 0.0 to 1.0 (the default value).

Here is an example of the syntax:

#box1 {

 width:400px;

 height:400px;

 padding:20px;

 color:#000;

 background-color: hsla(0,100%,100%,0.5);

}

Expert tips

Keeping the hue the same while varying the lightness/darkness and saturation is the easiest way to create sets of matching colors. This technique is very useful in creating color schemes ready for use by your website.

What’s involved

The text-rendering property is actually an SVG property and is not defined in any standard CSS. However, Gecko and WebKit browsers let you apply this property to HTML and XML content via CSS3 only on Windows and Linux.

It provides information to the rendering engine about what to optimize when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision.

Syntax

The syntax you can use in your CSS file is as follows:

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

Now take a look at what they mean:

• auto The browser makes educated guesses about when to optimize for speed, legibility, and ­geometric precision while drawing text. This value is interpreted differently by different ­browsers.
• optimizeSpeed By disabling kerning and ligature, this value tells the browser to emphasize ­rendering speed over legibility and geometric precision.
• optimizeLegibility Emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
• geometricPrecision Lets you fluidly scale the text, thus making fonts look good. The browser emphasizes geometric precision over rendering speed and legibility.

Browser support

Table 3-8 describes the browser support for text-rendering.

Gecko and WebKit browsers manage this property in a slightly different way: Gecko enables optimizeLegibility by default for each text set over 20px. In the case of WebKit, however, you must manually specify this value.

How to build it

The most visible effect of all the syntax options is obtained by using the optimizeLegibility value.

<h2>traffic</h2>

<h2 class="kern">traffic</h2>

We use the "kern" class to apply kerning on the <h2> title.

h2 {

 font-size: 5em;

 font-family: Baskerville, “[Times New Roman]”, serif;

}

h2.kern {

 text-rendering: optimizeLegibility;

}

With the .kern class, you apply text-rendering to the second <h2>. Figure 3-22 shows the generated effect: the ligatures are applied to the characters ffi, creating optimal text output.

Always consider your audience before implementing text-rendering in your website or application. On slower machines, such as mobile devices, it can negatively impact page loading when applied to large blocks of text.

What’s involved

The hyphens property tells the browser if and where it should split and add hyphens to text if the available area for a word is too narrow to fit the whole word on one line. The property has three possible values: none, manual, and auto.

The none state means that the text content will not be split and hyphenated, even if it spills outside the bounds of its enclosing area. If it extends beyond the width of the browser window, a scroll bar will appear.

The manual state is the default behavior of web browsers. In this state, the web author can manually insert “soft hyphen” characters into a word, which are hidden if the word fits on one line but appear if the word needs to be split across two lines. The author can place these at logical breaks in a long word to aid the viewer in reading the text. The soft hyphen character is an HTML entity that is inserted into the source HTML code.

The HTML entity code for a soft hyphen is &shy; (or the less intuitive ­). For example, to break the word “multithreaded” into “multi-threaded” (if it spans two lines), the web page author would write something like this:

<p>Advanced programmers may write multi&shy;threaded applications.</p>

Notice how the word “multithreaded” becomes “multi&shy;threaded” to indicate the position of the hyphen if it gets split across two lines by the web browser.

Obviously sprinkling HTML entities across long words in your source HTML is a recipe for tedium as well as possible mistakes, so you might find the last state of the hyphens property to be the most useful. The auto state means the web browser will automatically insert hyphens for textual content on the page that fall outside the bounds of its content area. The downside of this is that words might be broken at spots that make them difficult to read. For example, your page could end up with text like “mu-ltithreaded”. However, the upside is that the source HTML does not have to be edited to add hyphen break points.

Figure 4-1 shows a comparison between the behavior of the hyphens property when it’s in the none state versus the auto state.

How to build it

1.    For this example, you’ll create a short amount of text that would benefit from automatic hyphenation. Add the text and HTML that contains words that might need to be hyphenated:

Notice that, for demonstration purposes, a soft hyphen has been included in the word “longest” to ensure it breaks at a logical point.

2. Add any default styles you want applied to your HTML. In this case, a narrow width is set to demonstrate the hyphen effect. A border is also added to make the boundaries apparent. Additionally, the text is set to a large size to exaggerate the space it occupies:

p {

   font-size: 36px;

   hyphens: auto; /* or "none" or "manual" */

   width: 300px;

   border: 1px solid #000;

}

In this example, the text will be automatically hyphenated to fit the available space. Adjust the width property to see how the browser changes the text to accommodate the available width.

Expert tips

The web browser determines the automatic hyphen break points based on the language used, so add a lang attribute to your page’s <html> element like so:

<html lang="en">

This sets the language of the page to English. (This is a bit of a misnomer for the prior example because the place name is a Māori word, but you get the idea).

Down to a certain width the browser might stop automatically breaking the text apart into hyphenated chunks because the pieces would be too small. In this circumstance, adding soft hyphens is the route to take if you want to ensure a long word is broken apart even down to a very narrow width of available space.

What’s involved

Selectors are what CSS uses to access pieces of HTML for styling purposes. A set of selectors, known as pseudo-element selectors, allows access to pieces of HTML that aren’t inherently surrounded by HTML elements, such as the first letter and top line of text in a paragraph. The selectors for these two tasks aren’t new, but they get a new syntax in CSS3 with the addition of an extra colon to differentiate them from other groups of selectors. The selector ::first-letter picks out the first letter of a block of text for styling purposes, and ::first-line picks out the first line of text. Because these selectors aren’t tied to specific elements in the HTML they have dynamic behavior. For instance, ::first-line styles whatever line of text is at the top, even if that changes due to the browser window being resized.

How to build it

1.    Add text and the appropriate HTML elements (such as a paragraph element) to your page:

2.    Add any default styles you want applied to your HTML. In this case, the paragraph of text is given a width, padding, and a black border:

3.    Use CSS pseudo-element selectors to style the first line of text bold and to position and size the first letter of the paragraph to create a drop cap:

The result of the preceding code should be a bordered box of text with a gray drop cap at the beginning. (See Figure 4-3.)

Expert tips

Because this solution uses the float property to move the drop cap into place, the first letter moves to the left of whatever follows it. This means if the paragraph of text is very short the drop cap might move to the left of more than just the immediate paragraph of text. If this isn’t desirable within your design, add a clear:both or clear:left style rule to whatever follows the text block containing the drop cap. This will prevent the drop cap from floating to the left of that content.

What’s involved

There are several approaches to creating hanging punctuation, but they generally boil down to isolating the quotes (or other punctuation) around a piece of content, moving the punctuation, and (optionally) styling them. Using quotes as an example, you can use the CSS content property, which includes two values for creating quotes: open-quote and close-quote. Then you can use two pseudo-element selectors, ::before and ::after, to select the space before and after a piece of content in which to insert the opening and closing quotation marks.

For instance, to insert opening and closing quotes in front of and at the end of a block quote of text, you can use the following CSS:

blockquote.pull-quote::before {

  content: open-quote;

}

blockquote.pull-quote::after {

  content: close-quote;

}

The preceding CSS can be used to style the following HTML:

<blockquote class= “pull-quote”>Left aligned design</blockquote>

This approach adds the quotes to the content using CSS, but to actually set what the quotation marks look like, another property, quotes, is used in conjunction with the content property. The quotes property takes a space-separated list of the characters to use for the opening double and single quotes within the specified content. The best-practice way of setting the value in the quotes property is to define the opening and closing quote characters as escaped (using a backslash) hexidecimal values. (See Table 4-1).

For instance, to add “curly” double quotes, use the following CSS in combination with content:open-quote; and content:close-quote;:

quotes: '\201C' '\201D';

Other languages, such as French, might use different quote characters, such as a double quillemets. Changing the quotation-mark characters used is simply a matter of changing the hexidecimal code for the those characters, like so:

quotes: '\AB' '\BB';

This simply adds the quotes and sets their type. The next step is to move them. This is where hanging punctuation comes into play, because the punctuation might otherwise create an undesirable gap, which makes the text alignment appear to slant to the right (or to the left for lines after the first line). See Figure 4-5 for an example.

Continuing with styling in the ::before and ::after selectors, the quotation marks can be moved by setting their position property to absolute. Absolute positioning allows them to “float” above the surrounding text and be precisely positioned by setting the top, right, bottom, and left properties or the margin properties. An important subtlety to be aware of in regard to absolute positioning is that the positioning will be relative to the first parent element that has its positioning set to something other than static, which is the default value. To prevent the quotation marks from being positioned relative to the upper-left corner of the screen, set the position property to relative for the element the quotes are contained in.

For instance, here’s what you do for the blockquote example from earlier:

<blockquote class= “pull-quote”>Left aligned design</blockquote>

The beginning of the positioning CSS looks like the following:

blockquote.pull-quote {

     position:relative;

}

blockquote.pull-quote::before {

     position:absolute;

     top: 10px;

     left: -5px;

…

And it’s similar for the closing quote.

Finally, you can use the z-index property to specify whether the quotation marks appear in front of or behind the accompanying text. By default, they will be in front when they are absolutely positioned, but set z-index to -1 to move the quotation marks behind the rest of the text. (See Figure 4-6 in the upcoming “How to build it” section for what this looks like.)

How to build it

1.    Add text and the appropriate HTML elements (such as <blockquote>) to your page:

<blockquote>Left aligned design</blockquote>

2.    Add any default styles you want applied to your HTML. In this case, the text is given padding and a left margin. The position is set to relative, which as discussed in the prior section will aid in positioning the quotation marks later on. The quotes property is given values that correspond to an opening curly quotation mark and a closing curly quotation mark, and finally, the font size and line height are set:

blockquote {

     padding: 10px;

     margin-left: 60px;

     position: relative;

     quotes: '\201C' '\201D';

     font-size: 64px;

     line-height: 64px;

     width: 320px;

}

3.    Next the appearance of the quotation marks is set in the pseudo-element selectors ::before and ::after. For this example, the quotes will be heavily stylized, so they will be increased in size, colored gray, and given a sans-serif typeface. Absolute positioning is used so that the quotation marks can be moved without interfering with the rest of the text. To place the quotes behind the accompanying text, the z-index is set to -1 for both marks:

blockquote::before, blockquote::after {

     font-size: 500px;

     color: #eee;

     font-family: Arial, san-serif;

     position: absolute;

     z-index: -1;

}

4.    The last step adds the actual quotation marks. The opening quote position is set using the left and top properties, while the closing quote is set using the margin-top property; however, depending on the design, either of these positioning approaches can be used for both quotation marks:

blockquote::before {

     content: open-quote;

     left: -60px;

     top: 110px;

}

blockquote::after {

     content: close-quote;

     margin-top: 170px;

}

The result of the preceding code is some left-aligned text accompanied by light-gray quotation marks. (See Figure 4-6.)

Note that this does not work with Internet Explorer 8 or 9.

Expert tips

If precise positioning of the quotation marks is not needed (beyond offsetting them horizontally), the text-indent property can be used to move the opening quote to the left, which simplifies the CSS significantly. Give text-indent a negative value to do this, as in this example:

p {

   padding: 10px;

   quotes: '\201C' '\201D';

   text-indent: -7px;

}

In this code, the paragraph is given some padding and the quotes inside are set to curly quotes. The text indent moves the first line 7 pixels to the left. The quote element, <q>, can then be used, which in combination with the quotes property inserts the necessary quotation marks while still retaining the proper semantics of the content. (Remember, like the <blockquote> element, <q> designates content that is quoted from another source.) This HTML might look like this:

<p><q>Quis autem … </q></p>

Alternatively, curly quotes can be inserted directly into the HTML using character entities, like this:

<p>&ldquo;Quis autem ... &rdquo;</p>

However, as shown in the “the semantics of quotations” earlier in this solution, technically the <q> and <blockquote> elements should be used for quotations from another source, while inserting quotation marks directly is for other uses (such as a text passage that includes a word in quotes to point out it’s being said sarcastically).

Finally, the CSS3 hanging-punctuation property is a proposed property that exists specifically for controlling hanging punctuation. Great! Unfortunately, this property currently has no browser support, and because of this, it is in danger of being dropped from the CSS specification altogether! (See www.w3.org/TR/css3-text/#hanging-punctuation0 for more information.) As CSS3 matures keep your eyes out for hanging-punctuation as it will likely reduce the amount of CSS needed to style hanging quotes, but don’t be surprised if it never makes it to a browser near you.

What’s involved

HTML5 includes elements such as <header>, <footer>, <section>, <article>, <aside>, and <nav> for designating the various sections of content on a page. The general meaning of these elements is as follows:

• <header>   Used for grouping introductory content, such as the main title and menu.
• <footer>   Used for grouping extra information related to the section or page as a whole, such as copyright information.
• <section>   Used as a generic container for grouping some content.
• <article>   Used to create a self-contained grouping of content, which can be taken out of the page and will still make sense on its own (meaning it can be syndicated via RSS, for example).
• <aside>   Used for nonessential supporting content to a section or article.
• <nav>   Used for a main navigational menu.

Using these elements to build your page, a simple hierarchy can be created by using the <header> and <section> (or <article>) elements. To further define the hierarchy, both of these elements can contain heading elements—the familiar <h1> through <h6>, which have been in HTML seemingly forever. Create a title in the header and section, and later style these to create a cascade of sizes that helps emphasize what is important on the page.

How to build it

1.    Begin building the HTML structure, paying attention to the appropriate semantic elements that fit with the content. In this example, you begin at the top of the page with the title and subtitle, which are contained in a <header>. The header is placed in an <h1>, and the subtitle is placed in an <h2>. Each section on the page that contains more than one heading (<h1> – <h6>) needs to be grouped inside an <hgroup> element:

<header>

   <hgroup>

     <h1>Title</h1>

     <h2>Subtitle</h2>

   </hgroup>

</header>

2.    The main content of the page is placed in a <section> and contains its own <h1> title above the paragraph (<p>):

<section>

    <h1>Content Title</h1>

   <p>

     Quis autem vel eum iure reprehenderit qui in ea voluptate

     velit esse quam nihil molestiae consequatur, vel illum qui

     dolorem eum fugiat quo voluptas nulla pariatur?

   </p>

</section>

3.    Add the CSS, which sizes the font in a hierarchy from the page title (largest) to the body copy (smallest). Additionally, other styling—such as changing the font weight and adding an underline between the page title and the page content—adds further organization to the content. The first letter and line are also styled to give the paragraph a slight drop cap:

header h1 {

     font-size: 72px;

     font-weight: bold;

     margin: 0;

}

header h2 {

     font-size: 36px;

     font-style: italic;

     border-bottom: 1px solid #999;

     margin: 0;

}

section h1 {

     font-size: 24px;

}

section p {

     font-size: 14px;

}

section p::first-line {

     font-weight: bold;

}

section p::first-letter {

     font-size: 16px;

}

The result of the preceding code renders the text headers and content in a hierarchy. (See Figure 4-8.)

Expert tips

For those looking for precise guidance in regard to their typography sizing, consider visiting |www.modularscale.com, a site created by Tim Brown, Type Manager for Adobe Typekit, which can be used to calculate relative type sizes based on ratios.

What’s involved

There are a number of properties for controlling the layout of columns. The simplest one is the columns property, which takes two values: the first being the column width, and the second being the number of columns. For instance, the following code would—in theory—produce two columns, each 250 pixels wide:

columns: 250px 2;

I say “in theory” because the web browser might automatically adjust the column width to fit the available space. So consider the column width specified as an optimal size.

The columns property is actually shorthand for the column-width and column-count properties, which can be used to set these values individually. There are a number of other individual properties besides these two for setting various aspects of the column’s appearance. For instance, the column-gap property sets the width of the gap between columns. The column-rule property takes the same values as the border property to specify the width, style, and color of the column rule, which is an optional vertical line that appears between columns.

The column-span property can be used to make a header that spans across all the columns. If you have a block of content such as a <section> or <div> and it contains a paragraph <p> and header <h1>, for example, you can set the column count on the whole section but set the column-span property on the <h1> to the value of all (for example, column-span: all;), which makes the header extend across all the columns in the paragraph. The default value is none, which keeps the header in the first column. (See Figure 4-10.)

How to build it

1.    Begin with building the HTML content that will be displayed in columns. In this case, a <section> is created, which is given a class where the column styles will be added. Using a class means the same column style can be applied in multiple locations on the page. Inside the section, two paragraphs and a header are added (note that the filler text is truncated for brevity):

<section class="col">

    <h1>Example of Lorem Ipsum Filler Text</h1>

    <p>

       Lorem ipsum dolor sit amet,

       …

       sunt in culpa qui officia deserunt mollit anim id est laborum.

    </p>

    <p>

       Sed ut perspiciatis unde omnis iste natus error sit

       voluptatem accusantium doloremque laudantium,

       …

       consequatur, vel illum qui dolorem eum fugiat quo

       voluptas nulla pariatur?

    </p>

</section>

2.    Add the column CSS style rule, which defines the number of columns, the column gap, and the appearance of the column rule:

.col {

     column-count: 3;

     column-gap: 24px;

     column-rule: 2px solid #000;

}

3.    Finally, add the column-spanning behavior for the header over the columns:

.col h2 {

      column-span: all; /* or none */

}

The result of the preceding code renders a header over three columns, as shown in the left diagram in the earlier Figure 4-10.

Expert tips

Avoid making the blocks of text that are arranged in columns too tall. If you do, the user might need to scroll down and up repeatedly to read the content across the columns.

To make the columns fill out their available space better, consider setting their text alignment to “justify,” which adds spacing between the words to fill out the full width of the column. (See Figure 4-11.)

The CSS3 property text-justify can be used to control how text that is set to a justified alignment is spaced. Instead of adding space between words, you can use this property to specify that spacing should happen between letters as well, which can be particularly useful when dealing with different language scripts. Support for this property, however, is limited to Internet Explorer at the time of this writing. However, try adding the following CSS to at least see the columns become justified:

.col p {

       text-align: justify;

       text-justify: distribute;

}

What’s involved

In the past, creating the effect of alternate rows was possible only by creating two CSS classes to manage the alternation of color, or by using JavaScript to dynamically apply the classes to the table. Let’s take a look at an example from the old days:

<table>

  <tr valign="top" class="odd">

   <td>Salmon</td>

   <td>Omega-3's help the brain develop properly, reduce the risk of Alzheimer's, and help prevent heart disease.</td>

 </tr>

  <tr valign="top">

   <td>Spinach</td>

   <td>Great source of folate and lutein. Prevents birth defects, heart disease, stroke, and protects your skin from sun damage.</td>

 </tr>

</table>

You would then add a CSS rule that targets the rows:

tr.odd {

 background-color: #999999;

}

This approach is still valid and works today, but it is not efficient. It requires extra markup from a zero semantic value. Furthermore, this approach does not keep the structure separate from the presentation.

Browser support

All major browsers based on Gecko and WebKit have supported :nth-child for a while. Internet Explorer has supported it since Internet Explorer 9. You can see details of the browser support in Table 5-1.

How to build it

For this solution, you begin by creating a three-column example table with no alternate background, as shown in Figure 5-1.

With the current formatting, a reader might easily associate incorrect dates and domains in this table while skimming over the data. To combat this, you can make the odd rows of the table a different color so that the table is easier to read. You do this using the following code:

tr:nth-child(odd) {

 background-color: #f2f2f2;

}

By using the keyword “odd,” you select all the odd rows of the table, as shown in Figure 5-2.

The table is easier to read, and you did not have to use any JavaScript.

Expert tip

You can use a JavaScript framework like jQuery to set a fallback solution for older browsers. For instance, you can enter the script in a conditional comment specific to older versions of Internet Explorer. All other browsers will ignore this rule and correctly use the CSS3. You can find out more on this here:

http://docs.jquery.com/Tutorials:/Zebra_Striping_Made_Easy.

What’s involved

For this example, we’ll use the following properties and selectors that were introduced with CSS3:

• box-shadow
• text-shadow
• :nth-last-child
• :empty

The box-shadow and text-shadow properties are covered in more detail in their related chapters, but we’ll briefly introduce these properties and their uses here.

How to build it

In this solution, the example pricing table will compare a hosting service, as shown in Figure 5-3.

Expert tip

Pseudo-classes such as :nth-last-child and :empty are very powerful tools you can use to work even more precisely and in detail on the elements of a web page. Because these pseudo-classes are not fully supported yet, you should always think of a fallback solution to avoid the table not being legible by users of older browsers, in particular Internet Explorer 8.

What’s involved

Creating a responsive data table is a simple procedure. It includes three keys things: using clean markup, identifying breakpoints, and implementing media queries. Let’s look at these now.

Browser support

Today, you can use media queries with all the modern versions of the most popular browsers. Some properties—such as orientation, grid, and scan—are exceptions because they are still poorly supported, but in the case of a responsive table, this doesn't have to worry you. You can see further details in Table 5-4.

How to build it

One of the best techniques to create a responsive table is to transform each table row in a block-level element. In this way, you can eliminate horizontal scrolling while still maintaining vertical scrolling. This technique was originally described on the site http://css-tricks.com, and a slightly modified version is shown here. Here’s the basic HTML markup:

<table>

  <thead>

   <tr>

     <th>Description</th>

     <th>Category</th>

     <th>Price</th>

  </tr>

  </thead>

  <tbody>

   <tr>

     <td>Sofa</td>

     <td>Furniture</td>

     <td>$500</td>

  </tr>

   <tr>

     <td>Table</td>

     <td>Furniture</td>

     <td>$25</td>

  </tr>

   <tr>

     <td>Chair</td>

     <td>Furniture</td>

     <td>$46</td>

  </tr>

   <tr>

     <td>LCD TV</td>

     <td>Electronics</td>

     <td>$799</td>

  </tr>

  </tbody>

</table>

Equally simple and clean is the CSS code used for the basic style of the table:

table {

  width: 100%;

  border-collapse: collapse;

}

/* Zebra striping */

tr:nth-of-type(odd) {

  background: #eee;

}

th {

  background: #333;

  color: #fff;

  font-weight: bold;

}

td, th {

  padding: 5px;

  border: 1px solid #ddd;

  text-align: left;

}

Assigning the width: 100 % to <table>, we get a table that automatically adjusts to the width of the screen. You can see the result in Figure 5-4.

Expert tip

The possibilities offered by the media queries are infinite. You might decide to present this data in many different ways, one for each device. In each case, the main element is the content of the table on which to build different table designs. According to the information, you can decide to show a graph or a summary before the classic list. Chapter 8 provides a detailed review of media queries, including the extensive possibilities.

The user experience will therefore be created ad-hoc to fully exploit the characteristics of each device.

What’s involved

The property border-radius was perhaps the most important innovation for designers introduced in CSS3. It simplified the work that was previously necessary to create elements with rounded corners.

Browser support

Mozilla Firefox supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification. You can see more details in Table 5-5.

How to build it

The table you want to create is rather simple, comprising the usual <thead> for the table header and <tbody> for the table cells, as shown in Figure 5-6.

Let’s take a look at the CCS used:

table {

background: rgb(204, 204, 204);

margin: 20px;

border: rgb(204, 204, 204) 1px solid;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

By assigning border-radius to the element <table>, you can create rounded corners in seconds. Perfect!

However, if you look closely at the table in Figure 5-6, you’ll notice that the table cells are divided by a thickness, like a double border. This happens because each table set border-collapse: separate by default. The cells are separated, and the border of a cell is added to the border of the ones close to it.

Let’s try to change this value from separate to collapse:

table {

background: rgb(204, 204, 204);

margin: 20px;

border: rgb(204, 204, 204) 1px solid;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

border-collapse: collapse;

}

You can see what happens to the table in Figure 5-7.

The border-radius property does not apply to tables with the border-collapse:collapse property set. The border of the element <table> doesn’t have any radius. The layout is compromised. Here’s the trick: while the default value of border-collapse is separate, you also need to set border-spacing to 0. (See Table 5-8.)

table {

  background: rgb(204, 204, 204);

  margin: 20px;

  border: rgb(204, 204, 204) 1px solid;

 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

 border-radius: 10px;

 border-collapse: collapse;

 border-spacing: 0;

}

As you can see, border-radius is back and there is no margin of separation among the table cells. This solution works well in newer versions of Safari and Firefox, and it degrades gracefully to square corners in Internet Explorer and Opera.

Expert tip

In some cases, when you set a very wide border (for example, 15px) and one with a different color than the background, the border is rounded correctly only on the outside. Inside it’s still a square corner. The different colors of the two elements make this effect clearer.

In this case, to get a rounded inner border, the border radius must be greater than the border thickness—for example, border-radius: 30px; border-width: 15px;.

What’s involved

In this solution, you create a navigation menu for a web application using only CSS3 code, and no pictures or images.

Browser support

Table 5-6 clarifies the support of various browsers for the properties just listed, even showing when and which prefixes you use.

How to build it

In Figure 5-9, you can see the menu you are going to make.

Expert tip

Given that the syntax can be written differently and isn’t always easy to understand, we advise you to use the following great service to quickly create CSS3 gradients: http://gradients.glrzad.com. Through a UI reminiscent of Adobe Photoshop, you can use this tool to create gradients, shadows, and other nice effects, with the tool generating the necessary CSS for your design.

What’s involved

A counter style defines how to construct the representation of a counter value. It comprises the following:

• A name, which identifies the style
• A prefix, which precedes the representation
• A suffix, which follows the representation
• A minus sign, which can precede or follow the representation of the counter
• The fallback style, which will be shown in cases where the value of the counter will not be included among those defined by the style sets
• Upper and lower range bounds, to specify the (inclusive) range that the counter style can handle
• An algorithm, which transforms the counter value into a string

How to build it

Although you’ll find it practically impossible to reproduce these examples in the browser because most browsers don’t support @counter-style, you can use some examples shown on the W3C’s website as “CSS Module List 3” (http://www.w3.org/TR/css3-lists).

Expert tips

If you need to cycle through multiple bullets, you have to use the repeating counter type. It cycles through the provided glyphs, looping back to the beginning when it reaches the end of the list. Doing so, the first counter glyph is used as the representation of the value 1, the second as the representation of the value 2, and so on.

What’s involved

You can use the ::marker pseudo-element by setting determined properties for the element on which you want to use it:

• The display property must be set to list-item or inline-list-item.
• The content property shouldn’t be none.

Using the content property, this pseudo-element creates a box you can personalize with any CSS style.

How to build it

Let’s take the case of wanting to insert a note between list items:

<li>Fowl very shall, after earth over after she'd upon bring moved light fish

his years together let for saying. Good god lesser over he.</li>

<li class="note">This is a note.</li>

<li>Third were our very called over wherein.</li>

As the CSS style, use the following:

<style>

li { margin-left: 30px; }

li.note::marker {

 content: "Note " counter(note-counter) ":";

 text-align: left;

 width: 20px;

}

li.note {

 display: list-item;

 counter-increment: note-counter;

}

</style>

The paragraph with the class note is the one intended with the use of ::marker. Assigning a specific width to <li> generates the necessary space to the new counter. Every <p> has a left margin that allows it to maintain white space between the counter and the text.

Here is how it should appear in the browser:

     Fowl very shall, after earth over after she'd upon bring moved

     light fish his years together let for saying. Good god lesser

     over he.

 Note 1: This is a note

       Third were our very called over wherein.

There are many possibilities offered by this pseudo-element. In some ways, these new possibilities allow you to create new formatting styles, which makes the content of the web page similar to what you have become used to in print, and with all the advantages.

Expert tips

Markers generate a box that has margins, border, padding, and everything else a box normally has. So you can take control of them by using any other CSS properties used for block-level elements.

What’s involved

As you may recall from Solution 3.6 in Chapter 3, a long-standing approach to web color is to break a color into its red, green, and blue color channels (the primary colors that make up a particular hue). To expand a bit on what was covered in Chapter 3, each of these colors is given a range from 0 to 255, with 0 being no intensity of the color and 255 being the full intensity of the color (meaning it has full saturation).

These numbers can be represented as hexadecimal values in the form of #RRGGBB, where RR is the red value, GG is the green value, and BB is the blue value. Examples of this syntax include #FFFFFF for white, #000000 for black, #FF0000 for red, and so forth. Using hexadecimal values (known as hexadecimal ­notation) is all well and good, but it loses some of the readability that just using set color names (“red,” “black,” “green,” and so on) provides. As noted in Chapter 3, an alternative is to use rgb(R,G,B) notation, where R is the red channel, G is the green channel, and B is the blue channel. Again, the values are between 0 and 255, but they’re given in decimal, not hexadecimal form—for instance, green looks like this:

background-color: rgb(0,255,0);

This still isn’t much more readable than hexadecimal notation; it’s just an alternative way of formatting the color value. What’s interesting here is that percentages can be used. For instance, the preceding pure green color could be rendered as follows:

background-color: rgb(0%,100%,0%);

You may find thinking of color in terms of percentages to be a more intuitive approach than a range of 0 – 255 or 0 – F. However, adjusting colors by adjusting the component parts of red, green, and blue can still be unintuitive, because to simply shift the shade of a color, for instance, the component values may seem to arbitrarily go up or down. Yuck! A newer way of adjusting color—Hue, Saturation, Lightness (HSL)—makes this process of selecting shades and tints much more intuitive. If you use this method, the hue (the actual color), the saturation of the color, and the lightness of the color can all be adjusted independently. HSL notation looks like hsl(H,S,L), or like this more concrete example:

background-color: hsl(0,100%,50%);

As was shown in Chapter 3, in the HSL color model, all the available colors are rendered in a cylinder. If you look down on the cylinder, you see all colors (otherwise known as hues) in a color wheel. Moving around the cylinder from 0 to 360 degrees changes the hue. You can increase or decrease the saturation of each hue (color) by moving outward or inward toward the center of the cylinder from 0% to 100% saturation, and you can adjust the lightness by moving up or down the cylinder from 0% (pure black) to 100% (pure white). (See Figure 3-20 in Chapter 3 for a diagram of this color model).

As shown in Chapter 3, if you want to add an alpha channel, RGB notation becomes rgba(R,G,B,A) and HSL notation becomes hsla(H,S,L,A), where A is the alpha channel value in the range of 0.0 to 1.0. This range corresponds to 0% for a completely transparent color (in other words, 0% opaque) to 100% for a fully opaque color. Any values in between render the color as semitransparent. For instance, a value of 0.25 is 75% transparent (25% opaque), while a value of 0.9 is 90% opaque, barely letting any of the underlying background show through. Table 6-1 summarizes these different notations.

How to build it

1.    Add the HTML you want to apply the colors to. In this case, you create four spans with text, all inside a div:

<div>

       <span>White</span>

       <span>White, 50% transparent</span>

       <span>Black</span>

       <span>Black, 50% transparent</span>

</div>

2.    Add any default styles you want applied to your HTML. In this case, a neutral grey color is added to the background of the page so that the transparent elements are more apparent. Also, the spans are given margin and padding and the text color is set:

body {

       background-color: #808080;

}

span {

       margin: 5px;

       padding: 15px;

       color: #808080;

}

3.    For demonstration purposes, each of the RGB and HSL style notation colors are added to the span boxes. The first two are white, and the last two are black:

span:nth-child(1) {

           background-color: rgb(255,255,255);

}

span:nth-child(2) {

           background-color: rgba(255,255,255,0.5);

}

span:nth-child(3) {

           background-color: hsl(0,0%,0%);

}

span:nth-child(4) {

           background-color: hsla(0,0%,0%,0.5);

}

In this example, the result is four boxes, the first two of which are white, and the last two of which are black. The second box of each set is semitransparent and therefore blends with the background gray. (See Figure 6-2.) Note that this example does not work in Internet Explorer 8 or earlier.

Expert tips

In addition to setting an alpha channel, you may recall from Chapter 3 that you can use another CSS property, opacity, to make a particular element semitransparent. However, this property changes the opacity of the entire element, not just the background. Therefore, if a background should be semitransparent, the hsla() or rgba() notation should be used; otherwise, the textual content within the element will become semitransparent as well!

Lastly, if you use hexadecimal notation, it can be shortened to three characters where there are repeating digits in a particular channel. For instance, #CCCCCC could be shortened to #CCC, or #FFCC99 could be shortened to #FC9, and so forth.

What’s involved

Two types of gradients are available: linear and radial. At their most basic level, linear gradients start at one color and transition over a distance into another color in a linear fashion. Radial gradients do the same, except the transition is in a radial direction, meaning the starting color begins as a circle and radiates outward in all directions over its transition to the ending color.

As with defining solid colors, gradients have a very flexible syntax. Gradients may specify two or more colors to transition through as a comma-separated list, as shown in the following example:

background-image: linear-gradient( white, black );

background-image: linear-gradient( rgb(255,255,255), rgb(0,0,0) );

background-image: linear-gradient( #fff, #f00, #000 );

Or for a radial gradient:

background-image: radial-gradient( white, black );

background-image: radial-gradient( rgb(255,255,255), rgb(0,0,0) );

As you can see, they are set as the value for the background-image property, which fills in the background of a CSS box with the gradient.

Each color in the gradient can be given a color stop value. By default, the color stop value for the first color is 0% and the color stop value for the last color is 100%, which specifies that these colors begin at the beginning and end of the gradient. However, these values can be adjusted to start a color further into the gradient, compressing the amount of distance over which the colors transition. By setting the first color to, say, 30%, you’re specifying that the transition from that color to the second color happens 30% of the distance into the gradient. When specified, a color stop value immediately follows the declaration of a color.

Additionally, an angle can be added before any of the colors to specify the slope between the starting and ending color when setting a linear gradient. The angle can be given as a positive or negative value followed by the text “deg” to specify the angle, as you can see in this example:

background-image: linear-gradient( -45deg, white 30%, black 90% );

This code creates the gradient shown in Figure 6-3.

An alternative to using a specific degree value is to use keywords to tell the browser where the gradient should start from. The keywords are left, right, top, and bottom:

background-image: linear-gradient( top, white, black );

This gradient begins at the top with white and transitions straight downward into black.

How to build it

1.    Add the HTML you want to apply gradients to. This example uses a navigational menu of links:

<nav>

       <a href="home.html">Home</a>

       <a href="about.html">About</a>

       <a href="gallery.html">Gallery</a>

       <a href="contact.html">Contact</a>

</nav>

2.    Add any default styles you want applied to your HTML. In this case, padding and a border are added. Additionally, the text is given a black color and the default underline under the link text is removed:

a {

      padding:2px 10px;

      border:1px solid #ccc;

      color:#000;

      text-decoration:none;

}

3.    For demonstration purposes, each of the menu item links after the first (for comparison) are selected using an nth-child selector and given a different gradient:

a:nth-child(2) {

         background-image: radial-gradient( #fff, #ccc );

}

a:nth-child(3) {

         background-image: linear-gradient( top, #fff 40%, #ccc 60% );

}

a:nth-child(4) {

         background-image: linear-gradient( -45deg, #fff, #ccc );

}

The result of this example is a line of links, each with a different gradient background. (See Figure 6-4.)

Expert tips

ColorZilla is a great plug-in for Firefox and Chrome that helps you deal with web colors. The ColorZilla website publishes a CSS gradient generator at www.colorzilla.com/gradient-editor/ that takes the guesswork out of creating gradients using CSS.

What’s involved

The background-size property is used to scale and set the size of background images. It takes two values. The first is the sizing behavior for the image along the horizontal plane (the width), while the second is the sizing behavior for the image along the vertical plane (the height). A specific length can be given, as shown here:

background-size: 100px 50px;

This code sets the background image to 100-pixels wide by 50-pixels tall (and tiles it by default). More interesting is the dynamic setting that can be used to size the image based on the dimensions of the box it’s applied to. You can use two keywords, contain and cover, to automatically size the image to its surroundings. The contain keyword scales the image while maintaining the aspect ratio of the image (that is, it won’t be squashed or stretched) to the largest size such that both its width and its height can fit inside the available background area. This means that the image will be scaled so that its longest dimension fits. The cover keyword is similar in that it scales the image and maintains the aspect ratio of the image, but it covers the available area by scaling the image so that the shortest dimension fits in the view, which likely means the image will become partially clipped from view along its other dimension. Both of these keywords can be given as one keyword, indicating they apply to both the width and height, or each dimension of the image can be treated differently:

background-size: contain; /* contain the image in both dimensions */

background-size: cover; /* cover the image in both dimensions */

background-size: contain cover; /* contain the width and cover the height */

background-size: cover 100px; /* cover the width and set the height to 100-pixels */

In addition to these two keywords, percentages can be used to scale the image to a percentage of its containing background area. Also, the auto keyword can be used, which means the original dimensions of the image will be used.

How to build it

1.    Add the HTML you want to apply a background image to. For demonstration purposes, this example uses a series of empty divs:

<div></div>

<div></div>

<div></div>

2.    Add any default styles you want applied to your HTML. For this example, the divs are given a width, height, margin, and border. They are also given a background image, which you’ll manipulate next with the background-size property:

div {

         width: 500px;

         height: 200px;

         margin: 5px;

         border: 1px solid #000;

         background-image: url("tree.png");

}

3.    For each div, experiment with the different possible values for background-size and notice the differences:

div: nth-child(1) {

           background-size: contain;

}

div: nth-child(2) {

           background-size: cover;

}

div: nth-child(3) {

           background-size: 100% 100%;

}

In the example, the result shows the following (from top to bottom): the tree being contained to its full height within the available space; the tree enlarged so that its full width fills the available space; and the tree stretched out so that its width and height fill the entire available space. (See Figure 6-5.)

Expert tips

Use caution when stretching the background image using background-size. It can be easy to make the image look really terrible because an image that is enlarged beyond its original resolution will begin looking pixelated. Also, not maintaining the aspect ratio really works only for abstract background imagery, where it won’t be apparent that the image is being squashed. (To convince yourself a squashed image looks terrible, compare the first and last examples in the prior code snippet.) If you are using percentage scaling, try viewing your layout on a large desktop display and check how the images look. Start with an image sized to fit this scenario so that it will be scaled down in other situations; however, maintain a balance between the size of the image and file size.

What’s involved

Creating multiple backgrounds is quite straightforward. The background-image property can be used with url() notation to embed each image. You use url() notation to specify the URLs of the images to embed in the background as a comma-separated list. Each image referenced is layered behind the one that comes before it. Therefore, the first image in the URL list is layered on top of all the subsequent images. For example, in the following code snippet, the image file “star.png” would appear in front of “circle.png” and “circle.png” would appear in front of “square.png”:

background-image: url("star.png") , url("circle.png") , url("square.png");

Other background properties—such as background-position, background-repeat, and so on—can have their properties listed in a comma-separated list as well, to apply specific values to each image within the composition. For instance, the following code repeats the back-most image (the last one in the list), but not the first image and second image:

background-repeat: no-repeat , no-repeat , repeat;

If a particular property needs to be applied to all images, one value can be specified that applies to all images in a multi-image composition. This following code aligns all the images along the bottom, for instance:

background-position: bottom;

How to build it

1.    Add the HTML you want to apply multiple background images to. For demonstration purposes, this example applies backgrounds to two empty divs:

<div></div>

<div></div>

2.    Add any default styles you want applied to your HTML. For this example, the divs are given a width, height, padding, margin, and border. Lastly, each div is given two background images. Ensure you have two images created that are saved in the same folder as the web page (named “star.png” and “circle.png” in this case):

div {

         width: 500px;

         height: 200px;

         padding: 20px;

         margin: 5px;

         border: 1px solid #000;

         background-image: url("star.png") , url("circle.png");

}

For contrast, the images in the second div will be repeated horizontally for the first image and vertically for the second image, and each will be centered. This is in contrast to the default behavior of the first div, which will repeat the images starting at the upper-left corner. Notice that two values are given for the background-repeat property while only one value is set for the background-position property, because both images will get the same value for that property:

div:nth-child(2)

{

        background-repeat: repeat-y , repeat-x;

        background-position: center;

}

The result of testing this example shows the following (from top to bottom): the first image shows the two images layered on top of each other, with the first image referenced (“star.png”) being in front of later images; the second image shows the same layering, but the images are repeated along different planes and both are centered. (See Figure 6-6.) Note that this example does not work in Internet Explorer 8 or earlier.

Expert tips

You can use the background-origin and background-clip properties to fine-tune where a background image begins and where it is cropped into view. You can use the keywords border-box, padding-box, and content-box for either property. The border-box keyword means the content is cropped at the outer edge of the border; padding-box means it starts/is cropped at the outer edge of the padding (inside edge of the border); and content-box means it starts/is cropped at the outer edge of the content area (where the padding begins). For instance, consider the following code added to the example code given earlier in this solution and see if you can figure out how it creates the image in Figure 6-7:

div:nth-child(1) {

          width: 506px;

          height: 202px;

          padding: 20px;

          border: 20px solid hsla(0 , 0% , 0% , 0.5);

          background-image: url("star.png") , url("circle.png");

          background-clip: border-box , content-box;

          background-origin: padding-box , content-box;

}

One last note in regard to multiple backgrounds, as well as background images in general, is that one should remember that for accessibility reasons the content on a web page should be understandable even if the CSS on the page is disabled. For this reason, you should not use background images for conveying information that is critical to understanding the content on a web page.

What’s involved

The outline property can be used in the same manner as the border property to create the outline around an HTML element. Set the width of the outline, the style, and lastly the color as shown here, which creates a one-pixel, solid gray outline:

outline: 1px solid #ccc;

Then you can use the new outline-offset property to move the outline inward or outward from the outer border edge. Negative values move it inward, while positive values move it outward:

outline-offset: 5px;

The preceding code moves the outline outward by five pixels.

How to build it

1.    Add the HTML you want to apply the outline to—in this case, a main navigational menu of links:

<nav>

       <a href="home.html">Home</a>

       <a href="about.html">About</a>

       <a href="gallery.html">Gallery</a>

       <a href="contact.html">Contact</a>

</nav>

2.    Add any default styles you want applied to your HTML. In this case, a margin, padding, and a border are added and the default underline under the link text is removed:

a {

       margin: 5px;

       padding: 5px;

       border: 1px solid #000;

       text-decoration: none;

}

3.    Add the outline properties to a :hover selector or wherever you would like the outlines to show up:

a:hover

{

       outline: 5px dotted #999;

       outline-offset: -3px;

}

In the example, the result is a menu that shows a dotted gray line around each link the user rolls over. Notice how the offset was set to a negative value, which moved the outline inward into the border area (as you can see in Figure 6-8).

Expert tips

Pragmatically, an outline may seem just like a duplicate of the border property, with possibly even more flexibility because it won’t interfere with the layout of the element. If you ever added a border on a mouse-over of a link in a menu and were dismayed to see the whole menu shift to accommodate the extra width of the border, you know that it’s appealing to have the option of a border that doesn’t interfere with the layout of the HTML elements. However, there currently is a limitation to outlines that is worth noting when compared to borders. Outlines do not follow the curvature of boxes with rounded corners, unlike standard borders that can make use of the border-radius property. (See Solution 6-6.) Firefox has introduced a property, -moz-outline-radius, to allow rounding of outlines, but as you can tell by the property name, this is not a standardized property.

Another aspect of outlines, which is standardized but poorly supported, is the keyword invert. Using this keyword in place of the color specified in the outline property sets the color of the border to the inverse of the color it is over. For instance, an outline that overlaps a black border appears white and vice versa. Major browsers such as Chrome, Safari, and Firefox do not currently support it; however, Opera and Internet Explorer 9 and later do.

What’s involved

The border-radius property is applied to an element, typically with a border or background, to adjust the amount of curvature to apply to the corners. The corners don’t need to be symmetrical; in fact, experimenting with the values given to border-radius can create some interesting border shapes! At its simplest, the border-radius property takes one value that determines the curvature of all four corners in a CSS box at once. The value is usually a length (pixels, ems, and so forth), but it may also be a percentage, in which case the curvature shrinks or grows based on the width and height of the box overall. The value given is the radius of an ellipse used to calculate the curvature of the corner. As you can see in Figure 6-9, you can give two values for each corner to specify the vertical radius and the horizontal radius.

If the corners are curved individually, up to four values can be given to the border-radius property. The values start with the upper-left corner and move clockwise. For example, to give a uniform curvature to all four corners, the following two code snippets are equivalent:

/* set the border radius for all four corners */

border-radius: 10px;

/* set the border radius for the upper-left, upper-right, lower-right, and

lower-left corners, respectively */

border-radius: 10px 10px 10px 10px;

Additionally, a forward slash can be added to adjust the horizontal radius and the vertical radius individually (as seen in Figure 6-9), like so:

border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px;

This means each curve has a 50-pixel radius curve in the horizontal direction and a 25-pixel radius curve in the vertical direction. This could be shortened to border-radius: 50px / 25px;, but separating the four values in each radius direction means each component can be adjusted individually, which can lead to some interesting border shapes!

How to build it

1.    Add the HTML you want to apply the rounded corners to. This example uses the same familiar set of menu of links used throughout this chapter:

<nav>

        <a href="home.html">Home</a>

        <a href="about.html">About</a>

        <a href="gallery.html">Gallery</a>

        <a href="contact.html">Contact</a>

</nav>

2.    Add any default styles you want applied to your HTML. In this case, a margin, padding, and background color are added to the link area. Additionally, the text is given a black color and the default underline under the link text is removed:

a {

       margin: 5px;

       padding: 15px;

       background-color: #ccc;

       color: #000;

       text-decoration: none;

}

3.    For demonstration purposes, each of the menu item links are selected using an nth-child selector and given a different border radius:

a:nth-child(1) {

        border-radius: 50px;

}

a:nth-child(2) {

        border-radius: 50px 25px;

}

a:nth-child(3) {

        border-radius: 50px / 25px;

}

a:nth-child(4) {

        border-radius: 50px 0px 30px 10px / 25px 0px 15px 5px;

}

The result of this example is a line of links, each with a different border curvature. (See Figure 6-10.) Note that this example does not work in Internet Explorer 8 or earlier.

What’s involved

The border-image property is used to create custom-designed borders. As the name implies, it loads an image and applies this to the border around an HTML element’s CSS box. The image is sliced, and each corner is placed in the corners of the box, while the sides may be repeated or stretched to fill in changes in the width and height of the box. For example, consider an image that is made of a grid of squares. Using border-image, the squares at the corners can be placed in the corners of the CSS box while those on the top, bottom, left, and right sides can fill in the box’s sides. Figure 6-11 shows what this looks like if the source image’s sides are repeated to fill in the box.

To create the border shown in Figure 6-11, two properties need to be used. First, you use the border-width property to set the width of the border, and the border-image property is just for specifying the image to embed and how it should be handled—it’s up to the border-width property to set the actual width:

border-width:27px;

Next, use the border-image property to reference the image file, set its clipping width relative to the border width, and specify whether the sides will be repeated or stretched:

border-image:url("grid-border.png") 27 repeat;

You might be asking yourself why the width needs to be set a second time when you just set the border-width property for that purpose? The reason for this is that the number used in border-image is needed to tell the web browser where the source image should be sliced. Without this value, it wouldn’t automatically know what constituted a corner square in the image. It doesn’t actually represent the width as a distance, but instead represents a multiple of the border-width value, which then is calculated to be a pixel value. This is why the value (“27” in this case) doesn’t have “px” appended to it. Instead, the web browser divides and multiplies the value in border-image by the border width to determine where the slice should happen on the source image. For practical purposes, you can think of this value as a pixel distance on the source image, but don’t include the “px” at the end like you would in border-width.

To make this clearer, let’s consider another example where the source image is not uniform. Figure 6-12 shows a source image that is a grid of nonuniform blocks, but which are scaled to fit uniformly around a CSS box.

The relevant code for producing the shape in Figure 6-13 looks like this:

border: 27px solid black;

border-image: url("offset-border.png") 49 38 27 28 repeat;

The four values in the border-image property represent the inward offset clipping value for the top, right, bottom, and left edges of the image. So the web browser clips the image 49 pixels down from the top for the top part of the border, 38 pixels from the right for the right side of the border, and so forth. These values are diagrammed in the image on the left in Figure 6-12. Once the image is sliced, it’s fit into the border width area, which means that slices that don’t match the border width distance are rescaled, as you can see in Figure 6-12 when comparing the size of the numbers in the source image to those in the CSS box (for example, compare the rescaling that happens to grid number “2” with grid number “8”).

Instead of repeating the sides of the image around the sides of the CSS box, you can stretch the sides using the stretch keyword in place of the repeat keyword. For instance, Figure 6-13 shows an image border that is stretched to fit the dimensions of the CSS box it’s applied to.

You can specify two keywords in the border-image property to create a combination of repeating and stretched borders. Here’s an example:

border-image: url("grid-border.png") 27 repeat stretch;

The first value (repeat in this case) is applied to the top and bottom border, while the second value (stretch in the example) is applied to the left and right borders.

How to build it

1.    Add the HTML you want to apply the border images to. This example uses three divs for demonstration purposes:

<div></div>

<div></div>

<div></div>

2.    Add any default styles you want applied to your HTML. In this case, a width, height, and margin are added to the div’s CSS boxes. The border width is set here as well. Instead of using border-width, you should use the border property to specify a regular border fallback for browsers that don’t support the border-image property:

div {

         width: 235px;

         height: 135px;

         margin: 10px;

         border: 27px solid #000;

}

3.    Next, each box is given a border image:

div:nth-child(1) {

           border-image: url("grid-border.png") 27 repeat stretch;

}

div:nth-child(2) {

           border-image: url("offset-border.png") 49 38 27 28 repeat;

}

div:nth-child(3) {

           border-image: url("wavy-border.png") 21 stretch;

}

The result of this looks very much like the examples shown in the figures in the “What’s involved” section of this solution, with the exception that the first example has a stretched left border and right border.

Expert tips

In addition to using the stretch and repeat keywords for handling the sides of an image border, you can use the round keyword, which is used to repeat the image a whole number of times—preventing an extra clipped copy of the border from appearing along one of the joints between a side and a corner. The round keyword is a desirable alternative to use in place of the repeat keyword because it makes the CSS box more accommodating to changes in size without messing up the appearance of the border. However, currently on webkit-based browsers (Google Chrome and Apple Safari), the round keyword is not distinguished from the repeat keyword and both are treated as if repeat has been specified.

What’s involved

A drop shadow has five values that can be adjusted to attain the desired effect (as illustrated in Figure 6-14):

• The color of the shadow. It’s often desirable to use rgba() or hsla() notation to make the shadow semitransparent. (See Solution 6-1.)
• The distance the shadow should be offset horizontally.
• The distance the shadow should be offset vertically.
• The distance (inward and outward) the edge of the shadow should be blurred.
• The last value is the distance the shadow should spread, meaning how far it should grow outward or inward from the silhouette of the box it’s applied to.

Additionally, you can use the keyword inset to indicate the shadow should be rendered inside the target box instead of outside of it.

How to build it

1.    Add the HTML you want to apply a drop shadow to. This example uses the same familiar set of menu of links used in other solutions in this chapter:

<nav>

          <a href="home.html">Home</a>

          <a href="about.html">About</a>

          <a href="gallery.html">Gallery</a>

          <a href="contact.html">Contact</a>

</nav>

2.    Add any default styles you want applied to your HTML. In this case, a margin, padding, and background color are added to the link area. Additionally, the text is given a black color and the default underline under the link text is removed:

a {

          margin: 5px;

          padding: 15px;

          background-color: #ccc;

          color: #000;

          text-decoration: none;

}

3.    For demonstration purposes, each of the menu item links are selected using an nth-child selector and given a different drop shadow style:

a:nth-child(1) {

            box-shadow:

            rgba(0,0,0,0.4)

            5px 5px; /* 5-pixel horizontal and vertical offset */

}

a:nth-child(2) {

            box-shadow:

            rgba(0,0,0,0.4)

            5px 5px 10px; /* 5-pixel horizontal and vertical offset with a 10-pixel blur */

}

a:nth-child(3) {

            box-shadow:

            rgba(0,0,0,0.4)

            0px 0px 3px 5px; /* 0-pixel offset with a 3-pixel blur with a 5-pixel spread */

}

a:nth-child(4) {

            box-shadow:

            rgba(0,0,0,0.4)

            3px 5px

            inset; /* inset shadow with a 3-pixel horizontal 5-pixel vertical offset */

}

The result of this example is a line of links, each with a different drop shadow effect. (See Figure 6-15.) Note that this example does not work in Internet Explorer 8 or earlier.

Expert tips

More than one shadow can be applied at the same time by using a comma-separated list of shadow properties after the box-shadow property. For example, the last two shadows (the spread and inset shadows) in the prior example could be combined and applied to one box like so:

a:nth-child(4) {

         box-shadow:

         rgba(0,0,0,0.4) 0px 0px 3px 5px ,

         rgba(0,0,0,0.4) 3px 5px inset;

}

What’s involved

Resizing behavior is quite straightforward. The resize property controls whether a user can drag the corner of an HTML element to resize it. You can control the resizing behavior using one of three keyword values. The keyword horizontal allows resizing in the horizontal direction only, the keyword vertical allows resizing in the vertical direction only, and the keyword both allows resizing in both directions. The only other requirement is that you must set the overflow property to something other than visible so that the content outside the bounds of the CSS box is hidden.

Give the CSS box a width and height that is smaller than the content it contains and scrollbars will appear as needed, allowing the user to scroll to the content and to resize the content area. (See Figure 6-16.)

You can set the max-width and max-height properties to limit the extent to which the user can resize the content area. By limiting the box width and height, you can prevent the user from resizing the box over other content on the page.

How to build it

1.    Add the HTML you want to allow the user to resize. This example uses a div with some filler text inside for demonstration purposes:

<div>

         Lorem ipsum dolor sit amet, consectetur adipisicing elit,

         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

         nisi ut aliquip ex ea commodo consequat.

</div>

2.    Set a width and height for the element. Consider adding a border so that the element’s bounds are more visible. Set the resizing behavior (both in this case, but it could be set to horizontal or vertical), and set the overflow property to something other than visible. Lastly, consider setting a maximum width and height so that the box can’t be resized too far:

div {

        width: 100px;

        height: 100px;

        border: 1px solid #000;

        resize: both;

        overflow: auto;

        max-width: 300px;

        max-height: 300px;

}

That’s it! This creates a box 100 pixels by 100 pixels that is resizable in both the horizontal and vertical directions up to 300 pixels by 300 pixels. A scrollbar appears when the content is clipped, as shown in Figure 6-16. Note that this example does not currently work in Opera or Internet Explorer.

Expert tips

You can use a new notation called calc() notation in place of a specific length to calculate a distance on the fly. The calc() notation takes an arithmetic expression inside the parentheses to determine the exact distance. For example, the following code sets a maximum width of 10 pixels less than the current browser window width (100% width):

max-width: calc( 100% - 10px );

you can use the calc() notation for addition (+), subtraction (–), multiplication (*), and division (/) of length values, and you can use it anywhere a length is expected as a value for a CSS property. Unfortunately, browser support is rather limited at this stage, being confined to Internet Explorer 9 and later and Firefox 8 and later. ¹

What’s involved

Changing the display property of an element changes the way the browser lays it out in the default flow. The display property can be set to the values listed in Table 7-1

How to build It

Consider the previous example markup. If you add the following rules to the CSS for the document to change some block elements to inline, and some inline elements to block, and add a little background coloring, you make the differences easier to see:

li {

   display: inline;

}

span {

   display: block;

}

li, span {

   background-color: #ccc;

}

When applied to the previous example, the browser will now render them as shown in Figure 7-4.

It’s a simple change, but it produces a very different layout. The background coloring also helps illustrate the essential difference between inline and block elements.

Expert tips

The display property also determines whether or not the element can take on certain other CSS properties. Inline elements, for example, have no values for width or height. If you attempt to specify a width or height on them (using, for example, width: 500px or height: 500px), those rules will be ignored.

Because they have no concept of width or height, inline elements have no concept of CSS properties that are related to width and height. For example, the overflow property has little meaning for inline elements, because it is directly related to the width and height of an element.

Applying a top or bottom margin or top or bottom padding to an inline element will not alter its position in the document flow. The rule will be applied, but the margin or padding will be laid underneath the preceding content (in the case of a top margin or padding) or laid on top of proceeding content (in the case of bottom margin or padding). Left and right margins and padding will behave as expected.

What’s involved

The CSS position property is used to specify the positioning origin of the element. By default, HTML elements are all position: static, which means they are positioned according to their actual place in the default flow. Statically positioned elements cannot have their top, left, right, and bottom properties modified.

To modify the actual position of an element, you have to set its position property to one of relative, absolute, or fixed.

By specifying position: relativeon an element, you tell the browser to position it relative to its default position in the document flow. You can now apply left, top, right, or bottom rules to the element and it will move out of its location as you specify. The rest of the content will not reflow, and the original location of the positioned element will remain open.

Absolute positioning, on the other hand, does affect the default flow. When an element is absolutely positioned, it is pulled out of the document flow, causing the remaining content to reflow and close up the “hole” where the positioned content was. Then, the content is positioned absolutely according to a coordinate origin, which is determined by the following rule:

In other words, the browser will look through the markup tree of the document to find the first parent element that has a non-static position rule and use that element’s upper left corner as the coordinate origin. If the browser does not find a parent with a non-static position rule, it will default to the upper left corner of the HTML element.

How to build It

Positioning is easy to use. Consider the current example: it would be easy to move the h2 tags up 50 pixels from their current positions by applying a relative positioning rule:

h2 {

   position: relative;

   top: -50px;

}

The browser will move the tag as instructed, but it will not reflow the surrounding content. You can see the result in Figure 7-5.

Absolute positioning is similarly easy. Instead, you apply absolute positioning to the h2 elements:

The h2 tags are now displayed underneath the content above them.

h2 {

   position: absolute;

   top: 0px;

   left: 0px;

}

This will alter the layout so that the h2 elements are positioned at the coordinate origin. Because the h2 elements have no parents with a non-static position applied, the coordinate origin will be the upper left corner of the HTML element. (See Figure 7-6.)

Note also how the rest of the content has reflowed so that the original position of the element has closed, unlike with relative positioning.

Instead, add a position: relative rule to a containing element:

article {

    position: relative;

}

h2 {

    position: absolute;

    top: 0px;

    left: 0px;

}

The layout will be altered to look like Figure 7-7.

Now the coordinate origin for the absolutely positioned element is the article element, which has the position: relative rule.

Expert tips

If you wish to make a containing element the absolute positioning coordinate origin for its child elements, all you have to do is apply a position: relative rule to it. You do not need to change its position. This allows you to position things relative to elements in the default flow, allowing for more flexibility in your layouts.

What’s involved

When you float an element, the browser modifies the default flow as follows.

First, the element is moved to the far left (for float: left) or right (for float: right) boundary of the containing element. Then the element is given a somewhat nonintuitive combination of both inline and block display properties:

• Unless otherwise specified using a width rule, the width of the floated element will collapse to be just as wide as the content requires. (Recall that, by default, block elements are as wide as their containing elements.)
• The browser then attempts to reflow the content that follows the floated element in such a way as to allow inline content to flow around the outside of the floated element, while still removing the floated element from the default document flow.

Floated elements were originally conceived for things like images and pull quotes floating within blocks of text, which explains their somewhat nonintuitive behavior.

How to build It

Floating content is easy, but the results are complex. To start, let’s begin with some new markup:

<div class="float-left">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<div class="float-left">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing

auctor porta. In lobortis ligula vitae felis feugiat fringilla. Phasellus nunc

ipsum, mattis ut tempus ut, aliquet et velit. Cras condimentum augue at felis

dignissim pellentesque. Donec egestas, odio eget ornare eleifend, nulla erat

laoreet nulla, et sollicitudin leo nisi at tellus. Sed pharetra lobortis lorem

a venenatis. Fusce condimentum ultricies enim placerat ultrices. Suspendisse

lacus justo, aliquet non accumsan vitae, porta non tellus. In blandit dictum

sapien, a consectetur nisl aliquam ut. Pellentesque ullamcorper vestibulum

nulla, at accumsan sem scelerisque varius. </p>

<div class="float-right">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing

auctor porta. In lobortis ligula vitae felis feugiat fringilla. Phasellus nunc

ipsum, mattis ut tempus ut, aliquet et velit. Cras condimentum augue at felis

dignissim pellentesque. Donec egestas, odio eget ornare eleifend, nulla erat

laoreet nulla, et sollicitudin leo nisi at tellus. Sed pharetra lobortis lorem

a venenatis. Fusce condimentum ultricies enim placerat ultrices. Suspendisse

lacus justo, aliquet non accumsan vitae, porta non tellus. In blandit dictum

sapien, a consectetur nisl aliquam ut. Pellentesque ullamcorper vestibulum

nulla, at accumsan sem scelerisque varius. </p>

This markup renders a predictable default flow, as shown in Figure 7-8.

Now, you apply a float rule to the float-left and float-right classes:

.float-left,

.float-right {

   background-color: blue;

}

.float-left {

   float: left;

}

.float-right {

   float: right;

}

We also applied some coloring to make the floated elements a little more obvious. This layout renders as shown in Figure 7-9.

The floated elements now are altering the flow as expected. However, they are stretched to be as wide as their content. If you give the floated elements a width, you can further alter the flow:

.float-left,

.float-right {

   background-color: blue;

   width: 100px;

}

.float-left {

   float: left;

}

.float-right {

   float: right;

}

Now the content will reflow as shown in Figure 7-10.

The content that follows the float has reflowed around the floated element, while the floated element itself has been removed from the document flow. Adding some coloring and margins will help make this more obvious, and give you full insight into how the floats are behaving:

body {

   background-color: #ccc;

}

p {

   background-color: #fff;

}

.float-left,

.float-right {

   background-color: blue;

   width: 100px;

   margin: 10px;

}

.float-left {

    float: left;

}

.float-right {

    float: right;

}

Now the page renders as shown in Figure 7-11.

You can see that the blue boxes of the floated elements are actually being laid out inside of the white boxes of the unfloated elements that follow them, with the content of the unfloated elements flowing around them. This is a key behavior to remember with floating content.

Expert tips

Floated elements are great for producing layouts that flex according to the browser viewport width. They are also an important part of laying out pages in columns, where their flexible nature provides for flowing variably-sized content better than absolutely positioned layouts.

What’s involved

The clear rule can take values similar to float: inherit, left, and right as well as both and none.

By applying a clear rule to an element, you tell the browser to lay that element out clear of any preceding element that has a matching float. Because the default document flow is from top to bottom, applying a clear rule to an element causes it to lay out underneath the floated elements. For example, clear: left causes an element to lay out clear from any previous element with a float: left. A clear: right rule causes the element to lay out clear from any preceding element that had a float: right rule applied to it.

How to build It

Now you add a clear: right rule to the CSS used in the previous example and apply it to the very last paragraph:

body {

    background-color: #ccc;

}

p {

    background-color: #fff;

}

.float-left,

.float-right {

    background-color: blue;

    width: 100px;

    margin: 10px;

}

.float-left {

    float: left;

}

.float-right {

    float: right;

}

.clear-right {

    clear: right;

}

<div class="float-left">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<div class="float-left">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed adipiscing

auctor porta. In lobortis ligula vitae felis feugiat fringilla. Phasellus nunc

ipsum, mattis ut tempus ut, aliquet et velit. Cras condimentum augue at felis

dignissim pellentesque. Donec egestas, odio eget ornare eleifend, nulla erat

laoreet nulla, et sollicitudin leo nisi at tellus. Sed pharetra lobortis lorem

a venenatis. Fusce condimentum ultricies enim placerat ultrices. Suspendisse

lacus justo, aliquet non accumsan vitae, porta non tellus. In blandit dictum

sapien, a consectetur nisl aliquam ut. Pellentesque ullamcorper vestibulum

nulla, at accumsan sem scelerisque varius. </p>

<div class="float-right">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta.</div>

<p class="clear-right">Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Sed adipiscing auctor porta. In lobortis ligula vitae felis feugiat

fringilla. Phasellus nunc ipsum, mattis ut tempus ut, aliquet et velit. Cras

condimentum augue at felis dignissim pellentesque. Donec egestas, odio eget

ornare eleifend, nulla erat laoreet nulla, et sollicitudin leo nisi at tellus.

Sed pharetra lobortis lorem a venenatis. Fusce condimentum ultricies enim

placerat ultrices. Suspendisse lacus justo, aliquet non accumsan vitae, porta

non tellus. In blandit dictum sapien, a consectetur nisl aliquam ut.

Pellentesque ullamcorper vestibulum nulla, at accumsan sem scelerisque varius.

</p>

This causes that last paragraph to lay out clear of the preceding right-floated elements that might otherwise affect it, as shown in Figure 7-12.

Similarly, applying a clear: left rule to the first paragraph causes it to lay out clear of both of the floated elements that precede it, as you can see in Figure 7-13.

With a bit of practice, you can use floats and clears, along with positioning and display properties, to create any design in the browser.

Expert tips

When you float an element, the default flow reflows as if the element has been absolutely positioned and the space it would have taken up in the layout closes. This can cause containing elements to collapse and create confusing results.

To illustrate this, consider the first example in the chapter:

<header>

    <h1>Sample Page</h1>

    <nav>

       <ul>

          <li>Return <a href="#">Home</a></li>

          <li>Find out <a href="#">About</a> our project</li>

          <li><a href="#">Contact</a> someone</li>

       </ul>

    </nav>

</header>

<article>

    <h2>Header for This Article</h2>

    <p>This is a sample page to demonstrate the document flow for a

combination of inline and block elements.</p>

    <h2>Lorem Ipsum Dolor Sit</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

<span>tincidunt suscipit orci,</span> id porttitor orci lobortis in.

<span>Integer eget nulla orci, faucibus ornare leo.</span> <span>Class aptent

taciti sociosqu ad litora torquent per conubia nostra, per inceptos

himenaeos.</span> Ut id sem est, ultrices cursus neque. <span>Donec

consectetur dui sit amet arcu consectetur ac pharetra purus faucibus.</span>

Sed pharetra imperdiet risus. Morbi consequat tempor facilisis. Quisque quis

dui pulvinar orci congue vehicula. Cras nulla risus, rhoncus ut viverra ac,

facilisis non mi. Duis scelerisque luctus felis sit amet tempus. Vestibulum

egestas, ipsum et condimentum aliquet, massa elit convallis velit, quis

posuere est metus sit amet nibh. Nullam tincidunt ornare enim non interdum.

Maecenas lacinia, tortor sed consectetur lacinia, enim libero congue dui,

mollis sollicitudin ligula dolor ut diam. Curabitur et mi arcu, ut tincidunt

risus. Curabitur at lorem eu magna porta sodales eget at mi. </p>

</article>

If you apply a background color to the nav element, it renders as shown in Figure 7-14.

Now float the unordered list within the nav element:

nav {

    background-color: #ccc;

}

nav ul {

       float: right;

}

The nav element will now collapse, and all of the content will rise up and reflow around the floating list, as shown in Figure 7-15.

If you want to maintain the integrity of the navigation container, you can easily apply a small bit of extra markup to clear the float after the floated list. First add a clear rule to the CSS:

.clear {

    clear: both;

}

And then add a bit of extra markup after the list to apply it:

<header>

    <h1>Sample Page</h1>

    <nav>

       <ul>

           <li>Return <a href="#">Home</a></li>

           <li>Find out <a href="#">About</a> our project</li>

           <li><a href="#">Contact</a> someone</li>

       </ul>

       <div class="clear"></div>

   </nav>

</header>

Now the page renders the way you expect it to, as you can see in Figure 7-16.

It’s common to need to prevent a containing element from collapsing when all of its child elements are floating, and this is one of the more common solutions. Another solution involves modifying the overflow property of the containing element but has cross-browser issues and requires extra CSS to account for them.

What’s involved

Every browser has a default set of styles that it applies to many elements. These styles specify font size, margins, and padding for elements, and every browser manufacturer applies different values. The differences aren’t radical, but they are enough to throw off pixel perfection, especially in tight layouts with floated elements.

For example, consider our original example of basic markup. That example renders slightly differently in Chrome, Firefox, and Internet Explorer. It’s most easy to see with all of the windows stacked on top of each other, as shown in 7-17.

As you can see, the sizes of the bullets in the list are different, the margins are different on many elements, and the font sizes are slightly different. These variations are subtle, but in a tight layout that employs floated elements you could easily have problems with some elements falling out of alignment in one browser but not others, creating a nightmare of browser-dependent bugs to fix.

How to build It

The most common and effective technique for dealing with these style variations is to zero them out in your CSS. In our example, we could add the following CSS:

h1, h2, p, body, ul {

    margin: 0px;

    padding: 0px;

    line-height: 1em;

    font-size: 1em;

}

Then the renderings are almost exactly the same in all browsers, as you can see in Figure 7-18.

Now, everything is exactly the same in all three browsers. This technique is called a CSS reset. By resetting all the browsers’ default CSS to be the same, you start with a truly blank canvas. You can then set font sizes, margins, and paddings to suit your needs and be assured that they will behave the same in all browsers. This technique is great for eliminating browser-dependent layout problems.

Expert tips

One of the most commonly used CSS resets is Eric Meyer’s CSS Reset, available at http://meyerweb.com/eric/tools/css/reset/. Eric Meyer’s CSS Reset takes into account HTML 5 tags in older browsers as well.

Most CSS resets set all font sizes, margins, and paddings to be the same, and sometimes this is too much. Eric Meyer’s reset, for example, makes all h header tags (h1, h2, h3, and so on) have the same font size. If you want to keep different font sizes but have them be consistent across all browsers, you can normalize your CSS instead of completely resetting it. The Normalize CSS project provides a complete solution for CSS normalization and is available at http://necolas.github.com/normalize.css/.

Regardless of which solution you choose, resetting or normalizing your CSS is an important step in creating layouts that render consistently across browsers and will take care of most of the cross-browser problems you encounter.

What’s involved

Serving different styles for different media types is not new to CSS3. Ever since CSS2.1, you could target several media types and specify how documents are presented in the media types listed in Table 8-1.

You can target different media types in two ways:

• Use the @media or @import rules within the style sheet itself as follows:

@import url("screenStyles.css") screen;

@media print {

  /* style sheet for print goes here */

}

• Or you can accomplish the same result within the web document by using the <link> tag, specifying the target media of an external style sheet:

<link href="style.css" rel="stylesheet" type="text/css" media="screen">

The screen media type: From desktop to mobile screens

At the time of the elaboration of the CSS2.1 specifications, the screen media type was meant for desktops and laptop computers and the media type used to target mobile devices was the handled type and was, as stated by the W3C specification, "intended for handheld devices (typically small screen with a limited bandwidth)".

To define different styles for each of those types of devices, desktops, and mobile devices, you just attach different style sheets like this:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">

Or, if you want to attach just a single style sheet, you do so as follows:

@media screen {

 /* rules specific for screen devices */

}

@media handheld {

 /* rules specific for handled devices */

}

The situation has evolved a lot in the last four years, especially since the first iPhone came on the market in 2007 and with the ensuing appearance of various smartphones. The screen media type now targets many more devices:

• Computers. This includes desktops, laptops, and netbooks. They use all the major browsers you’re already familiar with, and there’s nothing new beyond what you’re used to.
• Mobile devices. This category includes smartphones and digital tablets. They don’t recognize the older handled media type. They run on a mobile operating system (such as the ones listed in Table 8-3), and the mobile browser is usually embedded. (The iPhone, for instance, comes with Safari Mobile.) Even if users have the option to install a multiplatform browser (like Opera Mini or Fennec, the Firefox mobile browser), most of them will just rely on the preinstalled browser and will hardly change their default configuration. The browser installed can differ even on similar devices. For instance, Android has a native browser, but it isn’t necessarily the default one on all mobile devices running Android. It’s beyond the scope of this book to go deeply into the evolution of mobile devices, but you can get a better idea of what the mobile landscape looks like in Figure 8-1, which shows the statistics for mobile browsers from February 2011 through February 2012)

  

  Figure 8-1. Top 9 mobile browsers from February 2011 to February 2012 (data taken from statcounter.com).

Today, a style sheet targeting the screen media type is now applied similarly, for instance, on an iPhone with a screen width of 320 pixels, a desktop with a screen width of 1368 pixels, and a Galaxy Tab tablet 8.9 with a screen width of 800 pixels (when in portrait orientation). Obviously, the old days of one fixed layout are gone, and you can’t have the same content fitting equally on such a wide range of screens with a single set of style rules. So how can you adapt your web content to display on all those screen media types?

One of the great features of CSS3 is that it introduces media queries that you can use to add selective parameters to the media attribute, and thus specify more precise conditions on the media that’s being targeted, such as its resolution, orientation, and its display screen size. With these parameters, you can now serve different style sheets with those specified values, without relying on any client or server script.

The syntax of media queries

A media query is a Boolean logical expression (either true or false) used in conjunction with one of the media types. It tests one feature or more of the output device and, if the expression is true, applies the subsequent specified style rules.

Table 8-2 describes the features that can be tested when you use media queries.

You should use the following syntax structure for a media query:

 @media media type and (criteria targeted) {

   rules that will apply only to the devices fitting those criteria

}

Or, if you decide to have a separate style sheet for each query, use the following syntax:

<linkrel="stylesheet" type="text/css" media="media type and (criteria

targeted)" href="specific_stylesheet.css" />

Furthermore, you can target some devices more precisely by adding specific conditions with the use of the following logical operators: and, not, and only. You can also achieve functionality that’s equal to theOR logical operator by separating all the conditions with a comma (and if one condition is met, the subsequent style rule or rules will be applied).

To refine your queries further, you also have the option of adding min– or max– prefixes to express “greater or equal to” and “smaller or equal to” constraints for some features. (Refer to Table 8-2 to see which features allow the use of those prefixes.)

For a more concrete example of how queries are constructed, let’s look at a few queries that use the different operators and prefixes (although some of those that follow don’t make practical sense for a project and are presented for the sake of demonstration):

• Media query with the logical operator and:

  @media only screen and (device-width:900px) {

    rules to be applied

  }

This code example targets screen devices only, with an exact device width of 900 pixels.

• Media query with the logical operators and and not:

  @media screen and (not device-width:900px) {

  /* rules to be applied */

  }

This code example targets any screen for which the exact device width is not 900 pixels.

• Media query with the equivalent of the OR operator:

  @media projector and (color), screen and (color) {

   /* rules to be applied */

  }

This code example targets a projector or a screen that has color capabilities.

• Media query with the and operator, the min– prefix, and the equivalent of the OR operator:

  @media screen and (min-width:900px), print, tv {

   /* rules to be applied */

  }

This code example targets the screen media type for a screen with a minimum display width of 900 pixels, and/or print devices (setting style rules for a printed version of your web content), and/or TV.

In the preceding examples, the media queries are written as they would appear inside a single style sheet. However, if you prefer to have an external style sheet associated with a media query, the syntax is as follows:

<linkrel="stylesheet" type="text/css" media=" screen and (width:900px), print,

tv { rules to be applied " href="specific_stylesheet.css" />

This style sheet targets the screen media type for a screen with a minimum display width of 900 pixels, and/or paper (on a printer), and/or TV.

Browser support of media queries

Media queries are supported by all the browsers shown in Table 8-3.

As you can see, the support is pretty good with modern browsers, especially with mobile browsers. The main exceptions are Internet Explorer versions prior to 9. Unsupported browsers will just ignore the rules included within media queries. IEMobile, the browser present on Windows phones, prior to version 9 (which is based on the rendering engine of Internet Explorer 9) won’t support media queries either. To address this issue, you can simply define regular style rules that will apply to all browsers, so that user devices with a noncompliant browser will display your content using those rules and you can still use media queries for supporting browsers. Because the support for media queries is very good on mobile browsers, you will then be able to target most devices.

Another way is to define a specific style sheet for the Internet Explorer versions that don’t support media queries (specifically, versions 6 through 8) and IEMobile by using a conditional comment as follows:

<!--[if lt IE 9 & !IEMobile]>

 <link href="stylesForIE.css" rel="stylesheet" type="text/css">

<![endif]-->

Older mobile phones won’t support media queries either, and you can still target them with the handled media type as before:

<link href="older_devices.css" rel="stylesheet" type="text/css" media="handled">

How it works

To see the preceding strategies in action, let’s create a simple HTML document and attach style sheets destined for devices with three different screen sizes—mobile devices, tablets, and desktops—as well as printing devices and older mobile phones.

1.    Create a basic HTML document with a header and some simple content. (See the file solution_8_1.html in the download pack for this chapter.)

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8">

 <title>Solution 8-1</title>

</head>

<body>

 <header><h1>CSS3 Media Queries</h1></header>

 <section></section>

 <footer></footer>

</body>

</html>

2.    Add the link to the general style sheet meant for every device:

<link href="css/style.css" rel="stylesheet" type="text/css" />

This style sheet contains the style rules you want to apply regardless of the device output.

3.    Set the different style rules for the various screen sizes using media queries:

<!-- Smartphones -->

<link href="css/phone_style.css" rel="stylesheet" type="text/css"

media="only screen and (max-device-width:320px)" />

<!-- Tablets -->

<link href="css/tablet_styles.css" rel="stylesheet" type="text/css"

media="only screen and (min-device-width:321px) and (max-device-width:768px)" />

<!-- Desktops -->

<link href="css/style.css" rel="stylesheet" type="text/css"

media="only screen and (min-width:769px)" />

Here you have a style sheet specifically targeting smartphones, another one for digital tablets, and one for desktops (and laptops).

4.    Internet Explorer versions 6 through 8 will ignore any media queries and skip the related style rules. So you need to create a style sheet for them using a conditional statement:

<!--[if It IE 9>

 <link href="stylesForIE.css" rel="stylesheet" type="text/css">

<![endif]-->

5.    Now add a style sheet for older mobile models as well, by using the handled media type:

<!—Older mobile phones -->

<link href="css/old_mobiles.css" rel="stylesheet"

type="text/css" media="handled" />

5.    Finally, add the link to the style sheet destined for the print media type:

<!-- Print -->

<link href="css/printer_style.css" rel="stylesheet"

type="text/css" media="print" />

You have now provided specific style sheets for a wide range of devices by using the different media types as well as media queries.

In this example, you loaded different style sheets. You also could just load a single style sheet for the screen media type and add the same media queries in it.

Expert tips

If you want to reap the benefits of media queries on Internet Explorer versions 6 through 8, you can rely on a third-party script to do so. One example is Respond, a great script released by Scott Jehl, a designer who leads the design team at JQuery. It’s straightforward to use and provides almost native behaviors of media queries to unsupported browsers. You can download it and find its documentation here: https://github.com/scottjehl/Respond.

To use Respond, write your CSS rules using media queries as you usually would, but use the min-width/max-width features to target different screen sizes:

@media screen and (min-width: 320px){

}

Then reference the respond.min.js script after all of your CSS:

<script type="text/javascript" src="respond.min.js"></script>

And that’s it! Your media queries will now be taken into consideration by Internet Explorer versions 6 through 8.

Solution 8-2: Adapting a layout for different screen sizes with CSS3

Nowadays, any web content you develop has to be made available for mobile devices as well as desktops and laptops. To achieve this, there are several options available to developers. One approach, which is commonly used, is to detect the device (by using server or client scripts) and redirect users to a version of the site for mobile browsers when necessary. Without detailing the maintenance difficulty and SEO (Search Engine Optimization) problems you might encounter with this approach, it was an acceptable option when mobile devices were not very different from one another. But today, new devices with new screen sizes and new configurations are developed at an incredibly fast pace. Moreover, when you talk about mobile devices, you are not only talking about smartphones anymore, but digital tablets as well.

As of this writing, several new models with different sizes and resolutions are coming out every few months, and nobody knows for sure what the next popular models will be. As a developer, creating custom content for each available device would be both impossible and unproductive. Another way you had at your disposal was to detect the screen size with the use of JavaScript and to call different styles rules, or style sheets, accordingly. CSS3 and its new media queries now let you achieve this directly without having to rely on any script. In this solution, you will see how you can adapt your web content for several screen devices by using media queries.

What’s involved

When designing and developing web content adapted to multiple screen sizes, you have to consider several things from a design and visual point of view, as well as considering layout restrictions and possibilities. Let’s see what is involved.

Responsive design

The concept of responsive design recognizes the increased need for web content to be available for multiple devices. It is, in fact, a whole new approach to conceiving web content, more than a sole group of web development techniques. Its objective is to create a single design that can adapt its content to any kind of display resolution and device. (You can see an example of a site with a responsive design in Figure 8-2.) It requires thinking in terms of an adaptive and flexible layout, the appropriate typography, the handling of images, and so on. The concept also takes into consideration the page weight and optimal performance for any device. It requires developers to rethink the way they conceive their designs in the first place to achieve this increased level of flexibility.

Responsive design achieves this goal by using a couple of techniques and tools, including the new CSS3 media queries, to change the layout of a web document according to CSS rules based on the width of the browser or device.

If you want to see great examples of websites using responsive design, you can visit http://mediaqueri.es/ which presents a collection of websites using media queries and responsive web design. It is regularly updated with new examples, and it can be a great source of inspiration if you’re new to the concept.

Responsive design and its principles are a vast subject that goes beyond CSS3 alone. If you want to go more deeply into the topic, we encourage you to read Ethan Marcott’s book Responsive Web Design (A Book Apart, 2011). You will also find plenty of resources about it on the Web when reading about the evolution of browsers and devices. One good place to start with is the blog “A List Apart” at www.alistapart.com.

Let’s take a look at how you can use CSS3 media queries to build multiple layouts using the same HTML document by selectively serving style sheets based on the user’s screen device, and thus having a responsive design.

The device size and the viewport

The first obvious difference between various devices that designers have to deal with when targeting several devices is the screen size. As you saw in the previous solution, you can use media queries to serve different style sheets based on the features and conditions you choose. Among those features, you can use the following ones to target different device sizes:

• width. The width of the targeted display area of the output device
• device-width. The width of the rendering surface of the output device (the physical screen size in its current orientation or its page width on paper)
• height. The height of the targeted display area of the output device
• device-height. The height of the rendering surface of the output device (the physical screen size or page width on paper)

All of these features accept the use of the min- and max- prefixes for refining the query further.

Here you have to clearly distinguish between those features and what they imply, which at first can be a bit confusing.

The width feature of media queries detects the display width, which corresponds to the viewport width. (The viewport is the area in which the web content is actually displayed.) The device-width feature, on the other hand, detects the rendered width (which will be the actual width of the device screen).

More concretely, on a computer screen, thewidth feature is the width of the browser window and the device-width is the width of the device’s screen (and they will often be different because you can’t expect everybody to open their browser in full screen, especially on big screens). On mobile devices, you would expect it to be the same—and moreover to be of the same value—because you can’t resize the browser window. But that’s not the case. On most of mobile devices, the viewport, by default, will be larger than the actual device size. Take, for instance, the iPhone 3GS: its screen’s width is 320 pixels, whereas the default viewport width of its browser is 980 pixels. (See Figure 8-3.)

This means that a web document will be displayed on a viewport of 980 pixels and then rendered on a screen of 320 pixels. (For the time being, just assume we’re talking about portrait mode; to see how you deal with orientation, refer to Solution 8-3.) So in order to fit in the content needs to be rescaled.

That goes for all mobile browsers. Table 8-4 lists the major mobile browsers and their respective viewport size.

The reason for this difference in values and this virtual viewport is that there are a lot of websites (probably a majority of them as of the writing of this book) that are not adapted for smartphones or tablets at all and were designed for computer screens. This larger viewport size lets them fit on small screens. But the obvious inconvenience is that the content is rescaled down, displaying as tiny content on the screen that’s difficult to read, not to speak of the poor touch interactivity that results from this.

To avoid this situation, you have to change the viewport size to make it fit the device width. This can be achieved easily through the viewport meta tag in your HTML document and its contentattribute, as follows:

<meta name="viewport" content="width=content-width" />

By adding this tag in the head of your HTML document, the viewport size will be the same as the rendering size, on any device. If you load a page on a smartphone’s browser with this change of viewport size, the content will be displayed with a normal size and won’t be shrunk anymore.

With the viewport size correctly set, you can now apply different style rules according to the width of the display area:

@media screen and (min-device-width:1025px){

 */

   set of style rules to be applied for desktop and laptops

 /*

}

@media screen and (min-device-width:320px) {

 */

   set of style rules to be applied for smartphones

 /*

}

@media screen and (min-device-width:600px){

 */

  set of style rules to be applied for tablets

 /*

}

Here you are defining three main groups of devices: desktops and laptops, tablets, and smartphones. You can refine the categories further, of course, depending on your design and project.

Some design and styles considerations

Even if detecting different screen sizes and applying different style rules accordingly is in fact straightforward when you use of media queries, you still need to consider different aspects of this approach to create a flexible layout that is suited to any device. Media queries alone will not solve everything. Here are some important points to consider when you write your style sheets for different devices:

• Your HTML document has to be correctly structured. The more well-constructed your document is semantically, the better its visual flexibility will be with CSS. This seems like an obvious statement, but it is an important point to keep in mind to be able to easily apply different views to the same content. Validating your document with the Markup Validation Service provided by the W3C (http://validator.w3.org/ and http://html5.validator.nu/ for HTML5 documents) to ensure its markup is well formed is a recommended good practice.
• When applying different style sheets, an easy way to manage layouts is to choose whether or not to display some elements depending on the device targeted. You can do this by playing with the display attribute and its none property. However, you have to be very careful with that because an element that is not displayed is still loaded with the page, as along with all the assets it may contain. Therefore, the strategy of designing web content for the maximum size and then choosing just not to display the elements that won’t suit some devices can prove to be very bad in terms of performance on small devices. Here, again, the best approach is to design for multiple devices at the time of conception, if possible.
• The mobile web experience and desktop web experience are radically different. You will prefer to use a single-column layout for smartphone devices and avoid floating elements on small screens. This can be easily achieved by playing with the float property depending on your media queries. You also have to take great care of the navigation functions and make them suitable to a mobile user experience when you define your style rules for small mobile devices.
• The text size is also a crucial aspect. Prefer percentage or em values instead of pixels to provide resizable text across all browsers and devices.
• Take advantage of the new CSS3 capabilities to have better performance when defining styles for mobile devices. For example, use the box radius, gradients, and text-shadow properties instead of loading assets to achieve a similar effect. Because CSS3 is well supported on mobile browsers, you can safely choose to use these properties when targeting those devices.
• Don’t forget to pay attention to the content that can’t be displayed universally on all devices. IOS and some other mobile operating systems do not support Flash Player mobile. Furthermore, Adobe announced in November 2011 that it won’t continue to provide support for mobile Flash Player anymore. So animations, games, and video relying on Flash Player won’t be displayed on several mobile devices.
• When it comes to touch screens, the size of buttons and links play an important part in usability. You will have to rethink their design and make them broader and more appropriate to touch interaction. Also, note that the hover capability will not work the same on touch screens as it does on desktops because a touch is equal to a click event.

This being said, let’s go over a concrete example with a simple HTML document.

How it works

1.    Create a simple HTML document with your usual text editor:

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8">

 <title>Solution 8_2</title>

</head>

<body>

 <div id="wrapper">

 <header>

  <div id="logo">Logo</div>

 </header>

 <nav>

 <!-- Navigation -->

  <a href="#">Link</a>

  <a href="#">Link</a>

  <a href="#">Link</a>

 </nav>

 <section>

  <h2>Adapting a layout on multiple devices</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin

iaculis dui vel massa tempor sagittis. Donec a dui nibh, vitae congue lorem.

Praesent porta gravida arcu vel lacinia. Vivamus euismod auctor mauris a

rhoncus. Mauris venenatis venenatis ante at facilisis. Pellentesque habitant

morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam

ac diam nec odio euismod iaculis nec sit amet nibh. Ut eu risus eget elit

volutpat vulputate ac et lorem. Cras dignissim viverra mauris sed euismod.

Pellentesque consequat, ante ac porta venenatis, eros orci viverra nisi,

ac iaculis lectus urna ac massa.

  </p>

  <figure>

  <img src="photo.jpg" alt="a photo" />

  <figcaption>A photo</figcaption>

  </figure>

 </section>

 <aside>

 <!-- Sidebar -->

  <h4>Sidebar</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin

iaculis dui vel massa tempor sagittis. Donec a dui nibh, vitae congue lorem.

Praesent porta gravida arcu vel lacinia. Vivamus euismod auctor mauris a

rhoncus. Mauris venenatis venenatis ante at facilisis.

  </p>

 </aside>

 <footer>

  <!-- Footer -->

  css3 solutions - Apress -

 </footer>

 </div>

</body>

</html>

This document is simply structured and contains a header, main content that includes text and an image, a sidebar, and a footer. All of the elements are inside a div with an ID named wrapper. You’ll find it useful to manage the content based on the device screen size. In this example, you are using an HTML5 document to take advantage of its powerful, semantic structural elements.

2.    Add a link to an external style sheet that you simply name style.css within the <head> element of the document:

<link rel="stylesheet" type="text/css" href="style.css" />

For this example and for readability’s sake, you will have a single external style sheet that contains all your style rules and media queries (for the screen media type).

3.    Now adjust the viewport within the <head> element so that its default value on mobile devices will be equal with regard to the device-width and override the virtual default viewport size of the devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Here you also define the initial scale of your page as 1, which means that when loaded the document won’t be rescaled in any way (which could be the case by default on some mobile devices).

4.    That’s about it as far as your HTML document is concerned. Now that you have the structure, let’s specify its appearance by first creating a style sheet. Start by setting general rules that will be applied on any device, regardless of its screen size:

*{

   margin:0;

   padding:0;

}

img{

   max-width: 100%;

}

body{

   font-family:verdana;

   font-size:100%;

}

header,footer,nav,a,#wrapper,figure,img{

   display:block;

}

header{

   background:#6C0;

   color:#fff;

   height:70px;

   margin-bottom:10px;

   width:100%;

}

#logo{

   margin:0;

   padding:10px;

   font-size:1.8em;

   font-weight:bold;

}

nav a{

   display:block;

   float:left;

   text-decoration:none;

   font-size:1em;

   font-weight:bold;

   border-radius: 10px;

   background-color:#abc;

   color:#fff;

}

p{

   padding:10px 10px;

   font-size:0.85em;

 }

section {

   color:#333333;

   border-radius:10px;

   background:#EEE;

   padding:12px;

}

section img {

  margin: 0 auto;

}

figure{

   font-size:0.75em;

   text-align:center;

}

footer {

   border-radius:7px;

   background:#333333;

   margin:10px auto;

   padding:10px 5%;

   color: #ccc;

   font-size: 0.9em;

   width:90%;

}

Here you are just setting regular style rules for your elements that will be the same no matter what device your content is displayed on: background, margin, padding, and font-size. So that it can be resized across all browsers, set your text size using em units.

Also, to make sure that your images won’t exceed the page size, regardless of the display screen size, set its max-width to 100%. (We advise you to do the same with video elements, embedded elements, tables, and so on if you have those elements in your document.)

5.    Now add specific rules for specific device widths using media queries. Let’s start with desktop and laptop screens. Assume that a screen with a width greater than 1025 pixels is a computer screen, and add rules to be applied for this specific query:

@media screen and (min-width:1025px){

 #wrapper{

  width:960px;

  margin:0 auto;

 }

 nav{

  display:block;

  height:30px;

  margin:0 0 0 20px;

 }

 nav a{

  float:left;

  margin:0 10px 10px 0;

  height:25px;

  line-height:25px;

  padding:6px 14px;

  font-size:0.85em;

 }

 section{

  clear:both;

  width:600px;

  float:left;

  border-radius:10px;

  margin:0 15px 10px 0;

 }

 aside{

  display:block;

  width:200px;

  float:left;

  padding:10px;

 }

 footer{

  clear:both;

 }

}

Here you have a rather simple layout. Your navigation bar has inline text links. You place your sidebar to the left of the main content. You give your wrapper div a standard width of 960 pixels with auto margins so that it’s in the center of the screen. It is pretty traditional.

6.    Now add specific styles to target smartphones. Assume that a screen with a width less than 600 pixels is a smartphone screen, which seems like a safe assumption. (For the moment, we won’t discuss the device orientation, which will be covered in the next solution.) Note that you use both the max-device-width and max-width features. Using this approach, even desktop and laptop browsers will apply the styles if the content is resized at that size (which is a bit unlikely but a good way to test your style sheet). It also lets you test your layout with emulators like Protofluid (which you can read more about in the “Expert tips” section of this solution):

@media only screen and (max-device-width:600px),(max-width:600px){

 body{

  margin:0;

  padding:0;

 }

 #wrapper{

  width:100%;

 }

 nav a{

  display:block;

  font-size:1em ;

  float:none;

  width:90%;

  height:40px;

  line-height:40px;

  margin:0 auto 3px auto;

  padding:6px 14px;

 }

 aside{

  display:none;

 }

}

On small devices, space is very limited. Elements should be designed so that they’re easily spotted and read. The first thing you do here is set a width of 100% to your wrapper div so that you use all the width of the screen. The sidebar would take up too much space, so you simply don’t display it. Moreover, when browsing on their smartphones, users usually look for the main information, and sidebars do not usually contain such data.

In the code shown earlier, we also changed the navigation. Having three text links, one after another, would neither be easy to read nor to touch. So instead we made them as a list of more broad blocks, one below the other, by changing the floatproperty from left to none and by changing the size of the <a>elements. It is visually easier to read on a small display, and the links now have a surface more suitable for interaction on small touch screens.

You can see the result in Figure 8-4.

All our content is in one, single long column that the user can scroll easily with a swipe touch. And as you can see, our photo fits properly because it can never have a width greater than the screen size.

7.    Let’s now take care of tablet screens. Assume that the screen width of tablets will be between 601 pixels and 1024 pixels (but here again you will deal only with the portrait mode).

@media only screen and (min-device-width:601px) and

(max-device-width:1024px),(min-width:601px) and (max-width:1024px) {

 body{

   margin:0;

   padding:0;

 }

   #wrapper{

       width:100%;

  }

 section,aside{

   clear:both;

   background:#EEE;

   border-radius:10px;

   margin:15px auto;

   padding:10px;

   width:90%;

   float:none;

 }

 nav a{

   float:left;

   display:block;

   -webkit-text-size-adjust: 100%;

   font-weight:bold;

   border-radius: 10px;

   background-color:#abc;

   color:#fff;

   height:50px;

   line-height:50px;

   margin:0 6px 8px 6px;

   padding:6px 14px;

 }

 nav{

   width:90%;

   margin:0 auto;

 }

}

Just like with smartphones, you set the wrapper div’s width to be 100%, the full width of the screen, to use all the space available.

You have more space than on an average smartphone screen, so position the navigation links on a single line using the float property, just as you did for desktop and laptop screens. However, because we’re still dealing with a touch screen here, define a bigger touch area for the links than you did for desktops.

Here you display the content of the sidebar, but you position it below the main content to give the maximum readability to the latter.

You can see the result on an iPad (in portrait mode) in Figure 8-5.

In this simple example, you managed to display your HTML document on different screen devices, from smartphones to computer screens, and you adapted your layout to each in a pretty easy way by using only CSS3 and its media queries. You can see that, depending on the complexity of your design and content, you can rearrange your elements for specific screen ranges in an easy way without using any external script. (See Figure 8-6.)

Expert tips

If you are heavily involved in mobile development, you probably have several devices at your disposal to work and test your projects. Other than that, you probably won’t be able to test your design on various devices. Fortunately, you can find great online tools that will imitate the performance on tablets, on smartphones, with different resolutions, with various orientations, and so on.

A convenient and complete tool for doing this is Protofluid, which is available at http://protofluid.com. It lets you test your online document on a multitude of device screen sizes, orientations, and browsers. You just have to enter the URL you want to see, and then select the size, orientation, and browser of the device to test it on.

One thing though, you will have to define you screen’s width with the width feature instead of device-width, to be able to test your queries.

You can also find a very extensive list of mobile emulators and simulators at www.mobilexweb.com/­emulators.

If you have multiple devices at your disposal and want to test your layouts locally, Adobe has released a very interesting and useful tool, Shadow, to view and inspect your web content. You also can use Shadow to test it simultaneously on multiple devices (Android and iOS). At the time of this writing, you can download Shadow 1.0 from Adobe Labs at http://labs.adobe.com/technologies/shadow/.

Solution 8-3: Handling layout orientation on mobile devices with CSS3

In the previous solution, you saw how to apply specific styles according to different screen devices, from desktop computers to smartphones. But what happens when users rotate the screen with mobile devices? In this solution, you will see how you can adapt your layout for different orientations with CSS3.

What’s involved

Here, again, the new CSS3 media queries give you the option of targeting devices based on their orientation. The feature created for that very purpose is the orientation feature. As you might have guessed, it can take one of two values: portrait or landscape And just like any media queries you’ve seen, it lets you set specific styles accordingly.

device-width vs. orientation

When you rotate most devices, the device-width changes accordingly, and if you set media queries with the device-width feature, you can serve styles for each orientation without needing to use the orientationfeature. The following code sample shows how this is done:

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width:320px) and (max-device-width:600px) {

 /* Style rules */

}

/* Smartphones (landscape) ----------- */

@media only screen and (min-device-width:481px){

 /* Style rules */

}

/* Smartphones (portrait) ----------- */

@media only screen and (max-device-width:480px) {

 /* Style rules */

}

At first, you might wonder if there is an actual use for this orientation feature. However, iOS devices don’t follow that behavior and the device-width of an iPhone, when doesn’t change when it’s in landscape orientation—it’s still 320 pixels, just like in portrait orientation. This goes for iPads as well (for which the width is 768 pixels). In those cases, you have to use the orientation feature and make specific queries for the iPhone or the iPad as follows:

@media only screen (max-device-width: 320px) and (max-device-width:480px) and (orientation:portrait) {

 */ styles for the iPhone/iPod in portrait orientation /*

}

@media only screen and (min-device-width:321px) and (max-device-width:480px) and (orientation:landscape) {

 */ styles for the iPhone/iPod in landscape orientation /*

}

By combining both the device-width and orientation features, you can target iOS mobile devices and others as well, like this:

@media only screen and (max-device-width:600px) and (orientation:landscape){

 */ style rules for device with a screen width below (or equal to )

600 pixels in landscape orientation /*

}

@media only screen and (max-device-width:600px) and (orientation:portrait){

 */ style rules for device with a screen width below (or equal to )

600 pixels in portrait orientation /*

}

Another peculiarity on iOS devices is that they automatically zoom in when the user rotates the device into landscape mode, and it’s up to users to zoom out to come back to the original scale. You can prevent this by locking the maximum scale of the viewport and specifying that it should not exceed 1, thus preventing rescaling. You can do this within the viewport tag, as follows:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />

Preventing users from zooming is not always advisable and could raise some issues, but because it seems to be the only way to fix this behavior at the moment of this writing, we are mentioning it.