Graphics Programs Reference
In-Depth Information
The CSS Properties panel displays all type and graphic styles for
which it can generate code (top half), and the
code for selected objects (bottom half)
THE NEW CSS PROPERTIES PANEL (FOR WEB DESIGN)
Using Illustrator for site design got a boost with the new CSS Properties panel.
Design the elements for a web page, create a mockup on the artboard, and then
generate the basic HTML for your favorite HTML editor. The new panel lets you
generate the CSS you need for styling and positioning the elements. Character Styles
and Graphic Styles automatically display in the CSS panel, and the panel will display
the CSS code if you select either an object on the artboard or a style in the panel. The
CSS Options dialog allows you to make choices about the code that Illustrator
generates, including whether or not to include absolute positioning, vendor Pre-fixes,
or code for unnamed elements. If you place elements on their own layers, naming
them as they are named in the HTML editor, you'll get the most useful CSS for your
layout. You can copy and paste code from the panel and then paste it into your
HTML editor, or you can export all of the CSS code in one file to work with in your
external editor. In addition, except for live type, you can copy any object to the
clipboard and use Paste in your HTML editor; it will paste the SVG code that
Illustrator generates for you—another timesaver.
IMPROVED SVG FEATURES
In Illustrator CC, saving web assets in SVG format gives you the option to make them
Responsive—that is, they'll be scalable on websites that adapt to different devices,
such as cellphones and tablets. By default, type is now saved in standard SVG
format, which is visually faithful but lacks hinting at small sizes, while precision for
vectors is set to the lowest quality to produce the smallest possible file. In
Preferences> Clipboard and File Handling, you can now enable the option to include
the SVG code whenever you copy an object to the clipboard. Also, opening an
Illustrator SVG file aligns it to the pixel grid by default.
