Classification Properties

537

Classification Properties
Classification properties affect how the boxes in the box model are rendered.

clear
This forces elements, which would normally wrap around an aligned element, to display below it.
Value indicates which side may not touch an aligned element.
p {clear:left;}
Value

IE

Inherited

No

none

Default

none

both

Applies to

All elements

left

right

inherit

display
This specifies how an element is rendered, if at all. If set to none the element is not rendered, and it
does not take up any space. This property can also force an inline element to display as a block or
vice versa.
span.important {display:block;}
Value

IE

Inherited

Yes

none

Default

inline

inline

Applies to

All elements

block

list-item

inherit

Although the default value of this property is inline, browsers tend to treat the element depending
on its inherent display type. Block-level elements, such as headings and paragraphs, get treated as if
the default were block, whereas inline elements such as <i>, <b>, or <span> get treated as inline.

float
Subsequent elements should be wrapped to the left or right of the element, rather than below.
img.featuredItem {float:left;}

538

Appendix CCSS Properties

Value

IE

Inherited

No

none

Default

none

left

Applies to

All elements

right

inherit

visibility
This specifies whether an element should be displayed or hidden. Even if hidden, elements take up
space on the page but are transparent.
Value

IE

Inherited

No

visible

Default

inherit

show

Applies to

All elements

hidden

hide

collapse

inherit

Internationalization Properties
Internationalization properties affect how text is rendered in different languages.

direction
This specifies the direction of text from left to right or right to left. This should be used in association with the unicode-bidi property.
td.word{direction:rtl; unicode-bidi:bidi-override;}
Value

IE

Inherited

Yes

ltr

Default

ltr

rtl

Applies to

All elements

inherit

Selected CSS3 Properties

539

unicode-bidi
The unicode-bidi property enables you to override Unicodes built-in directionality settings
for languages.
td.word{unicode-bidi:bidi-override; direction:rtl; }
Value

IE

Inherited

No

normal

Default

normal

embed

Applies to

All elements

bidi-override

inherit

Selected CSS3 Properties

This section covers a subset of CSS3 properties, focused on the ones covered in this book. Unlike the
earlier tables, a full support matrix showing Chrome, Firefox, Safari, and Opera support is included
in addition to information about support in Internet Explorer.
For full support tables of all CSS3 modules, the interactive tool at http://caniuse.com/ cant
be beat.

Color
The CSS3 Color module offers the ability to specify colors using the Hue Saturation and Lightness
(HSL) scheme, as well as the ability to set an alpha channel to define transparency using both RGBA
and HSLA notation.
.hsl {
background-color : hsl( 333,50%,50% );
}
.hsla {
background-color : hsla( 0, 100%, 50%, 0.5 );
}
.rgba {
background-color : rgba( 255, 0, 0, 0.5);
}
Value

IE

FF

Safari

Chrome

Opera

hsl

3.1

9.5

hsla

3.1

10

rgba

3.1

10

540

Appendix CCSS Properties

Backgrounds and Borders

The Backgrounds and Borders module extends the border and background properties introduced in
earlier versions of CSS to include rounded corners and drop shadows.

border-radius (border-top-left-radius, border-top-right-radius, border-bottomright-radius, border-bottom-left-radius)

.rounded-corners {
-webkit-border-radius : 12px;
border-radius : 12px;
}
Value

Inherited

No

auto

Default

auto

[length]

Applies to

All elements

[percentage]
inherit

box-shadow
The possible values for this property are
inset offset-x offset-y blur-radius spread-radius color
.drop-shadow {
// inset offset-x offset-y blur-radius spread-radius color
-webkit-box-shadow : 0px 0px 4px 0px #000000;
box-shadow : 0px 0px 4px 0px #000000;
}
Value

Inherited

No

none

Default

auto

[inset]

Applies to

All elements

[offset-x] [offset-y]
[blur-radius]
[spread-radius]
[color]

Selected CSS3 Properties

541

Browser support is as follows:

Value

IE

FF

Safari

Chrome

Opera

box-shadow

3.5*/4.0

3*/5.1

1*/10

10.5

border-radius

