Web 前端開發(fā)規(guī)范手冊

《Web 前端開發(fā)規(guī)范手冊》由會員分享，可在線閱讀，更多相關(guān)《Web 前端開發(fā)規(guī)范手冊（10頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、入門級的親們，好好背背這手冊成嗎一、規(guī)范目的Web前端開發(fā)規(guī)范手冊1.1概述.1二、文件規(guī)范2.1文件命名規(guī)則.12.2文件存放位置.22.3 css書寫規(guī)范.32.4 html書寫規(guī)范.72.5 JavaScript書寫規(guī)范.112.6圖片規(guī)范.122.7注釋規(guī)范.132.8 css瀏覽器兼容.13一、規(guī)范目的1.1概述為提高團(tuán)隊協(xié)作效率,便于后臺人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認(rèn),前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā).本文檔如有不對或者不合適的地方請及時提出,經(jīng)討論決定后可以更改此文檔.二、文件規(guī)范2.1文件命名規(guī)則文件名稱統(tǒng)一用小寫

2、的英文字母、數(shù)字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義,二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時,同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計算負(fù)載量等等操作。a. HTML的命名原則引文件統(tǒng)一使用index.htm index.html index.asp文件名(小寫)各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如:關(guān)于我們 aboutus信息反饋 feedback產(chǎn) 品 product如果欄目名稱多而復(fù)雜并不好以英文單詞命名,則統(tǒng)一使用該欄目名稱拼音或拼音的

3、首字母表示;每一個目錄中應(yīng)該包含一個缺省的html文件,文件名統(tǒng)一用index.htm index.html index.asp;b.圖片的命名原則圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質(zhì)例如:廣告、標(biāo)志、菜單、按鈕等等。放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名:banner標(biāo)志性的圖片取名為:logo在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton在頁面上某一個位置連續(xù)出現(xiàn),性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu裝飾用的照片我們?nèi)∶?pic不帶鏈接表示標(biāo)題的圖片我們?nèi)∶?title范 例 :banner_sohu.gif banner_sin

4、a.gif menu_aboutus.gif menu_job.gif title_news.giflogo_police.gif logo_national.gif pic_people.jpg鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為圖片名+_+on/off。例如:menu1_on.gif menu1_off.gifc. javascript的命名原則例如:廣告條的javascript文件名為ad.js彈出窗口的javascript文件名為pop.jsd.動態(tài)語言文件命名原則以性質(zhì)_描述,描述可以有多個單詞,用“_”隔開,性質(zhì)一般是該頁面得概要。范例:register_form.asp register_

5、post.asp topic_lock.asp2.2文件存放位置規(guī)范_Rootcn存放中文HTML文件en存放英文HTML文件flash存放Flash文件images存放圖片文件imagestudio存放PSD源文件flashstudio存放flash源文件inc存放include文件library存放DW庫文件media存放多媒體文件project存放工程項目資料temp存放客戶原始資料js存放JavaScript腳本css存放CSS文件 2.3 CSS書寫規(guī)范基本原則:CSS樣式可細(xì)分為3類:自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。1.樣式為設(shè)計師自定義的新CSS樣式,影響被使用本

6、樣式的區(qū)域,用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例:“.shadow”文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例:“.no12” 、“.no12-24”2.義HTML樣式為設(shè)計師重新定義已有的HTML標(biāo)簽樣式,影響全部的被設(shè)定標(biāo)簽樣式,用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義。樣式名“HTML標(biāo)簽”例:hr border: 1px dotted #333333 3.態(tài)樣式為設(shè)計師對鏈接不同狀態(tài)設(shè)定特殊樣式,影響被使用本樣式區(qū)域中的鏈接。該樣式寫法有2種:a.nav:linknav.a:link第一種只能修飾標(biāo)簽中;第二種可以修飾所有包含有標(biāo)簽

