Theme: pillar. See this page in dark mode or go back

A Command-line CSS validator for "modern" CSS

I am working on a project with hundreds of CSS files to maintain. Using the web-based W3C CSS Validation Service stopped being an option when I started to use CSS custom properties, which look like this:

:root
{
  /* Default foreground color */
  --fg:white;
}

They're applied using var like this:

article {color:var(--fg);}

While custom properties have been in CSS for well-nigh a decade, the interactive W3C validator online doesn't support them. Further, running checks at the command line is faster and more convenient for me.

Nu HTML checker to the rescue, almost

To make a long story short, there appear to be no easily available CSS checkers that operate from the command line and also support custom properties. But the Nu HTML checker does work from the command line, and it supports custom properties even though its web-based counterpart doesn't.

Downloading a compiled version

You don't have to compile from source. You can get a compiled version of the Nu HTML checker from the validator releases page.

As a Mac user specifically, I used the version at https://github.com/validator/validator/releases/tag/20.6.30 but of course versions change. Your mileage may vary.

Nu HTML checker did the trick pretty well except for line numbers. It expects an HTML file, which means the CSS errors are displaced. Plus I just wanted to check pure CSS files, not an HTML file. The solution was obviously something along the lines of "create a temporary HTML file, insert the CSS, and do the validation."

Creating a one-line HTML file

In order to get the error messages to yield correct line numbers, the answer was to create the temp HTML in a single line, insert the CSS, and run the validation. I created a script that works for Bash or zsh:

file: v.sh
OUTFILE="VNU_CHECK.HTML"
# Read the file named on the command line, which is $1, 
# into the variable $INFILE.
INFILE=$(<$1)
# Create the variable $CONTENTS from this HTML, plus
# insert the contents of $1 inside a style tag. 
# Keep it all on the same line 
# so error messages are accurate
read -r -d '' CONTENTS << EOM
<!DOCTYPE html><html lang=""><head><title>$1</title><style>$INFILE</style></head><body></body></html>
EOM
## Copy all of this to the output file
echo "$CONTENTS" > $OUTFILE
echo $1:
vnu $OUTFILE
$ chmod +x v.sh
$ mv v.sh /usr/local/bin

So if your file is named layout.css you'd invoke:

$ v.sh layout.css

The script generates a file with the name hardcoded to VNU_CHECK.HTML because that name is unlikely to collide with any other filename, so you can put it in .gitignore or otherwise delete it at will. The inline HTML contains the CSS file so error messages give you the right line number.

The Nu HMTL Checker error messages are that rarest kind, because they are detailed and relevant. I've run it hundreds of times and so far it hasn't been wrong or misleading. Mad props to whoever wrote it.

