CSS Regions in iOS 7 Safari

I am very excited about the latest iOS version (the 7th). Not only does it make me feel almost the same as the first time I ever used an iPhone (I’m only halfway kidding here :D) but it also manages to improve many things that were already quite good.

The browser is one of them. I have a number of websites that I visit almost on a daily basis and although they are “optimized” for mobile they are still quite heavy. On my iPhone 5, the new Safari mobile browser renders them much, much faster. I was actually blown away by the speed improvement. I am curious what they actually changed :).

Continue reading

Edge Reflow – Second Preview is Out

I’m extremely happy to announce the availability of the second public preview of Edge Reflow – the light-weight tool for designing responsive websites “in the browser” style.

The Canvas

In case you’re wondering what’s new, here is the list:

  • Enhanced layout capabilities. Now you can use fixed, absolute, relative, or static and you can control the Z-index
  • In-line text styling
  • Productivity enhancements. You can name an element, better color picker, visualizations for margin/padding, add/remove parent to any element, and better cursor.

As always, if you see something that you don’t like, something that can be improved, or maybe something that is just missing, go to Reflow forums and let us know.

You can get it from http://creative.adobe.com – it is a free download but you do have to create an account.

CSS Exclusions and Shapes is moving forward

I am excited to share this great news: CSS Exclusions and Shapes has reached a new milestone. Now you can use the shape-outside attribute to punch holes into your text. These can be circles, elipses, rounded rectangles, and polygons.

Here is an example of what you can do with this feature:

cssexclusions

The CSS for the example above is really simple:

[code]

.float-left {
float: left;
shape-outside: rectangle(0, 0, 100%, 100%, 40%, 50%);
}

.float-right {
float: right;
shape-outside: polygon(80% 0, 100% 0, 100% 100%, 10% 100%, 0% 80%);
}

.container {
width: 600px;
border: 1px solid black;
padding: 5px;
font-family: "source-sans-pro", sans-serif;
}

[/code]

You can see more examples here:

To see the examples, be sure to use the latest Canary build. If you haven’t already done so, enable the Enable experimental WebKit features flag, and then restart the browsers.

You might also want to read this post. If you want to send us your feedback, please do it. I am pretty good at talking with our engineers :)

How to use the CSS Regions Polyfill

We are really interested in getting your feedback on the CSS Regions Polyfill. So I thought that having a simple example to get you started with this JavaScript library could only help :).

This post assumes that you know what the CSS Regions proposal does and you have a basic knowledge of its syntax. If you don’t know this, maybe you should first read this tutorial.

1. Download the polyfill

Obviously, this is the first step. You can get the code from here (just look for the big green Download button). Save the archive on your computer and unzip the file.

2. Create a new HTML file

Next, create a new HTML file and include the cssregions.js file from the root of the archive. Note that there is a minified version too. But if you want to take a look at what the code does it is more convenient to use the non-minified version.

[code]

<!DOCTYPE html>
<html>
<head>
<title>My first example</title>
<script src="cssregions.js"></script>
</head>
<body>

</body>
</html>

[/code]

3. Add some content to act as the source of the regions

This short example is based on Chris Coyier’s example. I’ve just simplified the original example a bit to make it more readable.

First save this archive on your computer, unzip it, and then copy the ads folder to the same folder where your HTML file is stored.

Next add this code to your <body> tag:

[code]

<div id="my-source">
<a href="#"><img src="ads/1.jpg"></a>
<a href="#"><img src="ads/2.jpg"></a>
<a href="#"><img src="ads/3.jpg"></a>
<a href="#"><img src="ads/4.png"></a>
</div>

[/code]

We will use my-source id to define a name-flow called myregion. As I said this will be the source of our regions.

4. Add DOM elements that will consume the content

Now right before the <div> you copied earlier on, add this code:

[code]

<div class="page-wrap">
<section class="main-content">

<div class="article">Lorem ipsum dolor sit amet…</div>

<div class="ad-region-1"></div>

<div class="article">Lorem ipsum dolor sit amet…</div>

<div class="ad-region-2"></div>

<div class="article">Lorem ipsum dolor sit amet…</div>

<div class="ad-region-3"></div>

</section>

<aside class="group">

</aside>

</div>

[/code]

This is a simple markup that sets a main content area and a side bar on the right side. Notice that there are four empty DOM elements (<aside> and three divs with a class name starting with ad-region-). These elements will provide the regions that will hold the content retrieved from the div element with the ID “my-source”.

5. Add the CSS for defining the name flows and region chains

Now, it is time to add the CSS for defining the myregion flow. Copy this in the <head> section of your page:

[code]

<style>

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font: 15px/1.4 sans-serif;
}

