全方向掌握CSS3的Regions拓展

2021-01-20 07:18 jianzhan

这是1个adobe的建议:css Regions,出示在好几个不一样元素中排布內容的方式。最先必须为內容器皿申明1个flow特性唯一无2的标识符值,随后根据from()涵数和內容的特性明确內容可能在哪儿些元素内排布:
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
最先将內容器皿中的內容置放到第1个元素target1中,假如有外溢,就将外溢的一部分放在target2中显示信息。说得更搞清楚1点,她并不是在另外一个target中反复內容,而是再次在第2个target中显示信息1中沒有彻底显示信息的內容。请看下面的事例:

region合理布局实际效果
随意说1下,两个总体目标地区不必须在DOM或合理布局中邻近,假如必须的话,他们彻底能够是同1个网页页面的两个绝不相干的人或仇敌(可是这样的话会带来可及性难题)。
Regions和Exclusions1样还不被任何访问器适用,可是你能够从adobe的试验室中免费下载它,亲身试1试。

如今,让大家掌握这个拓展吧,她们能够被分成4类:

    线形內容(Threading content): 从1个地区“流向”另外一个地区的內容。
    随意样子的器皿(Arbitrarily shaped containers): 在非矩形框地区内显示信息文字。
    随意样子围绕(Arbitrarily shaped exclusion): 文字围绕非矩形框地区。
    地区款式(Region styling):依据流向地区显示信息內容。

下面是各种各样归类的事例:
內容流(Content flow)

在典型的HTML文本文档中,文本能够在好几个地区显示信息,可是每一个地区中的文本是不有关的(见图1)。假如你要想跨好几个列显示信息文字,或应用其他你必须的更繁杂的地区来手动式。在客户变大文本或客户的字体样式比你设置的字体样式大时,这将会会没法乱掉。这个方式(css3 region)一样是的有着在放缩对话框是自融入的流体合理布局变成将会,或,当显示信息在平板上时,自融入竖屏(portrait)或横屏(landscape)显示信息。

文本跨3个不一样宽的列显示信息

假如你要想独立地特定1托內容(例如文本和照片),那些內容怎样在1串地区内显示信息(flow)呢?这更是內容流(content flow)要做的。

要应用它,根据flow特性授予內容的器皿1个姓名,这样做会将內容从一般的CSS合理布局流中去掉,随后你能够插进这个进程到1个或好几个别的地区——应用from()做为content特性的值。

上面的3列合理布局的编码以下:

CSS

CSS Code拷贝內容到剪贴板
  1. #source {   
  2.     flow: "main-thread";    
  3. }    
  4. .region {    
  5.     content: from(main-thread);    
  6.     background#C5DFF0;    
  7. }  

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div id="source"> <p>Lorem ipsum dolor [...]</p> </div>     
  2. <div id="region1" class="region"></div>     
  3. <div id="region2" class="region"></div>     
  4. <div id="region3" class="region"></div>    

你能够在1个网页页面中协同好几个取名的flow。你还可以应用content-order特性来操纵文本流的次序。假如沒有特定,可能应用一切正常的文本文档次序。

根据这个简易的预制构件,你能够完成更繁杂的合理布局,包含两列文字、不一样宽高的列,和超越好几个列的地区。

文本穿越层叠的地区和列
样子围绕(Wrap shape)

应用样子围绕,你能够操纵文本历经地区的样子(见图3)。你还可以应用这个特性配搭內容流或独立的建立更趣味的设计方案。

文本內容显示信息在自定样子的內部

要应用这个特点,你必须应用wrap-shape特性来界定样子,并设置wrap-shape-mode特性为必须的值。根据制订content的值,文本将显示信息在样子內部。

上面的实际心形的编码以下:

CSS

CSS Code拷贝內容到剪贴板
  1. .circle/* 界定元素样子为1个圆*/  
  2.     wrap-shape: polygon(0px150px /* ...更多一点*/);   
  3.     wrap-shape-mode: content;    
  4. }    
  5. .heart{ /* 界定元素样子为心形*/  
  6.     wrap-shape: polygon(150px32px /* ...更多的点 */);    
  7.     wrap-shape-mode: content;    
  8. }  

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="circle"></div>     
  2. <div class="heart"></div>    

大家的根据WebKit原形适用应用1个简易的多边形特定1个样子,可是你能够想像其它的结合体还可以被用于设置样子,或乃至应用1张照片的alpha值。。。
围绕(Exclusions)

根据应用wrap-shap-mode特性的其它值,你能够建立不一样的实际效果,包含特定的wrap-shape 特性能够了解为要彻底绕开的地区

文本围绕在自定图型周边

CSS

CSS Code拷贝內容到剪贴板
  1. .exclusion{    
  2.     /* 文本围绕全部元素 */  
  3.     wrap-shape-mode: around;    
  4. }  

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="exclusion circle">     
  2.     <p>Lorem ipsum dolor [...]</p>    
  3. </div>    

地区款式(Region Styling)

在杂志中,特定內容围绕设计方案中的1个特殊的地区是很普遍的。大家称之为地区款式。事例展现了文本围绕在第1个区块(包含introduction题目的一部分)被设置为深蓝色,而余下的文本则为灰色

文本款式依靠它流入的地区

CSS

CSS Code拷贝內容到剪贴板
  1. p { colorgray: }     
  2. @region-style #region_1 {   
  3.     p { color#0C三d5F; }    
  4. }  

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div id="article">     
  2.     <h1>Introduction</h1>  
  3.     <p>This is an example [...]</p>    
  4. </div>     
  5. <div id="region_1"></div>     
  6. <div id="region_2"></div>     
  7. <div id="region_3"></div>     
  8. <div id="region_4"></div>    

地区款式现阶段都还没在Adobe Labs的这个webkit原形里边完成。