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
- You save that as
v.shor whatever and make it executable:
$ chmod +x v.sh
- Then put it on the path if you wish; on my system I placed it in
/usr/local/bin:
$ 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
- Common text formatting
- Links
- Bookmarks
- Header styles
- Coding styles
- Ordered lists
- Unordered, or bullet lists
- The "third" list type: definition lists
- Creating clickable image links in Markdown
- Tables
- Block quote
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:
Links
You type:
[HTML color names](https://htmlcolorcodes.com/color-names/)
It shows as:
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:
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
- Ordered lists have numeric sequences
- Even though you write
1in Markdown, - 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
- They were traumatized bybad PowerPoint
- Some peple actually like bullet lists
- You can indent bullet lists
- Just use tab, then one of the characters
*,+,-
- 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
- You can indent 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.
Creating clickable image links in Markdown
Remember that a Markdown link looks like this:
[Twitter](https://twitter.com)
And that an image link looks like this:
You can combine them to make a clickable image, like this:
[](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.