Comments This week, as we celebrate open source and web standards at Google I/O, we are releasing a prototype of CSS Regions on Adobe Labs. CSS Regions allow designers to build sophisticated, magazine-style layouts on the Web. Previously, intricate print-style layouts seen in magazines, newspapers and textbooks could not be duplicated in website form. CSS Regions are a proposed addition from Adobe to the CSS (Cascading Style Sheet) Web standard, which is at the core of website formatting. We first proposed CSS Regions in March to the W3C (World Wide Web Consortium) and the CSS Working Group and there is now ongoing work with the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.
Initially we are working to bring CSS Regions to Webkit, because we would like to see the open Web platform offer even more sophisticated document layout features than today. Adobe engineers have developed a prototype implementation of CSS Regions in a customized version of WebKit, now available on Adobe Labs for developers to experiment with. Also live are several samples showing CSS Regions in action. Developers can access the prototype and get more information at http://www.adobe.com/go/cssregions
The broader umbrella of the Open Web Platform (HTML5, CSS3 and SVG, among other components) is an evolving set of specifications that we’ve been actively involved in. With CSS Regions, we are continuing the commitment to actively improve and contribute to Web standards and work with the community to develop the best solutions. On the heels of the enhanced support for HTML5, JQuery, Webkit and PhoneGap in CS5.5, we are continuing to adapt to a rapidly changing technological landscape and invest engineering resources in both Flash and the Open Web Platform.
We encourage developers to experiment with CSS Regions and provide feedback to Adobe and the CSS Working Group. Users can provide comments via the www-style mailing list to request features, make comments and report problems. We look forward to collaborating with the Webkit community on how to best bring a CSS Regions implementation to the WebKit main branch. As always, our goal with putting this experimental technology on Adobe Labs is to engage our customers and the community and really find out how they like certain capabilities, what other functionalities they want, and better understand their day-to-day pain points to learn how we can best support them with the tools they need.
when I try to download the prototype I keep getting a message that my IP is not allowed and that I should ‘contact the relevant authorities’? I’ve tried through various proxies and logged in/out too, so it’s apparently not just me or my real IP that’s not allowed? (Other stuff from the labs still appears to download fine)
I get the same error as @adam when trying to download the prototype.
Yeah, they’ve forgotten to change the “staging” server URL to live server. Try this link for mac prototype:
http://download.macromedia.com/pub/labs/cssregions/cssregions_p1_mac_051011.zip
The link should be fixed now.
I have to say, I love the idea, but hate the implementation. I’ll write a further blog entry with detail and jump in the w3′s mailing list, but in brief:
This approach requires the structure of the html to understand something about the layout. If I want three columns, I need three divs. Conceptually, html is supposed to be structural. Css is supposed to handle layout. So, all of the text should be in a single div (or other structural element). The css, should then be able to instruct the layout engine to divide that div into three boxes of x size in y location and that the text should flow between them. As such, I think this particular proposal is off the mark because it mixes layout information into the structure of the html.
I think this is a major need and a good addition. So, I’ll try to put out something that I think is better…or, at least contribute to what others are doing.
Lee,
Take a look at the Regions module, particularly section 1.1 where we talk about CSS selectors for defining the regions, and section 5 where we talk about how Regions fits together with other specifications. The intent is that we should be able to use anything with a selector that supports the content property as a region. The current prototype uses HTML elements only as a first step. Eventually there will be mechanisms for defining regions entirely in CSS.
Please do come to the w3c mailing list – we need your feedback to improve what we’re doing.
Sorry – Les, not Lee.
Hmmm….
Ok, I get that you are using a selector to choose which divs for flowing. However, doesn’t that mean that the html document has to contain the elements to select? If I had a single div that contained 3000 words, would I be able to separate it to flow into multiple layout regions without inserting elements into the dom?
Let me give an example. Suppose I have a simple online article that I want to be available on phones, tablets, desktop/laptops, and print.
– On a tablet, I want a picture in the background and a multiple column layout. I want tell CSS that the content area is 835×500 and to make the column width 200px. It would be nice if it could automatically generate the necessary regions for me based on the screen width. In the absence of that, I would want to specify 4 areas (5,5 ,200,490), (210,5, 200, 490), (420, 5, 200, 490), (630, 5, 200, 490) – (x,y,w,h) as flow regions.
- On a computer screen, I know I have more real estate and would like to use four disconnected regions. The first two regions are diagonally located with pictures above one and below the other. The other two are in a hidden div that I want the user to reveal via a pagination button (so that I can maximize ad impressions
).
- I also want the user to be able to print the article using a CSS media type such that all of the text flows together. Since, in the html all of the content is in one div, this should be pretty simple.
- On phones, I would like for the style sheets to work similar to that of the print. It should be one vertical flow with no layout separation.
To accomplish all of those different profiles using the css regions spec, would I need to have differing versions of the html for each device profile? Or, would I need to have all of the divs for each profile in the html and display/undisplay those elements using CSS and something like modernizr? Or, is there a way I could accomplish this using selectors, media types, or separate css files?
I can take this to the mailing list if it is a more appropriate place.
Thanx,
LES
Thoughts?
Les,
Thanks for the detailed example. The www-style mailing list would be a great place to go with questions if you want to dive into the details of the CSS specs – not just Regions and Exclusions, but Flexbox, Grid Layout and others. If you’d like to work through your proposed use of Regions specifically, you may want to come to our forums:
http://forums.adobe.com/community/labs/cssregions/
I think the Grid Layout spec has the kind of features you’re looking for, and section 5.2.1 of the Regions spec has an example of using Grid Layout terms to specify regions entirely in CSS. Instead of divs in the HTML, you would create and position your regions using grid cells. You could use media queries to determine which grid cells you’d like to create, then flow your content into those grid cells using regions.
We’re working with the CSS Working Group to ensure that Regions is compatible with the proposed CSS layout systems like Grid Layout. There have been discussions on the www-style list about your concerns, and the preference is definitely to create regions in CSS and not rely on placeholder elements in HTML.
Thank you for the reply. I’ll look into the grid layout parts and join in the discussion in the list.
desejo que este sistema seja eficiente como o dizem se for ótimo
this is a very good service.
=