Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/media-queries-to-element-queries.html

Created February 12, 2019 21:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/71acf423dd4a043138ef28037dbb02f1 to your computer and use it in GitHub Desktop.
Save tomhodgins/71acf423dd4a043138ef28037dbb02f1 to your computer and use it in GitHub Desktop.
Download ZIP
You can read more about working with caffeinated style sheets here: https://github.com/tomhodgins/caffeinated-style-sheets
Raw
media-queries-to-element-queries.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Converting Media Queries into Element Queries in 2019</title>
<div>Element query test</div>
<style>
body {
margin: 0;
}
div {
padding: 1em;
}
/* Convert a media query like this */
@media (min-width: 500px) {
div {
color: hotpink;
}
}
/* Into an element query like this */
@supports (--element("div", {"minWidth": 500})) {
[--self] {
background: lime;
}
}
</style>
<script type=module>
import deqaf from 'https://unpkg.com/deqaf'
import element from 'https://unpkg.com/jsincss-element-query/index.vanilla.js'
deqaf({stylesheet:{element}})
</script>
@tomhodgins
Copy link
Author

first-load

Upon the first load it will download the JavaScript plugins:

  • deqaf which is used to parse the element queries from valid CSS syntax
  • jsincss which is used to populate the generated CSS stylesheets to the browser
  • jsincss-elment-query an element query plugin written to work with jsincss

Together these look like they're taking between 2-3kb, but on subsequent page loads the browser is able to cache these, resulting in 0b transfer:

second-load

Not only is this less code, but it runs about 10x faster than EQCSS as well (though it doesn't support all of the same features), so if you were wanting to do something similar to this I'd check out these newer plugins!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment