CSS3 only Native iPhone App. No images!

My challenge to myself today was to create the native look of an iPhone application using only CSS. No images. I did it. When developing for the iPhone, one only has to consider a single browser. This made the challenge somewhat easy.  The fun part was creating the page background, buttons and navigation bar without the use of image. Linear gradients came to the rescue.  Now that Safari 5 supports inset shadows, the buttons were a cinch.  Check it out (on iPhone or Safari 5 only)!

And, since I like to share, here are the important parts of the code:

#theNavBar{
        background-image: -webkit-gradient(linear, 0% 0%, 0% 50%, 
              from(rgba(176, 188, 205, 1)), to(rgba(129, 149, 175, 1)));
 	padding: 7px 10px;
	background-color: rgb(109, 132, 162);
	border-bottom-color:1px solid rgb(45, 54, 66);
	border-top:1px solid rgb(109, 132, 162);
	display: block;
	height: 31px;
	line-height: 30px;
	display: block;
	border-bottom: 1px solid #2C3542;
	border-top: 1px solid #CDD5DF;
}

#theBodyBackgroundImage {
      background-color:#C5CCD4;
      background-image: -webkit-gradient(linear, left top, right top, 
          from(#C5CCD4), 
          to(#CBD2D8), 
          color-stop(0.6, #C5CCD4), 
          color-stop(0.6, #CBD2D8));
     -webkit-background-size:7px 7px;
     background-repeat: repeat;
}

The page on it’s own is here, but is only decent on iPhone or Safari 5 and chrome.
The github version supports more browsers

Converting from HSL to RGB() & Hexadecimal Colors

I created a ‘spreadsheet’ of the HSL() (hue, saturation, lightness) colors. I noticed if you inspect the file in Firebug, the left hand console gives you the rgb() color, and the right hand inspector gives you the hexadecimal #RRGGBB color.

To translate a color from HSL() to RGB() or #FFF, visit the HSL() ‘spreadsheet’ and inspect the color in Firebug. Simple as that.

Of course, you don’t have to use my spreadsheet. Simply declare an inline hsl() value on a div in your own sandbox. Inspecting it in Firebug will give you both the rgb() value (in the left hand firebug console, inline on the element) and in the right hand console, under element.style{} in the style console.

Hack for CSS3 Supporting Browsers

Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup.

selector:nth-of-type(1n)

To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector.

  h3:nth-of-type(1n)  {
      color: #FFFFFF;
      background-color: #FFFFFF;
      text-shadow:  
           3px 3px 3px rgba(0, 0, 0, 0.4);
}

In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. You definitely don’t want to feed that to browsers that don’t support text-shadow: white text on white backgroud *IS* illegible.

:nth-of-type(1n) basically means “every”. So, it’s the same as not including it in terms of what selectors will be matched. Do note that you are adding a pseudo-class, so you are adding specificity. This pseudo-class is not understood by browsers that don’t support CSS3 selectors which is the same as those that don’t understand CSS3 properties and CSS3 property values.

For example, I have a row of images with captions going across a page. To make it more interesting, I made the pictures look like Polaroids. It looks fine plain, but why not add some fun CSS3.

/* understood by all browser */
.slides li {
	line-height:1.4;
	float:left; 
	width: 188px;
}
.slides img {
        display:block;
}
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-moz-transform:rotate(-5deg);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-transform:rotate(-5deg);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	transform:rotate(-5deg);
	background:none repeat scroll 0 0 #FFFFFF;
	color:#333333;
	display:inline;
	float:left;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
	text-align:center;
	text-decoration:none;
	width:auto;
}
.slides li:nth-of-type(even){
    -moz-transform:rotate(7deg);
	-webkit-transform:rotate(7deg);
	transform:rotate(7deg);
}
.slides li:nth-of-type(3n){
    -moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

The images look fine in IE, but look cool in FF3.6

Do make sure that the new CSS3 property is generally supported before using this hack. This is a general filter for generally supported CSS3. It works for multiple background images, text-shadow, border radius, and other well supported CSS3 properties and values. Don’t use this for CSS3 transitions, columns and animations until those are better supported in modern browsers. I have grids of browser support for all sorts of CSS3 properties, so take a look at those before relying on this filter.

HTML5: <section> v. <article>

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.

-Estelle

CSS Color Formats and HSL

Prior to CSS3, we had 3 types of color formats: there was the hexadecimal format (and shorthand hex format), rgb() format and named colors. CSS3 adds support for HSL, HSLA and RGBA. Here are the formats we have in CSS3:

Color Syntax Example Definition
#RRGGBB #FF00FF hexadecimal format (tutorial)
#RGB #F0F shorthand hexadecimal format
rgb(r,g,b) rgb(255, 0, 255) red, green blue (tutorial)
hsl(h,s,l) hsl(300, 100%, 50%) hue, saturation, lightness
cmyk(c,m,y,k) cmyk(29%, 55%, 0, 0) Cyan, Magenta, Yellow, Black
hsla(h,s,l,a) hsla(300, 100%, 50%, 1) hue, saturation, lightness, opacity
rgba(r,g,b) rgba(255, 0, 255, 1) red, green, blue, opacity
named colors fuchsia see color name tutorial
transparent transparent no color (transparent)
currentColor currentColor color of the text for that element

In part I we discussed #RRGGBB, #RGB, rgb(), rgba() and touched upon HSL and HSLA colors. In this section we go further into HSLA, and discuss the new keyterm currentColor, and the color type that didn’t make it into the CSS3 specifications: flavor.

Hue, Saturation and Lightness

HSL stands for hue, saturation and lightness. The hue value in included in degrees from 0 to 359, with percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation.

Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of gray from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between. Each table below represents one hue. Twelve equally spaced colors (i.e.
at 30° intervals) have been chosen from the color circle: red,
yellow, green, cyan, blue, magenta, with all the intermediate colors (the
last is the color between magenta and red).

The X axis of each table represents the saturation (100%, 75%, 50%,
25%).

The Y axis represents the lightness. The higher the percent, the lighter the color is, the lower the percent, the darker, with 50% being ‘normal’. 100% lightness has been omitted from the tables below, since it’s always white, no matter the hue. Similarly, 0% lightness has been omitted, since it always renders black, no matter the hue.

0° (Red)

Saturation
100%

75%

50%

25%

88

hsl(0, 100%, 88%)
75

hsl(0, 75%, 75%)
63 hsl(0, 100%, 63%) hsl(0, 75%, 63%) hsl(0, 50%, 63%) hsl(0, 25%, 63%)
50 hsl(0, 100%, 50%) hsl(0, 75%, 50%) hsl(0, 50%, 50%) hsl(0, 25%, 50%)
38

25
13 hsl(60, 100%, 13%) hsl(60, 75%, 13%) hsl(60, 50%, 13%) hsl(60, 25%, 13%)
30° (Orange)

Saturation
100%

75%

50%

25%

88

hsl(30, 100%, 88%) hsl(30, 75%, 88%) hsl(30, 50%, 88%) hsl(30, 25%, 88%)
75

hsl(30, 100%, 75%) hsl(30, 75%, 75%) hsl(30, 50%, 75%) hsl(30, 25%, 75%)
63 hsl(30, 100%, 63%)
50 hsl(30, 100%, 50%)
38

hsl(30, 100%, 38%)
25 hsl(30, 100%, 25%)
13 hsl(30, 100%, 13%) hsl(30, 25%, 13%)
60° (Yellow)

Saturation
100%

75%

50%

25%

88

hsl(60, 100%, 88%) hsl(60, 75%, 88%) hsl(60, 50%, 88%) hsl(60, 25%, 88%)
75

hsl(60, 100%, 75%) hsl(60, 75%, 75%) hsl(60, 50%, 75%) hsl(60, 25%, 75%)
63 hsl(60, 100%, 63%) hsl(60, 75%, 63%) hsl(60, 50%, 63%) hsl(60, 25%, 63%)
50 hsl(60, 100%, 50%) hsl(60, 75%, 50%) hsl(60, 50%, 50%) hsl(60, 25%, 50%)
38

hsl(60, 100%, 38%) hsl(60, 75%, 38%) hsl(60, 50%, 38%) hsl(60, 25%, 38%)
25 hsl(60, 100%, 25%) hsl(60, 75%, 25%) hsl(60, 50%, 25%) hsl(60, 25%, 25%)
13 hsl(60, 100%, 13%) hsl(60, 75%, 13%) hsl(60, 50%, 13%) hsl(60, 25%, 13%)
90° Yellow-Green
Saturation
100% 75% 50% 25%
88 hsl(90, 100%, 88%)
75 hsl(90, 25%, 75%)
63 hsl(90, 100%, 63%) hsl(90, 75%, 63%) hsl(90, 50%, 63%) hsl(90, 25%, 63%)
50 hsl(90, 100%, 50%) hsl(90, 25%, 50%)
38 hsl(90, 25%, 38%)
25 hsl(90, 10%, 25%) hsl(90, 75%, 25%) hsl(90, 50%, 25%) hsl(90, 25%, 25%)
13 hsl(90, 25%, 13%)
120° (Green)

Saturation
100%

75%

50%

25%

88

hsl(120, 100%, 88%) hsl(120, 25%, 88%)
75 hsl(120, 25%, 75%)
63 hsl(120, 25%, 63%)
50 hsl(120, 100%, 50%) hsl(120, 25%, 50%)
38 hsl(120, 100%, 38%) hsl(120, 75%, 38%) hsl(120, 50%, 38%) hsl(120, 25%, 38%)
25 hsl(120, 25%, 25%)
13 hsl(120, 25%, 13%)
150° Green-Cyan

Saturation
100% 75% 50% 25%
88

hsl(150, 100%, 88%) hsl(150, 75%, 88%) hsl(150, 50%, 88%) hsl(150, 25%, 88%)
75 hsl(150, 100%, 75%) hsl(150, 75%, 75%) hsl(150, 50%, 75%) hsl(150, 25%, 75%)
63 hsl(150, 100%, 63%) hsl(150, 75%, 63%) hsl(150, 50%, 63%) hsl(150, 25%, 63%)
50 hsl(150, 100%, 50%) hsl(150, 75%, 50%) hsl(150, 50%, 50%) hsl(150, 25%, 50%)
38 hsl(150, 100%, 38%) hsl(150, 75%, 38%) hsl(150, 50%, 38%) hsl(150, 25%, 38%)
25 hsl(150, 100%, 25%) hsl(150, 75%, 25%) hsl(150, 50%, 25%) hsl(150, 25%, 25%)
13 hsl(150, 100%, 13%) hsl(150, 75%, 13%) hsl(150, 50%, 13%) hsl(150, 25%, 13%)
180° (Cyan)

Saturation
100% 75% 50% 25%
88

hsl(180, 100%, 88%) hsl(180, 50%, 88%) hsl(180, 25%, 88%)
75 hsl(180, 75%, 75%) hsl(180, 25%, 75%)
63 hsl(180, 100%, 63%) hsl(180, 50%, 63%) hsl(180, 25%, 63%)
50 hsl(180, 100%, 50%) hsl(180, 75%, 50%) hsl(180, 25%, 50%)
38 hsl(180, 100%, 38%) hsl(180, 50%, 38%) hsl(180, 25%, 38%)
25 hsl(180, 75%, 25%) hsl(180, 25%, 25%)
13 hsl(180, 100%, 13%) hsl(180, 50%, 13%) hsl(180, 25%, 13%)
210° Cyan-Blue

Saturation
100% 75% 50% 25%
88

hsl(210, 100%, 88%) hsl(210, 75%, 88%) hsl(210, 50%, 88%) hsl(210, 25%, 88%)
75 hsl(210, 75%, 75%) hsl(210, 25%, 75%)
63 hsl(210, 100%, 63%) hsl(210, 50%, 63%) hsl(210, 25%, 63%)
50 hsl(210, 100%, 50%) hsl(210, 75%, 50%) hsl(210, 25%, 50%)
38 hsl(210, 100%, 38%) hsl(210, 50%, 38%) hsl(210, 25%, 38%)
25 hsl(210, 75%, 25%) hsl(210, 25%, 25%)
13 hsl(210, 100%, 13%) hsl(210, 50%, 13%) hsl(210, 25%, 13%)
240° (Blue)

Saturation
100% 75% 50% 25%
88

hsl(240, 100%, 88%) hsl(240, 25%, 88%)
75 hsl(240, 100%, 75%) hsl(240, 75%, 75%) hsl(240, 50%, 75%) hsl(240, 25%, 75%)
63 hsl(240, 25%, 63%)
50 hsl(240, 100%, 50%) hsl(240, 25%, 50%)
38 hsl(240, 100%, 38%) hsl(240, 75%, 38%) hsl(240, 50%, 38%) hsl(240, 25%, 38%)
25 hsl(240, 25%, 25%)
13 hsl(240, 25%, 13%)
270° Blue-Magenta

Saturation
100% 75% 50% 25%
88

hsl(270, 100%, 88%) hsl(270, 75%, 88%) hsl(270, 50%, 88%) hsl(270, 25%, 88%)
75 hsl(270, 25%, 75%)
63 hsl(270, 25%, 63%)
50 hsl(270, 100%, 50%) hsl(270, 25%, 50%)
38 hsl(270, 25%, 38%)
25 hsl(270, 25%, 25%)
13 hsl(270, 100%, 13%) hsl(270, 75%, 13%) hsl(270, 50%, 13%) hsl(270, 25%, 13%)
300° (Magenta)

Saturation
100% 75% 50% 25%
88

hsl(300, 100%, 88%) hsl(300, 75%, 88%) hsl(300, 50%, 88%) hsl(300, 25%, 88%)
75 hsl(300, 100%, 75%) hsl(300, 75%, 75%) hsl(300, 50%, 75%) hsl(300, 25%, 75%)
63 hsl(300, 100%, 63%) hsl(300, 75%, 63%) hsl(300, 50%, 63%) hsl(300, 25%, 63%)
50 hsl(300, 100%, 50%) hsl(300, 75%, 50%) hsl(300, 50%, 50%) hsl(300, 25%, 50%)
38 hsl(300, 100%, 38%) hsl(300, 75%, 38%) hsl(300, 50%, 38%) hsl(300, 25%, 38%)
25 hsl(300, 100%, 25%) hsl(300, 75%, 25%) hsl(300, 50%, 25%) hsl(300, 25%, 25%)
13 hsl(300, 100%, 13%) hsl(300, 75%, 13%) hsl(300, 50%, 13%) hsl(300, 25%, 13%)
330° Magenta-Red

Saturation
100% 75% 50% 25%
88

hsl(330, 100%, 88%) hsl(330, 25%, 88%)
75 hsl(330, 25%, 75%)
63 hsl(330, 25%, 63%)
50 hsl(330, 100%, 50%) hsl(330, 25%, 50%)
38 hsl(330, 100%, 38%) hsl(330, 75%, 38%) hsl(330, 50%, 38%) hsl(330, 25%, 38%)
25 hsl(330, 100%, 25%) hsl(330, 75%, 25%) hsl(330, 50%, 25%) hsl(330, 25%, 25%)
13 hsl(330, 25%, 13%)

There is a grid with many more colors at Standardista.com if you want to see how more hsl combinations render and have a browser that supports HSL rendering. The grid above is coded with hexadecimal colors, since internet explorer does not understand HSL colors. The grids at http://standardista.com/sandbox/hsl.php require Opera, Safari, Firefox, Chrome or IE9 to view.

HSLA

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). The syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alpha value from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

CSS3 Implementable Features

There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation. Mostly, there are links to my sandboxing of those features.

If it’s not successfully embedded, you can see it here css3 implementable features

Content covered in the PPT presentaion

I do not have a podcast, but here is a summary of what was presented in case you missed it, or incase the flash above isn’t enough

CSS3: Si se puede

CSS2.1

has been around since 1999, but only fully supported in IE8. We obviously didn’t wait to implement CSS2 until all the browsers fully supported it. CSS3, while not yet finalized, has a lot of features that are supported in many browsers. Like CSS 2.1, there is no reason not to use these features just because not all browsers support all the features equally: if that were our logic, we would still be on CSS1.

Your site does not need to be identical in all browsers

In developing with CSS3 think about graceful degradation. Not all browsers need to implement your site identically. Yes, your site should look good in all browsers, but no, if your body is a few pixels different in one browser to the next, who cares? You’re the only one who is going to be looking at your website in multiple browsers at the same time. 99.99% of the site user base (that number is pulled out of my ass) have one favorite browser on their desktop, and that’s what they’ll use to look at your site.

Twitter uses rounded corners for non IE browsers only

Example: Twitter uses native rounded corners for supporting browsers.

IE does not support rounded corners. Twitter believes that rounded corners make their site look nicer, but lack of them doesn’t break the site. So, the experience is a little different in the IE’s than in modern browsers. But if I hadn’t shown you this example, you may never have known!

Twitter would have had a difficult time creating rounded corners with images since the background color of the right hand nav bar on twitter is user selectable. They could have created rounded corners on the left and square angles on the right, but likely going all square for IE looked better.

For the rest of the examples, I’ll be explaining how to make CSS3 work in IE. I just want to spread the gospel that it doesn’t have to look identical anyway.

Features that are implementable and discussed below:

  • CSS3 Selectors
  • Text Shadow (2.0).
  • Box Shadow (prefixed)
  • Rounded Corners (prefixed).
  • @font-face
  • Alpha Transparency.
  • Opacity.
  • Rotation.

Features that are implementable, but not discussed in this talk

  • Multi-column layout
  • Video (HTML5)
  • Animations
  • Transitions
  • Border-image
  • Multiple background images
  • Linear Gradients

CSS3 Selectors

If you look at the grid of CSS3 Selectors and Browser Support, you’ll note that, at this point, only the three IEs don’t understand CSS3 selectors. That doesn’t mean you can’t use them.

To see all the selectors, and what you can and cant use, check out CSS3 Selectors and Browser Support

Alpha Tranparency

color: rgba(0,0,0,0.4);
color: hsla(300, 100%, 50%, 0.4);

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, stading for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation. Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of grey from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between.

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). the syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alphavalue from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

Opacity

Opacity likely doesn’t have the impact you intended. The element made less that fully opaque is not the only element impacted. All the element with a z-index higher than the one made opaque inherit the same level of transparency. Generally, you’ll want to use alpha transparency on a background rather than opacity.

  .halfthere {
       opacity: 0.4;
       filter: alpha(opacity=0.4)
   }

Opacity Example

Rounded Corners

.rounded {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
   }

The order is topleft, topright, bottomright, bottomleft.

Safari has some issues with rounded corners.

IE6, IE7 and IE8 don’t support native CSS rounded corners, and never will. For those browsers, if I really don’t want my page to look different in the IEs than in modern browsers, I add the rounded corners with a little bit of JavaScript and CSS magic, and a single background image:

$('.rounded').append('<b class="tr"></b><b class="tl"></b><b class="br"></b> <b class="bl"></b>');

Text Shadow

.shadowed {
  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  }

In the above, the order of values is

leftOffset rightOffset blur Color

If you’re going to use text shadow, which is not supported in IE, this is a good time to use the Hack for CSS3 Supporting Browsers. As I mention in that article, you don’t want to end up with white text on white background.

Rotation

Transforms are supported in all browsers, just with different syntax.

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Note that for IE, the values are 1=90, 2=180, 3=270. Check out my

sandbox, or just look at the header of this blog.

I’ve been told that IE supports more than just the 90degree angles, but haven’t tested yet. The syntax is:

     filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17); /* for IE6 and IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17)"; /* for IE8 */

and make sure that the element hasLayout.

Gradients

I didn’t actually go over gradients in my presentation, but linear gradients are  supported in one way or another in all browsers except opera, so you can use them. Radial gradients …. not yet.

background-image: -moz-linear-gradient(top, #56abf3, #ffffff, #ffffff, #ffffff); /* FF3.6+ */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #56abf3),color-stop(25%, #ffffff));

IE has

Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FF56abf3, endColorstr=#FFFFFFFF)

There are two types of Gradients – 0 gives a gradient running from top to bottom. 1 from left to right.
startColorstr —  The start color of the gradient. The first 2 characters in the 8 digit HEX color number are the Alpha values ( 00 being transparent,  FF is opaque). Default is blue
endColorstr= —   The color of the bottom or right  end of the gradient, depending on what GradientType you use. The default color is black  #FF000000 if omitted.

There are no colorstops in IE as far as i can tell

Introducting CSS3 Colors

Defining colors in red, green and blue is supported by CSS3 in several ways.

Hexadecimal Values

You can declare the hexadecimal value of your red, green and blue with hexadecimal values ranging from 0 to 255 in the format of 00 to FF, put the three together preceded by a hash (#), and that’s the color. For example, #FFFFFF for complete saturation of red, green and blue comes out white, #000000 for lack of any color comes out black. A mix and match of hexadecimal values from 0-255 using any two characters A-F0-9, case insensitive, for the red green and blue values, combined together in the order of red, green and blue can create millions of colors.

Did I mention case-insensitivity? It doesn’t matter if you use #FFCC00 or #ffcc00 – the value syntax is case insensitive.

The RGB hexadecimal notation also has a shorthand, of #RGB, where the R, G, and B are a single character, A-F0-9, case insensitive, put together, preceded by a hash mark. Identical to the long format, the browser expands the RGB value, such as #369 to #336699.

All browsers support all of the hexadecimal values, both short hand and long hand. There used to be a discussion of web-safe colors. Web face colors has been a non-issue, even for hand held devices. It is safe to use any color combination (may not be pretty or legible, but it will render).

rgb() syntax

Instead of using the hexadecimal values for RGB, you can use the base 10 value for your mix of red, green and blue, or even percentages. Instead of preceding your color with a hash tag, the syntax is the keyterm ‘rgb’ follow by your comma-separated values in parenthesis.

#FFFFFF = #FFF = rgb(255, 255, 255) = rgb(100%, 100%, 100%).

All browsers support all of the RGB color combinations in general. Some browsers allow the mixing of rgb() numbers with percents, but the specifications clearly state that this is not expected behavior, and not all browsers support it, so avoid mixing value types.

What’s new?

New in CSS3 is RGBA. RGBA is similar to RGB, but with an added A for AlphaTransparency. The rgb() specifications were extended in CSS3 to include ‘alpha’ to allow specification of the opacity of a color. The first three values are still red, green, blue. Thee fourth value is the opacity level, 1 being fully opaque, 0 being fully transparent, and any float being everything in-between.

rgb(255, 255, 255) = rgb(100%, 100%, 100%) = rgba(255, 255, 255, 1)

The above are all equal to white, since 1 means fully opaque. But don’t get confused: rgba(0,0,0,0) is transparent, not black, because the level of opacity is none.

Unlike RGB, there is no hexadecimal notation for RGBA. Unlike RGB, the IEs don’t understand RGBA. IE8 correctly ignores properties with rgba() in the value. IE6 and IE7 overwrite values, without understanding them, and generally inherit the default value when confused.

RGBA is going to be extremely useful as drop shadows on boxes and text become better supported. While it is very common to see text-shadow: 3px 3px 3px #CCCCCC; or text-shadow: 3px 3px 3px #000000;— including a gray or black shadow, the effect looks much better if you write text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); While the color #CCCCCC and rgba(0,0,0,0.4) look similar when solid over a white background, when included as a shadow, the #CCCCCC starts off as a solid grey, which looks a little off. The RGBA color is always translucent, which looks MUCH better.

Hue, Saturation and Lightness

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, standing for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation.

Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of gray from white to #808080 to black depending on the lightness.

Up Next

In part 2, we’ll cover hsl and hsla in greater depth.

Making IE recognize HTML5 elements

IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->

Printing HTML5 in Internet Explorer: where HTML5 is not supported

The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.

Introducing @font-face

@font-face, a feature that has been talked about since 1998, is finally here! Nope, it’s not a twitter ID. @font-face is a component of CSS3 that allows the designer/developer of a web site to include fonts that are not installed on the user’s computer.

Web site design has been hampered by the limited number of fonts available to most clients. Designers have been using image replacement and methods such as sIFR and Cufón to make up for limited choices in typography. If designers want to ensure their designs look almost identical for all users, they’re limited to the few font sources that are known to be installed on almost all computers.

Wait. Let’s make that sentence past tense. “If designers wanted to ensure their designs looked almost identical for all users, they were limited to the few font sources that were known to be installed on almost all computers.” There is now a solution! We are no longer limited to Arial, Helvetica, Georgia, sans-serif!

@font-face enables the developer/designer to use any (with legal limits) font family on a web site by downloading the font file onto to client computer, and then declaring it as you would any font-family.

@font-face has been supported to some extent for years. It was in the CSS2 specifications. Microsoft implemented @font-face in Internet Explorer 4, but, as is typical of Microsoft, used a proprietary font format format (EOT). Due to copyright and legal issues, @font-face was dropped in the CSS2.1 specification. But, now it’s back. And it’s supported. It is expected to be in the W3C CSS3 specification when that finally gets finalized. Assuming that it will be in the CSS3 specification, all other browsers (Opera, Webkit, Mozilla) support @font-face with an implementation that supports formats like TTF and OTF. IE continues to support only the EOT format. Webkit for mobile (think ‘iPhone’) supports only SVG.

There are two steps to using the font of your choosing in your CSS file: 1) you must first declare your intention to import a font by using the @font-family syntax, telling the browser how you are going to reference the font (what name you will use to refer to the font), where to download the file, and what format the font is in. 2) You then have to include the font name in a font-family declaration, just as you would include Helvetica, Georgia or "Times New Roman".

The syntax for the @font-face implementation is:

@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */
}

