Adobe’s CSS Shaders proposal, which will bring high-quality cinematic effects to the web through some new CSS tools, has been accepted by the World Wide Web Consortium (W3C).

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.]

The CSS Regions Galaxy Tab demo

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.

Typography on the web has improved by leaps and bounds since the dark days of the blink tag and six universal fonts, but it’s still a long way from ideal. Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.

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.

Adobe’s CSS Regions is the new entry in the list of layout schemes under consideration. Adobe submitted its CSS Regions proposal to the W3C early this year and it has subsequently been split into two separate but related drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.

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.

See Also:

• The Future of CSS: Finally, Sane Layout Tools
• Adobe Shows Off Fancy WebKit-Based Typography
• Lettering.js Makes Complex Typography Easy

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.

For example, Photoshop gains a new Touch SDK that allows tablets and other devices to interact with Photoshop, but there are almost no new features in the app itself. Dreamweaver on the other hand does see some new features, including more support for web standards and better development tools for building mobile web apps.

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.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

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.

See Also:

• Adobe Adds HTML5 Creation Tools to Dreamweaver
• Dreamweaver CS5 First Look: More WordPressy, More Firebuggy
• Make a Big Splash on Tiny Screens With Media Queries

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.

See Also:

• New Flash Player 10.2 Goes Easy on the CPU
• Adobe Revamps Flash Player for Netbooks, P2P, Private Browsing
• Adobe Flash Player 10.1 Arrives

Even though its Flash technology is used as a punching bag by web standards fans, Adobe has been building tools that embrace HTML5. The company recently released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 now contain a number of new HTML5 export tools.

Now it seems Flash might be joining the party. At Adobe’s Max conference this week, Adobe engineer Rik Cabanier showed of a demo of tool that converts Flash animations to HTML5 (well, technically it looks like a combination of HTML5, CSS and images).

The video below, while not the best quality, shows the tool in action:

Adobe Flash has taken a beating in the last couple of years. First Apple attacked Flash for poor performance, then open tools like HTML5, CSS 3 and JavaScript began stealing much of its thunder, offering video, audio and animation — traditionally Flash’s strongholds — without the need for the free plug-in.

While rumors of Flash’s demise have been greatly exaggerated, there’s no question that, were Flash to remain what it is today, it will eventually be replaced by HTML5 tools.

Keep in mind this is just a demo, not something that’s scheduled for release any time soon. It’s also worthy noting that, despite the claims of “HTML5,” the page generated appears to be using the XHTML 1.0 doctype. Clearly this is a work in progress.

Still, even if the final project generated the kind of messy markup you see in the video, just the ability to export your animations out of Flash, even if the final code needs some clean up, would be godsend for developers that want to move their complicated Flash animations to web standards that play on devices where Flash can’t run.

[via Adobe's John Nack]

See Also:

• Adobe Releases Its Own HTML5 Video Player
• Adobe Adds HTML5 Creation Tools to Dreamweaver
• YouTube: HTML5 Video Is No Match for Flash
• Adobe CTO Defends Flash Against Apple, HTML5
• Scribd Switches From Flash to HTML5

The following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.

We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.

It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.

Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.

The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.

So, take it away, Scott.

Testing Pages With the BrowserLab Add-On for Firebug

The ability to use BrowserLab in any Flash-enabled browser has always been one of BrowserLab’s benefits, but the only way you could get to a screenshot of anything aside from the initial page as it loaded (like interactive menus/states/content/etc.) was to use Dreamweaver’s BrowserLab integration to send the current state of your page –- with edits and interactive elements -– directly to BrowserLab.

Using the new BrowserLab for Firebug (alongside the magnificent Firebug plug-in itself) within Firefox allows you to send the current state of your local page in Firebug – including design and CSS tweaks you may have made directly in Firebug – right up to BrowserLab and see how that handy hack you just added works across all the browsers.

This new Firefox plug-in will help you be effective with BrowserLab whether you’re in Dreamweaver or Firefox, and make the smooth BrowserLab experience more attainable within any workflow you may have established for yourself.

Once it’s installed, right-click the BrowserLab icon on the lower right corner of your browser, or right-click the page you’re viewing. You can also use the “Tools” menu.

Here’s a video that provides a more in-depth look at the Firebug integration:

“Smart Align” your screenshots

The new Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.

You’ve had the ability to custom-register your screenshots in BrowserLab for a while now. You just drag out from the upper left corner of your rulers in 2-up view and adjust for page-level offsets directly.

The idea was to let you be able to adjust for page-level misalignments and focus on a particular area of your page or application accurately, particularly within Onion-Skin View, where a page-level offset will ruin any changes of a “clean” view of your pages together. But in practice, the workflow was clunky, hard to master and ultimately inefficient. This feature has been redesigned, here’s the new workflow.

Click the Alignment icon. You’ll immediately get a “virtual loupe” you can drag across the current screenshot and find the area you’d like to align everything to. Finding a good, clear area like a corner or recognizable markup element is best -– particularly one you know will be reasonably consistent across browsers.

Then, either choose to align everything to that point, or reset your alignment (i.e. your zero point) to that point. By choosing to align all, you’ll get a quick status window that lets you know the progress (this does take some horsepower), and the accuracy of the matches BrowserLab finds.

And once it’s completed, you should be able to flip into Onion-Skin View and see that particular area of your page perfectly (or very close to perfectly) aligned with the other screenshots. This truly allows you to adjust for global inefficiencies and really use BrowserLab for some minute, fine-grained detail work.

BrowserLab goes local

I’d also like to talk about a feature Adobe launched in May that enhances BrowserLab’s integration with Dreamweaver. When testing content in Dreamweaver’s Live View using BrowserLab’s Local setting, BrowserLab “sees” what Live View sees. This lets you test content that you’re working on privately without publishing it to the internet, such as sites on your local web server. You can also test local content served by intranet web servers and content management systems like WordPress, Drupal or Joomla.

This works by securely pushing content to the BrowserLab service and ultimately delivering that content into the list of available browsers. BrowserLab leaves you in full control of what content is allowed to leave your system via permission settings, which lets you maintain an allow/deny list of URLs.

Also, when content is requested by a page you’re testing, BrowserLab references that list before pushing that content to the BrowserLab servers. If a URL isn’t in the allow/deny list, you’ll be prompted before uploading the content. The allow/deny list works with partial URLs too, meaning that the first portion of a URL must match the entire URL stored in the list.

You can set your file location preference and adjust permission settings in Dreamweaver.

If you’re new to to BrowserLab, try it out for free. As a part of the Adobe CS Live family of online services, you’ll receive 12 months of complimentary access.

This tutorial was authored by Scott Fegette, a technical product manager in Adobe’s Creative Suite Web business. He manages Adobe Dreamweaver and BrowserLab.