首页 > 代码库 > [译]CSS content

[译]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%保证。

 

 

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

[译]CSS content