En mode projet, sequel: Ecrire sa feuille de avec style
La série EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de réaliser une des opérations dont vous pourrez avoir besoin pour votre projet. Le billet est publié en parallèle des fichiers HTML et CSS sur la dropbox.
Le sequel « Écrire sa feuille avec style » se destine à accompagner votre finalisation ; il correspond au dossier Playground_feuille_de_style que vous trouverez dans le dossier PratiqueDuWeb sur notre Dropbox.
Épisode 2 | La Requête (de média)
Dans l’épisode précédent…
Premier épisode oblige, nous avons posé le cadre:
toute l’organisation de la page HTML
les éléments structurants de la feuille de style
Comme nous sommes prévoyant, nous avons fait un site fluide, en usant et abusant de flexbox, LA propriété qui transforme le bricolage CSS en construction moderne. Un peu comme dans Les Trois Petits Cochons, mais à l’envers (c’est le plus souple qui est le meilleur):
- un site statique tient bien, mais casse au premier téléphone ou à la première tablette venue ; il n’est juste pas fait pour, avec ses dimensions rigide;
- un site fluide s’adapte aux différents supports, mais en gardant ses proportions de départ, qui ne sont pas forcément adaptées lorsqu’on passe d’un écran 24 pouces en 1920×1080 px à un écran de smartphone en 414×896 px ;
Les medias queries
Un site responsive est non seulement fluide, mais peut également se reconfigurer en fonction du terminal avec lequel on le consulte, pour parfois changer diamétralement d’apparence. Par exemple, un aside, ou des images imposantes peuvent disparaître sur le téléphone, ou encore un site sombre peut devenir clair pour être imprimable).**
Et comme flexbox nous a été indispensable pour la fluidité, les media queries nous seront indispensable pour le responsive.
Ainsi, au plus simple, on créera une règle de média (traduction littérale de media queries) pour les téléphones portables en mode portrait; mais on peut aussi en créer pour les tablettes, pour les très grands écrans, etc. Commençons par le téléphone.
Smartphone
La requête de média pour le téléphone va consister à définir une largeur maximale d’écran correspondant à celle d’un des plus grand écrans de smartphone; ainsi, tous les écrans à la largeur inférieure seront concernés.
Si vous choisissez de vous limiter à la large d’un petit smartphone (par exemple, les 320px d’un iPhoneSE), tous les smartphones de taille supérieure ne seront pas concernés, et vous devrez écrire une nouvelle requête de média pour les modèles les plus grands.
De manière économique, et en fonction de la pertinence pour votre design, vous pouvez aussi ne créer qu’une seule requête pour tous les appareils en dessous d’une tablette de référence en mode portrait.
C’est ainsi qu’on trouve souvent une requête de média pour les écrans de 767px (c’est-à-dire un pixel de moins que la largeur d’un iPad). Cela donne la media query suivante:
@media screen and (max-width:767px)
On pourrait ajouter, pour cibler les médias verticaux:
@media screen and (max-width:767px) and (orientation: portrait)
Mais cela veut dire que les téléphones se comporteront différemment s’ils sont tenus à l’horizontale (les iPhones 6,6s, 7 et 8, par exemple, font 667px de hauteur d’écran: à l’horizontale, ils seraient gérés par la première règle, mais pas par la seconde).
Nous nous en tiendront à la première règle, pour rendre les choses le plus simple possible: mais si vous êtes aventuriers, vous pouvez intégrer des règles de média inspirées des services qui affichent l’apparence des sites responsive: par exemple, le Responsinator, ou encore, tout simplement, l’affichage Vue adaptative de Firefox (disponible dans Outis>Développement web>Vue adaptative).
À partir du moment où la largeur de l’écran de consultation est posée, vous pouvez modifier l’affichage de vos pages web.
Il y a deux modifications principales, en général, pour la media query pour smartphone:
- l’affichage des éléments de premier et deuxième niveau en colonne (en utilisant la propriété
display), - et la transformation du menu en menu burger (que nous verrons dans un autre article).
Parfois, certaines rubriques secondaires peuvent aussi disparaître à l’affichage – souvent, c’est un aside qui disparaît.
Ainsi, notre CSS pourra ressembler à ceci:
@media screen and (max-width:767px)
{
header,
main,
footer {
display:block;
}
}
Nous reprenons un affichage standard des différentes balises bloc de niveau 1 de notre design. Ainsi, elles s’affiche les unes en dessous des autres, ce qui vaut mieux sur notre smartphone en mode portrait.
On peut aussi supprimer les marges qu’on avait créées lorsque l’écran de lecture était large; sur le téléphone, c’est mieux qu’il n’y en ait plus, ou, s’il en reste qu’elles soient minimalistes? par exemple,
- on peut garder les 10px de
paddingqu’on aura mis à tous nos paragraphes, histoire de toujours éloigner les textes qu’ils contiennent du bord); - ou on peut créer un liseré autour de nos balises de niveau 1, une bordure qui fasse cadre.
Là, c’est à vous de voir ce qui fonctionne avec votre design, ou ce que vous aviez prévu dans vos wireframes.
Ci-dessous, une media query qui reprend toutes ces suggestions:
@media only screen and (max-width:767px) {
header,
main,
footer {
display: block;
width: 100%;
border: 3px solid white;
}
p {
padding:10px;
}
}
Dans la CSS de notre dossier Playground_feuille_de_style, il y a plus de détails (les div avec la classe .card, les sectionsont traitées). Mais vous avez un exemple suffisant explicite pour comprendre le principe.
Faites attention toutefois:
- Si un élément a déjà reçu un style, il faut modifier exactement le même élément dans la media query, qui annulera alors le style précédent ; par exemple:
@ media screen and (max-width:767px) {
.card {margin:0;}
}
prendra le dessus sur
.card {margin: 2% 5%;}
écrit précédemment, mais pas sur
div {
margin:auto;
}
même si les .card sont des div.
- Si vous donnez un style à un élément qui n’en a jamais reçu, la media query sera évidemment prioritaire.
Tablette
Vous avez compris le principe ?
On va pouvoir cibler le comportement de notre site quand il est visité depuis une tablette.
On peut cibler
- une largeur minimale
- une largeur maximale
- une orientation
Le plus « économique » est de cibler les deux lergeurs dans une même media query :
@media screen and (min-width:768px) and (max-width:1024px)
Dans notre design, les .card s’alignent les unes à côté des autres dans une section, grâce à flexbox. Sur une tablette, ça peut devenir intéressant qu’elles s’alignent deux par deux. Pour cela, on va à la fois
- faire en sortie qu’elles passent les unes en dessous des autres quand elles n’ont pas la place (
section {flex-wrap:wwap;}), - et leur donner une largeur suffisante pour qu’elles puissent rentrer à deux en largeur (
.card {width:45%;)– pas 50%, pour se laisser une… marge, si justement il y a des marges internes ou externes qui viendraient occuper de l’espace.
Notre media query peut alors prendre la forme suivante:
@media screen and (min-width:768px) and (max-width:1024px) {
header,
main,
footer {
width: 98%;
/* la marge extérieure n'est plus nécessaire, je garde 1% de gris autour pour l'esthétique */
margin: auto;
}
section {
display: flex;
flex-wrap: wrap;
}
.card {
width: 45%;
margin: 2%;
/* margin: auto;*/
/* testez les deux marges pour voir les différences de gestion des boites */
}
Dans la feuille de style playground_style.css, j’ai ajouté des éléments relatifs à la couleur.
Et voilà: avec mes deux media queries, je gère les changements d’organisation de la page en fonction du média de sortie : mon site est devenu responsive… Elle est pas belle la vie ?
