13個不同瀏覽器安全色性測試的免費軟體工具

前端開發人員最頭疼的，莫過於形形色色的瀏覽器間的相容性問題。每天絞盡腦汁地為這些本不應該存在的東西費盡心思。由於各個瀏覽器核心及解析方式的不同，使得相同的前端代碼不能實現相同的效果。所以，培養良好標準的代碼編寫習慣的同時，熟練掌握瀏覽器安全色性測試的常用工具也是必需的了。這裡是網路上傳播較多的13個不同作業系統中各色瀏覽器安全色性測試的軟體工具。

HTML和CSS驗證

首先讓我們先看一看檢查驗證HTML與CSS的方法。我應該說到的是由於我在MAC上工作，會略微偏向於MAC。不要擔心，仍然有許多平台獨立解決方案的。

除了驗證你的檔案以外,你也應該很好的格式化自己的代碼”HTML/CSS格式化執行個體與提示“是有關此類主題的文章。

1. W3C 驗證 – HTML

可能大多數人都知道線上的W3C驗證服務你可以通過連結地址進行驗證，或者是上傳檔案或者直接提交代碼。有很多的驗證選項，儘管很多時間你不真的需要他們。

2. W3C 驗證 – CSS

你很可能知道W3C的也有一個CSS校正服務。與HTML驗證服務一樣，這個CSS版本更多的選擇，並允許在必要時通過的URI驗證，檔案上傳和直接提交代碼。

3. [Firefox] 網頁開發工具條

The Web Developer toolbar extension for Firefox的網頁開發工具條非常受歡迎，擁有很多非常棒個的功能，附加了很棒的HTML與CSS驗證工具，你可以快速的對當前瀏覽的本地檔案網站進行驗證。他會發送URI或者檔案到W3C，並在新的選項頁裡面顯示驗證結果。

你也可以開啟“驗證顯示頁面”來快速查看HTML和CSS的驗證資訊，無需再開啟新的標籤頁面。假如你在開發一個項目非常有協助。不僅僅是HTML與CSS你也可以驗證更多的選項。

4. [獨立的瀏覽器] W3C Validator Favelets

我使用Safari瀏覽器作為我的主要網路瀏覽器，但是Firefox已經寵壞了我，它擁有強大的延伸選取，如網路開發工具列和Firebug。 Safari瀏覽器的Web Inspector，一個類似Firebug的工具，但不能進行檔案驗證。

涵蓋幾乎任何主要瀏覽器驗證HTML和CSS的快速和輕鬆的方法是使用favelets 。 Favelets是通過JavaScript增加額外的功能的書籤片段。 W3C的提供了幾種驗證favelets，我經常使用的是Safari 。

5. 你的開發編輯器

大多數的編輯器提供少許的驗證工具。目前我使用的編輯器Coda和CSSEdit都提供驗證工具。

6. 驗證 S.A.C.

如果您需要迅速驗證大量的檔案，在最喜愛的編輯器或通過瀏覽器開啟所有檔案是痛苦的事情。這個應用會讓這個過程快速而且簡單。

S.A.C驗證器是OS X的單機應用程式，可以使用favelet驗證HTML檔案（with W3C），拖放或者通過URL的或僅僅是應用程式的檔案> 開啟。我用的是拖放方法尤其頻繁。

驗證的一些想法

雖然驗證是非常重要的，不過它只是一種工具，以協助確保您的代碼達到標準和接近完美。如果您使用的是一些新的網路技術，它可能無法驗證，這並不意味著你不應該使用它。創新的問世往往是打破了規則。

儘管如此，如果需要提交的模板進行銷售，請確保所有的檔案驗證後提交。如果有由於CSS3這樣的驗證錯誤，只需要在後面的說明中註明。

瀏覽器安全色測試

如果每個人都只使用最新版本的Firefox或Safari瀏覽器，瀏覽器的測試將是一件輕而易舉事。還是讓我們面對現實吧，這是不會發生，我們未來幾年都將會與Internet Explorer的問題做鬥爭（不只是IE6） 。

以下是一些我常用的和一些我不用的工具，測試Internet Explorer，Safari，Firefox和其他瀏覽器的相容性。

當前的IE, Firefox 與 Safari

很明顯，如果你在使用的Windows，目前肯定安裝了例如Firefox 3.5 ， Safari4 ， Opera和Internet Explorer等瀏覽器。

7. 老版本的Firefox

如果需要測試的舊版本Firefox。這裡有幾個我認為最簡單的方法可以做到這一點。

• Windows: Standalone Firefox (older versions) via Portableapps.com
• Mac: MultiFirefox 2.0

Portableapps在Windows上作為單獨的應用軟體運行Firefox，因此沒有必要安裝，也不會干擾到當前安裝的Firefox。

Mac下的MultiFirefox 2.0，可以讓你運行不同版本的Firefox，並管理不同的賬戶。

你可以訪問 http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下載其他版本

8.老版本的Safari

不幸的是，基於Windows的Web開發人員，我沒有測試多個版本的Safari瀏覽器的簡單解決辦法。對Mac使用者來說，這是個不錯的獨立版本的Safari瀏覽器收集，Michel Fortin提供。

9 & 10. 老版本的Internet Explorer

在Mac下互動測試IE是不輕鬆的，所以我安裝了虛擬機器運行XP安裝了IETester，這個產品可以協助你在Windows XP, Vista 和 7下測試IE從5.5開始的各個版本。

每隔一段時間我都會在IETester中發現一個古怪的問題,我不能確定是不是在原版本的IE6或7中是存在。所以我也使用Internet Explorer Collection安裝了獨立版本的IE6, 7 和 8。

快照服務

假如你不需要在這些瀏覽器中與你的網站實際互動，你還可以使用多種瀏覽器的快照服務，這將只顯示網站在各種各樣的瀏覽器中的映像效果。

11. Adobe BrowserLab

Adobe最近放出一個新的名叫BrowserLab的服務，它可以通過網站的網址讓你看到不同瀏覽器下的不同效果。快速，免費，你可以進行兩個不同瀏覽器版本的瀏覽效果進行對比。

12. Browsershots.org

Browsershots.org 與Adobe BrowserLab有著相同想法，但是也有很多的不同之處。你可以在更多的平台上設定更多的選項例如螢幕大小，色彩深度，JS，flash等，來測試更多的瀏覽器效果。服務的趨勢在下降，因為速度有點慢（有的時候太慢了），幾乎沒有很好的UI.

13. Browsercam

如果你沒有讀到”25個設計師必不可少的網路服務“, 那你應該去讀一下。你會發現有很多很棒的服務，Browsercam 就是我在其中發現的。

Browsercam也可以做基礎的瀏覽效果截圖，但是進一步使用別的功能和快速顯示需要付費，然而我沒有再次使用。

最後的一些想法

現在你擁有了一些在Windows和Mac中驗證和測試工作的的方法。如果你要提交模板到Theme Fores，你現在沒有驗證錯誤或者瀏覽器不相容的介面了吧。大多數我審查拒絕的模板，都是由於瀏覽器驗證錯誤和瀏覽器安全色問題而造成的，需要在提交前修正這些問題。

內容出處不詳，如果是你的原創文章，請留下你的文章地址，會及時補上。