CSS——幾個最新解決方案

時間 2019-11-11

標籤 css 幾個最新解決方案欄目 CSS 简体版

原文原文鏈接

　　1、重置默認樣式
　　　　normalize.css
　　　　　　①不像其餘CSSreset，它保存了一些有用的默認樣式。
　　　　　　②規範了大量樣式，糾正了一下bug與表現形式。
　　　　　　③有詳細的註釋解釋代碼的做用。javascript

　　2、清除浮動css

　　　　/* 現代瀏覽器: */
　　　　　　　　　　　　.cf:before, .cf:after {content:""; display:table;}
　　　　　　　　　　　　.cf:after {clear:both;}
　　　　/* For IE6-7: */
　　　　　　　　　　　　.cf {*zoom:1;}

　　　　★使用overflow:hidden;清除浮動的弊端：
　　　　　　①當窗口小於容器時，無滾動條，隱藏內容與子元素。
　　　　　　②干擾margin、border、outline 和絕對定位的png圖片。
　　　　　　③影響CSS3屬性的應用，如box-shadow、text-shadow、transform等。
　　　　　　　　【即便非得使用，也應該確保觸發hasLayout——zoom:1;】html

　　3、圖片替代文字
　　　　Kellum方法：在隱藏文本的同時保留了文本在屏幕內。而不是之前的-9999px(hack)。前端

　　　　.hide-text {
　　　　　　text-indent: 100%;
　　　　　　white-space: nowrap;
　　　　　　overflow: hidden;
　　　　}

　　　　提升性能，特別是平板電腦或小屏幕設備。html5

　　4、圖標元素
　　　　當須要設置一個元素的背景圖片，做爲一個圖標顯示時，比起<span>等元素，<i>元素更具語義。java

　　5、使用CSS3
　　　　CSS3有兩個消極點：許多規範未肯定須要前綴；舊瀏覽器不支持。
　　　　（1）CSS3兼容性
　　　　　　CSS3新屬性最新支持列表：css3

　　　　　　經過JavaScript插件實現IE6~IE9對CSS3特性的支持：
　　　　　　　　①IE9.js.這裏有一個IE9.js影響的屬性和問題修正的解釋。
　　　　　　　　②Selectivizr
　　　　　　　　③CSS3 Pie
　　　　　　　　④CSS Sandpaper
　　　　　　　　⑤Modernizr
　　　　　　雖然增長了頁面的大小和加載事件，但這個代價值得。
　　　　（2）CSS3工具
　　　　　　查看HTML5與CSS3最新規範與支持度：http://html5please.com、http://css3please.com/
　　　　　　漸變工具：Ultimate CSS Gradient Generator
　　　　　　W3cplus整理了九十多個前端工具：《前端工具》 git

　　6、流體圖片【經常使用於響應式佈局】github

　　　　img { max-width: 100%; height: auto; }

　　7、HTML5文檔聲明瀏覽器

　　　　<!DOCTYPE html>

　　　　HTML5的文檔聲明能快速改變頁面模板和實現文檔重構。
　　　　在IE6~IE8用條件註釋引入腳本<HTML5-Shiv>，可以使舊瀏覽器正確呈現元素。

本文整理自：http://www.w3cplus.com/css/css-architectures-new-best-practices.html

相關標籤/搜索

解決方案

解決方案二

解決方案七