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控制垂直位置.
這裏須要注意的有這麼幾點

1. <dot>元素
2. 爲何是::before, 而不是:before, 可不可使用::after
3. 從content屬性來看, 是3個點在第一行, 而1個點反而在最後一行, 爲何這麼處理
4. 這裏white-space值爲什麼是pre-wrap 而不是pre

對這幾個答案一一作回答:

1. <dot>是自定義的一個標籤元素, 除了簡約、語義化明顯外, 更重要的是方便向下兼容, ie8等低版本瀏覽器不認識自定義的HTML標籤, 就會顯示默認的3個點, 且對css代碼忽略.
2. :before是僞類, ::before則爲僞元素. 僞元素使用::before 同時display設置爲block, 是爲了在現代瀏覽器下把原來的3個點推到最下面, 不會影響content的3行內容顯示, 若是使用::after就很難實現效果
3. 3個點在第一行是爲了兼容ie9, 應爲ie9認識<dot>以及::before, 可是不支持animation, 因此 爲了ie9才把3個點放在第一行.
4. 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中的屬性名不要加引號!