CSS Syntax Checker for BBEdit and TextWrangler

Download

About

The CSS Syntax Checker for BBEdit and TextWrangler is a combination of Perl and AppleScript that allows you to syntax-check CSS files using the W3C’s CSS Validation Service. Errors and warnings from the validation service are displayed in a results browser, very similar in effect to BBEdit’s built-in HTML syntax checker.

These scripts require Mac OS X 10.3.9 or later, and have been tested against BBEdit 8.2.3 and TextWrangler 2.1. It might work with BBEdit 7 as well.

Screenshot of CSS Syntax Check results browser

Installation

CSS Syntax Checker consists of two script files: one AppleScript and one Perl:

  • CSS Syntax Check.scpt
  • CSS Syntax Check.pl

Both scripts are essential. The easiest way to install these scripts is to put both of them in your BBEdit or TextWrangler scripts folder:

  • ~/Library/Application Support/BBEdit/Scripts/
  • ~/Library/Application Support/TextWrangler/Scripts/

Technically, this “Scripts” folder is intended just for AppleScripts (to be truly pedantic, it’s intended for OSA scripts). However, it’s harmless to store the Perl script here (it won’t show up in your Scripts menu), and the AppleScript assumes the Perl script is in the same folder as itself.

Usage

Open a CSS file and choose “CSS Syntax Check” from the Scripts menu. It will probably take a second or two to run.

  • If there are no errors or warnings, you should get a new 10.4-style “display alert” dialog saying so.

  • If there are any errors or warnings, you should get a results browser showing the errors and warnings.

Super-Cool Bonus Feature

If you run it against an HTML document, it will perform a CSS syntax check against the contents of the first <style>...</style> tag pair in the document. In other words, even if your CSS isn’t in a standalone CSS file, you can still syntax-check it with this script. This is quite handy for developers who use inline CSS during development to avoid browser caching issues.

Using It as a Menu Script in BBEdit

For extra fun, you can make an alias to the “CSS Syntax Check” script and place it (the alias) in your BBEdit Menu Scripts folder. Name the alias “Check•Document Syntax” (that’s an Option-8 bullet). The alias should end up here:

~/Library/Application Support/BBEdit/Menu Scripts/Check•Document Syntax

After you’ve done this, you should now be able to invoke the CSS syntax checker using the Markup -> Check -> Document Syntax command, the same one used for checking HTML documents.

The AppleScript’s menuselect() handler does the CSS syntax checking if the frontmost text document is set to the CSS source language; otherwise it passes the command on to BBEdit’s regular HTML checker.

In other words, if you call this script from BBEdit’s Scripts menu, it will always run a CSS syntax check against the front text window. If you call it using the Markup -> Check -> Document Syntax menu script, it will only do a CSS syntax check if the front document’s source language is set to CSS, otherwise it will be passed along to BBEdit to be checked as HTML.

The point of this is that it allows you to use the same keyboard shortcut to check both HTML and CSS files.

(TextWrangler does not provide a built-in HTML syntax checker, so this section does not apply to TextWrangler users.)

Known Issues

  • The results browser for errors and warnings will not appear if the front document is untitled (i.e. a new document that has never been saved to disk). It “just works” if the front window is dirty, but associated with an on-disk file, but it doesn’t work if the front document has never been saved. This is due to a known limitation in the BBEdit/TextWrangler scripting interface for results browsers.

  • Things get severely wiggy if you syntax check CSS that contains @import directives that point to valid URLs. What happens is that W3C validator fetches and checks the source of the imported CSS, which in turn throws off all the line numbers it reports.

  • The actual work of CSS syntax checking is performed by the W3C’s online CSS Validator: http://jigsaw.w3.org/css-validator/. Thus, this script only works while you are connected to the Internet.

  • If you have more than one <style> tag in an HTML document, only the contents of the first one will be checked.

Changes in Version 1.0.1

  • Now runs on Mac OS X 10.3.