That means CSS Shaders will become a web standard, though not on their own; instead the W3C is going to roll CSS Shaders into the CSS Filter Effects specification. The feature formerly known as Shaders will now be referred to as Custom Filters
The original name “Shader” has its roots in the 3-D graphics world and roughly describes what “Custom Filters” will do, namely create 3-D effects, like the rippling motion in a waving flag, by “shading” regions.
In the end the name isn’t that important; just know that Custom Filters will allow web developers to easily apply cinema-style filter effects to any HTML content. Think grayscale-to-color transitions, animated shadows, photo-realistic warping and other mainstays of the 3-D animation world.
You’ll still need a special build of WebKit that Adobe put together to see Custom Filters in action. You can grab the experimental browser from the GitHub page, where you’ll also find plenty of examples and sample code that show how shaders, er, Custom Filters work. Also be sure to check out Adobe’s earlier write-up on how Filters work and how you can use them.
Now that Shaders are an official part of CSS, hopefully web browsers will begin adding support.
[Update:The original title of this post was Adobe’s CSS Shaders Now an Official Web Standard, wherein I intended “Official Web Standard” to mean “a part of the web standards process”, not actually a published W3C recommendation. Judging by the comments that’s how most of you took it, but of course it was definitely possible to read it as something more than it actually is, so the headline has been updated to clarify that point.]
It’s cold here in the Webmonkey offices, Adobe has unveiled a web browser. No, Adobe isn’t really getting into the web browser game, but it does have a few tricks it would like to show off to the world. Adobe’s new demo web browser exists solely to demonstrate the company’s proposed CSS Regions layout tool.
If you’d like to check out the demo browser, head over to Adobe Labs and download a copy. Be sure to open up the included sample pages to see how the HTML and CSS is structured.
Adobe has been working on CSS Regions for some time, trying to develop a set of CSS layout tools that make it easy to build complex, print-style layouts on the web — think text that flows around circular regions, or text structured into shapes. If Adobe can convince browser makers and the W3C to get onboard with the idea, web design might be about to make a huge leap forward. Or backward, depending on how you look at it.
Adobe’s CSS Regions proposal is a back-to-the-future effort to bring some of the layout tools print designers have enjoyed for years to the web.
While web developers have hacked together grids and other print-style layout tools for years, such tools are essentially hacks and limited in their capabilities. But that will change in the near future. The W3C is currently toying with no less than four new grid-based standards designed to handle multi-column text, wrapping text around images and other fancy layout techniques. We’ve looked at the Flexible Box Model, Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning modules before, but so far none are finalized.
CSS Regions shares some similarities with the other proposals (and from what I can tell would play nice with them if multiple proposals end up becoming finalized specs), but goes a good bit further, by abstracting sections of an HTML page into “regions.”
Regions can be both positive and negative space. In other words, you can write CSS rules to flow text into a region — say, as below, a pie graph — or around a region (as in the image of Arches National Park at the top of this post).
Inserting text into regions
Among the interesting layout tools in the CSS Regions proposal are Story Threading, Region Styling and the arbitrary shapes and exclusions concept. Story Threading allows text to flow in multiple disjointed shapes (not just columns) which you can define in CSS and HTML. That means you could easily flow two side-by-side columns of text around an image or a pullquote the way print magazines often do.
The second interesting element is Region Styling, which allows content to be styled based on the region it flows into. For example, if the first few lines of your text fall into one region, you could style it with a different font than the rest, which falls in a different region. Curiously, this part of the proposed Regions spec is not currently implemented in Adobe’s demo browser.
The arbitrary content portion of the draft spec is what allows the layout shown in the screenshots above — flowing content into or around arbitrary shapes.
Lest you think that Adobe is simply trying to improve the web — which may well be true — nevertheless, it’s worth bearing in mind Adobe’s own agenda. We suspect it’s no accident that the company has used WebKit to power the CSS Regions testing browser. WebKit is, after all, the engine that powers the iPad’s web browser.
With Apple banning Flash from its iOS devices, Adobe has little in the way of iPad-friendly tools to offer its big magazine clients. Given that publishers are betting heavily on the iPad’s ability to save their business model, the more iPad tools Adobe can offer, the happier magazine publishers will be. By rolling CSS Regions into WebKit for a demo, Adobe is already one step closer to a toe-hold on iOS devices.
Still, in this case, assuming the W3C pushes forward with the Regions spec, and that browser makers include support in future releases, what’s good for Adobe may end up being good for the web as a whole.
Of course whether or not multi-column layouts on the iPad (or any other web browser) are a good idea is open to debate. Multiple columns combined with scrolling often makes for a reading nightmare. Certainly in the hands of poor designers the results will be ugly, but that doesn’t mean the tools themselves are to blame.
Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web-development app.
Creative Suite 5.5 Web Premium will be available one month from today for $1,800. For those already using CS 5 Web Premium, upgrades will be $400. Adobe has also unveiled a new subscription pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a year contract.
The CS 5.5 release is unusual for Adobe, which typically releases only full-point upgrades for its Creative Suite. This time around not every application in the Creative Suite has been updated, which explains the .5 upgrade number. In those apps that have been updated, the new features almost exclusively revolve around mobile and tablet development.
Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers.
Dreamweaver has added some HTML5 love to its “starter templates,” some of which now use HTML5′s semantic tags to layout your content. For example, there’s a new template built with aside for sidebars and article for blog posts. You’ll also find new options to use the HTML5 doctype and code hinting for all the new HTML5 tags. Similar code hinting is available for CSS3 selectors and attributes.
The Dreamweaver team has also embraced what’s fast becoming the tool of the moment for savvy web developers — CSS3′s @media queries. Media queries make it easy to serve up different site designs based on the screen width of the current browser. (See our earlier write-up for more on using @media.)
Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your cascading stylesheets so that your site looks nice on any screen.
Also worth noting, Adobe has released Flash Pro 5.5 which is primarily geared to those hoping to write mobile apps for Android and iOS without delving into separate native SDKs.
For more info on everything that’s new in Web Premium, check out Adobe’s series of videos (Flash, natch) on the new features.
Adobe has released Flash Player 10.2, an update that focuses primarily on speed and performance improvements. New in Flash 10.2 is something Adobe calls “Stage Video hardware acceleration,” which the company claims will “decrease processor usage and enable higher frame rates, reduced memory usage, and greater pixel fidelity and quality.”
The Stage Video hardware acceleration means that Flash Player 10.2 can leverage your graphics card for not just H.264 hardware decoding (which works in Flash Player 10.1) but also color conversion, scaling, and blitting.
To try out the new Flash Player 10.2 beta, head over to the Adobe download page. If you’re using Google Chrome, which bundles Flash Player with the browser, look for an update to arrive in the near future.
The Flash Player 10.2 beta gave us mixed results when it came to speed and the final release is no different. Windows users will see the biggest speed bump, particularly with 1080p video that has been optimized with the Stage Video hardware acceleration. Mac users will need to be on OS X 10.6 Snow Leopard in order for Stage Video to take advantage of hardware acceleration.
For the beta I ran some test on the Mac platform (using Firefox and Chromium) using several 1080p videos on YouTube. The beta put CPU usage down to the 18-22 percent range, but the final release tops that, rarely climbing over 12 percent CPU use. On Windows (again in Firefox and Chromium) the story is even better, with the numbers hovering in the low single digits.
That’s good news for watching Hd video online, but it also means less drain on your laptop’s batteries, one of the main complaints leveled at Flash Player. Keep in mind though that in order to take advantage of the new Stage Video tools, sites like YouTube and Vimeo will need to alter their video players. So, it may be some time before the full benefit of Stage Video’s improvements makes it to your day-to-day web browsing.
Other new features in Flash Player 10.2 include support for fullscreen mode with dual monitors — meaning that you can have a movie on one screen and keep working on another — and some sub-pixel text rendering improvements which should make Flash text more readable.
As for Flash Mobile, where the benefits of lower CPU usage and less battery drain are even more welcome, Adobe says to “hang tight.” Adobe plans to talk about new versions of Flash Player for Mobile at the Mobile World Congress next week.
Windows users on the dev channel should see the update arrive automatically. We should note that the sandbox does have some bugs and may break other parts of the browser — this is a developer release, after all. Once the kinks are ironed out, all of these sandboxing features will begin making their way into proper stable Chrome releases.
Google’s Chromium team has been working with Adobe to build better Flash controls into Chrome, and to utilize Chrome’s sandboxing technology for the plug-in. Google says Wednesday’s update makes Chrome the only browser on XP that sandboxes Flash. For more about sandboxing and how Chrome is implementing it, read the overview post on the Chromium blog from October. Also, Wednesday’s release comes less than a month after Chrome introduced click-to-play controls for Flash and other plug-ins.
Adobe’s Flash Player is the most widely-used browser plug-in on the web, and it’s the dominant choice for video playback and games online. Even so, the technology gets beat up for performance issues and its security shortcomings, and it’s still falling out of favor among standards enthusiasts who are pushing HTML5 as the better solution for displaying multimedia in the browser.