How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too

The Backstory

In 2013, I was creating the frontend of a responsive web app that had a lot of data to display. I had done a lot of responsive design using @media queries, but as I found myself trying to re-use components from one layout in another layout, I wished I could make my responsive breakpoints correspond to the width of the elements instead of the width of the browser.

This is something CSS can't currently do, so I was copying and pasting a lot of styles from template to template, changing mostly just the breakpoints. I searched for existing workarounds, mainly tools and JavaScript plugins, to help me automate this process or output the duplicate code for me — but these all seemed like imperfect solutions to the problem.

I had heard about Less, a CSS preprocessor that lets you author CSS that includes extra features like variables and functions that aren't part of standard CSS. You can add a small JavaScript plugin on your website that will allow the browser to read this non-standard CSS, and all your non-standard code would magically translate to styles that the browser understood. I started to wonder if there was a way I could extend CSS in the same way to solve my problem!

The Birth of a Plugin

Somewhere along the way, my paths crossed with an amazing and creative coder named Maxime. I had been a big fan of some of Maxime's past projects, and he had knowledge and understanding of CSS and JavaScript far beyond mine. One day, when I was thinking about my challenges with CSS, I sent him the following message:

I need a way of writing CSS styles that lets me:

• specify different styles based on the current width of an element
• specify different styles based on the current height of an element
• keep an element vertically centered within its parent element at all times
• keep an element horizontally centered within its parent element at all times
• specify different styles based on the text length of an element
• specify different styles based on number of child elements an element contains
• Bonus: to allow me to navigate up the DOM using the < selector

If I had a library like this I believe I could design layouts that would be truly bulletproof and unbreakable. I need @element queries!

Is it possible to write these styles in a way that looks familiar to people who write CSS, but gets read and executed by JavaScript?

Is JavaScript able to parse text (maybe called .jss file or <script type="text/jss"> where I could write CSS blocks, but wrap them with special @element queries, which could be read by JavaScript, and have the computed styles applied to the page?

[code language="css"]
@element('.widget-box', min-height: 500px) {
.widget-box {
background: red;
}
.widget-box a {
font-size: 18pt;
}
}
[/code]

or

[code language="css"]
@element('#username', min-length: 20) {
#username {
font-size: 8pt;
}
#username < label {
border: 1px solid red;
}
}
[/code]

For this to be truly useful, it needs to have a small learning curve for people who already know CSS but don’t know JavaScript. They should be able to add the JavaScript library to a site and write the custom styles and have it work without needing any custom JavaScript. I guess that makes this more like a polyfill than a plugin : )

Is something like this possible?

— Tommy, December 5, 2014

Continue reading %How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too%

by Tom Hodgins via SitePoint