responsive-elements

Name Modified Size
README.md4 years ago862

Element Queries

Proposal 1

Use a :query pseudo-state in CSS.

<div class="widget">
.widget {
    border: 1em solid #EEE;
}

.widget:query(max-width: 33em) {
    border: .25em solid #EEE;
}

Pros

Composability, small, self-contained definitions that can be understood in isolation.

Cons

JavaScript hack would have to parse CSS files, oh noes domain restrictions. :query(max-width: 33em) doesn't describe the situation very semantically.

Proposal 2

Attribute that controls class name during matching element query.

<div class="widget" data-class="small, (max-width: 33em)">

Pros

JavaScript hack would require least effort, searching elements for a specific attribute is easy.

Cons

Things that control style not inside stylesheets, same complaints that come with srcset, .