CSS Professionalzr - Fireworks Extension - Firewoiks: Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3

CSS Professionalzr v1.0

Posted: November 11 2012

Fireworks CS6 introduced a fantastic feature with the CSS Properties panel. It allows the user to copy an element's attributes as CSS3 to make the build process more efficient. It doesn't produce the cleanest, most professional code, however, so I've written CSS Professionalzr to do it for you.

These last 2 updates have the following changes:

Uses the new syntax for the unprefixed gradient property
Removes dropped -ms- gradients
Fixes the incorrect font-size on Windows 8
Fixes stripping the leading 0 in rgba opacity strings
Code cleanup

These are important updates as all gradients produced from Fireworks will be wrong in Firefox 16+, IE 10 and Opera 12.10+ without CSS Professionalzr

Its features (in order)

Formats all of the properties consistently (commas, colons, spaces etc) and removes redundant new lines
Removes all IE filters (they shouldn't be used for various reasons. Use CSS3PIE if you must have the appearance)
Removes dropped vendor prefixes (currently -moz-border-radius, -moz-box-shadow and -ms gradients)
Removes the width and height attributes (most times they'd be different than the actual build's requirements)
Changes all "0px" to "0" to save bytes
Consolidates border-color, style & width in to one border rule
Converts % border-radius to their px equivalents
Converts all rgb(r,g,b) to their shorter hex equivalent (and the 3 char hex if applicable)
Removes the leading 0 on rgba opacity values
Alphabetises all rules
Changes background-color: to background:
Changes background-image: gradients to background:
Adds a fallback background: colour of the last colour in the gradient (for old IE)
Converts linear gradients (top to bottom, bottom to top, left to right and right to left) to base64 SVG and adds it before the other gradient rules as a background-image for IE9. (Radial gradients and other angles are not converted - may come in a later release)
Converts angles in the unprefixed linear-gradient to match the new standard
Fixes the incorrect font-size on Windows 8
Removes text-align: left (since it's the default)
Removes "Arial, Helvetica" and "Helvetica, Arial" in font stacks, so they're simply "sans-serif"
Indents all but the first line with 1 tab

How to use

Select an object such as a rectangle or text

Open the CSS Properties panel
Leave all checkboxes ticked (to ensure you get all of the vendor prefixes) and Copy All rules
Run CSS Professionalzr (assign a shortcut key for quick access)
Paste the code in to your stylesheet

Version History:

1.0 - Fixed incorrect font-size on Win8. Fixed stripping leading zero on rgba opacity
0.9 - Used new syntax for unprefixed gradient property. Removed dropped -ms- gradients. Code cleanup
0.8 - Fixed broken base64 SVG string. Fixed leading space before ;. Indented all but the first line with 1 tab
0.7 - Removed dropped -moz-border-radius & -moz-box-shadow. Stripped leading zero on rgba opacity
0.6 - Fixed Copy Selected for % border-radius (do nothing unless a width/height is selected). Fixed border-color being shortened to -color. Alphabetise font/color properties. Convert font family " to '. Removed occasional empty, leading new line on Mac
0.5 - Added support for text objects. Shortened Arial/Helvetica stack to sans-serif. Shortened background-color to background. Removes space in rgba. Added error handling. Fixed errors when unexpected code is encountered
0.4 - Converted % border-radius to px. Fixed commas in -webkit-gradient
0.3 - Fixed fallback background being null on rgb and a broken rgba string
0.2 - Fixed redundant whitespace on Mac. Code cleanup
0.1 - Initial release