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

CSS Professionalzr v1.1

Posted: August 1 2013

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.

This latest update has the following changes:

Fixed gradient angles & SVG generation after 12.0.1 update
Added support for 8 other SVG angles.
Removed legacy syntaxes for border-radius & gradients

If you've upgraded Fireworks to 12.0.1 you need CSS Professionalzr v1.1, otherwise your gradient angles will be incorrect

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, -webkit-border-radius, -moz-box-shadow, -o- gradients, -ms- gradients and legacy -webkit- 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 the following angles: 0, 10, 45, 90, 135, 170, 180, 190, 225, 270, 315, 350 to base64 SVG adds it before the other gradient rules as a background-image for IE9. (Radial gradients and other angles are not converted - may come later)
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.1 - Fixed gradient angles & SVG generation after 12.0.1 update. Added support for 8 other SVG angles. Removed legacy syntaxes for border-radius & gradients
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