Web browser validation and compatibility testing tool

Every day when I look at the templates on the ThemeForest, I test the compatibility of the browser-not to mention my own work. Over time, I've collected the best validation and browser compatibility testing tools on the Web, and here's my favorite.

HTML and CSS Validation

First let's take a look at how to verify HTML and CSS. I should say that because I work on a Mac, I have a slight bias towards the Mac. Don't worry, there are still a number of platform-independent solutions.

In addition to validating your files, you should also be able to format your own code "HTML/CSS formatting instances and hints" is an article on such topics.

1, the authentication of the consortium-HTML

Perhaps most people know that online authentication services can be verified by linking addresses, uploading files, or submitting code directly. There are a lot of validation options, though a lot of the time you don't really need them.

Figure 1

2, the authentication of the consortium-CSS

You probably know that the consortium also has a CSS checksum service. Like the HTML validation service, this CSS version is more selective and allows for the verification of the URI as necessary, file uploads and direct submission code.

Figure 2

3, [Firefox] web development tool bar

The Web Developer toolbar extension for Firefox Web Page Development toolbar is very popular, has a lot of great features, and has a great HTML and CSS validation tool that you can quickly verify your current browsing of local file sites. He sends a URI or file to the consortium and displays the validation results in the new Options page.

You can also open the Verify display page to quickly view the HTML and CSS validation information without having to open a new tab page. It would be very helpful if you were developing a project. Not only HTML and CSS you can also verify more options.

Figure 3

4, [Independent browser] the Validator favelets

I use Safari browser as my main web browser, but Firefox has spoiled me, and it has powerful extension options such as Web development toolbars and Firebug. Safari Browser Web Inspector, a similar firebug tool, but not file verification.

A quick and easy way to cover almost any major browser to validate HTML and CSS is to use Favelets. Favelets is a bookmark fragment that adds additional functionality via JavaScript. The consortium offers several validation favelets, and I often use safari.

Figure 4

5, your development editor

Most editors provide a little validation tool. The editor coda and Cssedit that I use now provide validation tools.

Figure 5

6, verify the S.A.C.

If you need to quickly validate a large number of files, it is painful to open all files in your favorite editor or through the browser. This application will make the process fast and simple.

The S.A.C validator is an OS X stand-alone application that can be used to validate HTML files (with the Favelet), drag-and-drop or open via a URL or just an application's file >. I use drag-and-drop methods especially frequently.

Figure 6

Some ideas for verification

While validation is important, it's just a tool to help ensure your code is up to standard and close to perfection. If you are using some new network technology, it may not be validated, which does not mean that you should not use it. The advent of innovation often breaks the rules.

Nevertheless, if you need to submit a template for sale, make sure all files are validated after submission. If there is a validation error such as CSS3, just mention it in the following note. ;-)

Browser compatibility test

If everyone is using only the latest version of Firefox or Safari browser, the browser test will be a breeze. Let's face it, it's not going to happen, and we're going to struggle with Internet Explorer's problems in the next few years (not just IE6).

Here are some of my common and some of the tools I don't use to test Internet Explorer,safari,firefox and other browser compatibility.

Current IE, Firefox and Safari

Obviously, if you're using Windows, you're definitely installing browsers such as Firefox 3.5, Safari4, opera and Internet Explorer.

Figure 7

7. old version of Firefox

If you need to test the old version of Firefox. Here are a few of the easiest ways I think can do this.

Windows:standalone Firefox (older versions) via portableapps.com

Mac:multifirefox 2.0

Portableapps runs Firefox as a separate application on Windows, so there is no need to install it or interfere with the currently installed Firefox.

Mac Multifirefox 2.0 allows you to run different versions of Firefox and manage different accounts.

You can access http://releases.mozilla.org/pub/mozilla.org/firefox/releases/to download other versions

Figure 8

8, the old version of Safari

Unfortunately, windows-based Web developers, I don't have a simple solution for testing multiple versions of Safari browsers. For Mac users, this is a nice standalone version of Safari browser collection

Figure 9

6, verify the S.A.C.

If you need to quickly validate a large number of files, it is painful to open all files in your favorite editor or through the browser. This application will make the process fast and simple.

The S.A.C validator is an OS X stand-alone application that can be used to validate HTML files (with the Favelet), drag-and-drop or open via a URL or just an application's file >. I use drag-and-drop methods especially frequently.

Figure 6

Some ideas for verification

While validation is important, it's just a tool to help ensure your code is up to standard and close to perfection. If you are using some new network technology, it may not be validated, which does not mean that you should not use it. The advent of innovation often breaks the rules.

Nevertheless, if you need to submit a template for sale, make sure all files are validated after submission. If there is a validation error such as CSS3, just mention it in the following note. ;-)

Browser compatibility test

If everyone is using only the latest version of Firefox or Safari browser, the browser test will be a breeze. Let's face it, it's not going to happen, and we're going to struggle with Internet Explorer's problems in the next few years (not just IE6).

Here are some of my common and some of the tools I don't use to test Internet Explorer,safari,firefox and other browser compatibility.

Current IE, Firefox and Safari

Obviously, if you're using Windows, you're definitely installing browsers such as Firefox 3.5, Safari4, opera and Internet Explorer.

Figure 7

7. old version of Firefox

If you need to test the old version of Firefox. Here are a few of the easiest ways I think can do this.

Windows:standalone Firefox (older versions) via portableapps.com

Mac:multifirefox 2.0

Portableapps runs Firefox as a separate application on Windows, so there is no need to install it or interfere with the currently installed Firefox.

Mac Multifirefox 2.0 allows you to run different versions of Firefox and manage different accounts.

You can access http://releases.mozilla.org/pub/mozilla.org/firefox/releases/to download other versions

Figure 8

8, the old version of Safari

Unfortunately, windows-based Web developers, I don't have a simple solution for testing multiple versions of Safari browsers. For Mac users, this is a nice standalone version of Safari browser collection

Figure 9

9&10, older versions of Internet Explorer

Interactive test IE is not easy under Mac, so I installed the virtual machine run XP installed IETester, this product can help you in Windows XP, Vista and 7 to test the various versions of IE starting from 5.5.

Figure 10

Every once in a while I find an odd question in ietester, I'm not sure if it's in the original version of IE6 or 7. So I also use Internet Explorer collection to install the standalone version of IE6, 7 and 8.

Figure 11

Snapshot services

If you don't need to interact with your site in these browsers, you can also use a variety of browser snapshot services, which will only show the site's image effects in a variety of browsers.

11, Adobe Browserlab

Adobe recently released a new service called Browserlab, which lets you see the different effects of different browsers through the website's Web site. Fast and free, you can compare the browsing effects of two different browser versions.

Figure 12

12, browsershots.org

Browsershots.org has the same idea as Adobe Browserlab, but there are many differences. You can set more options on more platforms such as screen size, color depth, js,flash, etc. to test more browser effects. The trend of service is declining because it is a bit slow (sometimes too slow) and has very little UI.

Figure 13

13, Browsercam

If you don't read "25 of designer Web Services", you should read them. You will find that there are a lot of great services, Browsercam is what I found in them.

Browsercam can also do a screenshot of the basic browsing effect, but the further use of other features and quick display needs to be paid, yet I am not using it again.

Figure 14

Some of the last thoughts

Now you have some ways to validate and test your work in Windows and Macs. If you are submitting a template to theme Fores, you now have no validation errors or browser incompatible interfaces. Most of the templates I reviewed for rejection were caused by browser validation errors and browser compatibility issues that need to be corrected before submission.