A Pocket Guide to CSS3 Layout Modules
Rachel Andrew, Owen Gregory, Nathan Ford
Language: English
Pages: 71
ISBN: 2:00267817
Format: PDF / Kindle (mobi) / ePub
Filenote: PDF retail from EBL. BookBaby have created it by taking their nice epub and converted to PDF + pagination rather than the typical beautiful PDF imprint
Author note: Owen Gregory (Editor), Nathan Ford (Editor)
-------------------
In the last few years we have seen a great leap forward in what we can achieve with CSS – web fonts, gradients, shadows and media queries are now part of our everyday toolkit.
CSS layout itself, however, has moved on little. Developers have experimented with using display: table and display: inline-block for layout, in order to mitigate the limitations of layouts based on absolute positioning and floats. Yet, these methods seem as much like hacks as those they try to replace, and come with their own problems.
The future of CSS layout looks far brighter. In this little book Rachel covers some of the exciting modules that are part of the CSS3 specification. They promise a future where we can lay out elements to a grid and easily achieve the ambitions of equal height columns or spreading content evenly across a page.
Mastering Photoshop for Web Design
Professional WordPress Plugin Development
Beginning SQL Server for Developers (4th Edition)
is an implementation of the current proposal in Internet Explorer 10, on which I am basing these examples. 38 Grid layout seeks to solve the problems of laying out complex web pages, a task which until now we have had to use floats and positioned elements for. It also allows us to separate how things are laid out from the source order – something we saw in our exploration of flexbox. I really like the grid layout proposal and I hope after seeing these examples you will too. Creating the grid
40 To put the navigation into the left static column, the article in the centre, and the quote on the right I can do the following: .mainnav { -ms-grid-column: 1; -ms-grid-row: 2; } .subhead { -ms-grid-row: 1; -ms-grid-column:3; } .content { -ms-grid-column: 3; -ms-grid-row: 2; } .quote { 41 -ms-grid-column: 5; -ms-grid-row: 2; } All we do is say which column and row we want to place the content into. Remember that the gutters count as columns too, so the main column is actually column
early stage in browser implementation is the possibility of wrapping text around and inside shapes. If you have Chrome Canary with experimental WebKit features turned on then you should be able to take a look at the examples posted by Adobe, or even have a go at creating your own. This is still very new stuff and reasonably complex, although as it is being tested in 69 WebKit it may very well be making its way to a browser near you soon. Browser support The wrap-flow functionality will be
coming soon for CSS. Learning about shiny new things that we can’t use yet can be frustrating, but it is also important if we want to move forward. Participation in creating and testing these specifications is not something only for browser makers and big companies. If we want to see these modules in browsers then we – the regular web designers and developers who use these features – can get involved too. Take a look at Move the Web Forward: there are links there to help you get involved with
You should test and use the prefixes for other browsers where available, plus the non-prefixed version in production. 7 Chapter 1 MULTICOLUMN LAYOUT CSS3 Multi-column layout has been a tantalizing possibility for some years now. However, with lack of support in Internet Explorer it hasn’t had the usage that it deserves. With IE10 supporting these properties, and its usefulness in creating responsive designs, I hope we will see more use on sites very soon. This module is the most mature and