欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p]前端開發人員最頭疼的，莫過于形形色色的瀏覽器間的兼容性問題。每天絞盡腦汁地為這些本不應該存在的東西費盡心思。由于各個瀏覽器內核及解析方式的不同，使得相同的前端代碼不能實現相同的效果。所以，培養良好標準的代碼編寫習慣的同時，熟練掌握瀏覽器兼容性測試的常用工具也是必需的了。這里是網絡上傳播較多的13個不同操作系統中各色瀏覽器兼容性測試的軟件工具。[/p]
html和css驗證
[p]首先讓我們先看一看檢查驗證html與css的方法。我應該說到的是由于我在mac上工作，會略微偏向于mac。不要擔心，仍然有許多平**立解決方案的。[/p]
[p]除了驗證你的文件以外,你也應該很好的格式化自己的代碼”[url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]html/css格式化[/url][url=http://blog.themeforest.net/tutorials/examples-and-tips-for-great-htmlcss-formatting/]實例與提示[/url]“是有關此類主題的文章。[/p]
1. w3c 驗證 – html
[p]可能大多數人都知道在線的[url=http://validator.w3.org/][color=#2e6ab1]w3c驗證服務[/color][/url]你可以通過鏈接地址進行驗證，或者是上傳文件或者直接提交代碼。有很多的驗證選項，盡管很多時間你不真的需要他們。[/p]
[url=http://validator.w3.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224822xr4.jpg[/img][/url]
2. w3c 驗證 – css
[p]你很可能知道w3c的也有一個[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]校驗服務。與html驗證服務一樣，這個css版本更多的選擇，并允許在必要時通過的uri驗證，文件上傳和直接提交代碼。[/p]
[url=http://jigsaw.w3.org/css-validator/][img]http://bbon.cn/wp-content/uploads/2009/11/2248229ja.jpg[/img][/url]
3. [firefox] 網頁開發工具條
[p]the web developer toolbar extension for firefox的網頁開發工具條非常受歡迎，擁有很多非常棒個的功能，附加了很棒的html與[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]驗證工具，你可以快速的對當前瀏覽的本地文件網站進行驗證。他會發送uri或者文件到w3c，并在新的選項頁里面顯示驗證結果。[/p]
[p]你也可以打開“驗證顯示頁面”來快速查看html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的驗證信息，無需再打開新的標簽頁面。假如你在開發一個項目非常有幫助。不僅僅是html與css你也可以驗證更多的選項。[/p]
[url=http://chrispederick.com/work/web-developer/][img]http://bbon.cn/wp-content/uploads/2009/11/22482338a.jpg[/img][/url]
4. [獨立的瀏覽器] w3c validator favelets
[p]我使用safari瀏覽器作為我的主要網絡瀏覽器，但是firefox已經寵壞了我，它擁有強大的擴展選擇，如網絡開發工具欄和firebug。 safari瀏覽器的web inspector，一個類似firebug的工具，但不能進行文件驗證。[/p]
[p]涵蓋幾乎任何主要瀏覽器驗證html和[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]的快速和輕松的方法是使用favelets 。 favelets是通過javascript增加額外的功能的書簽片段。 w3c的提供了幾種驗證favelets，我經常使用的是safari 。[/p]
[url=http://validator.w3.org/favelets.html][img]http://bbon.cn/wp-content/uploads/2009/11/224823x7x.jpg[/img][/url]
5. 你的開發編輯器
[p]大多數的編輯器提供少許的驗證工具。目前我使用的編輯器[url=http://panic.com/coda/][color=#2e6ab1]coda[/color][/url]和[url=http://macrabbit.com/cssedit/][color=#2e6ab1]cssedit[/color][/url]都提供驗證工具。[url=http://macrabbit.com/cssedit/][br][/url][/p]
[img]http://bbon.cn/wp-content/uploads/2009/11/224823xf9.png[/img]
6. 驗證 s.a.c.
[p]如果您需要迅速驗證大量的文件，在最喜愛的編輯器或通過瀏覽器打開所有文件是痛苦的事情。這個應用會讓這個過程快速而且簡單。[/p]
[p]s.a.c驗證器是os x的單機應用程序，可以使用favelet驗證html文件（with w3c），拖放或者通過url的或僅僅是應用程序的文件> 打開。我用的是拖放方法尤其頻繁。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p]
[url=http://habilis.net/validator-sac/][img]http://bbon.cn/wp-content/uploads/2009/11/2248237ks.jpg[/img][/url]
驗證的一些想法
[p]雖然驗證是非常重要的，不過它只是一種工具，以幫助確保您的代碼達到標準和接近完美。如果您使用的是一些新的網絡技術，它可能無法驗證，這并不意味著你不應該使用它。創新的問世往往是打破了規則。[/p]
[p]盡管如此，如果需要提交的模板進行銷售，請確保所有的文件驗證后提交。如果有由于[url=http://yeeyan.com/articles/tag/css][color=#335533]css[/color][/url]3這樣的驗證錯誤，只需要在后面的說明中注明。 [img]http://bbon.cn/wp-includes/images/smilies/icon_wink.gif[/img] [/p]
瀏覽器兼容測試
[p]如果每個人都只使用最新版本的firefox或safari瀏覽器，瀏覽器的測試將是一件輕而易舉的事。還是讓我們面對現實吧，這是不會發生，我們未來幾年都將會與internet explorer的問題做斗爭（不只是ie6） 。[/p]
[p]以下是一些我常用的和一些我不用的工具，測試internet explorer，safari，firefox和其他瀏覽器的兼容性。[/p]
當前的ie, firefox 與 safari
[p]很明顯，如果你在使用的windows，目前肯定安裝了例如firefox 3.5 ， safari4 ， opera和internet explorer等瀏覽器。[/p]
[img]http://bbon.cn/wp-content/uploads/2009/11/224823jje.jpg[/img]
7. 老版本的firefox
[p]如果需要測試的舊版本firefox。這里有幾個我認為最簡單的方法可以做到這一點。[/p]
[ul]
[li]windows: [url=http://sourceforge.net/projects/portablefirefox/files/][color=#2e6ab1]standalone firefox (older versions)[/color][/url] via [url=http://portableapps.com/][color=#2e6ab1]portableapps.com[/color][/url][/li]
[li]mac: [url=http://davemartorana.com/multifirefox/][color=#2e6ab1]multifirefox 2.0[/color][/url][/li][/ul]
[p]portableapps在windows上作為單獨的應用軟件運行firefox，因此沒有必要安裝，也不會干擾到當前安裝的firefox。[/p]
[p]mac下的multifirefox 2.0，可以讓你運行不同版本的firefox，并管理不同的賬戶。[/p]
[url=http://davemartorana.com/multifirefox/][img]http://bbon.cn/wp-content/uploads/2009/11/224824zhl.jpg[/img][/url]
[p]你可以訪問 [url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][color=#2e6ab1]http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ [/color][/url]下載其他版本[url=http://releases.mozilla.org/pub/mozilla.org/firefox/releases/][br][/url][/p]
8.老版本的safari
[p]不幸的是，基于windows的web開發人員，我沒有測試多個版本的safari瀏覽器的簡單解決辦法。對mac用戶來說，這是個不錯的獨立版本的safari瀏覽器收集，[url=http://michelf.com/projects/multi-safari/][color=#2e6ab1]michel fortin提供[/color][/url]。[/p]
[url=http://michelf.com/projects/multi-safari/][img]http://bbon.cn/wp-content/uploads/2009/11/224824gpk.png[/img][/url]
9 & 10. 老版本的internet explorer
[p]在mac下交互測試ie是不輕松的，所以我安裝了虛擬機運行xp安裝了ietester，這個產品可以幫助你在windows xp, vista 和 7下測試ie從5.5開始的各個版本。[/p]
[url=http://my-debugbar.com/wiki/ietester/homepage][img]http://bbon.cn/wp-content/uploads/2009/11/224824dm7.jpg[/img][/url]
[p]每隔一段時間我都會在ietester中發現一個古怪的問題,我不能確定是不是在原版本的ie6或7中是存在。所以我也使用[url=http://finalbuilds.edskes.net/iecollection.htm][color=#2e6ab1]internet explorer collection[/color][/url]安裝了獨立版本的ie6, 7 和 8。[/p]
[url=http://finalbuilds.edskes.net/iecollection.htm][img]http://bbon.cn/wp-content/uploads/2009/11/224824wbj.jpg[/img][/url]
快照服務
[p]假如你不需要在這些瀏覽器中與你的網站實際互動，你還可以使用多種瀏覽器的快照服務，這將只顯示網站在各種各樣的瀏覽器中的圖像效果。[/p]
11. adobe browserlab
[p]adobe最近放出一個新的名叫[url=http://browserlab.adobe.com/][color=#2e6ab1]browserlab[/color][/url]的服務，它可以通過網站的網址讓你看到不同瀏覽器下的不同效果。快速，免費，你可以進行兩個不同瀏覽器版本的瀏覽效果進行對比。[/p]
[url=http://browserlab.adobe.com/][img]http://bbon.cn/wp-content/uploads/2009/11/224824cw8.jpg[/img][/url]
12. browsershots.org
[p][url=http://browsershots.org/][color=#2e6ab1]browsershots.org[/color][/url] 與adobe browserlab有著相同想法，但是也有很多的不同之處。你可以在更多的平臺上設置更多的選項例如屏幕大小，顏色深度，js，flash等，來測試更多的瀏覽器效果。服務的趨勢在下降，因為速度有點慢（有的時候太慢了），幾乎沒有很好的ui.[/p]
[url=http://browsershots.org/][img]http://bbon.cn/wp-content/uploads/2009/11/224824rtp.jpg[/img][/url]
13. browsercam
[p]如果你沒有讀到”[url=http://blog.themeforest.net/resources/25-essential-web-services-for-designers/][color=#2e6ab1]25個設計師必不可少的網絡服務[/color][/url]“, 那你應該去讀一下。你會發現有很多很棒的服務，[url=http://browsercam.com/][color=#2e6ab1]browsercam[/color][/url] 就是我在其中發現的。[/p]
[p]browsercam也可以做基礎的瀏覽效果截圖，但是進一步使用別的功能和快速顯示需要付費，然而我沒有再次使用。[/p]
[url=http://browsercam.com/][img]http://bbon.cn/wp-content/uploads/2009/11/2248255e8.jpg[/img][/url]
最后的一些想法
[p]現在你擁有了一些在windows和mac中驗證和測試工作的的方法。如果你要提交模板到theme fores，你現在沒有驗證錯誤或者瀏覽器不兼容的接口了吧。大多數我審查拒絕的模板，都是由于瀏覽器驗證錯誤和瀏覽器兼容問題而造成的，需要在提交前修正這些問題。[/p]
[p]內容出處不詳，如果是你的原創文章，請留下你的文章地址，會及時補上。[/p]
[p][url=http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html]http://bbon.cn/2009/11/13-debugging-the-browser-compatibility-verification-tools.html[/url][/p]