| sitelink3 | http://1 |
|---|---|
| sitelink4 | http://ko |
| extra_vars5 | http://www.codestyle.org/css/tools/W3C-CSS-Validator.shtml |
| extra_vars6 | sitelink1 |
The W3C CSS validation service is delivered as a Java servlet but can also be installed as a desktop application integrated with your favourite CSS editor. This article explains how to set up the W3C CSS checker so you can validate your CSS with a few clicks.
The W3C validator is free open source software, but the documentation for the system is minimal, incomplete and written for Java developers. This article is written for CSS developers that are Java novices. If you find this article is unclear or assumes too much about what you know, use the feedback form below to suggest improvements.
Article outline
- 1. Essential software
- Download the Java libraries for the validator.
- 2. Java Runtime Environment check
- Check you have the Java runtime installed.
- 3. Validator batch script configuration
- Create a script to hold all the Java references and test.
- 4. CSS file validation script
- Tweak the script to work with a local file.
- 5. Integrate the CSS validator with your editor
- Example integration settings for 3 text editors.
- 6. CSS validator command settings
- Configure the relevant CSS profile and other options.
Essential software
- You probably already have the Java Runtime Environment (JRE) as a browser plugin (check instructions below), but you can get the latest JRE from Java SE Downloads.
- CSS validator: download the
css-validator.jarfile. - Jigsaw W3C: download the latest Jigsaw package and extract the
jigsaw.jarfile from the directoryJigsaw/classes. - Apache Velocity: download the latest Engine binaries and sources and extract the JAR file from the main project directory , e.g.
velocity-1.6.2.jar - Apache Xerces: download the latest binary distribution of the Xerces2 Java package and extract the
xercesImpl.jarfile from the main project directory. - Tag Soup: download the latest JAR file, e.g.
tagsoup-1.2.jar. - Apache Commons Collections: download the latest binary package and extract the JAR file from the main project directory, e.g.
commons-collections-3.2.1.jar. - Apache Commons Lang: download the latest binary package and extract the JAR file from the main project directory, e.g.
commons-lang-2.4.jar.
For convenience save the 7 JAR files in a single directory with short names. The examples below use D:javacss, adjust your own directory references as necessary.
Java Runtime Environment check
You probably have the Java Runtime Environment installed as a Web browser plugin to run Java applets. To check, open a command window and call the java -version command. On Windows, click on the Start button and choose Run.
Type cmd and press Enter or click OK to open a command console. Then type java -version and press Enter. You will most likely see a Java version statement like the one below.
C:>java -version
java version "1.5.0_13"
Java(TM) 2 Runtime Environment, Standard Edition
Java HotSpot(TM) Client VM (build 1.5.0_13-b05)
Java Runtime Environment installation
If you get an error message when you check the Java version, that the command is not recognised, download and install the JRE from the Java SE Downloads page. When installation is complete Java should be added to the system search path, repeat the version check and you should see a confirmation message like the one above.
Validator batch script configuration
The configuration of the CSS validator requires all the supporting Java Archive file references to be passed in the Java classpath argument, which makes for a very long command line. To simplify integration with your chosen CSS editor, create a shell script to encapsulate all the command line arguments and use a numbered parameter argument to pass the CSS source reference to the script.
The -classpath argument in the examples below is split over several lines for clarity, your working version should be one continuous line with no spaces. The Java class name org.w3c.css.css.CssValidator should have a space before and after.
Windows batch script example, ValidateCSS.bat
The Windows classpath is separated by semi-colons. The numbered parameter argument is prefixed by a percent symbol. Note the file references in the classpath argument use forward slashes. Save as D:javacssValidateCSS.bat to follow this example.
ECHO OFF
CLS
java -classpath D:/java/css/css-validator.jar;
D:/java/css/jigsaw.jar;
D:/java/css/velocity-1.6.2.jar;
D:/java/css/tagsoup-1.2.jar;
D:/java/css/commons-lang-2.4.jar;
D:/java/css/commons-collections-3.2.1.jar;
D:/java/css/xercesImpl.jar
org.w3c.css.css.CssValidator %1
To test the Windows batch script, open a command window as above, type the path to the script followed by the URL of an HTML page to check. Press Enter to validate. Note the directory path on Windows uses back slashes, .
C:> D:javacssValidateCSS http://www.w3c.org/
CSS validator test results
If your validator script test is successful, you should see output that starts as follows then lists the style sheet content.
{output=text, medium=all, warning=2, profile=css21, lang=en}
W3C CSS Validator results for http://www.w3.org/
Congratulations! No Error Found.
This document validates as CSS level 2.1 !
The most likely errors will be incorrect or incomplete classpath references for the 7 JAR files, so check and correct as necessary. This test requires an Internet connection.
CSS file validation script
The W3C validator requires a file:/ prefix to process CSS files, so save a modified version of your shell script to handle files, as below. The file prefix could be passed to the script rather than embedded in it, but this arrangement will make integration with your CSS editor easier at the next step.
Windows CSS file validation script, ValidateCSSFile.bat
ECHO OFF
CLS
java -classpath D:/java/css/css-validator.jar;
D:/java/css/jigsaw.jar;
D:/java/css/velocity-1.6.2.jar;
D:/java/css/tagsoup-1.2.jar;
D:/java/css/commons-lang-2.4.jar;
D:/java/css/commons-collections-3.2.1.jar;
D:/java/css/xercesImpl.jar
org.w3c.css.css.CssValidator file:/%1
Test the script as before, but pass a CSS file name enclosed in quotes instead of a URL. The quotes allow for spaces in the file path. The Windows file path uses back slashes, to separate directories.
C:>D:javacssValidateCSSFile "D:javacssPrint.css"
Integrate the CSS validator with your editor
The shell scripts above will simplify the process of running the CSS validator from a command console, but any good text or CSS editor should be able to run the validator on the current file. The examples below show how to integrate the W3C CSS validator with TextPad, EditPlus and UltraEdit for Windows and indicate the equivalent settings in your preferred CSS editor.
CSS validator set up for EditPlus
The EditPlus text editor is available at http://www.editplus.com/.
- Select Tools > Cconfigure user tools..., activate the Group Name... button and add a label for the program group, e.g. "W3C CSS Validator".
- Activate the Add Tool button and select the Program option.
- Insert the cursor in the Menu text field and add a label for the tool, e.g. "Validate CSS".
- Select the button alongside the Command field to browse and select the
ValidateCSSFile.batprogram created above. - Command program selected.
- Insert the cursor in the Argument field and use the selector alongside to add the
$(FilePath)parameter for the current file. - Check the Capture output box. This option will list the validation results beneath the main editor pane.
This validation option can be accessed via the Tools menu and will have a keyboard shortcut assigned.
CSS validator set up for TextPad
The TextPad text editor is available at http://www.textpad.com/.
- Select Configure > Preferences... > Tools, activate the Add button and choose Program.
- Browse and select the
ValidateCSSFile.batscript created above. - Select the program entry to add a label to the tool, e.g. "Validate CSS".
- Insert the cursor in the Parameters field and insert the
$Fileparameter to specify the current file.
TextPad applies output capture settings by default to list the validation results in the editor window. The new validation option can be accessed via The Tools menu and will have a keyboard shortcut assigned.
CSS validator set up for UltraEdit
The UltraEdit text editor is available at http://www.ultraedit.com/.
- Select Advanced > Tool cofiguration... to access the Tool Configuration dialogue.
- Activate the Insert at the top right and type a new menu item name, e.g. "Validate CSS".
- Activate the Browse button alongside the Command Line input and select the
ValidateCSSFile.batscript created above. - Command selected.
- Insert the cursor in the Command Line field after the
ValidateCSSFile.batscript and add the%Fparameter to specify the current file. - Insert the cursor in the Working directory field to add the
%Pparameter to specify the current directory.
This validation option can be accessed via the Advanced menu, and will have a keyboard shortcut assigned.
CSS validator command settings
The W3C CSS validator will accept a number of additional command arguments to configure how it processes style sheets and formats the results. The general scheme is to follow the validator class name org.w3c.css.css.CssValidator with one or more option commands before the final CSS source reference.
... org.w3c.css.css.CssValidator -profile css3 file:/%1
... org.w3c.css.css.CssValidator -medium print file:/%1
... org.w3c.css.css.CssValidator -warning 0 file:/%1
Multiple configuration commands can inserted in your shell script, but always place the URL or file reference last in the list.
-profile PROFILEor--profile=PROFILE- Checks the style sheet against a specific CSS
PROFILE, one of:css1CSS level 1css2CSS level 2css21CSS level 2 revision 1 defaultcss3CSS level 3svgSVGsvgbasicSVG BasicsvgtinySVG Tinyatsc-tvATSC TVmobileCSS Mobile ProfiletvCSS TV Profile
-medium MEDIUM, --medium=MEDIUM- Checks the style sheet using a specific media type
MEDIUM, one of:alldefaultauralbrailleembossedhandheldprintprojectionscreenttytvpresentation
-warning WARN, --warning=WARN- Warnings verbosity level, one of:
-1no warnings012default, all warnings
-lang LANG, --lang=LANG- Prints the result in the specified language, but is likely to cause character encoding problems when run directly from the Java command line. One of:
deGermanenEnglish, defaultesSpanishfrFrenchitItalianjaJapanesekoKoreannlDutchplPolishzh-cnChinese
URL- The
URLcan either represent a remote Web resource with a standardhttp://prefix, or a local file path withfile:/prefix, e.g.file:/D:/java/css/CSPrint.css. -output OUTPUT, --output=OUTPUT- Mainly used for the W3C validator service, prints the result in the specified
OUTPUTformat, one of:text(default)xhtmlXHTMLhtmlHTML (same format as XHTML)soap12Simple Object Access Protocol
-p, --printCSS- Supposed set the validated CSS to be included in the output, but this is always on in the current version. Therefore practically redundant.
