content 内容生成技术1

最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本

针对content 字符内容生成这一技术用的最多的应该就是配合@font-face实现字体图标了吧. 因为http://www.iconfont.cn 就运用了这一技术

@font-face {
  font-family: ‘iconfont‘;  /* project id 243181 */
  src: url(‘//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot‘);
  src: url(‘//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix‘) format(‘embedded-opentype‘),
  url(‘//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff‘) format(‘woff‘),
  url(‘//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf‘) format(‘truetype‘),
  url(‘//at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont‘) format(‘svg‘);
}
.icon-search:before {
  font-size: 24px; font-family: iconfont; content: "\e657"; color: #000;
}

技术图片

进入iconfont之后默认是Unicode 点击Font class 红线里面就是连接了, 可以直接打开看到源码. 与上面所写无二.

在上面:before中content中的字符是Unicode, 由此延伸出下一个功能动态加载页面内容的时候时常用到"正在加载中..."这几个字, 可以利用这一技术实现动态...

html
正在加载中<dot>...</dot>

css
dot {
    display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;
}
dot {
    display: block; content: "...\a..\a."; white-space: pre-wrap; animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em) }
    66% { transform: translateY(-1em) }
}

效果可以查看张鑫旭博客查看, ie6~ie9是静态的, 支持animation动画的浏览器都是动态的.
动画原理为: 插入3行内容是 3个点、2个点和一个点, 然后通过transform控制垂直位置.
这里需要注意的有这么几点

<dot>元素
为什么是::before, 而不是:before, 可不可以使用::after
从content属性来看, 是3个点在第一行, 而1个点反而在最后一行, 为什么这么处理
这里white-space值为何是pre-wrap 而不是pre

对这几个答案一一做回答:

<dot>是自定义的一个标签元素, 除了简约、语义化明显外, 更重要的是方便向下兼容, ie8等低版本浏览器不认识自定义的HTML标签, 就会显示默认的3个点, 且对css代码忽略.
:before是伪类, ::before则为伪元素. 伪元素使用::before 同时display设置为block, 是为了在现代浏览器下把原来的3个点推到最下面, 不会影响content的3行内容显示, 如果使用::after就很难实现效果
3个点在第一行是为了兼容ie9, 应为ie9认识<dot>以及::before, 但是不支持animation, 所以为了ie9才把3个点放在第一行.
pre-wrap换成pre效果一样.

content开启闭合符号生成
CSS中有个quotes属性, 可以指定open-quote和close-quote字符具体是什么. 例如, 针对不同语言指定不同的前后符号:

<p lang="ch"><q>css世界是一本好书</q></p>
<p lang="en"><q>css世界是一本好书</q></p>
<p lang="no"><q>css世界是一本好书</q></p>
/* 为不同语言指定引号 */
:lang(ch) > q { quotes: ‘‘‘ ‘‘‘; }
:lang(en) > q { quotes: ‘"‘ ‘"‘; }
:lang(no) > q { quotes: ‘<‘ ‘>‘; }

/* 在q标签的前后插入引号 */
q:before { content: open-quote; }
q:after { content: close-quote; }

技术图片
在此基础上演变更多好玩的:

.ask {
    quotes: ‘提问: "‘ ‘"‘;
}
.answer {
    quotes: ‘回答: "‘ ‘"‘;
}
.ask:before,
.answer:before {
    content: open-quote;
}
.ask:after,
.answer:after {
    content: close-quote;
}

<p class="ask">你问我爱你有多深?</p>
<p class="answer">月亮代表我的心</p>

技术图片

content attr属性值内容生成
这个功能比较常用, 作者常用, 我也很常用.

img::after {
    /* 生成alt信息 */
    content: attr(alt); 
}

除了原生属性, 自定义的HTML属性也是可以的

.icon:before {
    content: attr(data-title);
}

需要注意的是, attribute中的属性名不要加引号!