7 ms·

The future of CSS layouts

121 points by tilt 15y ago

macavity23 15y ago
The 'grid' element is very neat. Basically, it's <table>s, but in CSS, which is where they should be. Also interesting is that Adobe is taking a front-and-centre role in the new CSS. Forward thinking of them to see the writing on the wall.
- olavk 15y ago
  Actually, the display:table-* properties in CSS2 is the CSS equivalent to html tables. 'grid' seem to allow positioning of elements in a grid independent of their ordering in the html, which is very nice, and more powerful than either html or CSS2.
- StrawberryFrog 15y ago
  The grid element is one of the inputs from Microsoft. This is not very surprising - it uses the basic concepts from the grid in WPF and Silverlight. It's pretty a cool way to lay things out.
- Volpe 15y ago
  Did I miss something? How are Adobe front and centre? They don't have a browser... I'd say Google/Apple/Mozilla are taking front and centre, with Adobe trying to come up with new tricks to fend off the inevitable death of flash.
  - talmand 15y ago
    How exactly is Adobe making proposals to the CSS standard going to fend off the "inevitable death" of Flash? One has very little to do with the other. Is it so easily forgotten that Adobe has tools other than Flash? Ever heard of Dreamweaver? Plus there are numerous companies involved in creating the HTML and CSS standards that are front and center that are not involved in creating a browser. Take your blinders off.
    - Volpe 15y ago
      I'm the one with blinders? - Seriously? The browsers implement the standards... hence the front and centre. IE defined the "standard" for a long time (and still does). Dreamweaver is a horrible example of 'front and centre' of HTML/CSS. It creates horrible markup. None of Adobe's other products are at all related to HTML/CSS (Edge aside).
garron 15y ago
I'll love CSS exclusions, the site will be like a magazine's front page.
ZoFreX 15y ago
I'm really not enthused about bringing multiple column layouts to the web. Yes, they are a staple of print - so is getting newspaper print on my hands. Should we be building USB fingertip-dirtyers? Multi-column layouts are a case of humans having to adapt to the constraints of the medium; as we move to the future, our content should be bending to our will, and not the other way around.
- simanek 15y ago
  As far as continuous text goes, you're right. These features probably will get used in horrible ways. But even without these features available there are already many well-designed column-based layout examples out there. Not to mention, "constraints of the medium" could take on a whole new meaning as the wide array of display sizes continues to increase. It will be more and more necessary for web designers to create designs that easily adapt to various displays. They call this "responsive web design" and if you are practicing it right now you are an exception. Soon it will be a necessity and these new CSS capabilities look to be well suited to this purpose.
- mechanical_fish 15y ago
  The problem is that we're not in 640x480 world anymore. We're rapidly leaving 960px-width-world. Our displays are finally getting denser (which lets us use smaller font sizes successfully) and wider. And the desire to avoid 120-character-wide columns isn't some arbitrary fetish of print design. Over-width columns actively hinder readability. Robert Bringhurst: Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed typeface in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters. If the type is well set and printed, lines of 85 or 90 characters will pose no problem in discontinuous texts, such as bibliographies, or, with generous leading, in footnotes. But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading. These typographical rules of thumb are ultimately derived from human physiology -- limiting the range through which the eye has to skip left and right makes reading more relaxing, and the mental act of trying to go from the right edge of a mile-wide paragraph to the left edge without losing one's place is fatiguing. [1] Up to now web designers have coped by forcing a single column, forcing that column to be of limited width, and just padding out the remaining width with navigation elements or whitespace. But the whitespace begins to look ridiculous when it's 80% of the width of the screen. So we're probably going to see more instances of successful multi-column layouts. This is likely to break continuous scrolling, but on a device which supports useful multi-column layouts you'll probably be okay with page-by-page scrolling. Or, well, not. We shall see. --- [1] I highly recommend resizing the HN screen if you want to read one of my doorstopper comments. ;)
nikcub 15y ago
I love the new grid - this is going to make design so much easier, eg. 'i want a header, three columns, and a footer' no longer requires 150+ lines of markup. and it should be possible to write a shim for it for older browsers and bring the new syntax to existing browsers now (or, as soon as the standard is ratified) the sooner we can do away with the old css layout techniques, the better.
- CoryMathews 15y ago
  150+ line of CSS means you are doing something very wrong. That could easily be done in a lot less.
