應(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部分
類似這樣子的命名:
.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下獲取),例如:
<div class="example" data-content=""></div>
CSS部分的content屬性值應(yīng)該如下:
.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í)。方法代碼如下:
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/7的CSS與IE8+基本上都是公用的,唯一不同就是選擇器一個(gè)空格間開,一個(gè)冒號偽類,如下:
.tip:before, .tip before,
.tip:after, .tip after{...}
然后,JS如下一調(diào)用即可:
$beforeAfter(document.getElementById("tip"));
OK,全部兼容,完事OK。
一般而言,after以及before生成的元素只能是一些不影響功能或是重要視覺的效果。因此,IE6/7下JS驅(qū)動不關(guān)緊要效果的生成是相當(dāng)OK的。
趕著幫老婆帶飯,拋磚引玉,就這些!
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/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)文章
- a標(biāo)簽的visied偽類的定義使用火狐還是ie都無法顯示訪問后的圖片狀態(tài),據(jù)說從 Fx4 開始,能夠應(yīng)用的樣式是受限的,感興趣的朋友可以了解下2013-08-18
a標(biāo)簽的四個(gè)css偽類(link、visited、hover、active)樣式理解
偽類是CSS 用于向某些選擇器添加特殊的效果,chrome和firefox中的css監(jiān)控并不會顯示所有的樣式,有些顯示會有點(diǎn)不全,IE下還是有點(diǎn)問題的,不過大體不變2013-05-30- css偽類偽元素域高級選擇器的介紹,需要的朋友可以參考一下2013-02-26
- CSS中存在一些比較特殊的屬性,稱之為偽類,它們之中最常用的就是定義鏈接的偽:link,:visited,:hover,:active等本文詳細(xì)介紹一下after的用法的用法,感興趣的朋友可以了2013-02-01
ie6不支持hover ie6 標(biāo)簽(除a標(biāo)簽)不支持偽類:hover解決方案
ie6環(huán)境下好多的標(biāo)簽除a標(biāo)簽都不支持偽類:hover,本人很是疑惑,于是搜集整理一番,曬出來和大家分享,希望對你們有幫助2012-12-21CSS中a標(biāo)簽樣式的“愛恨”原則:定義鏈接樣式的四個(gè)偽類
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。本文將詳細(xì)介紹經(jīng)常用于定義鏈接樣式的四個(gè)偽類,需要的朋友可以參考下2012-12-10有關(guān)于a標(biāo)簽的4個(gè)偽類的使用方法
上面是偽類的正確順序,簡稱 lvha(love-ha)。你一直知道這個(gè)順序但是為什么這樣呢?原理是怎么樣的?2011-07-22- a標(biāo)簽的偽類只不過是又結(jié)合了不同的動作順序,動作的觸發(fā)順序決定了偽類的順序必須按lvha來寫,接下來為大家詳細(xì)介紹下,感興趣的朋友不妨參考下2013-09-27