Mises en page réactives sans requêtes multimédias

À quelle fréquence utilisez-vous les requêtes multimédias lors de la création de mises en page Web ? J'ai passé trop de temps dessus !

Au début, vous avez passé beaucoup de temps à essayer de faire en sorte que la mise en page soit exactement comme dans le design. Mais vous devez ensuite redimensionner votre navigateur sur toutes les résolutions d'écran possibles pour vous assurer que votre page s'affiche toujours bien sur chacune d'entre elles. Et je veux redimensionner non seulement en largeur, mais aussi en hauteur - surtout si vous avez des sections pleine hauteur.

Finalement, votre CSS devient plein de lignes comme celles-ci :

@media screen and (max-width: 1199px) { /*styles here*/ }
@media screen and (max-width: 1023px) { /*more styles here*/ }
@media screen and (max-width: 767px) { /*another styles here*/ }

Et c'est énervant ! Ne serait-ce pas beaucoup plus facile si vous pouviez inclure automatiquement la réactivité ? Bien entendu, vous devez toujours fournir les règles de réactivité, mais sans avoir besoin de les écrire pour des dizaines de résolutions d'écran.

Système d'unités

La première chose que vous devez comprendre à propos du design réactif est qu'il faut oublier les pixels.

Je sais qu'il peut être difficile de passer d'une unité à une autre, mais utiliser les pixels est la voix du passé.

Le plus gros problème lié à l'utilisation des pixels comme unité de taille est que vous ne comptez pas l'appareil de l'utilisateur à partir duquel il consulte votre site Web.

La taille de police racine par défaut pour les navigateurs modernes est de 16 px. Cela signifie 1rem = 16px. Mais cela ne signifie pas que les utilisateurs ne peuvent pas modifier cette valeur dans les paramètres du navigateur comme ils le souhaitent.

Imaginez donc que la taille de police par défaut du navigateur de l'utilisateur est de 24 px. Mais vous avez défini la taille de la police de la balise body sur 16 px.

Voici ce que l'utilisateur s'attend à voir :

La taille de la police racine est égale à 24px

Et voici ce que l'utilisateur voit réellement :

La taille de la police racine est égale à 16px

Cela touche particulièrement les personnes ayant des problèmes de vision, votre page ne leur sera donc pas très accessible.

Bien sûr, ils peuvent toujours zoomer sur votre page, mais dans ce cas, cela affectera d'autres sites Web ouverts, qui ne sont peut-être pas censés être zoomés.

BTW, le site Lorem Ipsum est un très « bon » mauvais exemple de l’apparence non conviviale d’une page si vous utilisez des pixels pour les polices, les marges, les remplissages, etc.

Si vous n'êtes pas familier avec les unités relatives comme rem et vw, vous devriez consulter cet article sur le MDN, où vous pourrez approfondir les unités et les valeurs CSS : https://developer.mozilla.org/en- US/docs/Learn/CSS/Building_blocks/Values_and_units

Variables de configuration

Pour faciliter la création de la mise en page, configurons d'abord les variables globales. Heureusement, en CSS, nous avons cette opportunité. Puisque les variables personnalisées sont soumises à la cascade et héritent de leur valeur de leur parent, nous les définirons sur la pseudo-classe :root, ainsi elles pourront être appliquées à l'ensemble du document HTML.

:root {
  --primary-color: green;
  --primary-font: Helvetica, sans-serif;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
}

Cela semble assez simple - nous définissons un nom de variable, qui doit commencer par un double trait d'union (--). Fournissez ensuite une valeur variable, qui peut être n'importe quelle valeur CSS valide.

Ensuite, nous pouvons utiliser ces variables pour n'importe quel élément ou même pseudo-classe du document en utilisant la fonction var() :

color: var(--primary-color);

Par exemple, nous pouvons utiliser notre variable --primary-color pour tous les titres de la page comme ceci :

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
}

Comme la couleur primaire va utiliser pas mal d'éléments différents sur la page, il est très pratique d'utiliser la variable au lieu d'écrire à chaque fois la couleur elle-même.

La dernière variable --text-font-size: clamp(1rem, 2.08vw, 1.5rem) peut paraître étrange : qu'est-ce que la pince et que fait-elle sur la variable de taille de police ?

