text.html

 
<p class="zw">我常常在想， CSS列易于实现，浏览器的支持力度也不错，为什么很少有人使用它。我想，可能是老旧浏览器的支持不足，导致开发者不愿意去使用它。但老实说，我认为人们不用CSS列是因为自身缺乏想象力，不知道应该在什么情况下使用它。</p> 
<p class="zw">在与其他设计师得交谈中我了解到，大多数人看到CSS列的时候，最先想到的是把正文分成区块，这让人很容易联想到杂志和报纸的排版。显而易见，多列布局在印刷媒体中表现得很好，但它在网络中并不一定是最佳选择。下面以Get Hardboiled网站中的文章为例。</p> 
<p class="图"><img alt="2007.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/263.jpg"></p> 
<p class="图题">把大的文本区域分成多列，并不总是最好的选择，它也可能会带来更差的用户体验。</p> 
<p class="zw">对于多列布局设计有两个重要的提示。第一，也是最重要的一点，通过添加列，我们提供了一个非常规的、很可能更不方便的用户体验。虽然我们在杂志和报纸上已经熟悉了从上到下的读完一列再去读下一列，但在网络上我们还不适合这样做。</p> 
<p class="zw">阅读体验在小型或中型尺寸的屏幕上可能会不太友好，因为这些列可能超过了屏幕窗口，人们不得不滚动页面来继续阅读。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_322">通栏</h3> 
<p class="zw">幸运的是，有一个CSS多列的属性可以帮助我们提升用户的阅读体验，我们只需要在使用的时候认真考虑一下。让我们退回前面的例子。如果我们可以定义整体布局的高度，那么对于多列布局的长文章可以表现得很好，但在响应式设计中这是不太可能的。多列布局对于短文章会非常有效，并具有独特的外观。</p> 
<p class="zw">为了实现这种较短的列布局需求，我们不需要添加额外的元素，只需要为某些元素添加<code>column-span</code>属性即可。例如，大标题或者图片元素<code>figure</code>。</p> 
<pre class="代码无行号"><code>figure { 
column-span : all; }</code></pre> 
<p class="图"><img alt="2008.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/264.jpg"></p> 
<p class="图题">使用跨越列元素来创建更短的多列区域可以提高设计的可用性。</p> 
<p class="zw">可以看到把页面分成多个比较短的多列布局，使页面结构更加清晰，同时也减少了读者眼睛移动的距离，大大提升了阅读体验。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_323">截断列内容</h3> 
<p class="zw">当我们把内容分割到两列显示时，它会自动均匀分布以达到平衡。但实际上，这常常会导致一些难以预料的结果。</p> 
<p class="zw">幸运的是，我们可以通过<code>break-inside</code>属性来确保元素展示在一起。我们将它应用在一个类名为<code>columns__break</code>的元素上，就像这样。</p> 
<p class="图"><img alt="2009.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/265.jpg"></p> 
<pre class="代码无行号"><code>.columns__break { 
break-inside : avoid; }</code></pre> 
<p class="zw">平行列间的内容有时候是相关联的，就像这个被拆分开的区块一样。</p> 
<p class="图"><img alt="2010.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/266.jpg"></p> 
<p class="zw">不过可悲的是，写这本书的时候，我们需要采取一些不太方便的方法，来确保元素在所有浏览器中都可以保持在一起展示。这里涉及了三种不同的属性：第一种用于Blink和WebKit内核的浏览器（包括Google、Chrome、Opera和Safari）；第二种用于Firefox；第三种用于IE10和IE11。</p> 
<pre class="代码无行号"><code>.columns__break { 
-webkit-column-break-inside : avoid; 
page-break-inside : avoid; 
break-inside : avoid; }</code></pre> 
<p class="zw">在较长的正文中使用CSS多列布局时，<code>column-span</code>和<code>break-inside</code>都是解决可读性问题的非常有用的属性。但确保多列布局提高用户阅读体验的最好的办法是，仔细的规划和一点点想象力。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_324">将列表按列显示</h3> 
<p class="zw">不难想象，我们也可以在内容模块中使用CSS多列布局提升外观和可用性。事实上，CSS多列布局在达到特定的响应式临界点，最大化利用空白区域方面非常有用。</p> 
<p class="zw">我的脑海中立刻浮现出的一个例子，就是一个包含了一系列侦探杂志的列表。</p> 
<p class="图"><img alt="2011.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/267.jpg"></p> 
<p class="图题">在小屏幕中展示侦探杂志列表。</p> 
<pre class="代码无行号"><code><ul class="list--columns"> 
<li>Action Stories</li> 
<li>Black Mask</li> 
<li>Detective Book Magazine</li> 
<li>Detective Story Magazine</li> 
<li>Phantom Detective</li> 
<li>Pulp Magazine</li> 
<li>The Shadow</li> 
<li>Spicy Detective</li> 
<li>True Detective</li> 
</ul></code></pre> 
<p class="zw">我们不需要添加太多的样式来保证列表在小屏幕下的效果，其默认垂直布局的效果就已经很完美了。</p> 
<p class="zw">同样的垂直布局在列表很窄时仍然非常适合，例如大尺寸屏幕布局中的侧边栏。然而，在中型尺寸的屏幕上，包括智能手机的横屏模式和各种尺寸的平板电脑，这种垂直布局会产生大量的空白，这样无法对有限的空间充分利用，所以我们可以把CSS多列布局和媒体查询结合起来使用来改善这种情况。</p> 
<p class="zw">我们已经为列表增加了<code>list--columns</code>类，在小屏幕下不需要任何特殊的样式。当用户的屏幕尺寸是中等大小，我们将列表分为三列。<code>column-rule</code>在这里可能不太合适，但<code>column-gap</code>可以帮助我们分隔这些列表项，尤其是那些包含文字很长的项。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.list--columns { 
column-count : 3; 
column-gap : 4rem; } 
}</code></pre> 
<p class="图"><img alt="2012.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/268.jpg"></p> 
<p class="图题">在中等大小的屏幕上更好地利用可用空间。</p> 
<p class="zw">在媒体查询的临界点，列表将会在空白区域进行延伸。这个布局在大尺寸屏幕上将不再能正常工作，虽然它的窄列容器会转变成为一个侧边栏。让这个布局同样在临界点适用很简单，我们只要简单地用另一个媒体查询将<code>column-count</code>设置为<code>1</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 64rem) { 
.list--columns { 
column-count : 1; } 
}</code></pre> 
<p class="zw">现在，简单的杂志列表在三个响应式临界点之间使用，确保最大化利用可用空间。对我来说，这种对细节的关注可以让设计从平凡提升到非凡。这完全就是响应式设计。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_325">增加标题列数来改进图片设计</h3> 
<p class="zw">每当我看到缺乏想象力的网页图片和图注（用于说明图片内容的文字）设计时，我都会感到很失望。全屏宽度的图像是Web设计的大势所趋，你可能会以为设计师将会在图注设计上有所创新，然而可悲的是，大多数的设计仍然坚持图片加单列图注的常规模式。</p> 
<p class="zw">使用弹性盒模型来改变图注的位置，将会对图片的设计产生巨大的影响。现在我们可以做到更多，通过多列布局让它看起来更加与众不同。</p> 
<p class="zw">我们不需要对图片元素<code>figure</code>的标签进行任何改变，只需要为图注<code>figcaption</code>标签增加一个<code>figcaption__columns</code>类即可。</p> 
<pre class="代码无行号"><code><figure> 
   <img src="hardboiled.jpg" alt=""> 
   <figcaption class="figcaption__columns">Hardboiled heroes are
almost always down at heel, usually broke, often drunk and living
on a diet of black coffee and smokes – hey, that sounds like
most web designers I know. They have a good woman to help them
stay on the straight and narrow but don't always treat her as
well as they should. When a glamorous redhead walks in the room,
a hardboiled hero can't help but turn his head.</figcaption> 
</figure></code></pre> 
<p class="zw">乍一看，图片看起来还可以接受，但仔细看，这么小的图注字号导致每一行会有很多的文字。即便是只有几行，阅读起来也很不舒服。我们可以调整它的字号来适应这种设计，但是这可能会使图注在视觉上与正文内容难以区分。我们可以通过多列布局来改善这种情况，同时保证文字的大小不变。</p> 
<p class="图"><img alt="2013.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/269.jpg"></p> 
<p class="图题">图注太长了，无法让人舒适地阅读。</p> 
<p class="zw">这一次，我们指定每一列的宽度为<code>32rem</code>，如果浏览器有足够的空间，浏览器会尽可能多地创建新的列。小屏幕无法享受到多列布局的便利，因此我们通过媒体查询为中等尺寸屏幕做相应的定义。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.figure--classic figcaption { 
column-width : 32rem; 
column-gap : 4rem; } 
}</code></pre> 
<p class="图"><img alt="2014.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/270.jpg"></p> 
<p class="图题">将标题分割为多列，阅读起来更舒适有趣。</p> 
<p class="zw">我们已经在图注<code>figcaption</code>的列之间增加了<code>4rem</code>的间距，为了提升大尺寸屏幕下的视觉效果，我们同样也添加一个距离<code>figcaption</code>元素<code>4rem</code>的左边距。</p> 
<pre class="代码无行号"><code>@media (min-width: 64rem) { 
.figure--classic figcaption { 
margin-left : 4rem; } 
}</code></pre> 
<p class="图题"></p> 
<p class="图"><img alt="2015.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/271.jpg"></p> 
<p class="图题">添加一些大小等于列间距的边距，让图片看起来更加生动、有趣。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_326">老旧浏览器的应用</h3> 
<p class="zw">到目前为止，我们一直致力于围绕支持CSS多列布局的现代浏览器进行开发，那么对不支持这些属性的老旧浏览器应该怎么做呢？答案很简单，什么都不做。因为不支持多列布局的浏览器会自动忽略它们的样式，用一列文字来替代。这看起来有点简单粗暴，但这是公平的。因为还在使用老旧浏览器的用户根本不会知道自己错过了什么。</p> 
<p class="zw">在支持多列布局和不支持多列布局的浏览器中，我们可以使用<code>@support</code> CSS特性查询方法来调整图注文字的大小。</p> 
<pre class="代码无行号"><code>.figure--classic figcaption { 
font-size : 1.6rem; } 

@supports ( column-width : 32rem ) { 
.figure--classic figcaption { 
font-size : 1.4rem; } 
}</code></pre> 
<p class="zw">然而，不支持CSS多列布局的老旧浏览器不太可能会理解<code>@support</code>的含义。那么，当一个设计决定了我们必须区分浏览器的时候，可以使用Modernizr来检测是否支持，然后为我们的设计提供替代方案。</p> 
<p class="zw">由于我们只关注为那些不支持CSS多列布局的浏览器提供替代方案，我们可以使用Modernizr检测的类名（<code>.no-csscolumns</code>）来隔离这些样式，就像这样。</p> 
<pre class="代码无行号"><code>.no-csscolumns { 
.figure--classic figcaption { 
font-size : 1.6rem; } 
}</code></pre>