.article {
margin: 0 0 30px 0;
}

.page-wrap {
width: 80%;
margin: 0 auto;
background: #eee;
overflow: hidden;
}

.main-content, aside {
padding: 80px 20px 20px 20px;
}

.main-content {
float: left;
width: 70%;
}

#my-source {
display: block;
-adobe-flow-into: myregion;
}

aside {
display: block;
-adobe-flow-from: myregion;
float: right;
width: 30%;
}

[class^=’ad-region’] {
display: none;
height: 155px;
width: 100%;
-adobe-flow-from: myregion;
}

#my-source img { /* the selector is always the source, not the element it flows into */
width: 100%;
max-width: 200px;
height: auto;
float: right;
margin: 0 0 10px 0;
}

@media (max-width: 800px) {
.main-content [class^=’ad-region’] {
display: block;
}

.main-content [class^=’ad-region’]:last-child {
height: 300px;
}

aside {
display: none;
}

#my-source img {
float: left;
width: auto;
margin: 0 10px 10px 0px;
}

.main-content {
width: 100%;
}
}

</style>

[/code]

This might look scary but it isn’t that scary actually. It uses media queries to turn on/off some of the regions used for laying the content. The same media queries are used to display or hide the side bar depending on the width of the page.

This is how the page looks when the width is greater than 800 pixels:

reg1

And here is the same page at about 350 pixels:

reg2

Now, the important CSS bits are:

[code]

#my-source {
display: block;
   <strong>-adobe-flow-into: myregion;</strong>
}

aside {
   display: block;
   <strong>-adobe-flow-from: myregion;</strong>
   float: right;
   width: 30%;
}

[class^=’ad-region’] {
   display: none;
   height: 155px;
   width: 100%;
   <strong>-adobe-flow-from: myregion;</strong>
}

@media (max-width: 800px) {

.main-content [class^=’ad-region’] {
   display: block;
}

aside {
   display: none;
}

}

[/code]

This is where the region chain and flow name are defined and different regions are showen or hidden depending on the page width.

You can download a ZIP file with the complete example from here.

Give us feedback

If you find issues or you need improvements, or maybe you want to contribute to the project, or you just want to share a cool example you’ve built using this polyfill make sure you tell us.

There are a number of ways to do this: add an issue on the GitHub repo, send me an email (see  the About section of my site for address) or just fork the repo and send us a Pull Request.

Say hello to CSS Regions Polyfill

I am very happy (and proud :D) to announce that we’ve finally made CSS Regions polyfil public. This was something I’ve been working on together with my colleague Razvan Caliman and frankly we couldn’t wait to see it run freely in the wild.

Before going into bits and pieces of this JavaScript library let me explain what CSS Regions is for those who might not know. This is one of the new CSS features proposed by Adobe and I think it is one of the most exciting. Why’s that? Because it extends the layout toolkit that web designers and developers will be able to use hopefully very soon. In a nutshell it allows you to separate the content from the presentation. With CSS Regions you can define a flow (this will be the source/content of your layout) and a region chain (this will be the containers that will consume the content from the source). Once you have defined these two the browser will do the rest of the job in flowing the content through the regions and splitting the content once a region from the chain is “full” and moving to the next one. CSS Regions has a powerful and yet simple CSS syntax plus a powerful CSS Object Model that enables developers to tap into this feature from JavaScript.

You can see in the image below how the two parts (flow and regions) are combined together to create the document.

cssregions1

CSS Regions it is the building block for rich layouts, the type of layout that is not possible today without relying heavily on JavaScript DOM manipulation. And because it just another CSS feature you can use it together with media queries if you want to support different layouts for different screen sizes. In the picture below you can see an example of a complex layout where two different articles are flown into two different region chains on the same page.

cssregions2

CSS Regions current status

As of today, the CSS Regions proposal is a working draft. This means that while there is more work ahead of us until it will reach the W3C Recommendation status, the specification has made a lot of progress and is maturing. WebKit, Chrome Canary and Stable, and IE 10 have support for some of the features of CSS Regions.

CSS Regions Polyfill Supported Features

Which brings us to the subject of this blog post, the CSS Regions polyfill. We think that by providing a JavaScript library that brings support for some of the CSS Regions features in modern browsers we will encourage people to take a look at this proposal and start use it for real world examples. Which in turn will help us make sure that the proposal will actually meet developer’s needs and it will be indeed an awesome addition to CSS.