1*/2.0

3*/5

.2*/4

10.5

*Indicates support with browser prefix.

Multi-Column
The CSS Multi-Column layout module enables the definition of multiple columns of text.
.fixed-width {
width:500px;
height:200px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
-moz-column-count: 3;
-moz-column-gap: 15px;
column-count: 3;
column-gap: 15px;
}
.percentage-width {
width:100%;
height:200px;
-webkit-column-width: 100px;
-webkit-column-gap: 15px;
-moz-column-width: 100px;
-moz-column-gap: 15px;
column-width: 100px;
column-gap: 15px;
}

column-count
This defines the number of columns in an element.
Value

Inherited

No

auto

Default

auto

[integer]

Applies to

Block-level elements, table cells, and

inline-block elements

542

Appendix CCSS Properties

column-gap
This defines the gutter between the columns of a multi-column element.
Value

Inherited

No

normal

Default

1em

[length]

Applies to

Multi-column elements

column-width
This defines the width of the columns of a multi-column element.
Value

Inherited

No

auto

Default

auto

[length]

Applies to

Multi-column elements

Browser support is as follows:

Property

IE

FF

Safari

Chrome

Opera

column-count

10

1.5*

3*

1*

11.1

column-gap

10

1.5*

3*

1*

11.1

column-width

10

1.5*

3*

1*

11.1

*Indicates support with browser prefix.

Media Queries
The CSS Media Queries module enables the definition of styles based on device and browser
characteristics.
#container {
width : 940px;
}
@media screen and (max-width:999px) {
#container {
width : 740px;
}
}
@media screen and (max-width:480px)
{

Selected CSS3 Properties

543

#container {
width : 400px;
}
}

The module supports the following properties:

Properties

Description

width

Tests the width of the display area of the device in a browser. This
is equal to the width of the browser window.

height

Tests the height of the display area of the device. In a browser this
is equal to the height of the browser window.

device-width

Tests the width of the rendering surface of the device. In a browser

this is equal to the full screen width.

device-height

Tests the height of the rendering surface of the device. In a

browser this is equal to the full screen height.

orientation

Tests the orientation of a device.

aspect-ratio

Tests the aspect-ratio as measured by the width and

height properties.

device-aspect-ratio

Tests the aspect-ratio as measured by the device-width and

device-height properties.

color

Tests the color depth of the device.

color-index

Tests the number of entries in the lookup table of the device.

monochrome

Tests the number of bits per pixel in a monochrome frame buffer.

resolution

Tests the pixel density of the target device.

scan

Tests the scanning process of tv devices.

grid

Tests whether the device is a grid or bitmap. An example of a grid

would be a text browser such as Lynx run from the terminal.

Basic support is as follows:

@media (basic support)

IE

FF

Safari

Chrome

Opera

3.5

9.5

544

Appendix CCSS Properties

@font-face
The CSS Fonts Modules enable the use of custom fonts.
@font-face {
font-family: 'InconsolataMedium';
src: url('Inconsolata-webfont.eot');
src: url('Inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
url('Inconsolata-webfont.woff') format('woff'),
url('Inconsolata-webfont.ttf') format('truetype'),
url('Inconsolata-webfont.svg#InconsolataMedium') format('svg');
font-weight: normal;
font-style: normal;
}

Basic support is as follows:

@font-face

IE

FF

Safari

Chrome

Opera

3.5

3.1

10

2D Transforms
The 2D Transforms module introduces a new property that enables the rotation, translation, and
scaling of a box, without changing its place in the flow of the document.
#rotate {
-webkit-transform : rotate(20deg);
-moz-transform : rotate(20deg);
-ms-transform : rotate(20deg);
-o-transform : rotate(20deg);
transform : rotate(20deg);
background : #00ffcc;
top : 100px;
left : 50px;
}
#scale {
-webkit-transform : scale(0.5);
-moz-transform : scale(0.5);
-ms-transform : scale(0.5);
-o-transform : scale(0.5);
transform : scale(0.5);
background : #ccff00;
top : 400px;
left : 50px;
}

The following table lists the common functions of the transform property and gives a small
example of each.