The adaptive CSS does not use Media Queries

Translator: Doraemonls

The original link

Although the title says media queries are not needed, I want to make it clear at the beginning of this article that I am not trying to get rid of media queries or bash them. Media Queries are actually very useful and I use them all over the place. However, media Queries cannot solve all the adaptive design problems.

There is often a need to arrange elements based on the size of the component they are in, rather than the width and height of the entire window. To solve these problems, the concept of Element Queries was born. However, Element Queries are just a concept, and Mat Marquis has some problems with this concept and calls it container Queries. Unfortunately, this is all conceptual.

These concepts may one day become a reality, but in the meantime, I’m going to share some tips that you can use to tackle certain types of problems today.

`flex-wrap`The Flexbox

Flex-wrap solves many of the container size-related adaptive problems. For example, if you have enough space, put two elements side by side; If you don’t have enough space, put the two elements up and down. We can see this in this example:

See CodePen for this example Responsive Module-flexbox (by @sitepoint).

No fancy tricks, just flex-wrap flexbox, perfect. Flexbox can be used in a variety of situations, such as the following two-column case, but this example is actually my simplification. The core part is pretty simple:

<div class=""container""> <div class=""img"">... </div> <div class=""content"">... </div> </div> ... .container { display: flex; flex-wrap: wrap; flex-direction: row; } .container .content, .container .img { flex: 1 0 12em; /* Change 12em to your breakpoint. */ }Copy the code

Understanding how flex-grow, Flex-shrink, and Flex-basis work is essential to using Flexbox correctly, and this Flexbox Tips I read from Zeo Gillenwater is helpful in understanding the relationship between the three.

The Fantastic Four Musketeers

It was Remi Parmentier’s idea to use width,min-width,max-width and calc (aka the magic Four Sappers) to create a width change solution based on the separation point. This was originally used as an adaptive mail template, then extended to ordinary Web pages, and now can be used to create various adaptive modules, see Thierry’s CodePen. Such as:

{
  min-width: 50%;
  width: calc((25em - 100%) * 1000);
  max-width: 100%;
  /* Change 25em to your breakpoint. */
}
Copy the code

This method works well when width is a percentage, that is, when the element width is a percentage of the container width. The calc function then subtracts this value from the desired breakpoint, which gives a very large positive number if the width value is less than the breakpoint, or a very large negative number if the width value is greater than the breakpoint, or is exactly equal to zero. However, max-width and min-width are used to cap large positive or negative numbers.

In this case, our breakpoint is 25em. If the font size is 16px, it equals 400px. If the container width is 400px or more, i.e. greater than or equal to the breakpoint, the element’s width is 0, (400-400 = 0) * 1000 = 0 or (400-401 = -1) * 1000 = -1000.

In this case, min-width takes effect and the element’s width becomes 50%. However, if the container width is 399px or less (that is, smaller than the breakpoint), then the element width is a large positive number (400-399 = 1) * 1000 = 1000.

In this case, max-width is in effect and the result is 100%. The following diagram may help you understand this logic:

The following demos use these techniques to switch the width of an element to fit its container width in different ways.

Floating picture: whole and part width processing

In this example, I’ll use the Magic Four Musketeers and float properties to illustrate how to switch the image to all or part of the container width.

Look at this example on CodePen :Responsive Module-float (by@sitepoint).

Much like the flexbox example above, this use case has multiple elements arranged vertically on a smaller container width, floating left to right or in sequence when there is enough space.

Floating picture show and hide

Following the example above, I changed the calculation logic to remove min-width to make a switch. This method can save space when the container width is small.

See the example of Responsive Module-float/hidden on CodePen (By @sitepoint).

To explain a little more:

{
  /* Removed min-width since we want the width to be zero at this point and negative widths are treated as zero */
  /* Inverted the multiplier: */
  width: calc((25em - 100%) * -1000);
  max-width: 100%;
  /* Change 25em to your breakpoint. */
}
Copy the code

Text and pictures: Overlay and stack

See this CodePen example: Responsive Module — Overlaid/STACKED (By) @sitePoint

The code is similar to the previous one, but I added an extra div to cover the text on the picture. However, if the picture is too small, the text will make the picture unclear, so I put the text under the picture. This technique is a little complicated, so I’ll explain it here.

.pull {
  /* Pull the text up over the image by this much: */
  margin-bottom: -10em;
}
Copy the code

