Tag Archives: CSS3

Adobe Releases Dreamweaver, Edge Updates for Web Developers

Adobe today announced some new features for Dreamweaver CS6, Edge Animate and Edge Code preview, which are available today for Creative Cloud subscribers. Several of the new features are integrations of technology and services that we’ve seen before, such as web fonts via Typekit, the type service Adobe bought late in 2011.

The other major news is the first public preview of Adobe Edge Reflow, a tool for building responsive website layouts. “Responsive” layouts flex and change depending on what device you are on, ensuring a good user experience across personal computers, mobile devices and tablets.

I’ve seen the product before today in demos and it is geared toward web designers more than developers—the user interface is polished and designed to build the code. There is no expansive code view, although you can read the generated CSS in some places. That code can then be exported and used in programs like Dreamweaver or Edge Code.

The release is a public preview and Adobe welcomes feedback at https://github.com/edge-reflow/issues.

The update to Adobe Edge Code includes a Live Development preview which pushes changes to a web browser immediately for testing. I like this new feature quite a bit. There’s also now a “Quick Edit” option to edit code in context rather than moving to the original file. Code hinting for HTML and CSS, a longtime feature in Dreamweaver and other mature code editors, is now in Edge Code.

Adobe Edge Animate’s new features include support for some CSS3 technology including gradients (radial and linear) and CSS filters. The addition of CSS filters is particularly interesting because they promise amazing control over HTML elements, including the ability to apply drop shadow, brightness/contrast changes, blurring, color saturation and other functions you normally associate with Photoshop. The spec for CSS filters was created by Adobe, so it makes sense they would pursue this. Unfortunately, CSS filters are supported only by Webkit browsers at this time, excluding Internet Explorer and Gecko browsers such as Firefox—but I bet they will build in support soon.

The other major enhancement added to Edge Animate is a user interface for previewing web fonts from Adobe’s Edge Web Fonts service. This free service is powered by Typekit. This is a nice improvement for web designers but most web developers have no trouble integrating Typekit fonts by adding the code snippets and setting up kits on the Typekit website. This kind of change, like several others in today’s announcements, serve creative professionals more than web developers.

The Edge Web Fonts interface is also new in an update to Dreamweaver CS6 going live today. The Dreamweaver update does have a few new features for web developers, including the option to apply fluid grid layouts to elements by class as well as ID attributes. The interface for working with fluid grid layouts has also been improved. These are the kinds of things that can really make a developer’s life easier.

There aren’t many new updates today, but the Creative Cloud paradigm drives more updates than we’re used to but with fewer features. Most new features I’ve seen today are improvements and they fit with Adobe’s goal of providing tools for the latest web technology (web fonts, responsive web design) for creative professionals. Web developers and programmers will probably be less excited by today’s announcements, but there’s some goodies for them too.

BOOK REVIEW: The Book of CSS3

Book of CSS3

HTML5 is probably the most desirable acronym to have in a web designer’s portfolio today, but I think the third iteration of Cascading Style Sheets (CSS3) has greater impact on a designer’s bottom line and clients’ satisfaction. This is because CSS3 can finally deliver the slick user interfaces that used to be only possible with Photoshop and a lot of hacking for Internet Explorer. Browsers are advanced enough today to apply CSS3 and make websites everywhere look extra sharp.

The Book of CSS3 by Peter Gasston covers the full gamut of CSS3 rules and features, and I think it’s a useful book for CSS coders of all skill levels. I use a lot of CSS3 to control backgrounds and box elements, but there are entire sections of the CSS3 spec that I never really appreciated until I read this book. Gradients, color, opacity, transitions and animations are all prime examples. Another is media queries, which Adobe has made easier to implement with recent versions of Dreamweaver.

The book is clear, well-written and documented with good examples. There are a good deal of images to illustrate CSS3 in action, but unfortunately the book is in black and white which sometimes makes the images less useful. A more useful part of the book is the browser chart at the end of each section and in Appendix A, detailing which browsers support the demonstrated CSS3 features. Unfortunately, Internet Explorer still lags behind other browsers and doesn’t support a lot of CSS3 features (though I think this will change with the next version of IE). There are a few CSS3 features that are so experimental that most if not all browsers fail to execute them, including flexible box and template layout structures.

CSS3 will most likely change in the near future. Technology is evolving at a more rapid pace; the Firefox browser, for example, will be updated on a faster schedule and we’ll see more versions (and more CSS3 support) quicker. But I think the basic capabilities of CSS3 are set and web designers need to look at CSS3 now if they want to be progressive and offer clients the best technology today. The Book of CSS3 is a good place to learn the full range of CSS3 features.

The Book of CSS3
Peter Gasston
Published by No Starch Press
US $34.95
Rating: 9/10

buy from amazon