Google I/O: New CSS & Web Tools from Adobe

by June 29, 2012

At Google I/O in San Francisco, CA Adobe highlighted some of their recent projects to enhance layout possibilities in the Web browser and help improve Web development workflows. Here are my notes from the presentation.

The Web is evolving and Adobe wants to bring on the declarative renaissance: make more code declarative so designers can do a lot with CSS instead of relying on JavaScript programmers.

CSS Regions & Exclusions

  • Adobe wants to bring magazine-like layouts to the Web. The primary to do this is CSS regions and exclusions.
  • CSS Regions: start with a block of text and some elements, use declarative mark-up to make the text flow around the elements (regions).
  • CSS Regions can be combined with CSS media queries to adapt text layouts to different screen sizes.
  • Chrome on Android has CSS regions support so you can use text reflow on mobile devices too.
  • CSS Page Templates is a proposal based on Adobe’s insights from page layout tools like InDesign that allows you to use declarative markup to easily set-up structured combinations of CSS regions.
  • It’s not enough to flow text from region to region. You also need to exclude areas to have text flow around the contours of elements.
  • CSS Exclusions use polygons to define areas where text should not flow. The team is currently working on optimizing the algorithms to make exclusions performant in the browser.
  • 80% of CSS regions has been implemented in the current version of Chrome. IE, FireFox, and Safari are set to implement Regions soon as well.

Web Development Workflow

  • A typical Web developer’s workflow usually consists of going to a browser, refreshing, going back to code, and repeating. Testing on mobile devices adds a lot of complexity to this workflow. You have to fire up each device look at it, and repeat.
  • Adobe Shadow is a tool that allows you to automatically update a series of devices as you develop for the Web. It also allows you take screenshots and do remote debugging on connected devices.
  • Brackets is a streamlined open source tool for editing code built with Web technologies that can easily be extended by any Web developer. Though it’s built with Web technologies, it is intended to run outside the browser (for now).
  • Brackets puts context-specific code and tools inline and works in sync with your browser to show you real time updates as you code.

CSS Filters & Shaders

  • Traditionally, advanced image manipulation required tools like Photoshop and Illustrator. Filter effects and box/text shadows are now available in the browser.
  • Filters effects can be created with graphs, custom filters or shaders, and shorthand commands.
  • Shorthand filters: can be invoked by setting properties in CSS with parameters. Filter graphs (called by shorthand) come from SVG.
  • SVG filters allow you to apply complex effects to standard text that can be searched, copied, edited, etc.
  • CSS shaders are used through custom sets of filter effects. Shaders run on the GPU so they are fast and can apply shading effects to folding, warp, wave, rotations, and other transitions on Web page elements.
  • The CSS shader studio allows you to tweak shaders in a GUI interface so you can visually set up shaders and grab code. Adobe will make this tool available alter this year.
  • Texturing and blending allows two objects to interface with each other. CSS compositing and blending allows you to set blend modes to have two elements interact with each other visually.
  • Alpha compositing properties allow you to spec which element gets draw on top of a background.
  • Blend mode is a property that allows you to specificy how colors should interact: blend, dodge, etc.
  • Adobe is trying to increase the intersection between creative and Web developers by building tools that enable these workflows.