技术控

    今日:187| 主题:58190
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Will we be flattening our HTML for CSS Grids?

[复制链接]
心控2star 投递于 2016-10-5 23:44:59
142 3
I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart .Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).
   The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" status. Since all browsers have been developing against the spec, it's likely that widespread non-prefixed ready-to-go support will drop in all stable browsers fairly soon.
  The bad news is that it will probably do-so without subgrid support, a point that Rachel underscored well in her talk.
  Here's some typical "page layout" HTML:
  1. <body>
  2.   <header class="site-header"></header>
  3.   <main class="main-content"></main>
  4.   <aside class="sidebar"></aside>
  5.   <footer class="site-footer"></footer>
  6. </body>
复制代码
  All those major elements are a direct child of <body> , so <body> can be the grid and the four major elements are laid out on that grid. That's kind like one of Rachel's examples at GridByExample:
     

Will we be flattening our HTML for CSS Grids?

Will we be flattening our HTML for CSS Grids?-1-技术控-yesterday,browser,amazing,version,against
    But...

  ... let's say we wanted to build a grid from elements that weren't necessarily at a completely flat HTML structure like we just saw.
  1. <body>
  2.   <header class="site-header">
  3.     <h1>I want to use the grid.</h1>
  4.     <nav>Me too!</nav>
  5.   </header>
  6.   <main class="main-content">
  7.     <ul class="schedule">
  8.        <li>Me three!</li>
  9.        <li>Me four!</li>
  10.     </ul>
  11.   </main>
  12.   ...
  13. </body>
复制代码
  We can nest grids, just like we can nest flexbox within a grid cell or flexbox within flexbox, but in the example above we cannot make those child elements participate on the same grid together.
   You can see some of this at work in Jen Simmons Jazz Poster example , where headers are being hidden because they can't be in the correct place both semantically and positionally at the same time.
     

Will we be flattening our HTML for CSS Grids?

Will we be flattening our HTML for CSS Grids?-2-技术控-yesterday,browser,amazing,version,against
     Subgridding might get a little tedious, since it's kinda "subgrids all the way down" . To make even my little example above work it would be like...
  1. body {
  2.   display: grid;
  3. }
  4. .site-header {
  5.   display: grid;
  6.   grid: subgrid;
  7. }
  8. .main-content {
  9.   display: grid;
  10.   grid: subgrid;
  11. }
  12. .main-content > ul {
  13.   display: grid;
  14.   grid: subgrid;
  15. }
复制代码
And that's without defining how the grid actually works.
  Eric Meyer has also emphasized this need for subgrids:

  Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections. Neither solution is appealing.
   He used <form> markup as an example , where <label> / <input> pairs are necessarily grouped within container elements, meaning they can't participate on the same grid together.
     

Will we be flattening our HTML for CSS Grids?

Will we be flattening our HTML for CSS Grids?-3-技术控-yesterday,browser,amazing,version,against
      Each of these rows has to be it's own grid context, meaning it's not nearly as useful as if they could share the same grid.      He called for grid to not even be shipped until this can be handled:
  subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status. If that means delaying the emergence of grids, I think it’s worth it.
  That ship has likely sailed ...

  ... on having full subgrid support the day CSS Grid "ships". But it's probably worth making some noise (like writing this blog post) to indicate this is fairly important and should be worked on and released as quickly as possible after the first round of CSS Grid goes out. That's not my thinking, that's what Jen Simmons said she'll be pushing for at Mozilla.
  And even bigger danger is that subgrid is considered "at-risk" and "may be dropped during the CR period".
   And by "browser-maker folks", as an interesting aside, it's not always employees of browser companies that do this work, but often outside committers. Here's a blog post about all this from one of those outside committers.
  The risk...

  ... is that we love grid layout so much, that we'll malform our HTML to make it work. We'll make our HTML less accessible to make our grid idea work. We'll ignore semantics and flatten our HTML.
  Or maybe nobody will do that. But hey it would be nice to have to tools so it's not even an issue.



上一篇:盗号近八千的木马长什么样?
下一篇:Statcheck: an R package to check statistical results in psychology papers
从红酒到宿醉 投递于 2016-10-6 00:43:30
曲筱绡、樊胜美、邱莹莹、安迪都会爱上心控2star
回复 支持 反对

使用道具 举报

熙西吉 投递于 2016-10-22 15:49:37
勿以坑小而不灌,勿以坑大而灌之。  
回复 支持 反对

使用道具 举报

投影沙漏 投递于 2016-10-28 18:20:53
生命中的第一个沙发,激动嘞!
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表