7、的其他標(biāo)簽。頁面內(nèi)的樣式加載必須用鏈接方式注意細(xì)則:1.協(xié)作開發(fā)及分工: i會根據(jù)各個模塊,同時根據(jù)頁面相似程序,事先寫好大體框架文件,分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為;共用css文件base.css由i書寫,協(xié)作開發(fā)過程中,每個頁面請務(wù)必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;2. class與id的使用: id是唯一的并是父級的, class是可以重復(fù)的并是子級的,所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級中; id原則上都是由我分發(fā)框架文件時命名的,為JavaScript預(yù)留鉤子的除外;3. 為JavaScript預(yù)留鉤子的命名,請以

8、js_起始,比如: js_hide, js_show;4. class與id命名:大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由 小寫英文&數(shù)字& _來組合命名,如i_comment, fontred, width200;避免使用中文拼音,盡量使用簡易的單詞組合;總之,命名要語義化,簡明化.5.a,b,c,d,id=mainnav中加入新的div元素,按a命名法則: .,樣式寫法: #mainnav .firstnav.規(guī)避class與id命名(此條重要,若有不明白請及時與i溝通):通過從屬寫法規(guī)避,示例見d;取父級元素

9、id/class命名部分命名,示例見d;重復(fù)使用率高的命名,請以自己代號加下劃線起始,比如i_clear;a,b兩條,適用于在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼div按b命名法則: .,樣式寫法: .main_firstnav.6. css屬性書寫順序,建議遵循 布局定位屬性-自身屬性-文本屬性-其他屬性.此條可根據(jù)自身習(xí)慣書寫,但盡量保證同類屬性寫在一起.屬性列舉:布局定位屬性主要包括: margin、padding、float(包括clear)、position(相應(yīng)的top,right,bottom,left)、display、visibility、overflow等

10、;自身屬性主要包括: width& height & background & border;文本屬性主要包括:font、color、text-align、text-decoration、text-indent等;其他屬性包括: list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序)、zoom等.我所列出的這些屬性只是最常用到的,并不代表全部;7. 書寫代碼前,考慮并提高樣式重復(fù)使用率;8. 充分利用html自身屬性及樣式繼承原理減少代碼量,比如:這兒是標(biāo)題列表2010-09-15定義ul.list liposition:relative ul

11、.list li spanposition:absolute; right:0即可實現(xiàn)日期居右顯示9. 樣式表中中文字體名,請務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯誤時亂碼;10. 背景圖片請盡可能使用sprite技術(shù),減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作;11. 使用table標(biāo)簽時(盡量避免使用table標(biāo)簽),請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn),應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn),如thead,tr,th,td,tbody,tfoot,colgroup,scope; (c

12、ellspaing及cellpadding的css控 制 方 法:tableborder:0;margin:0;border-collapse:collapse; table th, table tdpadding:0; , base.css文件中我會初始化表格樣式)12.杜絕使用兼容ie8;13.用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie6單獨(dú)定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=

13、crop,src=img/bg.png);14.避免兼容性屬性的使用,比如text-shadow|css3的相關(guān)屬性;15.減少使用影響性能的屬性,比如position:absolute|float;16.必須為大區(qū)塊樣式添加注釋,小區(qū)塊適量注釋;17.代碼縮進(jìn)與格式:建議單行書寫,可根據(jù)自身習(xí)慣,后期優(yōu)化i會統(tǒng)一處理;命名規(guī)則:頭:header內(nèi)容:content/container尾:footer導(dǎo)航:nav側(cè)欄:sidebar欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center登錄條:loginbar標(biāo)志:logo廣告:banner頁面主體

14、:main熱點(diǎn):hot新聞:news下載:download子導(dǎo)航:subnav菜單:menu子菜單:submenu搜索:search友情鏈接:friendlink頁腳:footer版權(quán):copyright滾動:scroll內(nèi)容:content標(biāo)簽頁:tab文章列表:list提示信息:msg小技巧:tips欄目標(biāo)題:title加入:joinus指南:guild服務(wù):service注冊:regsiter狀態(tài):status投票:vote合作伙伴:partner(二)注釋的寫法:/* Footer */內(nèi)容區(qū)/* End Footer */(三)id的命名:(1)頁面結(jié)構(gòu)容器: container頁頭

