Colors In CSS3

25
Colors in CSS3 A presentation by Lea Verou

description

The presentation for my yesterday's session at MediaCampAthens.

Transcript of Colors In CSS3

Page 1: Colors In CSS3

Colors in CSS3A presentation by Lea Verou

Page 2: Colors In CSS3

Color formats in CSS2

• Hex format – #RRGGBB• Shorthand hex format - #RGB• rgb() format – rgb(red, green, blue)• Named colors – white, black, beige etc

Page 3: Colors In CSS3

New color formats in CSS3

• HSL – hsl(hue, saturation, lightness)• CMYK – cmyk(cyan, magenta, yellow, black)• HSLA – hsl(hue, saturation, lightness, alpha)• RGBA – rgba(red, green, blue, alpha)

Page 4: Colors In CSS3

HSL

• HSL stands for Hue, Saturation, Lightness.• A format that is easier for humans to

understand and manipulate. • HSL makes it much easier to create color

palettes: You just use a color picker for the basic colors of the palette and not for the lighter/darker variants.

Page 5: Colors In CSS3

CMYK

• CMYK stands for Cyan, Magenta, Yellow, blacK• Easier for most people to understand and manipulate. • Easier to produce good-looking colors• Allows us to define precisely how our colors will get

printed• Graphic designers are already accustomed to it so it

will be easier for them to switch to Web design• Smaller color gamut than RGB• Not supported yet by any browser

Page 6: Colors In CSS3

RGBA and HSLA

• RGBA and HSLA allow for a fourth parameter – Alpha.

• Alpha defines the transparency of the color – where 1 is fully opaque and 0 is fully transparent.

• This brings a revolution in web design that many designers are still unaware of.

Page 7: Colors In CSS3

Isn’t opacity enough?

• No! Opacity is very useful but it’s not enough• Opacity allows us to make the whole

container semi-transparent, including it's contents

• RGBA/HSLA allow us to make only the border/background/text color/etc semi transparent which opens up great possibilities in web design

Page 8: Colors In CSS3

Isn’t opacity enough? Example

Page 9: Colors In CSS3

Browser support for RGBA/HSLA/HSL

• Mozilla Firefox 3+• Opera 10+ (still in Alpha)• Apple Safari 3+• Google Chrome

Page 10: Colors In CSS3

RGBA backgrounds: workarounds

• RGBA backgrounds are the easiest ones for compatibility workarounds.

• They are based on the fact that if a browser doesn’t understand RGBA, it ignores the declaration that contains RGBA values completely.

• They are used like this:/* Workarounds here */background: rgba(255,0,80,0.5);

• Important! The declaration that contains the RGBA value should always come after the workarounds.

Page 11: Colors In CSS3

RGBA backgrounds: workarounds

• IE gradient filter• 1x1 png images:– As external files– Embedded in the CSS via Data URIs

Page 12: Colors In CSS3

Workaround for IE: Gradient filter

• IE supports a proprietary “extended hex” format in the parameters of some of it’s filters.

• In that format the Alpha parameter is converted to the range 00-FF and concatenated in front of a normal hex value, which results to #AARRGGBB

• We can use the gradient filter to simulate RGBA backgrounds for IE, which looks like this:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);That's equivalent to: background:rgba(0,0,0,0.8);

Page 13: Colors In CSS3

Problems with the filter workaround

• Filters make the text aliased:

Page 14: Colors In CSS3

Problems with the filter workaround

Filters are lengthy and add lots of non-standard clutter in

our CSS:-ms-filter:"progid:DXImageTransform.Microsoft.grad

ient(startColorstr=#CC000000,

endColorstr=#CC000000)"; /* For IE8 beta */

filter:progid:DXImageTransform.Microsoft.gradient(

startColorstr=#CC000000, endColorstr=#CC000000);

zoom:1; /* To give the element “layout” */

O_o!!

Page 15: Colors In CSS3

Problems with the filter

workaround

Doesn't play along well with other workarounds, since it doesn't modify the background of the element.

Page 16: Colors In CSS3

More problems with the filter workaround

• Filters are slow• Filters are only for IE. What about Firefox 2-,

Opera 9.6-?• To use that method, RGBA values need to be

converted to hex values. Too much of a hassle.

Page 17: Colors In CSS3

PNGs via Data URIs

• Data URIs allow us to embed a file inside our CSS

• They look like this: background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);

Page 18: Colors In CSS3

Disadvantages of Data URIs

• IE7- doesn’t support Data URIs, so if we use them, the filter method and all it’s disadvantages should be used as well in order to support IE7-.

• Not easily changeable, you will need a converter of some sort to change the color even a little bit.

• Clutter in our CSS file. Lots of clutter!• The image itself cannot be cached.

Page 19: Colors In CSS3

Advantages of Data URIs

• Less external http requests = faster website• The png image loads instantly, since it’s

embedded in the CSS file. Not a single glimpse of containers without backgrounds!

Page 20: Colors In CSS3

External png images

• You don’t need to create them yourself, let PHP do the hard work!

• You can find a script of mine that does exactly that here: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

• It’s used like this:background: url(rgba.php?r=255&g=0&b=80&a=50);orbackground: url(rgba.php?name=white&a=50);

Page 21: Colors In CSS3

RGBA/HSLA in other CSS properties

• RGBA/HSLA is not only useful for backgrounds! Backgrounds are just the easiest to workaround and the most frequently needed to.

• For solid borders, you can use 2 containers with an appropriate padding and background.

• For text color, in most cases opacity (or the alpha filter for IE) is sufficient.

Page 22: Colors In CSS3

Detect RGBA via JavaScript

• Try to assign an RGBA value to a CSS property that accepts color values (e.g. color, background-color, border-color etc) on any element .

• If the browser is not RGBA capable, it will do nothing, and may also throw an error (IE)

• Otherwise the value will be applied

Page 23: Colors In CSS3

RGBA detection: code

function supportsRGBA() {

var elem = document.getElementsByTagName('script')[0],

prevColor = elem.style.color;

try {

elem.style.color = 'rgba(1,5,13,0.44)';

} catch(e) {}

var result = elem.style.color != prevColor;

elem.style.color = prevColor;

return result;

}

Page 24: Colors In CSS3

RGBA detection: improvements

• Performance: Cache the result• Accuracy: What happens if the element

already has that rgba color?• Completeness: We can detect HSL, HSLA and

CMYK in the exact same way.

Page 25: Colors In CSS3

Thank you!

You can find me at:• http://leaverou.me• http://twitter.com/LeaVerou• [email protected]