• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 8/6/20

Ajoutez des breakpoints pour une mise en page responsive

Log in or subscribe for free to enjoy all this course has to offer!

Pour le moment, tout a l’air parfait quand on regarde notre page sur un navigateur d’ordinateur :

Image du portfolio sur desktop
Notre portfolio sur desktop

Mais ce n’est pas aussi beau quand on la regarde sur un appareil mobile !

Image du portfolio sur mobile
Notre portfolio sur mobile

Oooooops...😬 L’affichage n’est pas fou sur mobile, et c’est normal car notre page n’est pas encore responsive

La mise en page reste la même quelle que soit la résolution de l’écran, et ce n’est pas ce que nous voulons. Pour que l’affichage de notre site s’adapte sur n’importe quel support, nous devons mettre en place des media queries.

Les media queries indiquent au navigateur d’utiliser un ensemble de règles alternatif sous certaines conditions. Par exemple, si c’est pour un écran ou si c’est pour du print, ou si la résolution du navigateur est celle d’un grand écran ou d’un petit téléphone portable. Pour exécuter une media query, on déploie la règle CSS @media, suivie d’un argument  et d’une paire d’accolades contenant les ensembles de règles :

@media (max-width: 599px) {
}

Cette media query signifie que le navigateur appliquera l’ensemble de règles que vous mettrez entre les accolades si la largeur du navigateur est inférieure à 600 pixels.

Les résolutions que vous indiquez pour vos media queries sont appelées des breakpoints: ce sont les limites liées à la résolution de l’écran qui font que les ensembles de règles liés s’appliquent ou non. Pour notre exemple, nous avons créé une media query avec un breakpoint qui appliquera les ensembles de règles spécifiquement adaptés aux écrans mobiles.

La syntaxe CSS standard pour les media queries consiste à placer un sélecteur et son ensemble de règles directement entre les accolades de la query. Lorsque la résolution de l’écran correspond au breakpoint, alors le breakpoint prendra le pas sur l’ensemble de règles par défaut :

@media (max-width: 599px) {
.proj-grid {
grid-template-columns: 1fr;
}
}

Nous avons utilisé le breakpoint pour changer la mise en page de la grille des projets sur notre site, afin qu’elle soit adaptée sur mobile. Sur la version desktop (pour ordinateur), elle fait trois colonnes de large et peu importe la résolution de la fenêtre. Mais sur mobile, nous avons mis tous les aperçus de projets sur une seule colonne. Au final, cette section est bien plus lisible sur mobile que sur desktop :

Image de la version mobile améliorée du portfolio
Une version mobile améliorée

Nous sommes bien partis pour rendre notre site mobile-friendy (adapté sur mobile) ! Et entre nous, cette mode du smartphone risque de bien durer, donc c’est plutôt une bonne chose pour notre site. 😉 Mais devoir placer les sélecteurs au sein de la media query signifie qu’ils ne feront pas partie de leurs blocs BEM nestés. Et ça nous complique la tâche pour trouver et maintenir les éléments, et ça nous ajoute encoooore du travail d’écriture...

Heureusement, Sass, comme toujours, est là pour vous sauver la mise et vous faciliter la vie. Ça devient difficile d’imaginer écrire du CSS sans préprocesseur, n’est-ce pas ? 🤭

Mettez en place des media queries

Les media queries CSS standard exigent de placer les sélecteurs à l’intérieur de la query, alors que Sass, lui, vous permet de placer les media queries directement dans les sélecteurs :

.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@media (max-width: 599px) {
grid-template-columns: 1fr;
}
}

Plutôt que de devoir tout séparer, la media query et ses règles sont proprement imbriquées dans leur bloc BEM ; du coup, bonus pour nous : comme tout est au même endroit, c’est plus simple à trouver et à modifier. Quand Sass compile les media queries, il vérifie dans quel sélecteur elles sont imbriquées et affiche une media query standard avec le sélecteur nesté dedans :

.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 599px) {
.proj-grid {
grid-template-columns: 1fr;
}
}

Et voilà ! Sass vous aide à gérer les media queries clés en main. Essayons à présent de passer à la vitesse supérieure en intégrant les notions vues précédemment dans le cours, pour rendre notre code encore plus simple et maintenable.

Essayez par vous-même !

Dans cet exercice,  il vous faut passer en responsive la section image du code fourni, en vous basant sur ce que vous venez d’apprendre.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Utilisez les breakpoints avec Sass

Pour rendre les choses encore plus maintenables (oui oui, c’est possible), au lieu de déclarer tous nos breakpoints dans notre codebase, nous allons créer une map  $breakpoints  pour y stocker nos différents breakpoints. Ajoutons-y notre valeur de breakpoint pour mobile tant qu’on y est :

$breakpoints: (
mobile: 599px
);

Devoir écrire @media screen and (max-width: map-get($breakpoints, mobile) à chaque fois que vous devez utiliser une media query me semble un peu lassant. Nous allons utiliser une mixin Sass pour réduire toute cette syntaxe superflue et obtenir quelque chose de plus sémantique :

@mixin mobile-only {
@media screen and (max-width: map-get($breakpoints, mobile)){
grid-template-columns: 1fr;
}
}

En nommant la mixin mobile-only, vous comprenez tout de suite que les règles qu’elle contient ne s’appliquent qu’aux résolutions mobile, sans compter que c’est plus facile à retenir et à écrire. Nous avons déplacé la règle grid-template-columns pour la version mobile du preview de projet dans la mixin. 

Branchons à présent notre mixin mobile-only dans le  bloc.proj-prev  :

@mixin mobile-only {
@media screen and (max-width: map-get($breakpoints, mobile)){
grid-template-columns: 1fr;
}
}
.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@include mobile-only;
}

Voilà qui est beaucoup plus clair à regarder ! Et quand vous vérifiez le CSS compilé, vous voyez une media query pour les résolutions inférieures à 600px avec un ensemble de règles pour le bloc  .proj-prev, comme avant :

.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 599px) {
.proj-grid {
grid-template-columns: 1fr;
}
}

Parfait !

Sauf qu’on ne peut utiliser la mixin que dans ce cas précis. Pour d’autres situations elle est inutile : son ensemble de règles est spécifique à la mise en page de la grille du bloc  .proj-prev, et en plus de ça elle est codée en dur dans la mixin. Ce qui signifie que nous devrons écrire une nouvelle mixin pour chacune de nos media queries. Entre nous, c’est beaucoup trop de travail inutile. Peut-être que Sass n’est pas si génial, après tout…

😎 Je vous fais marcher, bien sûr que Sass a une bien meilleure façon de s’y prendre, voyons !

Utilisez la directive @content

Plutôt que de devoir coder en dur le contenu d’une mixin, Sass vous offre la possibilité de déployer la directive @content.  

@mixin mobile-only {
@media screen and (max-width: map-get($breakpoints, mobile)){
@content;
}
}

Quand Sass compile les instances de la mixin, il remplacera @content par le code que vous aurez placé à l’intérieur de l’instance de la mixin.

Et comment on s’y prend, au juste, pour ajouter du contenu dans une instance de mixin ? 🤔

Lorsque vous utilisez la directive @content, vous pouvez ajouter une paire d’accolades aux instances de la mixin pour y mettre votre contenu :

@mixin mobile-only {
@media screen and (max-width: map-get($breakpoints, mobile)){
@content;
}
}
.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@include mobile-only{
grid-template-columns: 1fr;
}
}

Désormais, Sass remplacera @content par grid-template-columns: 1fr quand il compile le code :

.proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 599px) {
.proj-grid {
grid-template-columns: 1fr;
}
}

En réalité, @content est un placeholder pour du code qui sera remplacé au moment de la compilation, instance par instance. En l’appliquant, nous avons créé une mixin très flexible et simple à la fois pour nos media queries.

Nous pouvons maintenant utiliser notre mixin mobile-only dans tout notre site pour l’adapter aux appareils mobiles. Utilisons-la pour ajuster la font-size du bloc .quote, tant qu’on y est :

$font-size: (
logo:7rem,
quote: 6rem,
heading:5rem,
project-heading:4rem,
label:2rem);
.quote {
font-size: map-get(font-size, quote);
@include mobile-only {
font-size: map-get(font-size, quote)*0.4;
}

 

.quote {
font-size: 6rem;
}
@media screen and (max-width: 599px) {
.quote {
font-size: 2.4rem;
}}

Sass nous fournit les outils pour créer des sites web responsive et graphiquement cohérents avec du CSS propre et maintenable, tout en réduisant drastiquement les quantités de code fastidieux et répétitif à écrire.

Essayez par vous-même !

Dans l’exercice précédent, vous avez rendu responsive le bloc image ; il est temps de faire de même avec le bloc article !

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

En résumé

  • Les media queries vous permettent d’adapter votre contenu à différents écrans, en disant au navigateur d’utiliser un ensemble de règles alternatives dans certaines circonstances.

  • Pour exécuter une media query, on déploie la règle CSS @media, suivie de la liste des queries et d’une paire d’accolades contenant les ensemble de règles alternatives requises.

  • Les breakpoints sont les résolutions que vous utilisez pour les media queries. 

  • Dans Sass, vous pouvez placer des media queries dans des sélecteurs, ce qui vous permet de les imbriquer dans le bon bloc BEM. 

  • On utilise @content en tant que placeholder pour des media queries spécifiques.  

Dans le prochain chapitre, nous mettrons la cerise sur le gâteau en ajoutant automatiquement des préfixes à notre CSS compilé, ce qui nous garantira que notre site s’affichera correctement sur tous les principaux navigateurs. Cool, non ?

Example of certificate of achievement
Example of certificate of achievement