[译]CSS content

原文地址：http://css-tricks.com/css-content/

CSS中有一个属性content，只能和伪元素:before和:after一起使用，他们的写法像伪类选择器（前面有冒号），但是他们并不能选择页面上的任何元素，却可以往页面上添加一些东西，通常这样来写：

.email-address:before {
   content: "Email address: ";
}

 

我们把这段CSS代码放到下面的HTML中：

<ul>
   <li class="email-address">chriscoyier@gmail.com</li>
</ul>

 

效果如下：

• Email address: chriscoyier@gmail.com

或许这段代码还不能让你流口水，但伪元素的content很有用，可以做许多很酷的事情。来看一下一些创意和注意事项。

Hey! That's content not design!

The first concern might be that of a separation-between-content-and-design purist.（不知道如何翻译，o(╯□╰)o）。你可以用CSS content向页面中添加文本内容，这样做打破上面提到阻碍。而且我们也这样做了，但这并不是说明没有讨论的意义，如果你多CSS content和它的用法有任何的想法，请在评论里留言。 （这一段不知道在讲啥，估计就是在讲，讨论CSS content的用法很有意义，o(╯□╰)o）

我认为这及其的适合CSS，想一下上面的例子，我们使用email-address类给所有元素的前面添加了文本*Email address: *。这使得content的意义更加清晰。或者在网站重构的过程中，那些邮件地址没地可放，就可以使用一个小的图标代替。这符合CSS的思想，既然html元素不需要改变，那么让CSS做出完美的改变。

Using Special Characters

在CSS Content里使用特殊的字符有点怪异，需要使用ASCII码，当然这里有一张表很方便。在这个表里版权符号©是&#169，所以ASCII码是169。然后将这个数字填入这里，可以转换成我们想要的CSS。

转换图

下面这些比较常用:

\2018 - 左单引号

\2019 -右单引号

\00A9 - 版权

\2713 - 对号

\2192 - 右箭头

\2190 - 左箭头

Example Trick: Checkmark visited links

让点击过的链接有个对勾

#main-content a:visited:before {
   content:  "\2713 ";
}

 

Using Attributes

你可以使用content向元素中插入属性，例如，一个链接或许含有title属性。

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

 

你可以通过content属性获取title属性

a:before {
   content: attr(title) ": ";
}

 

任何属性都可以这样用，如果你想向HTML插入一些内容，但并不可见，可以使用HTML5的data-*。

Example Trick: CSS3 tooltips

基于title属性的链接提示：

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}

 

代码效果

这个实例使用title属性，或者你在网络上看到的其他的例子也是使用的title属性。但是，记住浏览器都有自己的提示框，可能会覆盖，就会显得很怪异。我尝试着去截图展示这一问题但不知什么原因没成功。没有方法控制，除非不使用title属性而使用HTML5的data-*。

Points to consider

  • Firebug无法定位伪元素。Webkit浏览器中的web inspector可以定位，但不会显示他们的属性\值，我听说IE的开发工具也可以，但不确定。
  • Webkit浏览器中，伪元素为块级时才可旋转，Firefox中内联元素就可以。
  • Firefox 3.0中，伪元素不能绝对定位。
  • 伪元素不能使用transition或者animation

Example Trick: Fancy email link popouts

下面实现这样的效果：有一列名字，当鼠标划过名字时，邮件地址从名字后边划出，为了使HTML更加整洁，我决定使用:after伪元素和-webkit-transition来完成，但是，唉，你不能对伪元素使用transition或者animation。

实现效果

使用伪元素只能弹出邮件地址，但并不能实现划出这样的效果。我又使用了span标签。看demo页面

Example trick: display full links in print stylesheets

@media print {
     #main-content a[href]:after { " (" attr(href) ") "; }
}

 

Browser support / Accessibility

主流浏览器都是支持的（Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and Internet Explorer 8+）.支持列表

考虑到可访问性，我不能100%保证。

 

 

翻译水平有限。。。惨不忍睹。

posted @ 2014-11-12 20:46  zjzhome  阅读(899)  评论(0)  编辑  收藏  举报