.wrapper
h1 CSS element-queries
h2 Introducing an awesome concept
.wrapper4
.element look at me change
.wrapper2
.element look at me change
.wrapper3
.element look at me change
.wrapper1
.element look at me change
p ...with a really CSS-like syntax, works with plain CSS or SCSS
p no media-query magic involved ;)
h3 Here's how one would declare an element-query (actual code from this example)
pre
| .element {
| height: 20px;
| background: #F44336;
| color: #000;
| padding: 20px;
| }
| @element (max-width: 300px) {
| .element {
| background: #3F51B5;
| height: 50px;
| color: #fff;
| }
| }
.warning
h2 !!!Warning
p this is not a functional code it just works for this specific example. i will try to build a functional pluugin for this feature. Ideas are welcome.
/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto:400,700);
.element {
height: 20px;
background: #F44336;
color: #000;
padding: 20px;
}
@element (max-width: 300px) {
.element {
background: #3F51B5;
height: 50px;
color: #fff;
}
}
.wrapper1 {
width: 40%;
}
.wrapper2 {
width: 30%;
}
.wrapper3 {
width: 20%;
}
.wrapper4 {
width: 10%;
}
.wrapper {
margin: 50px;
}
.warning {
background: #D32F2F;
color: #fff;
padding: 10px;
}
body {
margin: 0;
background: #FFD54F;
color: #000;
font-family: 'Roboto', sans-serif;
}
pre {
background: #222;
color: #ffa;
margin: 10px 0;
padding: 10px;
font-size: 20px;
font-family: 'Source Code Pro', monospace;
}
/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
var stylesheet = document.querySelector('style').innerHTML;
var elementQuery = stylesheet.match(/@element[^\}]+/)[0];
var c = elementQuery.match(/\([a-z\- 0-9:]+\)/g)[0];
var d = elementQuery.replace(/@element[^\n]+/g, '');
var e = d.match(/[\.#][^\{]+/g)[0];
var el = document.querySelectorAll(e);
d = d.replace(/\n+/g,'').replace(/\s+/g,' ');
rule = d.match(/[a-z\-]+:.*;/g)[0];//.split(':');
rule = rule.split(';');
var rules = [];
[].forEach.call(rule, function(elm,i){
var arr = elm.split(':');
rules.push(arr);
});
function checkQuery(){
[].forEach.call(el,function(elm,i){
if(elm.clientWidth <= c.match(/\d+/)[0]){
[].forEach.call(rules,function(r,idx){
elm.style[r[0].trim()] = r[1];
});
} else {
[].forEach.call(rules,function(r,idx){
elm.style[r[0].trim()] = null;
});
}
});
}
window.addEventListener('resize', checkQuery, false);
checkQuery();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