ERROR:html5validator.validator:[u'"file:/Users/tom/code/tom/VNU_CHECK.HTML":26.32-26.32: error: CSS: "margin-block-start": Property "margin-block-start" doesn\'t exist.'

When you're finished delete VNU_CHECK.HTML.

Metabuzz Markdown quick reference

Table of contents

Markdown syntax

Here's how markdown appears in the pillar theme:

Common text formatting

You type:

Normal body text, **strong**, ~~strikethrough~~, and with *emphasis*.

It shows as:

Normal body text, strong, strikethrough, and with emphasis.

Horizontal rule:

You type:

---

It shows as:


You type:

[HTML color names](https://htmlcolorcodes.com/color-names/)

It shows as:

HTML color names

Bookmarks

Suppose you want to link to a particular location inside a page. As long as there's an id attribute in the document's HTML you can cause a link to jump directly to that part of the page by specifing the link following a # character.

Linking inside a document

We'll loosely call them anchors or bookmarks, although the HTML specification simply calls it the id attribute.

Here's a demonstration. If you type:

Jump to the [tables](#tables) section.

The result will be this (click the link, then use your browser's Back button to return here):

Jump to the tables section.

All headers are automatically bookmarks too

Metabuzz automatically generates an id attribute for each header from h1 to h6 by taking the text of the link itself, reducing it to lowercase, and either replacing spaces and other non-letter characters with hyphens, or removing them altogether. If you look at the HTML for this page you'll see the Tables header looks like this:

<h2 id="tables">Tables</h2>

The Coding styles header uses a hyphen to replace the space:

<h2 id="coding-styles">Coding styles</h2>

And the more complicated example of the header named The "third" list type: definition lists:

<h3 id="the-third-list-type-definition-lists">The "third" list type: definition lists</h3>

Bookmarks must be unique in an HTML document

The id attribute must be unique within a document. Notice how on this page there are many headers simply called You type:? Metabuzz keeps track of them and turns each of them into unique IDs by naming them you-type-1, you-type-2, and so forth.

How to create bookmarks manually

Suppose you want a bookmark that's not a header? You can insert one anywhere by starting a Markdown line with the pure HTML code for anchors. (HTML is allowed in Markdown with a few restrictions).

You type:

<a name="jump-here"></a>

Then you create a link to it by adding the #jump-here portion to a link, which is noted by the web browser but not displayed:

[Learn about blockquotes](#jump-here)

Try it now: Learn about blockquotes

Linking to bookmarks on other websites

You can also link to an anchor to other websites, if they have anchors. Here's a link to the history of futbol on Wikipedia:

You type:

[History of futbol](https://en.wikipedia.org/wiki/Association_football#History)

It takes you right there:

History of futbol

Header styles

You type:

# h1
## h2
### h3
#### h4
##### h5
###### h6

It shows as:

h1

h2

h3

h4

h5
h6

Coding styles

You can format text inline as code by surrounding text with `tick marks`, or go block style by enclosing the lines of code in a "fenced code block", which begin and end with 3 tickmarks:

You can format text inline as `code`, or go block style:

Choosing the programming language

You can specify a color scheme for a particular programming language by including its name after the first 3 tick marks of the code block.

You type:

```python
print ("This is a code block")
```

It shows as:

print ("This is a code block")

If you're a Go programmer, you type:

```go
fmt.Println("This is a code block")
```

It shows as:

fmt.Println("This is a code block")

There are 2 or 3 kinds of list types

You type:

### Ordered lists

1. Ordered lists have numeric sequences
1. Even though you write `1` in Markdown,
1. The numbers display properly on output

It shows as:

Ordered lists

  1. Ordered lists have numeric sequences
  2. Even though you write 1 in Markdown,
  3. The numbers display properly on output

Unordered, or bullet lists

You type:

Reasons people hate bullet lists

* They were traumatized bybad PowerPoint
* Some peple actually like bullet lists
  + You can indent bullet lists
    - Just use tab, then one of the characters `*`, `+`, `-`
  + The `+` isn't required. It's just for clarity
    - Most Metabuzz themes go up to 3 visible levels
    - Any more levels than 3 makes it hard for the reader
      + Therefore the Metabuzz theme framework seldom covers indentation levels as deep as this bullet point

It shows as:

Reasons people hate bullet lists

The "third" list type: definition lists

A definition list lets you display things like an item and its meaning in a distinct way:

You type:

Definition list
: A way to show a visual relationship between a word or phrase
and an explanation for it

Markdown
: A convention for generating HTML from a more human-readable 
source format.

It shows as:

Definition list
A way to show a visual relationship between a word or phrase and an explanation for it
Markdown
A convention for generating HTML from a more human-readable source format.

Remember that a Markdown link looks like this:

[Twitter](https://twitter.com)

And that an image link looks like this:

![Twitter logo](twitter-32x32-black.png)

You can combine them to make a clickable image, like this:

[![Twitter logo](twitter-32x32-black.png)](https://twitter.com)

Tables

Use this method of creating tables. Columns are normally left-aligned, but :| on the row of dashes right-aligns a column, and |:--:| center-aligns a column. Headers are always centered.

You type:


| Left-justified Contents |  Centered Contents   | Right-justified Contents   |
| ------------------------ |:--------------------:| --------------------------:|
| Row 1, Col 1             | Row 1, Col 2         | Row 1, Col 3               |
| Row 2, Col 1             | Row 2, Col 2         | Row 2, Col 3               |

And here's what results from the table markdown shown above:

It shows as:

Left-justified Contents Centered Contents Right-justified Contents
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3

Block quote

You type:

>Hypocrisy waits silently for us all. 

It shows as:

Hypocrisy waits silently for us all.

Return to the bookmarks section