The source takes both the file name source and the format type. The source can take several formats. In addition, you can declare more than one source. If the browser doesn’t find the first source, it will go for the next source, and so on, until it either finds a source, or it runs out of sources. As withe all CSS file references, the URL should be a relative or absolute path. If relative, it should be relative to the CSS file.

Example formats include:

@face-font {
     font-family: 'My Font Name'
     src: url('../fonts/makeUpSomethingElse.eot');
     src: local('Edwardian Script ITC'),
          url('../fonts/EdwrdScrpItc') format('opentype'),
          url('../fonts/GaelicWimsy') format('svg'),
          url(data:font/otf;base64,T1RUTMillIONsOfLETteRsInaROW12fAtGrrYUUUUBx);
}

It is not enough to declare the creation of the font. You have to use it. Once you’ve downloaded the font and assigned it a font-family name, you can use that name as you would any other font name as the value of the font-family property

.mySelector {
    font-family: 'My Font Name', Arial, Helvetica, sans-serif;
}

Hurdles to consider when considering implementing @font-face

Yes, @font-face is finally supported in all browsers. But implementation isn’t so simple. There are several hurdles to consider and overcome to ensure that your implementation works, looks good, provides a good user experience and is all legal:

  1. Different formats for different rendering engines and devices

    While all browsers support @font-face to some extent, we still have browser support and compatibility issues to contend with. Most modern browsers support both the TTF and the OTF format. Firefox 3.6+ supports WOFF, a web-only font format. As mentioned earlier, Safari for iPhone only accepts the SVG format. And, we’re stuck with IE only accepting the EOT file format. There are also some rendering differences in those various formats.

  2. Huge file sizes

    Though not exactly a hurdle to implementation, font file sizes are a concern to keep in mind when it comes to user experience. Font files can be huge. Some formats are way larger than others. An embedded font means you have to download to use. A source with simple lines, like Arial or Helvetica, may weigh about 16 – 20kB. More complex fonts, with complex strokes, that you’re more likely to want to include, may be over 200kB in file weight. And remember that you may need to download the bold, italic and bold-italic versions of your font

     

  3. Delay in rendering

    Depending on the file size of your font file, and whether the font is already cached in the client browser, embedding fonts can cause the browser to rewrite the page. In our above code example, the page may render with Arial, Helvetica or other sans-serif font, then redraw the page when the font file is successfully downloaded.

    Embedded fonts do not always show immediately . The delay in rendering depends on the browser and whether the fonts have been loaded in cache or not. As such, text with embedded fonts as the font family may take a moment to display or display first with a system font, as the embedded font is loaded.

  4. Legal implications of font usage

    To allow the downloading of a font, you must have a web-font license for the font! It’s not enough that you purchased a font and have a right to use it for personal use with any application on your own computer, including production of print material for distribution. You have to have a license or other permission to distribute the font file itself, since, in effect, this is what you are doing with @font-face. Check the Web site you are downloading or purchasing the font from, or the documentation that comes with the font. Only embed fonts that have the appropriate licenses.

