-
201119 Apr
The W3C CSS Working Group have introduced a new module to CSS3, the CSS3 Grid Layout module, as well as released two further updated specifications, for the CSS3 Multi-column Layout and CSS3 Text modules.
Let’s take a closer look at what’s new.
CSS3 Grid Layout
Initially proposed by Microsoft, and first released as a W3C working draft on 7th April 2011, the CSS3 Grid Layout module introduces a new layout method to CSS3.
According to the specification:
Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.
Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid Lines such that they overlap and layer similar to positioned elements.
In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid and source order independent lay out techniques. By combining media queries with the CSS properties that control layout of the Grid and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, without needing to alter the semantic nature of their content.
You can find the latest version of the specification here.
At present, Microsoft’s Internet Explorer 10 platform preview is the only browser to have implemented the Grid Layout module, a demonstration can be found here.
CSS3 Multicolumn Layout
The CSS3 Multicolumn Layout module was released as a candidate recommendation on 12 April 2011.
According to the specification, the main updates from the previous working draft are as follows:
The specification was updated in April 2011 to correct a contradiction between the text and the pseudo-algorithm in section 3.4. The pseudo-algorithm was corrected and also made easier to read. The wording of a few other sections was improved in places, without changes to the functionality.
You can find the latest version of the specification here.
CSS3 Text
An updated working draft of the CSS3 Text module was released on 12 April 2011.
According to the specification there are several major changes, including:
- Rename ‘
large-kana
’ to ‘fullsize-kana
’. - Merged ‘
hyphenate-limit-before
’ and ‘hyphenate-limit-after
’ into ‘hyphenate-limit-chars
’ and added a word-length limit as well. - Renamed ‘
white-space-collapsing
’ to ‘bikeshedding
’. - Added ‘
tab-size
’ property. - Removed ‘
keep-words
’ value of ‘word-break
’. - Removed optional second hyphenation character.
- Added ‘
hyphenate-zone
’ property. - Removed ‘
unrestricted
’ value of ‘text-wrap
’. - Added ‘
hyphenate
’ value to ‘word-wrap
’. - Merged ‘
text-align-first
’ into ‘text-align
’. - Removed ‘
last
’ value of ‘hanging-punctuation
’. - Added cancel values to ‘
text-decoration-lines
’/‘text-decoration
’. - Removed ‘
all
’ value of ‘text-decoration-skip
’. - Changed ‘
wave
’ value of ‘text-decoration-style
’ to ‘wavy
’. - Changed syntax of ‘
text-emphasis-position
’ to allow more combinations of position values. - Added an informative appendix on cultural correlations of various CSS3 Text features.
- Added an appendix to categorize scripts according to the categories used to define, e.g. ‘
text-justify
’ behavior.
The updated specification can be found here.
You can skip to the end and leave a response.
- Rename ‘
-
Comments
-
01.
The new grid looks interesting. I’m going to have to wait for a wider implementation to play with it.
-
02.
Lets watch & wait. Where it will roll. But its Good to have!
-
03.
“Renamed ‘white-space-collapsing’ to ‘bikeshedding’.”
Oh, are we having some problems with that part of the spec?? LOL.
-
04.
grid will be tables sites all over again…. I’m not sure how I feel about that though. It looks cool but brings back memories of tables inside of tables inside of tables …. inside of tables….etc. I just hope that its not abused because it does present some really cool layout options for web applications.
-
05.
@Brian: it’s not tables inside of tables, because it is source order independent.
What I would like some expert to explain is how exactly does the MS module differ from the older Template Layout Module? And is it a major improvement? -
06.
-
07.
Daniel Walker says:Comment » May 2nd, 2011 at 3:30 pm
It means arguing about unimportant details when there are more important things to be done.
http://en.wiktionary.org/wiki/bikeshedding explains it better
-
08.
Waldir says:Comment » May 3rd, 2011 at 9:23 pm
I thought the bikeshedding rename was a joke :/ I hope they remove it in the next iteration of the document. That rename didn’t make any sense, IMO.
-
09.
Interesting quotes from [CSSWG] Minutes and Resolutions 2011-04-27
http://lists.w3.org/Archives/Public/www-style/2011Apr/0761.html
SteveZ: medium priority has template layout but not grid layout, they’re kindof combined now
fantasai: Think we should list them both, then see what happens -
10.
Daniel Wong says:Comment » May 8th, 2011 at 1:53 am
Only in Internet Explorer? Smells like embrace, extend, extinguish to me.
-
11.
Very nice article about the new Grid Layout Module:
http://www.boogdesign.com/b2evo/index.php/ie10-future-of-css-layout?blog=2 -
12.
Ok it’s official:
tabatkins says: Grid Layout is a better version of Template Layout.
http://twitter.com/#!/tabatkins/status/72899034276315136 -
13.
-
14.
A round of applause for your blog.Much thanks again.
-
15.
-
16.
Lots of hotel patrons are avid discount hunters, this means that seven with the reasons that they may even take into consideration your hotel is perfect for its price.
Louis give some types of discounts with a rotating basis, the best hotel deals in St.
t need to have a very nice and cozy room to remain in as
soon as the whole day of touring.
-
01.