The polyfill supports the following browsers: Safari Mobile, Safari, Android (latest version), Chrome, Firefox, and Opera. You might ask why bother if there is already support in some nightly build browsers and even in the latest stable Chrome browser? First, in order to test this feature you have to enable a flag and second, you never know when an experimental feature is disabled. After all it is not a W3C recommendation and many things can happen. In terms of features, we support CSS syntax for defining flows/regions and some of the CSSOM APIs such as document.getNamedFlows(), regionlayoutupdate event, and regionOverset property. We don’t support yet region styling, break before/after/inside. Also if you manipulate the DOM structure at runtime we don’t pick up the changes automatically (though we have an API that you can use to modify the regions/flows and trigger the layout).

If you want to play with this and get a better sense of how it is working, then look at the regions examples that use the polyfill.

Where to get it

If I managed to make you curious then go ahead and take a look at the code and examples that come with. It is on GitHub of course and it is released under Apache License 2.0.

How to get involved

We’d love to hear back from you – you can send me an email, tweet, or write a comment. If you find issues or you have requests make sure you open an issue on GitHub. If you want to contribute code just go ahead and read these contribution guidelines.

We have plans to improve this polyfill, so stay tuned!

Resources:

CSS Exclusions are available in Chrome Canary

In October the CSS Exclusions feature made it for the first time in a browser nightly build. If you have Canary and you enable the experimental WebKit features flag then you can actually play with this feature (about:flags and then find ‘Experimental WebKit features’ flag and enable it; don’t forget to restart the browser).

So what can you do with this feature for now? Pretty amazing stuff actually. Suppose you are a big fan of E.A. Poe and you want to render “The Raven” like this (cheesy I know but beautiful nevertheless):

Then it is possible using this feature :) Here is the CSS guilty of formatting in this shape:

[code]
.wrap {
background: url(‘crow-feet.svg’) no-repeat;
-webkit-shape-inside: polygon(59.015% 76.618%, 49.316% 72.894%, …);
}
[/code]

You can get this demo and others from here (don’t forget to use a Canary browser if you want to see this feature in action.)

A few words about this implementation. This is work in progress and as a result only a subset of the shape-inside functionality is available. Some of the restrictions are related to the shape itself. You can only use a shape that has the top edge horizontal and doesn’t break the text in more than one segment. Hans Muller has explained all of this in great detail in this post.

Do you think that this is awesome or not?

Update: you can find the Polish translation of this post here thanks to Katia Osipova and the Czech one here thanks to Daniela Milton.

CSS Regions and CSS Exclusions specs moving on

The web is moving forward. And it is so great to see this. I know it sounds a bit dramatic but this is exactly what happened before with two CSS proposals (CSS Regions and CSS Exclusions).

As a result of the past six months or so of work between Adobe and the other parties involved in the process the specs were updated this very month (May 2012) and new working drafts have been published.

If you want to read more about these proposals or to understand how the standardization process works read here.

CSS Bleeding Edge Features

This post has been in the back of my mind for sometime. When I woke up this morning I felt a strong desire to help spread the gospels about some of the coolest CSS proposals around layout and effects. If you are the type of person who attends W3C CSS Working Group or maybe W3C CSS-SVG Effects Task Force meetings then you already know this stuff. Otherwise, you should probably keep reading because you might learn some new things.

So what am I talking about here? Pardon me sir, I should have said right at the beginning of this post: I am talking about CSS Regions, CSS Exclusions, CSS Pagination Templates, and CSS Shaders. All of these features were proposed by Adobe and we are working together with other members of web standard groups to make them a … web standard :).

Before getting into details and stuff, let me step back to give you the context in which these CSS proposals were born. Most of the time the feature proposals for new web standards come from web browser manufacturers, guys like Google, Apple, Mozilla, Opera, and so forth. And this is great because they are building browsers day in, day out.

However, there are other players out there who can give a valuable input despite the fact they don’t build a browser. And Adobe is one good example. Our clients create digital content using various combinations of Adobe tools and this content targets the web browser along with other mediums.

And when you talk to a client who comes from the publishing business, one of the things he’ll tell you is that it is extremely hard to create complex layouts using today’s web standards. Of course if you throw in some JavaScript libraries and/or lots of PNGs then you can actually recreate what is possible to do in print. But why not have support for complex layouts built-in directly at the browser level and exposed as a number of CSS properties? This would ensure that you can not only build the content faster (because you don’t have to jump through all kind of hoops) but you’d get consistent performance across devices (mobile and desktop).

Adobe’s solution to this very question (how can you create magazine quality layout for web?) is this trio of CSS proposals: Regions, Exclusions & Shapes, and Pagination Templates.

While making CSS proposals is important, having a prototype could be even more important. Adobe provided for three of them a prototype implementation for WebKit. In case you wonder why Adobe chose WebKit as the engine to build prototypes for, the response is simple: WebKit has been used for different products for a number of years already. This means that we have engineers who are familiar with the WebKit code base (some being WebKit committers/reviewers).

Continue reading