Not a hurdle, but something to be aware of:

For security reasons, some browsers (like Safari) ask the users if they are alright with downloading fonts from the internet – so that is a user experience consideration as well.

Tips for @Font-Face

  1. Fallbacks for browsers that don’t support @font-face: Depending on what font you choose, your default fonts may not look right at that font-size. Using Modernizr can be helpful in controlling the appearance when @font-face is not supported. For example, if you use an expanded font, such as Impact, or a very condensed font, fallback fonts such as Arial or Verdana can break your layout. With Mondernizr you can tell the browser to user larger or smaller font-sized if the browser doesn’t support @font-face, or even tell the browser to user sIFR, Cufon or any image replacement method for non supporting browsers only.

    .fontface  h1 {
      font: 16px/24px 'My Font Name', Arial, Helvetica, sans-serif;
    }
    .no-fontface  h1 {/*
      Rules for sIFR/Cufon or for an image replacement method of your choice, or a better font size for Arial and Helvetica.
    */}
    .no-fontface  h1#myID {
    	background-image: url(imagereplacement);
    }
    
  2. Include default fonts in every font declaration: Do not forget to include default fonts in your font-family declaration. Puts the declared font-family name of your downloaded @font-face embedded source, and follow it with the default alternatives (arial, helvetica, sans-serif).

  3. Include font variants only if needed, but do include them if used: Check which variants of the font you need for your site. Include the italic, bold and italic bold font if you are going to use it. But don’t included more than you have to! You don’t want the user to have to wait for the download of a font if that font is going to be unused.
  4. Check out the following resources:

