欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

應(yīng)用before/after偽類時(shí)如何CSS命名以及針對ie6/ie7瀏覽器兼容

  發(fā)布時(shí)間：2013-01-08 15:26:06   作者：佚名   我要評論
before/after偽類相當(dāng)于在元素內(nèi)部插入兩個(gè)額外的標(biāo)簽，其最適合也是最推薦的應(yīng)用就是圖形生成,本文簡單展示我在實(shí)際項(xiàng)目中，應(yīng)用before/after偽類時(shí)候，如何CSS命名的，HTML有哪些處理，如何對付IE6, IE7瀏覽器的
一、訴說前言
before/after偽類相當(dāng)于在元素內(nèi)部插入兩個(gè)額外的標(biāo)簽，其最適合也是最推薦的應(yīng)用就是圖形生成。在一些精致的UI實(shí)現(xiàn)上，可以簡化HTML代碼，提高可讀性和可維護(hù)性。國外這兩個(gè)偽類應(yīng)用相當(dāng)?shù)钠占耙约芭d盛，不過貌似我們這邊前端er們普遍缺乏使用這兩個(gè)偽類的意識，要使用頂多也就是跟風(fēng)的“清除浮動”應(yīng)用。
我想，這可能受兼容性思維影響——IE6/7瀏覽器并不支持，還是等什么時(shí)候IE6/IE7換屆下臺的時(shí)候再說吧~~
雖然八尾九尾都是殘?bào)w，并不影響十尾的成型。一粒老鼠屎掉進(jìn)鍋里，你就真讓這一鍋紅燒肉毀了——把有翔的這部分給阿黃（中華田園犬）吃就可以了。
本文簡單展示我在實(shí)際項(xiàng)目中，應(yīng)用before/after偽類時(shí)候，如何CSS命名的，HTML有哪些處理，如何對付IE6, IE7瀏覽器的。

二、大致處理流程
1.CSS部分
類似這樣子的命名：

復(fù)制代碼
代碼如下:

.example:before, .example before {}
.example:after, .example after {}

一個(gè)有冒號，一個(gè)是空格分隔。前者IE8+及其他現(xiàn)代瀏覽器；后者為IE6-7準(zhǔn)備的。
2.HTML部分
如果before/after偽類元素含有content內(nèi)容（不是空字符），則content內(nèi)容在HTML標(biāo)簽上呈現(xiàn)（方便IE6/7下獲取），例如：

復(fù)制代碼
代碼如下:

<div class="example" data-content=""></div>

CSS部分的content屬性值應(yīng)該如下：

復(fù)制代碼
代碼如下:

.example:before, .example before { content: attr(data-content); ... }
.example:after, .example after { content: attr(data-content); ... }

3.JS部分
JS是為IE6/7準(zhǔn)備的，所做的事情很簡單，網(wǎng)元素內(nèi)部插入兩個(gè)元素，標(biāo)簽名為”before“或”after“或同時(shí)。方法代碼如下：

復(fù)制代碼
代碼如下:

var $beforeAfter = function(dom) {
if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before")
, after = document.createElement("after");
// 內(nèi)部content
before.innerHTML = content;
after.innerHTML = content;
// 前后分別插入節(jié)點(diǎn)
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};

于是，您想要的效果就可以實(shí)現(xiàn)了，例如下面的例子。

三、實(shí)際應(yīng)用之含尖角的tip類提示效果
下面是效果圖，IE6下以及FireFox16下的效果截圖
IE6下tip類提示效果截圖 張鑫旭-鑫空間-鑫生活 FireFox16下tip提示效果after/before下效果 張鑫旭-鑫空間-鑫生活
IE6/7的CSS與IE8+基本上都是公用的，唯一不同就是選擇器一個(gè)空格間開，一個(gè)冒號偽類，如下：

復(fù)制代碼
代碼如下:

.tip:before, .tip before,
.tip:after, .tip after{...}

然后，JS如下一調(diào)用即可：

復(fù)制代碼
代碼如下:

$beforeAfter(document.getElementById("tip"));

OK，全部兼容，完事OK。
一般而言，after以及before生成的元素只能是一些不影響功能或是重要視覺的效果。因此，IE6/7下JS驅(qū)動不關(guān)緊要效果的生成是相當(dāng)OK的。
趕著幫老婆帶飯，拋磚引玉，就這些！

相關(guān)文章

最新評論