Huit conseils CSS pour des mises en page et des effets avancés

Le domaine du développement web front-end a fait des progrès considérables au cours des dernières années. Cependant, le frontal Web, tel que le voient les utilisateurs, est toujours le même : balisage HTML stylé avec CSS.

De nombreux problèmes de mise en page peuvent sembler simples au premier abord, mais s'avèrent souvent délicats. Sans une connaissance approfondie du fonctionnement de certaines fonctionnalités CSS, ces mises en page avancées peuvent sembler impossibles à réaliser avec CSS seul.

Dans cet article, vous trouverez huit conseils et astuces CSS d'experts qui exploitent des fonctionnalités CSS moins connues pour implémenter certaines de ces mises en page et effets avancés.

1. Maximiser les sélecteurs de frères CSS

Le problème : vous perdez des opportunités d'optimisation en n'utilisant pas de sélecteurs frères.

La solution : utilisez des sélecteurs frères chaque fois que cela a du sens. Chaque fois que vous travaillez avec une liste d'éléments et que vous devez traiter différemment le premier ou le dernier élément, votre premier réflexe peut être d'utiliser les pseudo sélecteurs CSS :first-child et :last-child .

Par exemple, lors de la création d'une icône de menu hamburger CSS uniquement :

Voir Pen Maximizing CSS Sibling Selectors 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

Cela a du sens : chaque barre a une marge inférieure, sauf la dernière.

Pourtant, le même effet est également possible via le sélecteur de frère adjacent (+):

Voir Pen Maximizing CSS Sibling Selectors 2 par Rico Mossesgeld (@ricotheque) sur CodePen.

Cela a également du sens : tout ce qui se trouve après la première barre a une marge supérieure. Non seulement cette astuce CSS permet d'économiser quelques octets supplémentaires (ce qui peut facilement s'additionner pour n'importe quel projet de taille moyenne), mais elle ouvre également un monde de possibilités.

Considérez cette liste de cartes :

Voir Pen Maximizing CSS Sibling Selectors 3 par Rico Mossesgeld (@ricotheque) sur CodePen.

Chacun a un titre et un texte, ce dernier étant caché par défaut. Si vous souhaitez rendre visible uniquement le texte de la carte active (avec la classe .active ) et ceux qui la suivent, vous pouvez le faire rapidement en utilisant uniquement CSS :

Voir Pen Maximizing CSS Sibling Selectors 4 par Rico Mossesgeld (@ricotheque) sur CodePen.

Avec un peu de JavaScript, cela peut aussi être interactif.

S'appuyer uniquement sur JavaScript pour tout cela, cependant, aboutirait à un script comme celui-ci :

Voir Pen Maximizing CSS Sibling Selectors 5 par Rico Mossesgeld (@ricotheque) sur CodePen.

où inclure jQuery en tant que dépendance vous permet d'avoir un code un peu court.

2. Dimensionnement cohérent des éléments HTML

Le problème : les éléments HTML ont des tailles incohérentes dans les différents navigateurs.

La solution : définissez box-sizing pour tous les éléments sur border-box . Un fléau de longue date pour les développeurs Web, Internet Explorer a bien fait une chose : il a correctement dimensionné les boîtes.

D'autres navigateurs ne regardent que le contenu lors du calcul de la largeur d'un élément HTML, tout le reste étant traité comme excédent. Une width: 200px div de 20px , avec un rembourrage de 20 px et une bordure de 2px , affiche une largeur de 242 pixels.

Internet Explorer considère le rembourrage et la bordure comme faisant partie de la largeur. Ici, la div d'en haut aurait une largeur de 200 pixels.

Voir la démo du modèle Pen CSS Box 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

Une fois que vous aurez compris, vous trouverez cette dernière approche plus logique, même si elle ne respecte pas les normes.

Si je dis que la largeur est de 200px, bon sang, ça va être une boîte de 200px de large même si j'ai 20px de rembourrage.

Dans tous les cas, le CSS suivant maintient les tailles des éléments (et donc les mises en page) cohérentes sur tous les navigateurs :

Voir la démo 2 du modèle Pen CSS Box de Rico Mossesgeld (@ricotheque) sur CodePen.

Le deuxième ensemble de sélecteurs CSS protège les éléments HTML stylés sans cadre de bordure contre les perturbations de la mise en page.

box-sizing: border-box est si utile qu'il fait partie d'un framework CSS relativement populaire appelé sanitize.css.

3. Éléments de hauteur dynamiques

Le problème : Maintenir la hauteur d'un élément HTML proportionnelle à sa largeur.

La solution : utilisez un rembourrage vertical en remplacement de la hauteur.

Supposons que vous souhaitiez que la hauteur d'un élément HTML corresponde toujours à sa largeur CSS. height: 100% ne modifie pas le comportement par défaut des éléments correspondant à la hauteur de son contenu.

