Nur Rony
Polyglot Programmer. Blindly love JS. An automation freak who love to cook code in React, Redux, RxJS and serve them using Docker. Married to the most beautiful girl.

Using Element Query Posted on

Using Element Query Posted on

Responsive design is known to all. To achieve responsiveness we generally use media queries. But I feel media queries are some kind of CSS Hack. It is really annoying when I need to work with it. Sometime it makes my CSS totally messy that I don’t want to see it again. If anyone who is in my situation I have a good news for those. It is Element Query.

In Element Query we define our responsive elements in more expressive way like below

.widget-name {
    padding: 25px;
}
.widget-name[max-width="200px"] {
    padding: 0;
}
.widget-name[min-width="500px"] {
    padding: 55px;
}

/* responsive images */
.responsive-image img {
    width: 100%;
}

.responsive-image[max-width^='400px'] img {
    content: url(demo/image-400px.jpg);
}

.responsive-image[max-width^='1000px'] img {
    content: url(demo/image-1000px.jpg);
}

.responsive-image[min-width='1000px'] img {
    content: url(demo/image-full.jpg);
}

There are many Element query repository in github. I used the below and found really cool
https://github.com/marcj/css-element-queries