Mise à l'échelle dynamique des polices

La fonction CSS clamp() serre une valeur moyenne dans une plage de valeurs comprise entre une limite minimale définie et une limite maximale.

Vous devez fournir une valeur minimale (qui est de 1rem dans l'exemple ci-dessus), une valeur préférée (2,08vw) et la valeur maximale autorisée (1,5rem).

La partie la plus délicate ici est de définir la valeur préférée. Il devrait être dans certaines unités relatives de la fenêtre d'affichage (comme vw ou vh). Ainsi, lorsqu'un utilisateur redimensionne son navigateur ou modifie l'orientation de l'appareil, la taille de la police sera proportionnellement adaptée.

J'ai créé cette formule pour calculer la valeur préférée :

valeur = AMValue * remInPx / (containerWidth / 100)

Voici une explication, pas de panique :

AMValue - moyenne arithmétique, entre les valeurs minimales et maximales autorisées en rem. Dans notre exemple cela vaut (1rem 1,5rem) / 2 = 1,25rem

remInPx - taille par défaut de 1rem en pixels, selon votre conception, elle est généralement égale à 16px

containerWidth - la largeur maximale de votre bloc conteneur de contenu (en pixels). Nous devons diviser cette valeur par 100 pour obtenir 1% de la largeur. Dans l'exemple, cela équivaut à 960px.

Donc, si vous remplacez les arguments de cette équation par des nombres réels, vous obtiendrez :

value = 1.25 \* 16 / (960 / 100) = 2.08

Let’s check how it will scale:

I know it’s not a perfect solution. Besides, we attach again to pixels, when calculating the preferred value. It’s just one of many possible options to make our fonts scale between viewports sizes.

You can use other CSS functions like min() or max(), or create a custom method to calculate the preferred value in the clamp() function.

I wrote an article about dynamic font size scaling, only for pixel units. It’s a bit outdated, but still you might find it helpful:

Dynamic font-size using only CSS3

Ok, enough of the fonts, let’s go further to the layout!

Layout with equal column width

Let’s start with some simple layout with 6 equal columns.

With media queries you need to write a bunch of extra CSS code to handle how they should wrap on different screen sizes. Like this:

/* by default we have 6 columns */
.column {
  float: left;
  width: calc(100% / 6);
}
/* decrease to 4 columns on the 1200px breakpoint */
@media screen and (max-width: 1200px) {
  .column {
    width: calc(100% / 4);
  }
}
/* decrease to 3 columns on the 1024px breakpoint */
@media screen and (max-width: 1024px) {
  .column {
    width: calc(100% / 3);
  }
}
/* finally, decrease to 2 columns for the viewport width less than or equal to 768px */
@media screen and (max-width: 768px) {
  .column {
    width: calc(100% / 2);
  }
}

Woah! That’s a lot of code, I must say! Wouldn't it be better to just make it scale automatically?

And here’s how, thanks to the CSS grid layout:

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(10em, 1fr) );
}

All we need to do is to set the parent block of our columns to be displayed as a grid. And then, create a template for our columns, using grid-template-columns property.

This is called RAM technique (stands for Repeat, Auto, Minmax) in CSS, you can read about it in more details here:

RAM Technique in CSS

In that property we use the CSS repeat() function.

The first argument is set to auto-fit, which means it FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. There’s another value for that argument: auto-fill. To understand the difference between them check this pen:

Also, I highly recommend to read this article from CSS tricks about auto sizing columns in CSS grid: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

The second argument is using another function minmax(), which defines the size of each column. In our example each column should not be less than 10em and should be stretched to the remaining space.

Looks fine, but we have a problem - the number of columns can be bigger than 6!

To make a limit of columns, we need some custom formula again. But hey, it’s still in CSS! And it’s not that scary, basically, you just need to provide a gap for the grid, a minimal column width and the max number of columns.

Here’ the code:

.grid-container {

  /** * User input values. */
  --grid-layout-gap: 1em;
  --grid-column-count: 4;
  --grid-item--min-width: 15em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);

}

And here’s what we achieve with that:

