Check Browser Compatibility

Check Browser Compatibility

• Can I use... Support tables for HTML5, CSS3, etc "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers."
• Browser Support 教學: 查詢CSS與瀏覽器支援度的網站 · CSS可樂
• The Will Will Web | 前端工程研究：HTML/CSS/JavaScript 相容性檢查資源整理

noun explanation

1. allowed to interact: the solutions which (1) allowed to interact the web pages e.g. click the link and test javascript (2) view the web snapshot
2. view the snapshot only: only allowed to view the static web snapshot

allowed to interact

desktop browser + mobile browser

cloud services for testing desktop browsers and mobile browsers

• BrowserStack($) "Cross Browser Testing Tool. 100+ Browsers, Mobile, Real IE." List of Browsers and Platforms for Cross Browser Testing
  • Test IE for Chrome
• Sauce Labs: Mobile and Web App Testing Tools For Developers($): supported Device/OS/Browser Platforms

testing different screen resolution

• css tools

mobile browsers

WARNING: Simulators/emulators for mobile browser testing is different from the browser for real mobile device.

• iPhone 3G/4G tester - online website test emulator with flip not check user agent [Last visited: 2012-06-06]
• Mozilla Firefox | Firefox for Android | Download Firefox to your mobile device [Last visited: 2012-06-06] Win Linux
• Opera Mini simulator. Require: Java installed
• Device Mode Mobile Emulation for Chrome

alternative

• BlueStacks Run Android on Windows with BlueStacks for Win & Mac
• Genymotion + VirtualBox 教學: (魔神模擬器) Genymotion 2.2.2 - 比BlueStacks還專業的Android安卓手機模擬器 神魔之塔可以玩 - 阿榮福利味

desktop browser

One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer

• Internet Explorer Collection(介紹)
  • various IE browser version: IE1.0 ~ IE8 which allow to choose to install IE developer toolbar & Firebug Web development extension during the installation
• IETester
  • various IE browser version: IE5.5 ~ IE11 emulator IE9+ emulator not available on Windows XP
• browserling - interactive cross-browser testing in your browser Run IE5~9 (Simulated by IETester)
• Microsoft Expression Web SuperPreview(download) IE6, IE7, IE8->7 (compatibility view), IE8, Fx 3.0~3.6
• Windows OS + IE v.10: go to menu: "developer tools" -> switch "browser mode" between: IE10, IE9, IE8, IE7

older version of IE also available at

• IE3.0 ~ IE6.0: Multiple IE

other desktop browser available at

• BrowseEmAll (Standalone tool to run all major Browsers) (shareware)
• Browser Sandbox - Run any browser from the web($) Run Firefox , Chrome , Opera , Safari and mobile browsers from the plug-in, but no IE (last visited: 2011-02-09)
• browserling - interactive cross-browser testing in your browser Run IE 5-9 (Simulated by IETester), Firefox v3~10, Chrome v1~16 , Opera v10~11 and Safari v4~5 (last visited: 2012-03-06) Guest can use 3 minute sessions
• portable version of browser such as portable firefox (Firefox 免安裝版)

alternative: Install different virtual machines, ex:

• VirtualBox,
• Windows Virtual PC + IE App Compat VHD from Official Microsoft with different version of browser. For example you install IE v.6 on first virtual machine, and install IE v.7 on another virtual machine.
• VMware ThinApp($)
• ... more on Virtual machine images

view the snapshot only

• Check Browser Compatibility, Cross Platform Browser Test - Browsershots [Last visited: 2016-04-17]
  • various browser: desktop browser only
• Website Screenshots & Responsive Design Screenshots (瀏覽器螢幕擷取畫面 ) [Last visited: 2016-04-17]
  • various browser: IE 6.0-11.0, Chrome 42.0, Firefox 37.0, Safari 7.0, Safari 6.0 & Opera 12.16
  • various device: Google Nexus 6, Google Nexus 9, iPhone 6 & iPad Air

image hosted by flickr

See also

• 全球瀏覽器(Browser share)、作業系統、螢幕解析度、搜尋引擎市占率統計表
• User Agent Switcher :: Firefox Add-ons[1]for Firefox

further reading

• 9 tools to test your site — Medium

Web site design and development process

• Information gathering: Research surveys
• Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
• Design: CSS tools, Free fonts, Free photos, Emoji & icons
• Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
• Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
• Need help? Community, I need inspiration, Web design glossary