13個(gè)網(wǎng)頁(yè)頁(yè)面瀏覽器兼容性驗(yàn)證工具

每天在回顧瀏覽ThemeForest上的模板的時(shí)候,我都會(huì)測(cè)試驗(yàn)證瀏覽器的兼容-更不用說(shuō)我自己的工作。隨著時(shí)間的推移,我已經(jīng)收集到了網(wǎng)上最好的驗(yàn)證和瀏覽器兼容性測(cè)試的工具。以下是我最愛(ài)的。
HTML和CSS驗(yàn)證
首先讓我們先看一看檢查驗(yàn)證HTML與CSS的方法。我應(yīng)該說(shuō)到的是由于我在MAC上工作,會(huì)略微偏向于MAC。不要擔(dān)心,仍然有許多平臺(tái)獨(dú)立解決方案的。
除了驗(yàn)證你的文件以外,你也應(yīng)該很好的格式化自己的代碼"HTML/CSS格式化實(shí)例與提示"是有關(guān)此類主題的文章。
1. W3C 驗(yàn)證 - HTML
可能大多數(shù)人都知道在線的W3C驗(yàn)證服務(wù)你可以通過(guò)鏈接地址進(jìn)行驗(yàn)證,或者是上傳文件或者直接提交代碼。有很多的驗(yàn)證選項(xiàng),盡管很多時(shí)間你不真的需要他們。

2. W3C 驗(yàn)證 - CSS
你很可能知道W3C的也有一個(gè)CSS校驗(yàn)服務(wù)。與HTML驗(yàn)證服務(wù)一樣,這個(gè)CSS版本更多的選擇,并允許在必要時(shí)通過(guò)的URI驗(yàn)證,文件上傳和直接提交代碼。

3. [Firefox] 網(wǎng)頁(yè)開(kāi)發(fā)工具條
The Web Developer toolbar extension for Firefox的網(wǎng)頁(yè)開(kāi)發(fā)工具條非常受歡迎,擁有很多非常棒個(gè)的功能,附加了很棒的HTML與CSS驗(yàn)證工具,你可以快速的對(duì)當(dāng)前瀏覽的本地文件網(wǎng)站進(jìn)行驗(yàn)證。他會(huì)發(fā)送URI或者文件到W3C,并在新的選項(xiàng)頁(yè)里面顯示驗(yàn)證結(jié)果。
你也可以打開(kāi)“驗(yàn)證顯示頁(yè)面”來(lái)快速查看HTML和CSS的驗(yàn)證信息,無(wú)需再打開(kāi)新的標(biāo)簽頁(yè)面。假如你在開(kāi)發(fā)一個(gè)項(xiàng)目非常有幫助。不僅僅是HTML與CSS你也可以驗(yàn)證更多的選項(xiàng)。

4. [獨(dú)立的瀏覽器] W3C Validator Favelets
我使用Safari瀏覽器作為我的主要網(wǎng)絡(luò)瀏覽器,但是Firefox已經(jīng)寵壞了我,它擁有強(qiáng)大的擴(kuò)展選擇,如網(wǎng)絡(luò)開(kāi)發(fā)工具欄和Firebug。 Safari瀏覽器的Web Inspector,一個(gè)類似Firebug的工具,但不能進(jìn)行文件驗(yàn)證。
涵蓋幾乎任何主要瀏覽器驗(yàn)證HTML和CSS的快速和輕松的方法是使用favelets 。 Favelets是通過(guò)JavaScript增加額外的功能的書(shū)簽片段。 W3C的提供了幾種驗(yàn)證favelets,我經(jīng)常使用的是Safari 。

5. 你的開(kāi)發(fā)編輯器
大多數(shù)的編輯器提供少許的驗(yàn)證工具。目前我使用的編輯器Coda和CSSEdit都提供驗(yàn)證工具。

6. 驗(yàn)證 S.A.C.
如果您需要迅速驗(yàn)證大量的文件,在最喜愛(ài)的編輯器或通過(guò)瀏覽器打開(kāi)所有文件是痛苦的事情。這個(gè)應(yīng)用會(huì)讓這個(gè)過(guò)程快速而且簡(jiǎn)單。
S.A.C驗(yàn)證器是OS X的單機(jī)應(yīng)用程序,可以使用favelet驗(yàn)證HTML文件(with W3C),拖放或者通過(guò)URL的或僅僅是應(yīng)用程序的文件> 打開(kāi)。我用的是拖放方法尤其頻繁。 ;-)

驗(yàn)證的一些想法
雖然驗(yàn)證是非常重要的,不過(guò)它只是一種工具,以幫助確保您的代碼達(dá)到標(biāo)準(zhǔn)和接近完美。如果您使用的是一些新的網(wǎng)絡(luò)技術(shù),它可能無(wú)法驗(yàn)證,這并不意味著你不應(yīng)該使用它。創(chuàng)新的問(wèn)世往往是打破了規(guī)則。
盡管如此,如果需要提交的模板進(jìn)行銷售,請(qǐng)確保所有的文件驗(yàn)證后提交。如果有由于CSS3這樣的驗(yàn)證錯(cuò)誤,只需要在后面的說(shuō)明中注明。 ;-)
瀏覽器兼容測(cè)試
如果每個(gè)人都只使用最新版本的Firefox或Safari瀏覽器,瀏覽器的測(cè)試將是一件輕而易舉的事。還是讓我們面對(duì)現(xiàn)實(shí)吧,這是不會(huì)發(fā)生,我們未來(lái)幾年都將會(huì)與Internet Explorer的問(wèn)題做斗爭(zhēng)(不只是IE6) 。
以下是一些我常用的和一些我不用的工具,測(cè)試Internet Explorer,Safari,F(xiàn)irefox和其他瀏覽器的兼容性。
當(dāng)前的IE, Firefox 與 Safari
很明顯,如果你在使用的Windows,目前肯定安裝了例如Firefox 3.5 , Safari4 , Opera和Internet Explorer等瀏覽器。