Clearing Floats

The most widely used method of clearing floats uses the addition of an element, generally a <br class="clearfix" />, to clear both left and right. While it is the most ubiquitous method, even included in the Adobe Dreamweaver CS3 templates.

.brclear { 
     clear:both; 
     height:0; 
     margin:0;
     font-size: 1px;
     line-height: 0;
}

Listing 1: CSS from the Dreamweaver template CSS.

These fixes use a break with the classes of .brclear and .clearfix respectively in the markup as a clearing element. This fix works great: the CSS provided ensures that the break does not disturb the layout by taking up any space on the page. Yes, it works great, but it has two major problems:

  1. The addition of non-semantic, purely presentational elements to the HTML
  2. The inclusion of a <br> to your code inhibits you from not breaking should your design change.

While it’s not "illegal" to include non-semantic code, my argument has always been "<br> is only for poetry," and I avoid using it other than to intentionally break a paragraph into two lines for semantic reasons. There are several ways of clearing a float *without* adding a <br> to clear your float. In this tutorial, we’ll go over these four.

  1. Clearing the next element
  2. Floating the parent container
  3. overflow: hidden
  4. Generated content

Because of cross browser issues, and for general markup reasons, different methods are more appropriate for certain situations. We will cover several issues, but not all. Think of this as a guide, not a rule book, for clearing floats.