rglover 15y ago
As a front-end designer, I'm excited to see the flexible-box model creep into existence. It'd be nice to do a fluid layout without having to do a bunch of workarounds. Excited to know that we'll soon be able to escape the dark past that has been the web (hacks, bloated markup, extra stylesheets, etc). The only thing missing: Microsoft should make browser upgrades mandatory after a certain period of time, as should everyone else. Granted, this may cause some issues but what would the major drawbacks be (extra work for IT depts. doesn't count)?
- PakG1 15y ago
  The backlash for ending support for Windows XP early and getting everyone to upgrade to Vista was huge. Microsoft bowed to all the corporate customer pressure and extended support for XP. Given all the web apps that are made for older browsers, I can imagine a similar backlash easily, though I don't know whether it would be on the same scale. But I can definitely imagine it being enough for Microsoft to back off from such a decision. No harm, no foul is the safest route for Microsoft to go.
  - rglover 15y ago
    Sure it's safe. But that's because people are lazy. Taking your example of web apps for older browsers, shouldn't the teams behind those products be upgrading them anyways or at the very least trying?
    - PakG1 15y ago
      When there are better things to do, there are better things to do. When it's not broke, don't fix it. Spolsky's arguments about why Netscape 6 was a bad idea applies very easily to enterprise web apps where code bases have no application outside of that particular organization, and so it's even harder to modify things. edit: There's something in many corporations called the hurdle rate. All projects have to provide a financial return that is above the hurdle rate. Updating web apps to work on newer browsers does not easily compute to surpassing the hurdle rate because you did nothing to add new functionality/productivity. So it's very hard to get funding for this kind of work in many organizations.
talmand 15y ago
I cannot say how badly I want that positioned float.
snorkel 15y ago
Finally we're getting back what <table> gave us years ago.
- fortybillion 15y ago
  Nested tables worked, but they were incredibly hard to write/edit by hand. This gives us a way of using those layout concepts while still maintaining some separation of document structure and layout definition.
- olavk 15y ago
  CSS2 (from 10 years ago) is equal in power to HTML tables. (The display:table-* properties are based directly on the layout model of HTML tables. For better or worse - they are also somewhat underspecified like HTML tables was.) These new proposals are much more powerful. Most notably they allow you to visually place elements in a grid independent of the source-order. CSS2 (and HTML table markup) does not allow that, ie. visually adjacent cells must also be adjacent in the HTML.
- intellection 15y ago
  Stable Tables ♥ Datatree structure Why is my CSS/webdesign intellectualized into a math problem? Is it wrong tables work and feel like building blocks? WYSIWYG enabled full sight. Some walls privilege CSS. Internet anyone can build? Anyone can build a table. </tables> <div style"TL;DR">Tables fit WYSIWYG whereas CSS abstracts. Coding more WYSIWYG could ease.</div>  </body> </html>
tomelders 15y ago
We need to do something big to get rid of old browsers so we can all move forward and start using this stuff. We need real progress. If there were a law that mandated upgrading browsers that were out of date (by whatever definition you think works) what would that law look like? How would it work? I ask, because if anyone comes up with something that could work, then we can all start pestering our politicians to put it into action. It might be a complete non starter of an idea, but I'm so tired of seeing all these awesome time saving HTML5 tricks I cant use, it's got to be worth a shot.
- michaeldhopkins 15y ago
  Probably the FCC would regulate browsers. In addition to wasting developers' time filing reports and talking to government employees, the regulating body would add more restrictions on browsers, possibly even mandating they be used to report undesirable activity. I think it's worse than a non-starter of an idea -- it would slow browser development and turn browsers into weapons against free use of the Internet.
  - tomelders 15y ago
    I don't understand how you can make that jump. Its true that a badly thought through law could open the door to that sort of activity, but that's not guaranteed. Also, I see reason to "regulate" browsers. Lets say the law was this.... "A person may not connect to the internet using a browser more than two whole number versions behind the latest production version for that particular browser." Here we have a rule which leaves browser vendors free to pursue whichever route they see fit, with no need to supply any sort of reporting or speaking to government officials. Nor need it be enforced. For example, here in the UK we have laws which ensure web accessibility as part of the Equality Act: http://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspx http://www.rnib.org.uk/professionals/webaccessibility/lawsan... Now this law is not being enforced, but if you work in web design or development in the UK, you have undoubtedly felt it's repercussions as clients demand increasingly higher compliance ratings. This has been unquestionably good for the state of the web, at least here in the UK. Or perhaps there's a national security angle to take, or even an accessibility angle (I believe IE6 and 7 can't increase pixel font sizes). Maybe there's an existing law that is somehow being breached by the mere existence of IE6 & 7.... I suppose what I was asking was "Is there a creative way to mandate modern browsers in law".
tilt 15y ago
I find column layouts useful, expecially for "hacking" purposes. A while ago I attempted something you can check here http://tilt2k.github.com/ressays/ http://tilt2k.github.com/ressays/ Point to an Essay from the menu, with a CSS3 compatible browser you'll see an easy frontend pagination with very little struggle.
NHQ 15y ago
the horizontal scroll will finally have its day