15、:header內(nèi)容:content/container頁面主體:main頁尾:footer導(dǎo)航:nav側(cè)欄:sidebar欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center(2)導(dǎo)航導(dǎo)航:nav主導(dǎo)航:mainbav子導(dǎo)航:subnav頂導(dǎo)航:topnav邊導(dǎo)航:sidebar左導(dǎo)航:leftsidebar右導(dǎo)航:rightsidebar菜單:menu子菜單:submenu標(biāo)題: title摘要: summary(3)功能標(biāo)志:logo廣告:banner登陸:login登錄條:loginbar注冊:regsiter搜索:search功能區(qū):sh

16、op標(biāo)題:title加入:joinus狀態(tài):status按鈕:btn滾動:scroll標(biāo)簽頁:tab文章列表:list提示信息:msg當(dāng)前的: current小技巧:tips圖標(biāo): icon注釋:note指南:guild服務(wù):service熱點(diǎn):hot新聞:news下載:download投票:vote合作伙伴:partner友情鏈接:link版權(quán):copyright基本樣式:/* CSS Document */body margin:0; padding:0; font:12px 5B8B4F53,san-serif;background:#fff;div,dl,dt,dd,ul,ol,li,

17、h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,ppadding:0;margin:0;table,td,tr,thfont-size:12px;lilist-style-type:none;imgvertical-align:top;border:0;ol,ul list-style:none;h1,h2,h3,h4,h5,h6 font-size:12px; font-weight:normal;address,cite,code,em,th font-weight:normal; font-style:norma

18、l;.fBfont-weight:bold;.f12pxfont-size:12px;.f14pxfont-size:14px;.leftfloat:left;.rightfloat:right;a color:#2b2b2b; text-decoration:none;a:visited text-decoration:none;a:hover color:#ba2636;text-decoration:underline;a:active color:#ba2636;重定義的最先,偽類其次,自定義最后,便于自己和他人閱讀!不同瀏覽器上字號保持一致,字號建議用點(diǎn)數(shù)pt和像素px來定義,pt一

19、般使用中文宋體的9pt和11pt,px一般使用中文宋體12px和14.7px這是經(jīng)過優(yōu)化的字號,黑體字或者宋體字加粗時,一般選用11pt和14.7px的字號比較合適。中英文混排時,我們盡可能的將英文和數(shù)字定義為verdana和arial兩種字體。2.4 html書寫規(guī)范1.網(wǎng)頁制作細(xì)節(jié)- head區(qū)代碼規(guī)范head區(qū)是指HTML代碼的和之間的內(nèi)容。必須加入的標(biāo)簽a)公司版權(quán)注釋b)網(wǎng)頁顯示字符集簡體中文:繁體中文:英 語:c)網(wǎng)頁制作者信息4. d) 網(wǎng)站簡介5. e) 搜索關(guān)鍵字6. f) 網(wǎng)頁的css規(guī)范7. g) 網(wǎng)頁標(biāo)題可以選擇加入的標(biāo)簽a)設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期,必須到服務(wù)

20、器上重新調(diào)閱。b)禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。c)用來防止別人在框架里調(diào)用你的頁面。d)自動跳轉(zhuǎn)。xxxxxxxxxxxxxxxxxx5指時間停留5秒e)網(wǎng)頁搜索機(jī)器人向?qū)АＳ脕砀嬖V搜索機(jī)器人哪些頁面需要索引,哪些頁面不需要索引。CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。6. f) 收藏夾圖標(biāo)7. g) 所有的javascript的調(diào)用盡量采取外部調(diào)用.h)附標(biāo)簽:標(biāo)簽不屬于head區(qū),這里強(qiáng)調(diào)一下,為了保證瀏覽器的兼容性,必須設(shè)置頁面背景2.網(wǎng)頁制作細(xì)節(jié)-字體1.在設(shè)定字體樣式時對于文字字號樣式和行間距應(yīng)必須

21、使用CSS樣式表。禁止在頁面中出現(xiàn)標(biāo)記。2.在網(wǎng)頁中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana和arial兩種字體。一般使用中文宋體的9pt和11pt或12px和14.7px這是經(jīng)過優(yōu)化的字號,黑體字或者宋體字加粗時,一般選用11pt和14.7px的字號比較合適。3.為了最大程度的發(fā)揮瀏覽器自動排版的功能,在一段完整的文字中請盡量不要使用來人工干預(yù)分段。4.不同語種的文字之間應(yīng)該有一個半角空格,但避頭的符號之前和避尾的符號之后除外,漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn),英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。5.請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的 也盡量少使用全角空格(英文字符集下,全角空格會

22、變成亂碼),空白應(yīng)該盡量使用text-indent, padding, margin, hspace, vspace以及透明的gif圖片來實現(xiàn)。6.行距建議用百分比來定義,常用的兩個行距的值是line-height:120%/150%.7.排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理,不要使用 或者全角空格來達(dá)到效果,規(guī)范的做法是在樣式表中定義p text-indent: 2em; 然后給每一段加上標(biāo)記,注意,一般情況下,請不要省略結(jié)束標(biāo)記 。3.網(wǎng)頁制作細(xì)節(jié)-鏈接1.網(wǎng)站中的鏈接路徑全部采用相對路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:而應(yīng)該這樣:,所有內(nèi)頁指向

23、首頁的鏈接寫成2.在瀏覽器里,當(dāng)我們點(diǎn)擊空鏈接時,它會自動將當(dāng)前頁面重置到首端,從而影響用戶正常的閱讀內(nèi)容,我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記4.網(wǎng)頁制作細(xì)節(jié)-表格1px表格style=border-collapse: collapse實例如下:設(shè)置亮、暗邊框顏色表格有亮邊框(bordercolorlight)和暗邊框(bordercolordark)兩個屬性可以對表格樣式設(shè)置。在寫互相嵌套時,嚴(yán)格按照的規(guī)范,對于單獨(dú)的一個來說,對齊,縮進(jìn)兩個半角空格,中如果還有嵌套的表格,也縮進(jìn)兩個半角空格,如果中沒有任何嵌套的表格,結(jié)束標(biāo)記應(yīng)該與處于同一行,不要換

24、行,如我們注意在源代碼中不應(yīng)有這樣的代碼:而應(yīng)該是這樣的:這是因為瀏覽器認(rèn)為換行相當(dāng)于一個半角空格,以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格,如果確實有必要增加一個半角空格,也應(yīng)該這樣寫: 一個網(wǎng)頁要盡量避免用整個一張大表格,所有的內(nèi)容都嵌套在這個大表格之內(nèi),因為瀏覽器在解釋頁面的元素時,是以表格為單位逐一顯示,如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi),那么很可能造成的后果就是,當(dāng)瀏覽者敲入網(wǎng)址,他要先面對一片空白很長時間,然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做,請使用標(biāo)記,以便能夠使這個大表格分塊顯示5.網(wǎng)頁制作細(xì)節(jié)-下載速度首頁Flash網(wǎng)頁大小應(yīng)限定在200K以下,盡可能的使用矢量圖形

25、和Action來減小動畫大小。非首頁靜態(tài)頁面含圖片大小應(yīng)限定在70K左右,盡可能的使用背景顏色替換大塊同色圖片。6.網(wǎng)頁制作細(xì)節(jié)- includeasp標(biāo)準(zhǔn)寫法jsp標(biāo)準(zhǔn)寫法7.網(wǎng)頁制作細(xì)節(jié)-Alt和Title都是提示性語言標(biāo)簽,請注意它們之間的區(qū)別。在我們?yōu)g覽網(wǎng)頁時,當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時,在鼠標(biāo)的右下角有時會出現(xiàn)一個提示信息框。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合,它的作用是很重要的。alt用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。用法如下:文字文字8.網(wǎng)頁制作細(xì)節(jié)-緩存網(wǎng)頁不會被緩存HTM網(wǎng)頁ASP網(wǎng)頁Response.Expires = -1Respon

