The future of CSS markup

Peter Gaston, the author of a book on CSS3, published an article entitled The future of CSS layouts , a translation of which is specially for readers of the Habré presented below.

Despite all the amazing capabilities of CSS, they are not enough to implement the fundamental principles of page layout. However, additional features for creating more dynamic pages are already starting to appear.

After several years of promises, CSS3 has finally excelled in styles. He added a whole set of new tools to our arsenal, providing us with rounded corners, gradients, transparency, element transformations, animation, and much more. What else can please our eyes?

The next CSS issue is markup. Until now, we have done it using floating blocks, relative positions and tricks with negative indentation, and all this was difficult to implement, so that the result looked like standard two- or three-column markup.

The W3C consortium and browser makers are aware of these issues and are working on a number of solutions. The leader among them is (not surprisingly) Internet Explorer. It looks like IE10 will be the harbinger of a new era of CSS markup that will allow you to create great, dynamic, and engaging sites using previously unattainable features.

In this article, the author considers various markup methods that I would like to use at individual stages of development, from already implemented to purely theoretical. We may not be able to use all of them in the future (at least not in the current form), but you should take a look at these methods to understand the future of CSS markup.

Speakers

Distributing content between multiple columns is the main element of printing and the CSS Multi-Columns module provides the same opportunity for the web. To create columns, you can use two methods, each of them uses different properties (of the parent element). In the first case, the number of columns is directly set, among which it is necessary to distribute the text. For example, this code will create three columns of the same width, filling the total width of the parent element:

div { column-count: 3; }

In the second method, the width of the columns is fixed, they will be repeated until they fill the width of the parent element. In this example, the column width is set to 140px, which means that five columns should appear in a 800px-wide block:

div { column-width: 140px; }

By default, the gap between columns is 1em, but it can be changed using the column-gap property . You can also place dividing lines between columns using column-rule , similar in syntax to the border property. The code below will create a dashed line 2px wide and also set the indent between the columns to 28px (the separator will be in the middle):

div {
	column-gap: 28px;
	column-rule: 2px dotted #ccc;
}

If you want to see the result, take a look at an example of CSS column implementation . In order to see the three columns, you must use Firefox, Chrome, Safari, Opera 11.1 or IE10 Platform Preview (IE10PP) . Or look at the screenshot below.



You can do different things with columns. A practical example of their use is on Wikipedia, in the notes section , where column-count is used . In Firefox, multi- columning is implemented with the -moz- prefix , in Chrome and Safari with the -webkit- prefix , in Opera 11.1 and IE10PP without prefixes.

Flexible box

The Flexible Box Layout (FlexBox) module allows you to automatically resize elements within the parent without the need to calculate the height and width values. For example, imagine that you have two children and you want them to fill in the parent (which has a different width) so that both blocks have the same width. This can be done using percentage values, however, in the case of borders and indents, the task becomes difficult. The solution with FlexBox is much simpler:

.parent { display: box; }
.child-one, .child-two { box-flex: 1; }

This code will place two children horizontally inside the parent and make them the same width. The box-flex value acts, in fact, as a proportion, the empty area is taken into account and distributed among the children in the proportion of this value. To understand what is at stake, consider the following code:

.child-one { box-flex: 1; }
.child-two { box-flex: 2; }

When two elements are distributed inside the parent, the width of .child-two will increase by two pixels for every single pixel of .child-one . If the width of the parent will be 260px, and each child 100px, the remaining 60px will be distributed so that .child-two and 20px for .child-one are allocated .

This concept will be easier to understand using FlexBox as an example (requires Firefox, Chrome, Safari or IE10PP). Try resizing your browser window and pay attention to scaling.

By analogy with the dynamic resizing of elements, FlexBox also allows you to apply properties to the parent, which controls the distribution of white space, which sets the positions of child elements. The box-align property affects the width of the children, and the paired box-pack property affects their height. The following shows how this works:

.parent {
	box-align: center;
	box-pack: center;
	display: box;
	height: 200px; width: 200px;
}
.child {
	box-flex: 0;
	height: 100px; width: 100px;
}

Элемент .child имеет значение свойства box-flex равным 0, таким образом, он не будет динамически менять размер, а также он в два раза меньше по высоте и ширине родительского элемента, который, в свою очередь, центрирован с помощью свойств box-align и box-pack. То есть, дочерний блок будет центрирован по вертикали и горизонтали.



На данный момент FlexBox реализован в Firefox, Chrome, Safari и IE10PP с соответствующими браузерам префиксами (-moz-, -webkit-, and -ms-), а также существует JS Polyfill, Flexie, с которым можно поэкспериментировать. Помните, что синтакс изменился, детали в последних спеках.

Table

Brand new in IE10PP is the table layout system. Before using it, you need to decide on the rows and columns. For columns, you can use length values, auto keyword, and a new unit of measure fr (short for fraction , relative amount). Take a look at this example:

div {
	display: grid;
	grid-columns: 1fr 3fr 1fr;
	grid-rows: 100px auto 12em;
}

This code will create a table of three columns, the central of which will be three times wider than the left and right, as well as from three rows, where the top will be 100px in height, the bottom 12em, and the middle will expand in height automatically, depending on the length of the content.

Now that we have a table, we can place content in it. Using HTML5 elements, you can really create a very simple page layout:

header { grid-column: 1; grid-column-span: 3; grid-row: 1; }
nav { grid-column: 1; grid-row: 2; }
article { grid-column: 2; grid-row: 2; }
aside { grid-column: 3; grid-row: 2; }
footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }

Looking at the code, you can see that the content on the page is distributed across rows and columns using the grid-row and grid-column properties, respectively . The article element is placed in the second column of the second row - the center of the 3x3 table. The column-span property is also used for the header and footer elements , which stretches them to all three columns (the row-span property , which was not used here, acts similarly ).

You can see the demo markup in the CSS Grid example , but you need the IE10 platform. If not, just take a look at the screenshot.



The properties mentioned above are fully implemented in IE10PP, so you can experiment with them right now. However, many properties are still not implemented.

Template

Another approach to table view is the Template Layout module . It uses a slightly different syntax, where you first need to assign a position to the blocks using an alphabetic character and the position property :

header { position: a; }
nav { position: b; }
article { position: c; }

Once we have assigned a position, we can create markup using a sequence of characters. Each sequence is equivalent to a string, and each character in a sequence is a column. For example, to create a table from one row and three columns, you can use:

div { display: 'abc'; }

In this case, three evenly distributed elements are displayed in a horizontal line. But you can repeat the characters to expand the columns, as well as use the same characters at the same position on different lines to expand the lines. In the example below, the nav element overlaps two rows, and header and article overlap two columns (the code is formatted for clarity):

div {
display:
    'baa'
    'bcc';
}

Template Layout is not yet used by browsers, but there is already a good polyfill script in jQuery that will allow you to experiment, it was used in the example by reference . The result looks the same as in the example with tabular markup, but the code is completely different.

The demo page uses JavaScript, so it should work on all modern browsers. Table layout may also support template syntax, as in the example below:

header { grid-cell: a; }
article { grid-cell: b; }
div {
	display: grid;
	grid-template: 'a' 'b';
}

In terms of functionality, this code is identical to the properties of Template Layout, but also has not yet been implemented (or it may never be).

Positioned Floating Blocks

The current float property allows text to flow around an element to the left or right, but the advanced property in IE10PP allows you to refine a floating element by placing it anywhere, and adjacent content will still flow around this block. To do this, just needed a new value for the float property :

div {
	float: positioned;
	left: 200px; position: absolute; top: 100px; width: 250px;
}

This code will create a 250px wide element, located 200px on the left and 100px on top of the parent. By default, any other content inside the parent will flow around the positioned element from all sides, but this can be changed with various values ​​of the wrap-type property , for example, when text flows around the element only at the top and bottom:

div { wrap-type: top-bottom; }

You can combine the properties of positioning and table layout by placing an element in the table and letting the content flow around it from all sides:

div {
	float: positioned;
	grid-column: 2;
	grid-row: 2;
}

If you have IE10PP, then you can see a demo of a positioned floating block . If not, the result is shown in the screenshot below, it is impossible to implement the current CSS capabilities.

Exclusions

The float property allows only rectangular elements to be streamlined, but shape-wraps are provided in the documentation. The idea came after using the CSS Exclusions module . It has two key properties. The first, wrap-shape , allows you to create ellipses, rectangles or polygons that will define the shape of the block streamlined by the content, for example:

div { wrap-shape: circle(50%, 50%, 100px); }

This code will create a circle with a radius of 100px, which will be centered in the parent element. You can use the polygon () function to create any shape by specifying coordinate pairs separated by a space, for example for a triangle:

div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }

When there is already a given shape, the internal content can be streamlined around this figure using the second wrap-shape-mode property , as here:

div {
	wrap-shape: circle(50%, 50%, 100px);
	wrap-shape-mode: around;
}

CSS Exclusions in action can be viewed by downloading a prototype for Mac or Windows from Adobe Lab . There is full documentation and some very cool demo files, for example, this:

Areas

Adobe's next suggestion is Regions CSS , which defines how content is distributed across many different elements. This is done, first of all, by defining an element that will provide other content using a unique string identifier in the flow property , and then we select which areas will be filled with this content using the from () function of the content property :

.content { flow: foo; }
.target1, .target2 { content: from(foo); }

Here, the content will be taken from the .content element , and then distributed first on the .target1 element and if the block is not enough to display the content, then it will continue to be displayed in .target2 . Content will not be duplicated in blocks, it will start in the first and continue in the second (if necessary). For a better understanding, just take a look at the image below.



By the way, there are no requirements for target areas regarding their location in the markup. They can be placed on opposite sides of the page, if necessary.

CSS area specs have not yet been implemented in browsers, but by analogy with Exclusions, you can use a prototype from the Adobe lab and try the functionality yourself.

Conclusion

It is not yet clear which of the new markup modules (from FlexBox and Columns) will be fully implemented in browsers. As for floating blocks and Exclusions, I would like to cross them because of the similarity of the functionality (perhaps it will be so). Table layout is closely related to template layout and, undoubtedly, we can expect its appearance in IE10. CSS areas have already been implemented in one of the branches of WebKit, and are likely to appear in WebKit browsers (Safari, Chrome and others) very soon.

Thus, it can be predicted that with some changes in the syntax, everything described above will be used in CSS3 in the future. It is very good if this happens, because, in this case, the new methods will allow you to create very thoughtful sites with minimal cost in just a few years.