Voir Pen Dynamic Height Elements 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

La réponse est de définir la hauteur sur 0 et d'utiliser padding-top ou padding-bottom pour définir la hauteur réelle de .container à la place. L'une ou l'autre propriété peut être un pourcentage de la largeur de l'élément :

Voir Pen Dynamic Height Elements 2 par Rico Mossesgeld (@ricotheque) sur CodePen.

Désormais, .container restera un carré, quelle que soit sa largeur. overflow: hidden empêche le contenu long de briser ce ratio.

Cette technique, avec quelques modifications, est idéale pour créer des intégrations vidéo qui conservent leur format d'image à n'importe quelle taille. Alignez simplement l'intégration avec la position supérieure et gauche de .container position: absolute , définissez les deux dimensions de l'intégration sur 100 % afin qu'elle "remplisse" .container , et modifiez le padding-bottom de .container pour qu'il corresponde à l'aspect de la vidéo rapport.

Voir Pen Dynamic Height Elements 3 par Rico Mossesgeld (@ricotheque) sur CodePen.

position: relative for .container garantit que le positionnement absolu de l' iframe fonctionne correctement. Le nouveau padding-bottom correspond simplement à la hauteur du format d'image divisée par sa largeur, multipliée par 100. Par exemple, si le format d'image de la vidéo intégrée est de 16: 9, le pourcentage du padding-bottom doit être de 9 divisé par 16 (.5625) et multiplié par 100 (56,25).

4. Éléments de largeur dynamique

Le problème : Garder la largeur d'un élément HTML proportionnelle à sa hauteur.

La solution : utilisez font-size comme base pour les dimensions de l'élément.

Maintenant, qu'en est-il de l'inverse, ou des conteneurs qui changent de largeur en fonction de leur hauteur ? Cette fois, c'est la font-size à la rescousse. N'oubliez pas que width et height peuvent être en em s , ce qui signifie qu'ils peuvent être un rapport de font-size de l'élément.

Un élément avec une font-size de 40px, une largeur de 2em et une hauteur de 1em aurait une largeur de 80 pixels (40 x 2) et une hauteur de 40 pixels (40 x 1).

Voir les éléments de largeur dynamique du stylet par Rico Mossesgeld (@ricotheque) sur CodePen.

Vous voulez changer la hauteur de .container ? Changer la taille de la police.

La seule mise en garde est qu'il est impossible de faire correspondre automatiquement la taille de la police d'un élément à la hauteur de son parent via CSS uniquement. Pourtant, cette technique permet de réduire un script de redimensionnement Javascript :

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

pour:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Centrage vertical du contenu dynamique

Le problème : Garder un élément HTML (avec une hauteur inconnue) centré verticalement à l'intérieur d'un autre.

La solution : définissez l'élément externe sur display: table , puis convertissez l'élément interne en CSS table-cell . Ou utilisez simplement CSS Flexbox.

Il est possible de centrer verticalement une ligne de texte avec line-height :

Voir le Pen Vertical Centering of Dynamic Content 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

Pour plusieurs lignes de texte ou de contenu non textuel, les tableaux CSS sont la réponse. Définissez l'affichage de .container sur table , puis utilisez display: table-cell et vertical-align: middle pour .text :

Voir le Pen Vertical Centering of Dynamic Content 2 par Rico Mossesgeld (@ricotheque) sur CodePen.

Considérez cette astuce CSS comme l'équivalent vertical de margin: 0 auto . La Flexbox de CSS3 est une excellente alternative à cette technique si la prise en charge des bogues d'Internet Explorer est acceptable :

Voir le Pen Vertical Centering of Dynamic Content 3 par Rico Mossesgeld (@ricotheque) sur CodePen.

6. Colonnes de même hauteur

Le problème : Garder les colonnes de la même hauteur.

La solution : pour chaque colonne, utilisez une grande valeur margin-bottom négative et annulez-la avec un padding-bottom tout aussi grand. Les tableaux CSS et Flexbox fonctionnent également.

En utilisant float ou display: inline-block , il est possible de créer des colonnes côte à côte via CSS.

Voir les colonnes de même hauteur du stylo 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

Notez l'utilisation de box-sizing: border-box pour dimensionner correctement le .cols . Voir Dimensionnement cohérent des éléments HTML ci-dessus.

Les bordures de la première et de la dernière colonne ne descendent pas complètement ; ils ne correspondent pas à la hauteur de la deuxième colonne la plus haute. Pour résoudre ce problème, ajoutez simplement overflow: hidden à .row . Définissez ensuite la margin-bottom de chaque .col sur 99999px et son padding-bottom sur 100009px (99999px + le rembourrage de 10px appliqué aux autres côtés de .col ).

Voir les colonnes de même hauteur de stylo 2 de Rico Mossesgeld (@ricotheque) sur CodePen.

