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
正在加载中...

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控制垂直位置.
这里需要注意的有这么几点

元素

为什么是::before, 而不是:before, 可不可以使用::after

从content属性来看, 是3个点在第一行, 而1个点反而在最后一行, 为什么这么处理

这里white-space值为何是pre-wrap 而不是pre

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

是自定义的一个标签元素, 除了简约、语义化明显外, 更重要的是方便向下兼容, ie8等低版本浏览器不认识自定义的HTML标签, 就会显示默认的3个点, 且对css代码忽略.

:before是伪类, ::before则为伪元素. 伪元素使用::before 同时display设置为block, 是为了在现代浏览器下把原来的3个点推到最下面, 不会影响content的3行内容显示, 如果使用::after就很难实现效果

3个点在第一行是为了兼容ie9, 应为ie9认识以及::before, 但是不支持animation, 所以 为了ie9才把3个点放在第一行.

pre-wrap换成pre效果一样.

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

css世界是一本好书
css世界是一本好书
css世界是一本好书
/* 为不同语言指定引号 */
: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;
}

你问我爱你有多深?
月亮代表我的心

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

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

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

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

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