CSS 技巧tips1
1. 給頁面的body上指定class或id，這樣可以在一個(gè)共享css中為特定頁面指定特別樣式。
評(píng)論：這適用于樣式較少的情況，可以把整個(gè)站點(diǎn)的樣式集中于一個(gè)樣式表。例如只有一兩個(gè)頁面有一兩條特殊規(guī)則，就不需要使用多一個(gè)單獨(dú)樣式表。當(dāng)然，樣式多的時(shí)候，還是應(yīng)分成若干個(gè)樣式表，根據(jù)情況在頁面中import所需樣式表。
2. CSS簽名，如body id="www-sitename-com"，這樣允許用戶在用戶樣式表中為你的站點(diǎn)增加（或覆蓋）樣式。
評(píng)論：這個(gè)技巧很有意思，不過用戶樣式表很少被利用。為特定站點(diǎn)寫特定樣式，用user script之類的方法會(huì)更靈活。所以雖然初看時(shí)眼前一亮，但總的考慮下來，實(shí)用性不是很大。但是這給我一個(gè)啟發(fā)，其實(shí)用用戶樣式表，加上IE7之類的庫，就可以定制瀏覽器。
記錄IE的bug：相對(duì)定位元素內(nèi)若向右下進(jìn)行絕對(duì)定位，需要設(shè)定相對(duì)定位元素的高寬。
模擬fixed的一個(gè)辦法是使用腳本改變?cè)氐慕^對(duì)定位坐標(biāo)，但是通常會(huì)導(dǎo)致抖動(dòng)。實(shí)際上有兩個(gè)小技巧可以模擬出不抖動(dòng)的fixed。一個(gè)是使用css expression配合background-attachment:fixed。另一個(gè)（偶自行發(fā)現(xiàn)的）方法是使用ie的standard mode，然后html元素overflow:hidden，而body元素overflow:auto，這樣body上絕對(duì)定位的元素在外層沒有定位元素的情況下，會(huì)始終相對(duì)于html元素定位，從而達(dá)到和fixed定位一樣的效果。這一方法是我在試圖解決standard mode下scrollbar搶奪焦點(diǎn)的Bug（IE7似乎仍有這個(gè)bug）時(shí)偶然發(fā)現(xiàn)的。
關(guān)于containing block如何包圍float元素（似乎有很多人以為這是FF的bug），需要額外的空元素來clear。為了避免引入無意義的標(biāo)簽，使用::after是個(gè)好方法，類似的，也許也可以用:last-child偽類，不過這兩種方法無法用在IE上。但是IE可以用Holly hack，實(shí)際上就是讓containing block獲得hasLayout。
1. 固定寬度圓角框
實(shí)現(xiàn)：在外層元素（容器）上設(shè)定背景色和底部圓角圖，在標(biāo)題（內(nèi)部第一個(gè)元素）上設(shè)定頂部圓角圖。
限制：
* 寬度是定值像素的。
* 必須有內(nèi)外兩層block元素，內(nèi)外層要緊貼（即外層不能有padding，內(nèi)層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
2. 固定寬度圓角框的變形
實(shí)現(xiàn)：在外層元素（容器）上設(shè)定縱向重復(fù)（repeat-y）的背景圖，在內(nèi)部第一個(gè)元素上設(shè)定頂部圓角圖，在內(nèi)部最后一個(gè)元素上設(shè)定底部圓角圖。
限制：
* 寬度是定值像素的。
* 必須有內(nèi)外兩層block元素，內(nèi)層至少有兩個(gè)元素，內(nèi)外層要緊貼（即外層不能有padding，內(nèi)層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
注：固定背景色的限制可以通過增加位移來解決，例如：
注意，由于使用了margin，需要注意垂直合并的情況，增加了樣式的復(fù)雜度。
3. sliding doors 技巧
實(shí)現(xiàn)：添加若干層額外的container，在每層上分別應(yīng)用左下、右下、左上、右上的圓角圖。
限制：
* 必須有四層block元素，內(nèi)外層要緊貼（即外層不能有padding，內(nèi)層不能有margin和border）。
* 圓角背景色是固定的（如白色），不能是透明的。
本質(zhì)上，sliding doors技巧和前兩個(gè)方式是一致的，都是通過多層block元素上的背景重疊來模擬總體效果。區(qū)別就是前面只需要兩層——多數(shù)情況下，語義結(jié)構(gòu)可以有兩層元素，而幾乎不可能出現(xiàn)語義結(jié)構(gòu)需要四層元素的情況。
本書作者對(duì)此的看法是，如果只要少數(shù)地方，那忍受一下無意義標(biāo)簽也可以，但是如果有很多地方，那就需要考慮其方案。
我對(duì)此的看法有些不同。實(shí)際上，書中示例在容器寬度高度增大到超出圖片寬高時(shí)，就會(huì)出現(xiàn)空白。如果要適應(yīng)任意大小的容器，要么增大圖片尺寸到一個(gè)很大的數(shù)值，要么增加更多層次，使用多達(dá)九層元素（相當(dāng)于切分成井字形的九份）！
因此同樣是忍受無語義元素，我寧可使用table構(gòu)造一個(gè)井字布局來模擬border，這個(gè)方式比多層嵌套無語義div更清晰。
當(dāng)然，最好的方案是使用CSS3的border-image和border-radius。在沒有CSS3支持前，則是使用腳本自動(dòng)插入輔助元素來實(shí)現(xiàn)。書中給出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。
1. 簡單的CSS陰影和Clagnut陰影
實(shí)現(xiàn)：在外層wrapper上將陰影圖設(shè)為背景。元素本身通過margin或者相對(duì)定位做向左上方的偏移（以展現(xiàn)右下方向的陰影）。
限制：
* 陰影元素需要一個(gè)外層的wrapper元素。
2. 模糊陰影
實(shí)現(xiàn)：添加兩層container，分別應(yīng)用陰影圖像和蒙板圖像。
限制：
* 需要兩個(gè)外層元素
* 外層背景色是固定的（與蒙板顏色一致）。洋蔥皮陰影無此問題。
注意，蒙板需要png的alpha透明特性，但是IE6不支持。書中給出了使用AlphaImageLoader的filter方式，但是問題在于，在IE中與其這樣，不如直接在元素上使用DropShadow或Shadow的filter。
3. 洋蔥皮陰影
實(shí)現(xiàn)：添加兩層container，分別應(yīng)用兩個(gè)陰影末尾圖。
限制：
* 需要兩個(gè)外層元素
* 外層背景色是固定的，但稍作改進(jìn)可以避免這一限制。
總的來說，上述的陰影實(shí)現(xiàn)，都不是很好的方法，最好還是借助腳本。
最后是圖像替換。
關(guān)于圖像替換，除了本書作者所說的screen reader問題外，另一個(gè)問題是，在許多瀏覽器上，圖像不會(huì)跟文本一起縮放。所以我的觀點(diǎn)是盡量避免使用圖像替換。本書作者提出的“公司品牌策略要求特定字體”的例子，我認(rèn)為不足為證。如果真的需要這樣強(qiáng)的視覺強(qiáng)制要求，也肯定不以字體為限，最好直接使用flash。
此外，display:none或visibility:hidden（譯本有疏漏）會(huì)造成screen reader失效，這其實(shí)很大一部分是screen reader本身的問題。因?yàn)楸旧鞢SS可以只針對(duì)media=screen指定圖像替換樣式。但是許多screen reader忽視了CSS規(guī)范（多數(shù)是基于IE的）。
所以目前最可靠的圖像替換法，仍是利用腳本的，如本書中的IFR和sIFR。
另，在XHTML2中，不需要專門的圖像替換法。因?yàn)樗性厣隙贾С謘rc屬性。如果src指向的資源可用，就會(huì)被替換成該資源的內(nèi)容（如視頻、圖像等），否則會(huì)使用元素內(nèi)部的內(nèi)容。
關(guān)于A上偽類的順序，應(yīng)按照LoVeHAte（Link Visited Hover Active）。
此外，關(guān)于鏈接偽類補(bǔ)充如下：
根據(jù)CSS21，link和visited偽類是互斥的，也就是*:link:visited不可能選擇到任何元素。而hover、active與新增的focus偽類，可以共存于一個(gè)元素上。因此可以有以下的樣式：
a:link:hover { color:red; text-decoration:underline }
a:visited:hover { color:maroon }
a:link { color:blue; text-decoration:none; }
a:visited { color:navy; text-decoration:none; }
a:active { background:green; color:white; }
a:visited:hover:active { text-decoration:line-through }
另，hover、active等動(dòng)態(tài)偽類不限于A，也可以在其他某些元素上。但是IE6不支持。
active偽類還有點(diǎn)問題，因?yàn)樵缙谝?guī)范定義不清，各個(gè)瀏覽器實(shí)現(xiàn)稍有不同。其中IE最離譜，實(shí)際效果近似一個(gè)只在a上有效的:focus偽類。實(shí)際上，IE DOM中的名為onactivate/ondeactivate的事件，也說明了IE是把a(bǔ)ctive看成是一種特殊的focus的。
關(guān)于給外部鏈接加上圖標(biāo)，以及區(qū)分下載類型，是屬性選擇器的極好應(yīng)用，只是IE6不支持。
Pixy方法，即將若干圖合并于一個(gè)圖片的方法，減少了http請(qǐng)求的數(shù)量，也避免了hover切換時(shí)的延遲。許多其他trick可以使用pixy方法，例如上一篇里提到的sliding door等。
本書還指出了Pixy方法受到IE的cache bug影響會(huì)閃爍。但是書中并沒有說清楚這個(gè)問題。但其實(shí)該bug是有條件的，即IE的cache設(shè)置為Every visit to the page，而不是默認(rèn)的Automatically?；旧?#xff0c;只有開發(fā)者才會(huì)把cache設(shè)置為每次訪問檢查更新，所以這個(gè)bug其實(shí)不會(huì)影響真正的用戶（根據(jù)我在winxpsp2的ie6下測試，雖然可能仍然調(diào)用了一次網(wǎng)絡(luò)存取的api，但是并沒有發(fā)生實(shí)際的請(qǐng)求，癥狀就是鼠標(biāo)有極短時(shí)間的抖動(dòng)，但是圖像不會(huì)閃爍）。此外有人發(fā)現(xiàn)了一個(gè)未公開的方法來讓IE對(duì)背景圖進(jìn)行緩存：
document.execCommand("BackgroundImageCache",false,true)
使用這種方法甚至避免了api調(diào)用，貌似是直接緩存在IE內(nèi)存中。
詳見：http://www.mister-pixel.com/。
BTW，我計(jì)劃還要對(duì)這種方法做一些測試，看看是否能解決vml緩存問題。
最后關(guān)于visited：在已訪問鏈接后加一個(gè)打勾的圖標(biāo)，是一個(gè)很有意思的設(shè)計(jì)，可資參考。
關(guān)于列表，首先，由于list-style-image的位置各個(gè)瀏覽器實(shí)現(xiàn)的不一致，而且縮進(jìn)使用padding或margin的不一致，所以本書后面的例子幾乎完全拋棄了list-style，將padding和margin一律重置為0，然后從頭重新定義。
BTW，關(guān)于列表縮進(jìn)應(yīng)該使用padding或者margin？我傾向于padding。理由另文撰述。
關(guān)于導(dǎo)航條，本書的例子有一個(gè)問題，就是需要對(duì)第一個(gè)li元素專設(shè)樣式。對(duì)于支持CSS21的瀏覽器來說，使用一個(gè)first-child偽類即可，但是對(duì)于IE，需要額外的一個(gè)first類。有一些解決的方法，我之前也討論過這個(gè)話題。
配合頁面ID，可以設(shè)定頁面特定的樣式，例如本書中給出的在導(dǎo)航條中突出顯示當(dāng)前頁面的例子。這是一個(gè)很有意思的技巧，沿著這個(gè)思路也可以有很多變化。
關(guān)于滑動(dòng)門tab式導(dǎo)航，見上一篇關(guān)于sliding door的總結(jié)。幸運(yùn)的是，在列表導(dǎo)航中，正好有l(wèi)i和a兩層元素可供應(yīng)用sliding door技巧。此外可以做一個(gè)簡單的位移變形來支持邊緣透明的tab。
關(guān)于圖像映射，開始一段的譯文有些歧義。我想作者是在說map和area，然后給出的是用CSS取代map的方法。我并不完全贊同作者關(guān)于map是將表現(xiàn)方式與內(nèi)容混在一起的說法。在5.7遠(yuǎn)距離翻轉(zhuǎn)的示例代碼中，帶有hotspot class的空span扮演的角色和area元素有何不同呢？實(shí)際上，map元素是有導(dǎo)航的語義的。xhtml2中新增的nl元素，就可以認(rèn)為是map和ul的合體，在xhtml2中usemap所指向的也從map元素變成了nl元素。實(shí)際上，img等元素上的usemap屬性提供了一種將對(duì)象（圖像）與導(dǎo)航連接在一起的語義。
一個(gè)map的例子：
?
又一個(gè)更語義化的例子（注：FF和Opera支持object上usemap，IE和Safari不支持object上usemap）：
使用CSS做的圖像映射，實(shí)際上與第二個(gè)例子相當(dāng)接近，區(qū)別在于CSS無法作出圓形和多邊形的點(diǎn)擊區(qū)域。
當(dāng)然作者的例子所展示的CSS設(shè)計(jì)的整個(gè)過程是很棒的。
轉(zhuǎn)載于:https://www.cnblogs.com/OnlyXP/archive/2007/09/29/910112.html
總結(jié)
以上是生活随笔為你收集整理的CSS 技巧tips1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring 的4种事务管理（1种编程式
- 下一篇： CSS3.0_选择器_学习笔记