Une alternative plus simple est Flexbox. Encore une fois, utilisez-le uniquement si la prise en charge d'Internet Explorer n'est pas indispensable.

Voir les colonnes de même hauteur de stylo 3 de Rico Mossesgeld (@ricotheque) sur CodePen.

Une autre alternative avec une meilleure prise en charge du navigateur : les tableaux CSS (sans vertical-align: middle ).

Voir les colonnes de même hauteur de stylo 4 de Rico Mossesgeld (@ricotheque) sur CodePen.

7. Aller au-delà de la boîte

Le problème : les boîtes et les lignes droites sont tellement clichées.

La solution : utilisez transform: rotate(x) ou border-radius .

Prenez une série typique de volets d'un site Web de marketing ou de brochure : une pile verticale de diapositives avec un point singulier. Son balisage et son CSS pourraient ressembler à ceci :

Voir le Pen Going Beyond the Box 1 par Rico Mossesgeld (@ricotheque) sur CodePen.

Au prix de rendre le balisage beaucoup plus compliqué, ces vitres carrées pourraient être transformées en une pile de parallélogrammes.

Voir le Pen Going Beyond the Box 2 par Rico Mossesgeld (@ricotheque) sur CodePen.

Il se passe beaucoup de choses ici :

La hauteur de chaque volet est contrôlée par .pane-container. La marge négative en bas garantit que les vitres s'empilent parfaitement.

• .pane-background , son enfant .mask-box et son petit-enfant .image sont tous définis sur la position: absolute . Chaque élément a différentes valeurs top , left , bottom et right . Cela élimine tout espacement créé par les rotations détaillées ci-dessous.
• .mask-box est tourné de 2 degrés (sens anti-horaire).
• .image est pivoté de -2 degrés pour contrecarrer la .mask-box .
• .mask-box est masqué de sorte que ses côtés supérieur et inférieur pivotés coupent l'élément .image .

Sur une note connexe, transformer une image en cercle ou en ovale est très simple. Appliquez simplement border-radius: 100% à l'élément img .

Voir le Pen Going Beyond the Box 3 par Rico Mossesgeld (@ricotheque) sur CodePen.

Les modifications CSS en temps réel telles que celles-ci réduisent la nécessité de préparer le contenu avant sa publication sur un site Web. Au lieu d'appliquer un masque circulaire à une photo dans Photoshop, le développeur Web peut simplement appliquer le même effet via CSS sans modifier la photo d'origine.

L'avantage supplémentaire est qu'en laissant le contenu intact et sans dépendre de la conception actuelle du site Web, les futures refontes ou réorganisations sont facilitées.

8. Mode nuit

Le problème : Implémenter un mode nuit sans créer de nouvelle feuille de style.

La solution : utilisez des filtres CSS.

Certaines applications disposent d'un mode nuit, où l'interface s'assombrit pour une meilleure lisibilité sous faible éclairage. Sur les navigateurs plus récents, les filtres CSS peuvent créer le même effet, en appliquant des effets de type Photoshop.

Un filtre CSS utile est invert , qui (sans surprise) inverse les couleurs de tout ce qui se trouve à l'intérieur d'un élément. Cela rend inutile la création et l'application d'un nouvel ensemble de styles.

Voir le Pen Night Mode 1 de Rico Mossesgeld (@ricotheque) sur CodePen.

L'utilisation de ce filtre sur du texte noir et un arrière-plan blanc simule le mode nuit. !important garantit que ces nouvelles couleurs remplacent tous les styles existants.

Voir le Pen Night Mode 2 de Rico Mossesgeld (@ricotheque) sur CodePen.

Malheureusement, l'image a l'air bizarre, car ses couleurs ont été inversées avec tout le reste. La bonne nouvelle est que plusieurs filtres peuvent s'appliquer en même temps. L'ajout du filtre de rotation de teinte ramène les images et autres contenus visuels à la normale :

Voir le Pen Night Mode 3 de Rico Mossesgeld (@ricotheque) sur CodePen.

Pourquoi cela fonctionne-t-il ? hue-rotate(180deg) crée simplement le même effet que invert(1) . Voici une démonstration du fonctionnement du CSS en mode nuit lorsqu'il est basculé via un bouton alimenté par JavaScript.

Tirez le meilleur parti du CSS

À moins que le navigateur ou la façon dont les sites Web sont construits ne changent radicalement à l'avenir, une bonne connaissance de CSS restera une compétence fondamentale dans l'espace de développement Web.

Toutes ces astuces CSS partagent quelque chose en commun : elles maximisent l'utilisation de CSS en tant que langage de style, laissant le navigateur lui-même faire le gros du travail. Et, une fois bien fait, cela donnera toujours de meilleurs résultats, de meilleures performances et donc une meilleure expérience utilisateur.

Faites-nous savoir si vous avez une astuce CSS que vous trouvez intéressante et utile dans la section des commentaires ci-dessous.