CSS Code Hinting in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver

How to View Online CSS3

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.

image0.jpg

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.

image1.jpg

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.

image2.jpg

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.

blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
How to Apply CSS3 Effects and Transforms in Dreamweaver
How to Use Safe Text Decoration in CSS3
How to Create Hyperlink Styles with Pseudo-Classes in Cascading Style Sheets (CSS)
CSS Web Design For Dummies Cheat Sheet
Advertisement

Inside Dummies.com