Here, a negative margin moves the text up so that it covers the image area. As the container becomes smaller, I need to make it disappear, but since there is no min/max-width constraint at this point, we can’t do it the Fantastic Four way.

But there’s another way. If the padding is a percentage, it’s the percentage of the container width, and both the padding-top and the padding-bottom affect the height of the element. With this in mind, we can create a padding-bottom that changes depending on the container width.

padding-bottom:calc((30em - 100%) * 1000);

We can’t use the min/max-padding method for this.pull div, because there’s no such attribute; The correct way to do this is to try to add a switch to the padding, which is achieved by adding a dummy element and controlling the height of the dummy element so that its height is exactly equal to the negative margin of the.pull div.

.pull {
  /* Pull the text up over the image by this much: */
  margin-bottom: -10em;
  /* Don't allow this container to be larger than the same amount: */
  max-height: 10em;
  /* and hide any overflow, just to be on the safe side: */
  overflow: hidden;
}

.pull::before {
  content: """";
  display: block;
  padding-bottom: calc((30em - 100%) * 1000);
  /* Change 30em to your breakpoint */
}
Copy the code

The effect of this text overlay is to finally control the gradient part of the background by adding a switch to the pseudo-element.

.image::after { content: """"; display: block; position: absolute; left: 0; top: 0; /* Gradient to make the text more legible: */ background-image: Linear-gradient (to bottom, rgba(0,20,30,0) 0%,rgba(0,20,30,0) 50%,rgba(0,20,30,1) 100%); Pawnchess issues: */ Pawnchess: 592; /* Toggle gradient overlay at the same breakpoint as the 'pull': */ width: calc((30em - 100%) * -1000); /* Change 30em to your breakpoint */ max-width: 100%; }Copy the code

The list of truncated

The ultimate trick I was able to find was inspired by the Priority Plus Pattern on CSS Tricks article. However, my method is not that complicated and does not require JavaScript.

See the Truncating List (by@sitepoint) on CodePen.

Again, the “Fantastic Four” is used here, the only difference being the height of the container used here, not the width.

<div class=""outer""> <div class=""inner""> <div class=""item"">... </div> ... <div class=""control"">... </div> </div> </div> ... The outer {height: 2.25 em. overflow: hidden; } .outer:target { height: auto; }Copy the code

The outer container has a fixed height and will hide out of area unless the element has a target pseudo-class.

.inner {
  display: flex;
  flex-wrap: wrap;
}
Copy the code

The inner element is a flex-wrap container, so its height can be increased depending on the contents of its child elements. If there are elements outside the first row, they will be hidden by the outer container, because the outer container has overflow:hidden, so that it has the truncated list effect.

. Control {height: calc((2.25em-100%) * -1000); Max - height: 2.25 em. } :target .control--open { display: none; } :target .control--close { display: block; }Copy the code

‘more/less’ is controlled by whether the height of the container exceeds the breakpoint, which is the height of the outer container. The :target pseudo-class determines whether the element is visible.

The CSS automatically aligns text

See the Responsive Text Align on CodePen (by @sitepoint).

Deciding whether text should be left or center based on the size of the space is a very useful feature. Vijay Sharma has found a simple way to do this.

Flex-grow 9999 Hack

A good tip for this article is Joren Van Hee’s Flex-Grow 9999 Hack.

Media Queries don’t Need Media Queries

I wrote this post after Vasilis van Gemert’s talk “Look, No Media Queries Needed” inspired me to investigate how adaptive design can be done with little or no Media Query. His talk is well worth studying and contains many useful ideas, even if some of them are not quite appropriate for the topic of this article.

conclusion

Without element/ Container Queries, many designs cannot be implemented. Such as font color sizes, line heights, margins, box-shadows, inside and outside margins, etc., the list is too long. It should be possible to adjust these properties to the size of the parent container, but I’m afraid it won’t be possible for a while. However, I hope that some of the techniques I present here will be helpful.

If you want to know what elements Queries are based on, this article may be helpful.

If you want to know more, here are some useful resources:

EQCSS -a CSS Extension for Element Queries & More
Why Element Queries Matter
Container Queries: Once More Unto the Breach
The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today
Use Cases and Requirements for Element Queries Editor’s Draft
Use cases for container queries
How Style Scoping Works with Element Queries

The adaptive CSS does not use Media Queries

flex-wrapThe Flexbox