121 points by tilt 15y ago

The 'grid' element is very neat. Basically, it's <table>s, but in CSS, which is where they should be. Also interesting is that Adobe is taking a front-and-centre role in the new CSS. Forward thinking of them to see the writing on the wall.

olavk 15y ago
Actually, the display:table-* properties in CSS2 is the CSS equivalent to html tables. 'grid' seem to allow positioning of elements in a grid independent of their ordering in the html, which is very nice, and more powerful than either html or CSS2.
StrawberryFrog 15y ago
The grid element is one of the inputs from Microsoft. This is not very surprising - it uses the basic concepts from the grid in WPF and Silverlight. It's pretty a cool way to lay things out.
Volpe 15y ago
Did I miss something? How are Adobe front and centre? They don't have a browser... I'd say Google/Apple/Mozilla are taking front and centre, with Adobe trying to come up with new tricks to fend off the inevitable death of flash.
- talmand 15y ago
  How exactly is Adobe making proposals to the CSS standard going to fend off the "inevitable death" of Flash? One has very little to do with the other. Is it so easily forgotten that Adobe has tools other than Flash? Ever heard of Dreamweaver? Plus there are numerous companies involved in creating the HTML and CSS standards that are front and center that are not involved in creating a browser. Take your blinders off.
  - Volpe 15y ago
    I'm the one with blinders? - Seriously? The browsers implement the standards... hence the front and centre. IE defined the "standard" for a long time (and still does). Dreamweaver is a horrible example of 'front and centre' of HTML/CSS. It creates horrible markup. None of Adobe's other products are at all related to HTML/CSS (Edge aside).

garron 15y ago

I'll love CSS exclusions, the site will be like a magazine's front page.

ZoFreX 15y ago

I'm really not enthused about bringing multiple column layouts to the web. Yes, they are a staple of print - so is getting newspaper print on my hands. Should we be building USB fingertip-dirtyers? Multi-column layouts are a case of humans having to adapt to the constraints of the medium; as we move to the future, our content should be bending to our will, and not the other way around.

simanek 15y ago
As far as continuous text goes, you're right. These features probably will get used in horrible ways. But even without these features available there are already many well-designed column-based layout examples out there. Not to mention, "constraints of the medium" could take on a whole new meaning as the wide array of display sizes continues to increase. It will be more and more necessary for web designers to create designs that easily adapt to various displays. They call this "responsive web design" and if you are practicing it right now you are an exception. Soon it will be a necessity and these new CSS capabilities look to be well suited to this purpose.
mechanical_fish 15y ago
The problem is that we're not in 640x480 world anymore. We're rapidly leaving 960px-width-world. Our displays are finally getting denser (which lets us use smaller font sizes successfully) and wider. And the desire to avoid 120-character-wide columns isn't some arbitrary fetish of print design. Over-width columns actively hinder readability. Robert Bringhurst: Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed typeface in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters. If the type is well set and printed, lines of 85 or 90 characters will pose no problem in discontinuous texts, such as bibliographies, or, with generous leading, in footnotes. But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading. These typographical rules of thumb are ultimately derived from human physiology -- limiting the range through which the eye has to skip left and right makes reading more relaxing, and the mental act of trying to go from the right edge of a mile-wide paragraph to the left edge without losing one's place is fatiguing. [1] Up to now web designers have coped by forcing a single column, forcing that column to be of limited width, and just padding out the remaining width with navigation elements or whitespace. But the whitespace begins to look ridiculous when it's 80% of the width of the screen. So we're probably going to see more instances of successful multi-column layouts. This is likely to break continuous scrolling, but on a device which supports useful multi-column layouts you'll probably be okay with page-by-page scrolling. Or, well, not. We shall see. --- [1] I highly recommend resizing the HN screen if you want to read one of my doorstopper comments. ;)

nikcub 15y ago

I love the new grid - this is going to make design so much easier, eg. 'i want a header, three columns, and a footer' no longer requires 150+ lines of markup. and it should be possible to write a shim for it for older browsers and bring the new syntax to existing browsers now (or, as soon as the standard is ratified) the sooner we can do away with the old css layout techniques, the better.

CoryMathews 15y ago
150+ line of CSS means you are doing something very wrong. That could easily be done in a lot less.

rglover 15y ago

As a front-end designer, I'm excited to see the flexible-box model creep into existence. It'd be nice to do a fluid layout without having to do a bunch of workarounds. Excited to know that we'll soon be able to escape the dark past that has been the web (hacks, bloated markup, extra stylesheets, etc). The only thing missing: Microsoft should make browser upgrades mandatory after a certain period of time, as should everyone else. Granted, this may cause some issues but what would the major drawbacks be (extra work for IT depts. doesn't count)?

