rgbapng - Compass plugin
rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
gem install compass-rgbapng
Using rgbapng with your Compass project
To use rgbapng with your project, require the plugin from your Compass configuration:
And then import the mixins to your SASS/SCSS files:
There are two customzable global variables. This first
$rgbapng_path defines the path to which your PNG images will be saved. This defaults to
rgbapng inside your Compass images directory. The second
$rgbapng_px_size defines the pixel square size of the generated png. This defaults to a 5x5 square.
$rgbapng_path: 'my_pngs'; $rgbapng_px_size: 8;
There are two mixins available to you.
rgba-background($color, [$path, $pixel])
Sets the background property to use the RGBA value, falling back to the compiled PNG.
background: url('/images/rgbapng/000000bf.png?1282127952'); background: rgba(0, 0, 0, 0.75);
Sets the background property to use the RGBA value, falling back to a base64 encoded image data.
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNh2A8AAM4AxOSyusMAAAAASUVORK5CYII='); background: rgba(0, 0, 0, 0.75);
There are two
Sass::Script functions which can be used in your SASS:
# Creates the single pixel PNG image # Returns a String of the image path and filename png_pixelate(color, [dir]) # Returns a String of the base64 encoded image data png_base64(color)
* Cross-browser? Really?
OK, caveat time. When I say "cross-browser", what I really mean is all browsers that either natively support RGBA or support alpha-transparent PNGs. What I don't mean, is IE6. If alpha-transparency in IE6 is important to you, here are some suggestions:
- Don't use this plugin at all and instead create your own mixin using Microsoft's proprietary filters - just make sure you wash your hands afterwards!
- Be a rebel and either forget about IE6 or serve it up a universal stylesheet.
The choice is yours.
Credit where it's due
- The CSS technique used was initially described by Lea Verou in Bulletproof, cross-browser RGBA backgrounds, today.
- The SASS functions were first created by Benjamin Doherty using the RMagick library.
Copyright (c) 2010 Aaron Russell. See LICENSE for details.