Clearing the next element

The easiest way to clear a float is to add a clear to the next element in your mark up.

<div class="floatLeft">content...</div>
<div class="floatLeft">content...</div>
<div class="floatLeft clearBoth">content ...</div>
 
.floatLeft {
     width: 33%;
     float: left;
}
.clearBoth {
     clear: both;
}

Listing 2: Clearing via the next element in the page.

This is the simplest method, and great for simple float clearing. In listing 1, all the div’s are one-third of the width of the parent element. We clear on the third div. Had we not cleared the third div, the three divs would have all been on one line, taking up only 99% of the parent element’s width.

Note that this is just an example. The div with the clearBoth class could have been any element coming after the last floated element, and could have had any class name, as long as the class had the property/value of clear: both; in your CSS. I used these class names to make it more obvious what we were trying to achieve. It is recommended to *not* use class names based on appearance, and to opt for class names based on function.

This method works most of the time, and is an easy solution that keeps you from adding a bunch of non-semantic elements simply to clear floats. However, it doesn’t work for everything you may want to do. When you float an element, and then clear an element with another floated element, as we did in Listing 2, the cleared element will drop to the next line, but the parent element will not grow to encompass your floated element unless you also float the parent (more on floating the parent below). If your clearing element is not floated, this method does work.

And, of course, there are bugs with both floating and clearing floats in IE6 and IE7. Bugs include a bug in IE7 where a non-floated element with a width will overlap a floated element within a non floated element that has a height declared; a bug in IE7 where the margin-top of the non-floated clearing element will be added to the margin bottom of the element it is clearing; and a bug in IE6 where the floated element will flash on and off the screen.