26、se.ExpiresAbsolute = Now() - 1Response.cachecontrol = no-cache9.網(wǎng)頁制作細(xì)節(jié)-瀏覽器兼容性創(chuàng)建站點(diǎn)時,應(yīng)該明白訪問者可能使用各種Web瀏覽器。在已知的其他設(shè)計限制下,盡可能將站點(diǎn)設(shè)計為具有最大的瀏覽器兼容性。目前使用的Web瀏覽器有二十多種,大多數(shù)已發(fā)行了多個版本。即使您只針對使用Netscape Navigator和Microsoft Internet Explorer的大多數(shù)Web用戶,但您應(yīng)明確并不是每個人都在使用這兩種瀏覽器的最新版本。您的站點(diǎn)越復(fù)雜(在布局、動畫、多媒體內(nèi)容和交互方面),跨瀏覽器兼容的可能性就越小。例如,

27、并非所有的瀏覽器都可以運(yùn)行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示,但比起有效地使用圖形、布局和交互的頁面,這樣的頁面在美感上可能要差得多。所以,應(yīng)盡量在最佳效果設(shè)計和最大瀏覽器兼容性設(shè)計之間取得平衡。所有的HTML標(biāo)簽的屬性都要用單引號或者雙引號括起,即我們應(yīng)該寫而不 是.10.圖片處理細(xì)節(jié)- banner全尺寸banner為468X60px,半尺寸banner為234X60px,小banner為88X31px。另外120X90,120X60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸。全尺寸banner不超過14K。普遍的banner尺寸760X100,750X120,468

28、X60,468X95,728X90,585X140次級頁的pip尺寸360X300,336X280游標(biāo):100X100或120X12011.圖片處理細(xì)節(jié)- LOGO的國際標(biāo)準(zhǔn)規(guī)范為了便于INTERNET上信息的傳播,一個統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO,目前有三種規(guī)格:88*31這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格。120*60這種規(guī)格用于一般大小的LOGO。120*90這種規(guī)格用于大型LOGO。12.圖片處理細(xì)節(jié)-頁面修飾圖片處理圖片經(jīng)過優(yōu)化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風(fēng)格、頁面內(nèi)容相符;制作精美,細(xì)節(jié)處理得當(dāng)。2.5 Jav

29、aScript書寫規(guī)范1.書寫過程中,每行代碼結(jié)束必須有分號;原則上所有功能均根據(jù)XXX項目需求原生開發(fā),以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼|與現(xiàn)有代碼沖突| .);2. 庫引入:原則上僅引入jQuery庫,若需引入第三方庫,須與團(tuán)隊其他人員討論決定;3. 變量命名:駝峰式命名.原生JavaScript變量要求是純英文字母,首字母須小寫,如iTaoLun;jQuery變量要求首字符為_,其他與原生JavaScript規(guī)則相同,如:_iTaoLun;另,要求變量集中聲明,避免全局變量.4. 類命名:首字母大寫,駝峰式命名.如ITaoLun;5. 函數(shù)命名:首字母小寫駝峰式命名.

30、如iTaoLun();6. 命名語義化,盡可能利用英文單詞或其縮寫;7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?比如eval() & innerText;8. 后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用,以避免編碼錯誤時亂碼顯示;9. 代碼結(jié)構(gòu)明了,加適量注釋.提高函數(shù)重用率;10. 注重與html分離,減小reflow,注重性能.2.6圖片規(guī)范1. 所有頁面元素類圖片均放入img文件夾,測試用圖片放于img/demoimg文件夾;2. 圖片格式僅限于gif | png | jpg;3. 命名全部用小寫英文字母|數(shù)字| _的組合,其中不得包含漢字|

