Code and Stuff

Jun 19, 2012

CSS Units

CSS defines a lot of units for different type of measures. Here a few examples and some explanations. The interactive parts should work on Firefox and webkit (where applicable), did not test on IE and Opera.

Length units

Absolute

The main absolute length (size) unit, when working for the screen, is the pixel (px).

CSS defines also some other absolute length units. These are more useful for print, but can be used also on a display (discouraged). The discouraging holds also the other way around: px should be used with care when printing.

pt
3/4
mm
25.4/96
pc
1/16
cm
2.54/96
in
1/96
1px
px
4/3
mm
25.4/72
pc
1/12
cm
2.54/72
in
1/72
1pt
px
96/25.4
pt
72/25.4
pc
6/25.4
cm
0.1
in
10/2.54
1mm
px
16
pt
12
mm
25.4/6
cm
2.54/6
in
1/6
1pc
px
96/2.54
pt
72/2.54
mm
10
pc
6/2.54
in
1/2.54
1cm
px
72
pt
96
mm
25.4
pc
6
cm
2.54
1in

Font Relative

0.
x
1ex
1em
1ch
All major browsers support at least two font relative units: em and ex. As the "image" on the side shows, the em is the total font height while the ex is usually the height of the x character (one exception is when the font doesn't have the letter x). The font that is used for this sizes is the one applied to the tag (therefore the inherited one if none is explicitly specified).

Another font relative measure of units is the rem. The rem (root em) is the same as the normal em but related to the root element.

And there is also ch. This last font related unit is the advancement of the character '0' (zero) of the current font. In fonts that are not monospaced the advancement of a character depends of the character (see below).

00000mmmm

The ch unit is currently (June 2012) not supported by webkit browsers.

Viewport relative

CSS3 introduces also viewport relative units: vh, vw and vmin.
1vh = 1% of the height of the initial viewport
1vw = 1% of the width of the initial viewport
1vmin = 1% of the smallest between width and height of viewport

Percent

One more unit is the percent. Percents are relative to something. In the case of fonts they are related to the parent. For lengths (for instance: width and top), the percent, is related to the size of the first positioned element, or when none, to the size of the whole document.

Rotation Units

Rotation units are used, for instance, in transformations and radial gradients.
1turn
1rad
10deg
10grad
1 turn equals
2π rad
360 deg
400 grad
1 rad equals
1/2π turns
180/π deg
200/π grad
1 deg equals
1/360 turns
π/180 rad
9/10 grad
1 grad equals
1/400 turns
π/200 rad
10/9 deg
Move the mouse over the units on the left

Other units

CSS defines also units for pixel density, time (s, ms), frequencies (hz, khz), color, etc. I will not cover them here since quite trivial (time and frequencies) or enough complex to deserve a separate post (color, densities).

Mixing Units

Finally, there is another very nice feature that plays a role here. Let's assume we are using an element that has width of 50% wide and has a border of 10px. What if we want to place beneath it another element with same width but no border. Setting a width of 50% would make it 20px to narrow (2 borders of 10px) and the actual width depends on the size of the container. Fortunately CSS3 can perform computation. We can set the width of the second element to "calc(50% + 20px)".
width:50%; + 2x 10px border
width:50%
width: calc(50% + 20px)

The source code (without background colors) for the example above is

<div style="width:50%; border:10px solid">width:50%; + 2x 10px border</div>

<div style="width:50%;">width:50%</div>

<div style="width:-moz-calc(50% + 20px); width:-webkit-calc(50% + 20px); width:calc(50% + 20px);">width: calc(50% + 20px)</div>

Further reading

You can get some more information about units here:

http://www.w3.org/TR/css3-values
https://developer.mozilla.org/en/CSS/length

Jun 8, 2012

CSS3 Layout - columns

With CSS3 multi column (http://www.w3.org/TR/css3-multicol) you can create content that is organized in columns without having to split it yourself or use a javascript library to do it for you. You simply have to set the column-count or the column-width parameter of a tag and it's content will be shown in columns. Firefox and Webkit based browsers require the vendor prefix. The details of the columns can be controlled with various other parameters. These include setting the width of each column, the gap between the columns and a separator line.

Firefox does not fully implement columns. The support is limited to splitting content, but the flow control (column brake and span) is not yet implemented.

Example


Columns: 2, 3, 100px
Gap: none, default, wide
(not supported by firefox)

Result

/* a block of something */

Here some text from Wikipedia's css page: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

code

div.cols {
   -moz-column-count:2;
   -webkit-column-count:2;
   column-count:2;
   -moz-column-count:3;
   -webkit-column-count:3;
   column-count:3;
   -moz-column-width:100px;
   -webkit-column-width:100px;
   column-width:100px;
   -moz-column-rule: solid black 1px;
   -webkit-column-rule: solid black 1px;
   column-rule: solid black 1px;
   -moz-column-gap:0px;
   -webkit-column-gap:0px;
   column-gap:0px;
   -moz-column-gap:4em;
   -webkit-column-gap:4em;
   column-gap:4em;
}

div.cols .somechild {
   /* not supported by firefox as of June 2012  */
   -webkit-column-span:all;
   column-span:all;
}


div.cols p:first-of-type {
   /* not supported by firefox as of June 2012  */
   -webkit-column-break-before:always;
   break-before:column;
   /* not supported by firefox as of June 2012  */
   -webkit-column-break-after:always;
   break-after:column;
}