Although floating the next element may not work for every float you want to clear — especially if your float is the last element on the page, or if it causes one of the numerous bugs — it works in many situations, and is simple to implement. In practice, I tend to add {clear: both;} to main sections of my page, such as on my #topnavigation, #content and #footer divs.

Floating the parent container

To clear a float, you can float the parent element, as long as the parent has a total width equal to 100% of the width of the page or it’s own parent. The floated element will be at least as tall as it’s tallest floated child. And, since it has a width of 100%, the next element on the page will automatically be cleared.

To understand the importance of the W3C rule that a floated element is at least as tall as the tallest floated element contained within it, you need to understand the basic of floats.

A float is an element that is laid out according to the normal flow, then taken out of the flow and shifted to the left (if floated left) or right (if floated right) as far as possible. When you float an inline element it becomes a block. Content can flow down the right side of a left-floated element and down the left side of a right-floated element, unless prohibited from doing so by the “clear” property, or because the width of a float is 100%. Floated elements will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float. The top of a floated element will be at the same level as the float next to it, if there is enough room, or at the bottom of the preceding block if the element was originally inline. If there isn’t enough room on the current line for the floated box, it will move down, line by line, until a line has room for the float. (If two floats don’t appear to start on the same line, it is usually because the padding is different.)

Because a floated element is no longer in the normal flow of the document, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. If a parent or containing element only contains floats, the parent element will have no height, as if it were empty. … A float can overlap other boxes in the normal flow. [If you float the parent] give it a width, or it will shrink to be as narrow as possible.