PakG1 15y ago
The backlash for ending support for Windows XP early and getting everyone to upgrade to Vista was huge. Microsoft bowed to all the corporate customer pressure and extended support for XP. Given all the web apps that are made for older browsers, I can imagine a similar backlash easily, though I don't know whether it would be on the same scale. But I can definitely imagine it being enough for Microsoft to back off from such a decision. No harm, no foul is the safest route for Microsoft to go.
- rglover 15y ago
  Sure it's safe. But that's because people are lazy. Taking your example of web apps for older browsers, shouldn't the teams behind those products be upgrading them anyways or at the very least trying?
  - PakG1 15y ago
    When there are better things to do, there are better things to do. When it's not broke, don't fix it. Spolsky's arguments about why Netscape 6 was a bad idea applies very easily to enterprise web apps where code bases have no application outside of that particular organization, and so it's even harder to modify things. edit: There's something in many corporations called the hurdle rate. All projects have to provide a financial return that is above the hurdle rate. Updating web apps to work on newer browsers does not easily compute to surpassing the hurdle rate because you did nothing to add new functionality/productivity. So it's very hard to get funding for this kind of work in many organizations.

talmand 15y ago

I cannot say how badly I want that positioned float.

snorkel 15y ago

Finally we're getting back what <table> gave us years ago.

fortybillion 15y ago
Nested tables worked, but they were incredibly hard to write/edit by hand. This gives us a way of using those layout concepts while still maintaining some separation of document structure and layout definition.
olavk 15y ago
CSS2 (from 10 years ago) is equal in power to HTML tables. (The display:table-* properties are based directly on the layout model of HTML tables. For better or worse - they are also somewhat underspecified like HTML tables was.) These new proposals are much more powerful. Most notably they allow you to visually place elements in a grid independent of the source-order. CSS2 (and HTML table markup) does not allow that, ie. visually adjacent cells must also be adjacent in the HTML.
intellection 15y ago
Stable Tables ♥ Datatree structure Why is my CSS/webdesign intellectualized into a math problem? Is it wrong tables work and feel like building blocks? WYSIWYG enabled full sight. Some walls privilege CSS. Internet anyone can build? Anyone can build a table. </tables> <div style"TL;DR">Tables fit WYSIWYG whereas CSS abstracts. Coding more WYSIWYG could ease.</div>  </body> </html>

tomelders 15y ago

We need to do something big to get rid of old browsers so we can all move forward and start using this stuff. We need real progress. If there were a law that mandated upgrading browsers that were out of date (by whatever definition you think works) what would that law look like? How would it work? I ask, because if anyone comes up with something that could work, then we can all start pestering our politicians to put it into action. It might be a complete non starter of an idea, but I'm so tired of seeing all these awesome time saving HTML5 tricks I cant use, it's got to be worth a shot.

michaeldhopkins 15y ago
Probably the FCC would regulate browsers. In addition to wasting developers' time filing reports and talking to government employees, the regulating body would add more restrictions on browsers, possibly even mandating they be used to report undesirable activity. I think it's worse than a non-starter of an idea -- it would slow browser development and turn browsers into weapons against free use of the Internet.
- tomelders 15y ago
  I don't understand how you can make that jump. Its true that a badly thought through law could open the door to that sort of activity, but that's not guaranteed. Also, I see reason to "regulate" browsers. Lets say the law was this.... "A person may not connect to the internet using a browser more than two whole number versions behind the latest production version for that particular browser." Here we have a rule which leaves browser vendors free to pursue whichever route they see fit, with no need to supply any sort of reporting or speaking to government officials. Nor need it be enforced. For example, here in the UK we have laws which ensure web accessibility as part of the Equality Act: http://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspx http://www.rnib.org.uk/professionals/webaccessibility/lawsan... Now this law is not being enforced, but if you work in web design or development in the UK, you have undoubtedly felt it's repercussions as clients demand increasingly higher compliance ratings. This has been unquestionably good for the state of the web, at least here in the UK. Or perhaps there's a national security angle to take, or even an accessibility angle (I believe IE6 and 7 can't increase pixel font sizes). Maybe there's an existing law that is somehow being breached by the mere existence of IE6 & 7.... I suppose what I was asking was "Is there a creative way to mandate modern browsers in law".

tilt 15y ago

I find column layouts useful, expecially for "hacking" purposes. A while ago I attempted something you can check here http://tilt2k.github.com/ressays/ http://tilt2k.github.com/ressays/ Point to an Essay from the menu, with a CSS3 compatible browser you'll see an easy frontend pagination with very little struggle.

NHQ 15y ago

the horizontal scroll will finally have its day