31、空格|特殊字符;盡量用易懂的詞匯,便于團(tuán)隊其他成員理解;另,命名分頭尾兩部分,用下劃線隔開,比如ad_left01.gif | btn_submit.gif;4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量,以減少加載時間;5. 盡量避免使用半透明的png圖片(若使用,請參考css規(guī)范相關(guān)說明);6. 運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo),減小頁面http請求,但注意,請務(wù)必在對應(yīng)的sprite psd源圖中劃參考線,并保存至img目錄下.2.7注釋規(guī)范1. html注釋:注釋格式, -只能在注釋的始末位置,不可置入注釋文字區(qū)域;2. css注釋:注釋格式/*這兒是注釋*/

32、;3. JavaScript注釋,單行注釋使用/這兒是單行注釋 ,多行注釋使用/*這兒有多行注釋*/;2.8瀏覽器兼容性CSS hack一、標(biāo)識區(qū)別:區(qū)別IE6,IE7,IE8,FF。1. IE都能識別* ;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*;2. IE6能識別*,但不能識別!important; IE6在樣式前面加_3. IE7能識別*,也能識別!important;4.IE8能識別9例如:background:red 9;5. firefox不能識別*,但能識別!important;1.IE6和firefox的區(qū)別:background:orange;*background:blue;意思就是

33、火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色.2. IE6和IE7的區(qū)別:background:green !important;background:blue;意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色3. IE7和FF的區(qū)別:background:orange; *background:green;意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色4. FF,IE7,IE6的區(qū)別:background:orange;*background:green !important;*background:blue;意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的

34、背景顏色是綠色,而IE6瀏覽器的顏色是藍(lán)色.二、實踐建議(1).開發(fā)平臺的選擇在Firefox上編寫CSS,同時兼容其他瀏覽器的.這樣做肯定會比在IE做好再到別的瀏覽器兼容來得容易,因為IE對老標(biāo)準(zhǔn)支持還是很不錯的,而IE的一些特有功能人家卻不支持.所以推薦以Firefox結(jié)合Firebug擴(kuò)展作為平臺。(2). CSS Hack的順序使用Firefox作為平臺,只要代碼寫得夠標(biāo)準(zhǔn),其實要Hack的地方不會很多的, IE以外的瀏覽器幾乎都不會有問題,所以可以暫時忽略,順序如下:Firefox - IE6 - IE7 -其他(3). Hack的方法說到方法有兩種,一種是在不同文件中處理,另一種則

35、是在同一個文件中處理.其實作用是相同的,只是出發(fā)點(diǎn)不一樣而已.1.同一文件中處理.如: id=bgcolor的控件要在IE6中顯示藍(lán)色, IE7中顯示綠色, Firefox等其他瀏覽器中顯示紅色。IE6不認(rèn)!important,也不認(rèn)*+html.所以IE6只能是blue.IE7認(rèn)!important,也認(rèn)*+html,優(yōu)先度: (*+html + !important) !important +html. IE7可以是red,blue和green,但green的優(yōu)先度最高.Firefox和其他瀏覽器都認(rèn)!important. !important優(yōu)先, Firefox可以是red和blue,但red優(yōu)先度高.上述的優(yōu)先符號均是CSS3標(biāo)準(zhǔn)允許的,其他瀏覽器也還有其他的Hack方法,但我迄今還沒遇到過Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無可分享.只要代碼規(guī)范,相信這種情況的發(fā)生應(yīng)該是很罕見(JavaScript除外).2.不同文件中處理.為什么同一文件中可以處理還要寫在多個文件里面針對不同的瀏覽器?這是為了欺騙W3C的驗證工具,其實只需要兩個文件,一個是針對所有瀏覽器的,一個只為IE服務(wù).將所有符合W3C的代碼寫到一個里面去,而一些IE中必須的,又不能通過W3C驗證的代碼(如: cursor:hand;)放到另一個文件中,再用下面的方法導(dǎo)入.