As you can see, we can use the relative values for the columns min width and gap, which makes this code like the perfect solution. Until they build the native CSS property for that, of course ?

Important notice! If you don't need a gap between columns, you need to set it to 0px or 0em, not just 0 (pure number). I mean you have to provide the units, otherwise the code won’t work.

I’ve found that solution on CSS tricks, so in case you want to dive deeper to how that formula works, here’s the original article about it: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

Layout with different column width

The solution above works perfectly for the grids with equal width of the columns. But how to handle layouts with unequal columns? The most common example is a content area with a sidebar, so let’s work with this one.

Here’s a simple markup of the content area along with sidebar:

<section class="content">
  <aside>
    <h2>This is sidebar</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
    </section>
  </aside>
  <article>
    <h2>This is content</h2>
    <section class="grid">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
    </section>
  </article>
</section>

For the .content section let’s use the flex box layout:

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

The flex-wrap property here is important and should be set as wrap in order to force the columns (sidebar and content area) stack under each other.

For the sidebar and content columns we need to set flex properties like grow and basis:

/* Sidebar */
.content > aside {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 1;
  flex-basis: 15em;
}

/* Content */
.content > article {
  border: 1px solid var( - primary-color);
  padding: var( - primary-padding);
  flex-grow: 3;
  flex-basis: 25em;
}

The flex-basis property sets the initial size of the flex item. Basically, it’s a minimum width which the flex item should have.

The flex-grow property sets the flex grow factor — similar to the proportion of the flex item compared to the other flex items. It’s a very rough and approximate explanation, to understand better the flex-grow property I highly recommend to read this article from CSS tricks: https://css-tricks.com/flex-grow-is-weird/

So if we set the flex-grow: 1 for the sidebar and flex-grow: 3 for the content area, that means the content area will take approximately three times more space than the sidebar.

I also added the grid section from the previous example to demonstrate that it works inside the flex layout as well.

Here’s what we have in the final result:

Stackable columns

It’s pretty common, when you have a grid layout where text comes next to image on one row and then in reverse order on the next row:

But when the columns become stacked you want them to be in a specific order, where text comes always before image, but they don’t:

To achieve that we need to detect somehow when the columns become stacked.

Unfortunately, it’s impossible (yet) to do that with pure CSS. So we need to add some JS code to detect that:

/**
* Detect when elements become wrapped
*
* @param {NodeList} items - list of elements to check
* @returns {array} Array of items that were wrapped
*/
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;

      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }

    }

    prevItem = currItem;

  }

  return wrappedItems;
};

const addWrapClasses = (wrapper, cover) => {
  const items = wrapper.querySelectorAll(":scope > *");

  // remove ".wrapped" classes to detect which items was actually wrapped
  cover.classList.remove("wrapped");

  // only after that detect wrap items
  let wrappedItems = detectWrap(items); // get wrapped items

  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    cover.classList.add("wrapped");
  }

};

The function addWrapClasses() accepts two arguments.

The first one is wrapper — it’s a parent element of the items which we should check whether they are wrapped (stacked) or not.

The second argument cover is an element to which we apply a special CSS class .wrapped. Using this class you can change your layout when the columns become stacked.

If you want to apply the .wrapped class directly to the wrapper element you can pass the same element as the second argument.

For better understanding my “wonderful” explanation please see the pen below, hope it will become more clear for you:

You can also use it to detect when the header menu should be collapsed into the burger. You can read about that case in my article here:

An Easy Way to Make an Auto Responsive Menu

Combining all together

Here’s a pen with all the techniques I mentioned in this article combined:

Final thoughts

I’ve used the techniques from this article in my recent project and it worked very well. The web pages look fine on every screen with no need to optimise them manually on multiple breakpoints.

Of course I will be lying if I tell you I didn’t use media queries at all. It all depends on the design and how flexible you can be with modifying page layout. Sometimes it’s much faster and simpler just to add a couple of breakpoints and then fix CSS for them. But I think eventually CSS media queries will be replaced by CSS functions like clamp() which allow developers to create responsive layouts automatically.

---

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments ?

---

Read more posts on my Medium blog

---

Thanks for reading!

Stay safe and peace to you!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!