An Introduction to Two-factor In-Browser CSS Preprocessing
How more is better when it comes to styling the Web
CSS is a programming language that allows you to format HTML elements without using JavaScript or Node. Initially released 17 years ago on this day, it has literally changed the way websites and applications in the browser look. Like most of us in our teen years, CSS has evolved to become cooler and use performance enhancers (a la preprocessors) to make itself stand out from the rest of the grunge kids’ code.
Using preprocessors — like Sass, Less, ZendPHP, and Stylus — has allowed us developers to optimize their styling workflow, but there is so much more we can be doing to save time.
There are three main issues with CSS preprocessors today:
- require compiling; what a waste of time and installing compilers
- require changing windows to see compiled code vs. preprocessor code; still another waste of time and screen real estate
- no fallback for when our preprocessed css is not what we intended it to be; you are humans, you make mistakes, but your browser and I don’t know that until it’s two late.
I propose an even better type of CSS preprocessor, and I call it Two-factor In-browser CSS Preprocessing.
Two-factor In-browser CSS Preprocessing.
Because yes we can.
There are two components to TFIBCP: two-factoring and being in-browser.
The first factor is writing the CSS. In my example, I have a file called “my site stylescripts.css” with some CSS:
body { font-weight: bold; font-size: 20pt; }
img { border: 1px solid lime; }Instead of compiling this into real vanilla CSS, we add the second factor inline with our html. Take a look at “mySite-index.htm”:
<html>
<head>
<link rel=”stylescripts” href=”my site stylescripts.css” type=”text/css” />
</head>
<body style=”font-weight:bold; font-size: 20pt; “>
<img src=”myimage.png” style=”border: 1px solid magenta;” alt=”” />
</body>
</html>Notice how the second-factor code inline sets the border to be magenta. The lime value in our pre-preprocessed CSS was a human error, now corrected by the second factor. By putting our CSS both outside the HTML *and* inline with the HTML, we have a fall-back to double-check our styling and we do not have to waste time compiling our CSS or installing packages to handle that compilation because everything is done by the browser.
Browsers are smarter that they used to be, and so are we web developers. It’s time to start showing how smart we are by evolving from the preprocessors our ancestors used. Two-factor In-browser CSS Preprocessing is a start.
Jenn Schiffer is the best-selling author of the adult thriller How CSS Killed RSS. Her biological father, Nick Ortenzio, brainstormed with her on this very important concept during lunch yesterday at Tokyo Buffet, the official venue of the Boolean Operator Consortium.