7. 老版本的Firefox
如果需要測(cè)試的舊版本Firefox。這里有幾個(gè)我認(rèn)為最簡(jiǎn)單的方法可以做到這一點(diǎn)。
- Windows: Standalone Firefox (older versions) via Portableapps.com
- Mac: MultiFirefox 2.0
Portableapps在Windows上作為單獨(dú)的應(yīng)用軟件運(yùn)行Firefox,因此沒(méi)有必要安裝,也不會(huì)干擾到當(dāng)前安裝的Firefox。
Mac下的MultiFirefox 2.0,可以讓你運(yùn)行不同版本的Firefox,并管理不同的賬戶。

你可以訪問(wèn) http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下載其他版本
8.老版本的Safari
不幸的是,基于Windows的Web開(kāi)發(fā)人員,我沒(méi)有測(cè)試多個(gè)版本的Safari瀏覽器的簡(jiǎn)單解決辦法。對(duì)Mac用戶來(lái)說(shuō),這是個(gè)不錯(cuò)的獨(dú)立版本的Safari瀏覽器收集,Michel Fortin提供。

9 & 10. 老版本的Internet Explorer
在Mac下交互測(cè)試IE是不輕松的,所以我安裝了虛擬機(jī)運(yùn)行XP安裝了IETester,這個(gè)產(chǎn)品可以幫助你在Windows XP, Vista 和 7下測(cè)試IE從5.5開(kāi)始的各個(gè)版本。

每隔一段時(shí)間我都會(huì)在IETester中發(fā)現(xiàn)一個(gè)古怪的問(wèn)題,我不能確定是不是在原版本的IE6或7中是存在。所以我也使用Internet Explorer Collection安裝了獨(dú)立版本的IE6, 7 和 8。

快照服務(wù)
假如你不需要在這些瀏覽器中與你的網(wǎng)站實(shí)際互動(dòng),你還可以使用多種瀏覽器的快照服務(wù),這將只顯示網(wǎng)站在各種各樣的瀏覽器中的圖像效果。
11. Adobe BrowserLab
Adobe最近放出一個(gè)新的名叫BrowserLab的服務(wù),它可以通過(guò)網(wǎng)站的網(wǎng)址讓你看到不同瀏覽器下的不同效果??焖伲赓M(fèi),你可以進(jìn)行兩個(gè)不同瀏覽器版本的瀏覽效果進(jìn)行對(duì)比。

12. Browsershots.org
Browsershots.org 與Adobe BrowserLab有著相同想法,但是也有很多的不同之處。你可以在更多的平臺(tái)上設(shè)置更多的選項(xiàng)例如屏幕大小,顏色深度,JS,flash等,來(lái)測(cè)試更多的瀏覽器效果。服務(wù)的趨勢(shì)在下降,因?yàn)樗俣扔悬c(diǎn)慢(有的時(shí)候太慢了),幾乎沒(méi)有很好的UI.

13. Browsercam
如果你沒(méi)有讀到"25個(gè)設(shè)計(jì)師必不可少的網(wǎng)絡(luò)服務(wù)", 那你應(yīng)該去讀一下。你會(huì)發(fā)現(xiàn)有很多很棒的服務(wù),Browsercam 就是我在其中發(fā)現(xiàn)的。
Browsercam也可以做基礎(chǔ)的瀏覽效果截圖,但是進(jìn)一步使用別的功能和快速顯示需要付費(fèi),然而我沒(méi)有再次使用。

最后的一些想法
現(xiàn)在你擁有了一些在Windows和Mac中驗(yàn)證和測(cè)試工作的的方法。如果你要提交模板到Theme Fores,你現(xiàn)在沒(méi)有驗(yàn)證錯(cuò)誤或者瀏覽器不兼容的接口了吧。大多數(shù)我審查拒絕的模板,都是由于瀏覽器驗(yàn)證錯(cuò)誤和瀏覽器兼容問(wèn)題而造成的,需要在提交前修正這些問(wèn)題。
相關(guān)文章
- 這篇文章主要介紹了淺談原生頁(yè)面兼容IE9問(wèn)題的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起2020-12-16
新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起2020-11-30css hack之\9和\0就可能對(duì)hack IE11\IE9\IE8無(wú)效
每次設(shè)計(jì)一張網(wǎng)頁(yè)或一個(gè)表單,都被各種瀏覽器的兼容問(wèn)題傷透腦筋,尤其是IE家族。在做兼容性設(shè)計(jì)時(shí),我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語(yǔ)法進(jìn)行hack,從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20- 這篇文章主要介紹了解決CSS瀏覽器兼容性問(wèn)題的4種方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-28
常見(jiàn)的瀏覽器兼容性問(wèn)題(小結(jié))
這篇文章主要介紹了常見(jiàn)的瀏覽器兼容性問(wèn)題(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-02-20- 這篇文章主要介紹了border-radius IE8兼容處理的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-12
淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題
這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題,詳細(xì)的介紹了幾種我遇到的問(wèn)題和解決方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-26- 這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-14
對(duì)常見(jiàn)的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對(duì)常見(jiàn)的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-20