W3C CSS Checker The Next Generation

Michael[tm] Smith W3C Deputy Director mike@w3.org http://people.w3.org/mike/

Question: Why check your CSS?

Answer: To catch mistakes.

Catch mistakes in your CSS

● Catch syntax errors ● Catch typos in CSS property names ● Catch values with the wrong datatype

Example…

There are three mistakes in the following example…

.ok { color: green; font-size: bold;

.alert { color: red background-color: white; font-size: bold;

}

.ok { color: green; font-weight: bold;

} .alert {

color: red; background-color: white; font-size: 150%; }

How to catch mistakes

Now: W3C CSS Validator

https://jigsaw.w3.org/css-validator

Problems with CSS Validator

● Very old; started in 2002 ● Not actively maintained any more ● Written in Java ● Hard to extend with new CSS properties

More Problems with CSS Validator

● Uses ad-hoc parser that doesn’t conform to CSS Syntax spec

So let’s make a new CSS Checker!

https://csschecker.w3.org

That URL doesn’t exist yet…

…but we are already at github

https://github.com/w3c/css-checker

New CSS Checker requirements

● Use a CSS parser that conforms to the CSS Syntax spec.

● Use the right programming language. ● Make it easy to extend.

What language to use?

JavaScript + node.js?

Tab Atkins CSS parser written in JavaScript

https://github.com/tabatkins/parse-css

Simon Sapin CSS parser written in Rust

https://github.com/servo/rust-cssparser

What is Rust?

Rust is the language that Mozilla Servo is written in

What is Mozilla Servo?

Servo is Mozilla’s next-generation browser engine

Simon Sapin’s rust-css-parser is the CSS parser used in Servo

For the CSS Checker, we could use the same CSS parser as a

major browser engine

Next-generation browser engine, next-generation CSS Checker

Advantages of Rust

● New, modern language (2010~) ● Pure functional ● High-concurrency/parallelization (to take

full advantage of multi-core CPUs)

Let me know what you think of using Rust for the nextgeneration CSS Checker!

Thanks!