How to View Online CSS3 - dummies

How to View Online CSS3

By John Paul Mueller

Once you’ve found the CSS3 online, you’ll want to view it. In at least some cases, the CSS will use plenty of white space and could include comments. For example, when you view the standard version of jquery-ui.css, you see a fully commented file with plenty of white space.


On the other hand, trying to view some JavaScript or CSS files can prove nearly impossible. For example, when viewing jquery-1.4.2.min.js, you see the mass of undecipherable text. The browser can read this text without any problem whatsoever, but any developer attempting to read it will encounter problems.


You could handle the problem in a number of ways, but the easiest method is to use a third-party utility such as JavaScript Beautifier Online. All you do is copy the code from the browser’s code viewer, paste the code into the page, select the settings you want to use, and then wait while the utility automatically adds whitespace so you can see what is happening with the code.

Here is the output from jquery-1.4.2.min.js. Even though this utility is called JavaScript Beautifier Online it works fine with all sorts of files. Just give it a try whenever you need to see packed source code.


After you make the code readable with a product such as JavaScript Beautifier Online, you can copy it out and place it on your local drive. As you work through the file you can add your own comments.

The idea is to become thoroughly familiar with whatever code you’re working with before you make any decisions about modifications or tweaks. In addition, you need to be able to talk with anyone who knows more about the file in an intelligible manner.