Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Utiliser les unités proportionnelles d'espace

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les unités proportionnelles peuvent être découpées en deux grandes sections : les unités d'espace, très utiles pour configurer l'affichage de vos pages, et les unités proportionnelles de taille.
04:54

Transcription

Du côté des unités proportionnelles, on va décomposer en deux étapes. La première partie, on va la consacrer aux unités proportionnelles de distance, alors que la seconde se focalisera plutôt sur les unités proportionnelles de taille, en rapport à la taille de la police. Si on regarde la première unité proportionnelle que l'on peut avoir par rapport à un document, ici, regardez, j'ai une image avec un texte, et on va dire que cette image et ce texte, en fait, font partie d'un article. Donc cet article peut lui-même avoir certaines propriétés, ici, comme par exemple une marge qui pourrait être fixe, avec un espacement par rapport au bord de la page qui serait fixe en 100 pixels. Ce qui veut dire que si j'enregistre cette partie-là et que je la visualise dans un navigateur, on voit bien qu'on a 100 pixels tout le long. Alors à ce moment-là, on va pouvoir demander à l'image d'être habillée par le texte. Le texte va venir flotter et habiller l'image, c'est à dire qu'ici, maintenant, on voit bien que le texte va venir épouser l'image sur la partie droite. Ce qu'on va pouvoir demander, aussi, c'est de demander à cette image, d'avoir une distance, ici, qui va exister. Par contre, on pourrait rentrer dans une proportionnalité. C'est là où ça devient intéressant au niveau des distances. C'est à dire que, si, ici, j'ai une marge de 100 pixels, on voit bien que, dès que je vais réduire la fenêtre, vous voyez que cette marge de 100 pixels va forcément se réduire ou s'augmenter, enfin, pas la marge, c'est plutôt la distance entre les deux marges qui va s'augmenter ou se réduire en fonction de l'espace que j'attribue. Donc si je mets un padding ici, c'est à dire une petite partie de remplissage sur la partie droite, je vais forcément demander quelque chose qui sera proportionnel, et donc je vais demander un padding qui pourrait être proportionnel, par exemple, de 2 %. Ici, on voit que je commence à rentrer dans des valeurs qui sont proportionnelles, qu'on a l'habitude de connaître et de rencontrer. 2 %, ça nous parle, vous voyez ? Il est forcé que si je deviens très petit, le 2 % sera très petit, et si je deviens très grand, le 2 % sera beaucoup plus grand. Donc on va rester dans une proportionnalité de distance. On pourrait aller plus loin dans cette proportionnalité, c'est à dire de demander, par exemple, à cette image d'avoir une largeur de 40 %, qui fait que l'image va elle aussi grandir et augmenter en fonction de la taille de l'élément qu'on va donner. Ici, les unités proportionnelles vont prendre tout leur sens. Dès qu'on va parler de distance, on va surtout parler de pour cent par rapport à une référence qui sera le conteneur parent. Si on comprend bien que l'image est à l'intérieur de l'article, donc son parent, c'est article. Si on affecte article, maintenant, son parent, c'est body, et donc, la référence va se faire par rapport au body. Donc, si par exemple, on ajoute un padding de 2 % sur l'article, ctrl + S, si on actualise, ces 2 %, on voit qu'ils ont agi, on vient de le voir au rechargement de la page, mais on ne peut pas les mesurer. Pour les mesurer, la meilleure façon de faire, ça va être de rajouter une bordure de 1 pixel solide, avec une couleur donnée et on va donner un arrière-plan coloré à cet élément-là. Si j'enregistre et que je visualise, on s'aperçoit ici que le 2 % qu'on a à gauche, ce n'est pas le même 2 % qu'on a ici à droite. Effectivement, ce 2 % se base en fait sur la largeur de cet élément, qu'on pourrait calculer, qui serait un calque de 100 % moins de 100 pixels, d'accord ? Parce qu'ici, on est en dur. Vous voyez un peu les gymnastiques que ça va demander si on travaille en proportionnel, et ça nous permet quand même de pouvoir bien capter ce qui se passe. Si je regarde bien, quand je vais redimensionner mon image, ici, comme ça, je pourrais avoir des ajustements à faire, parce que si vous regardez, la marge basse, ici, en fonction de la flottaison du texte, va être complètement anachronique. Un petit détail maintenant, c'est qu'on ne s'aperçoit de rien, tout fonctionne très bien, parce qu'en fait, j'ai du paragraphe, ici, qui vient meubler l'espace. Si je supprime le paragraphe, ou si le paragraphe devient très petit, ctrl + X, ctrl + S, et j'actualise, vous voyez que le background disparaît parce que l'élément qui flotte, on le reverra un peu en détails sur le positionnement, pour ce qui concerne vraiment les problématiques de positionnement, je vous invite à vous rapprocher du catalogue et de chercher une formation sur le positionnement des CSS pour aller beaucoup plus loin. Mais dans ces fondamentaux, on s'aperçoit quand même qu'il y a un petit manque là-dessus. La solution va être de dire, ici, dans l'article, on va forcer le moteur de rendu à faire un overflow hidden, c'est à dire, on va lui dire de cacher tout ce qui dépasse de la boîte. Et dès cet instant, automatiquement, le moteur de rendu va recalculer la boîte. Ça, c'est une chose qu'on n'aurait pas vu parce que le paragraphe vient occuper toute la place, et donc, ne nous met pas dans cette condition-là, c'est le paragraphe qui pousse la bordure. Mais pensez que dès que vous avez des éléments de flottaison à l'intérieur d'un conteneur, pensez que ce conteneur peut ne pas risquer de les représenter dans leur intégralité, enfin le contenu. Et donc, il est important de penser à faire un overflow hidden sur ces éléments. Quoi qu'il en soit, ici, le sujet, c'était les unités proportionnelles de mesure, de distance, vous voyez que le pourcentage est une unité qui va nous permettre de pouvoir vraiment travailler avec les dimensions, les distances et les conteneurs. On verra que ce ne sont pas les seuls, mais on le verra au cours de prochaines étapes.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !