Future CSS markup

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

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

After several years of promises, CSS3 has finally excelled in styles. He added a whole range of new tools to our arsenal, providing us with rounded corners, gradients, transparency, element transformations, animation, and many others. What else can please our eyes?
')
The next issue with CSS is markup. Until now we have done it using floating blocks, relative positions and tricks with negative indents, and all this was difficult to implement, so that the result was similar to the standard two or three columns.

The W3C consortium and browser creators are aware of these issues and are working on a number of solutions. The leader among them is (not surprisingly) Internet Explorer. It seems that IE10 will be the forerunner of a new era of CSS markup, which will allow you to create excellent, dynamic and attractive sites using previously unattainable features.

In this article, the author examines the various markup methods that I would like to use at certain stages of development, from those already implemented to purely theoretical ones. Perhaps not all of them can be used 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.

Columns

Distributing content across multiple columns is a key element of print and the CSS Multi-Columns module gives 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 set directly among which the text must be distributed. For example, this code will create three columns of the same width, filling in 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 block with a width of 800px:

 div { column-width: 140px; } 

By default, the gap between the columns is 1em, but it can be changed using the column-gap property. Also between the columns you can place the dividing lines with the help of the column-rule , similar in syntax to the border property. The following code will create a dotted line with a width of 2px, as well as set the space between 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 the implementation of CSS columns . 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 in Wikipedia, in the notes section , where column-count is used . In Firefox, multicolumns are 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 module (FlexBox) allows you to automatically resize the elements inside the parent box without having 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. Solution using FlexBox is much simpler:

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

This code will place the two children horizontally inside the parent and make them the same width. The box-flex value acts, in fact, as a proportion, an empty area is taken into account and is distributed among the children in proportion to this value. To understand what is being said, 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 one .child-one pixel. If the parent width is 260px, and each child is 100px, the remaining 60px will be distributed so that 40px will be allocated .child-two and 20px for .child-one .

This concept will be easier to understand by the example of using FlexBox (requires Firefox, Chrome, Safari or IE10PP). Try resizing your browser window and note the scaling.

By analogy of the dynamic resizing of elements, FlexBox also allows you to apply properties to the parent, managing the allocation of white space, setting the positions of the child elements. The box-align property affects the width of the child elements, and the pair 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; } 

The .child element has a box-flex property of 0 , so it will not dynamically change its size, and also it is half the height and width of the parent element, which, in turn, is centered using the box-align and box pack That is, the child unit will be centered vertically and horizontally.



Currently, FlexBox is implemented in Firefox, Chrome, Safari and IE10PP with the corresponding browser prefixes ( -moz- , -webkit- , and -ms- ), and there is also a JS Polyfill, Flexie , with which you can experiment. Remember that the syntax has changed, the details in the last specs .

Table

Brand new in IE10PP is tabular markup system. Before using it, you need to decide on lines and columns. For columns, you can use the length values, auto keyword and the new unit of measurement fr (short for fraction , relative quantity). 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 lines, where the top will be 100px in height, the bottom will be 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 create a really, very simple page markup:

 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 in rows and columns using the grid-row and grid-column properties, respectively. The article element is placed in the second column of the second line - the center of the table 3x3. The column-span property is also used for the header and footer elements, which stretches them across all three columns (the row-span property, which was not used here, has a similar effect).

The demo markup can be seen in the CSS Grid usage example , but I need an IE10 platform. If not, just take a look at the screenshot.



The above properties are fully embedded in IE10PP, so you can experiment with them right now. However, many properties have not yet been implemented.

Template

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

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

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

 div { display: 'abc'; } 

In this case, three equally spaced elements appear in the horizontal row. But you can repeat the characters to expand the columns, and use the same characters at the same position in different lines to expand the lines. In the example below, the nav element overlaps two lines, and the 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 jQuery polyfill script that will allow you to experiment, it was he who was used in the link example . The result looks the same as in the example with tabular markup, but the code is completely different.

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

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

Functionally, this code is identical to the Template Layout properties, but also not yet implemented (or maybe it never will be).

Positionable floating blocks

The current float property allows text to wrap around an element to the left or right, but the extended property in IE10PP allows the floating element to be improved by placing it anywhere, and the adjacent content will still wrap this block. All you need is a new value for the float property:

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

This code will create an element 250px in width, located on the left at 200px and on top of 100px from the parent object. By default, any other content inside the parent will wrap around the positioned element from all sides, but this can be changed by different values ​​of the wrap-type property, for example, when the text wraps the element only at the top and bottom:

 div { wrap-type: top-bottom; } 

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

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

If you have IE10PP, then you can see the demo of the positioned floating block . If not, the result is shown in the screenshot below; it cannot be implemented with current CSS capabilities.

Exclusions

The float property allows only rectangular elements to be streamlined, but in the document flow around the form. The idea came after using the CSS module Exclusions . It has two key properties. The first, a 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, pointing to coordinate pairs separated by a space, for example for a triangle:

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

When a given shape is already present, internal content can be streamlined around this shape using the second wrap-shape-mode property, like this:

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

You can view CSS Exclusions in action by downloading a prototype for Mac or Windows from the Adobe lab . There is complete documentation and some very cool demo files, like this one:

Areas

Adobe's next sentence is CSS Regions, which define 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 it is selected which areas will be filled with this content using the content property’s from () function:

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

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



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

Speck on CSS areas have not yet been implemented in browsers, but by analogy with Exclusions, you can use the prototype from the Adobe laboratory and try the functionality yourself.

Conclusion

So far it is unclear which of the new markup modules (from FlexBox and Columns) will be fully implemented in browsers. As for the floating blocks and Exclusions, I would like to cross them because of the similarity of the functional (perhaps it will be so). Tabular markup is closely related to pattern markup, and you can certainly expect it to appear in IE10. CSS areas are already embedded 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, new methods will allow you to create very thoughtful websites with minimal costs in just a few years.