Résoudre un problème de dimensionnement commun

Quelles sont les chances que votre prochain client utilise le mot interactif lors de la présentation de leur projet? D'après mon expérience, la réponse est 100% donc je suis toujours à la recherche de techniques CSS robustes pour m'aider à fournir les diverses fonctionnalités et effets qui se présentent lors de la discussion de cet objectif.

Un petit morceau de l'interactivité qu'on me demande d'implémenter encore et encore est des cartes à bascule – des blocs de contenu qui tournent lorsqu'ils sont survolés ou tapotés pour révéler du contenu sur leur verso. C'est un effet soigné qui encourage la navigation ludique et une autre façon d'afficher plus d'informations sans s'éloigner de la page. Mais la méthode standard a un problème quand il s'agit de gérer différentes longueurs de contenu de carte.

Dans ce didacticiel, nous allons créer une grille de carte à bascule qui résout ce problème avec certaines bases CSS – transformations, flex et grille. Vous devrez les connaître et cela vous aidera à bien comprendre les techniques de positionnement CSS . Nous couvrirons:

• Comment les cartes à bascule sont généralement implémentées en utilisant le positionnement absolu
• Le problème de dimensionnement introduit par le positionnement absolu; et
• Une solution générale pour le dimensionnement automatique du contenu superposé.

Création d'une carte à bascule de base

Avec une bonne prise en charge de navigateur moderne pour les transformations tridimensionnelles, la création d'une carte à bascule de base est relativement simple. La méthode habituelle consiste à placer les faces avant et arrière de la carte dans un conteneur parent et à positionner absolument la face arrière afin qu'elle puisse correspondre à la taille de la face avant. Ajoutez une transformation de l'axe des x à la face arrière pour la faire apparaître inversée, ajoutez une autre à la carte elle-même en vol stationnaire, et nous sommes en affaires.

 cards {
  affichage: grille;
}

.carte {
  perspective: 40rem;
}

.card-body {
  transformer-style: préserver-3d;
  transition: var (- time) transform;
  
  .card: survoler & {
    transform: rotationX (-180deg);
  }
}

.card-front, .card-back {
  visibilité arrière: cachée;
}

.card-back {
  position: absolue;
  en haut: 0; à droite: 0; en bas: 0; gauche: 0;
  transform: rotationX (-180deg);
}

Qu'est-ce qui pourrait mal tourner?

Notre solution standard a un gros problème, cependant: cela ne fonctionne pas lorsque la face arrière a besoin de plus d'espace que la face avant n'en fournit. Donner à la carte une grande taille fixe est une solution, mais cette approche est également garantie d'échouer à un moment donné pour un ensemble de tailles d'écran.

Conception comps présentent naturellement des boîtes d'aspect soigné avec du texte qui s'adapte parfaitement. Mais lors du démarrage du développement, il peut être difficile d'obtenir une mise en page et une carte qui fonctionnent pour le contenu réel. Et lors de l'affichage de contenu dynamique à partir d'un CMS, cela peut être impossible! Même avec des limites de mots ou de caractères, il n'y a souvent aucune solution qui fonctionne de manière fiable sur tous les appareils.

Nous devons toujours nous efforcer de créer des implémentations de mise en page qui tolèrent une large gamme de longueurs de contenu. Mais ce n’est pas facile! J'ai souvent eu l'occasion de revenir à l'utilisation de la taille et de la position fixes, que ce soit en raison de contraintes de temps, d'une prise en charge insuffisante du navigateur, d'une conception de référence faible ou simplement de ma propre inexpérience.

Au fil des ans, j'ai appris qu'un un bon processus itératif et un dialogue sain avec le concepteur peuvent beaucoup aider lors de la résolution de ces problèmes, et souvent vous pouvez vous rencontrer quelque part au milieu pour obtenir une mise en page robuste avec une certaine interactivité. Mais revenons à la tâche à accomplir – est-ce possible?

Sortir des sentiers battus

En fait, il est possible de dimensionner les cartes en fonction à la fois du contenu recto et verso, et c'est pas aussi dur qu'il n'y paraît au premier abord. Nous devons simplement être méthodiques et persistants!

Contraindre le problème

Commençons par dresser une liste des exigences de notre mise en page. Essayer d'écrire précisément ce que vous voulez peut sembler une corvée, mais c'est un excellent moyen de découvrir des contraintes qui peuvent être simplifiées pour résoudre un problème. Disons:

• Nous voulons voir une ou plusieurs cartes rectangulaires, disposées dans une grille à une seule colonne ou à plusieurs colonnes;
• Nous voulons que les cartes basculent en survolant ou appuyez pour révéler un deuxième ensemble de contenu sur la face arrière;
• Nous voulons que les cartes soient toujours assez grandes pour montrer tout leur contenu avant et arrière, indépendamment de la longueur ou du style du contenu; et
• Dans le cas de plusieurs colonnes, idéalement, nous voulons que toutes les cartes soient de la même taille afin que les lignes s'alignent bien.

En réfléchissant à ces exigences, nous pouvons remarquer quelques éléments qui simplifient le problème:

• Si les cartes doivent être présentées dans une grille, nous avons une contrainte sur leur largeur – c'est-à-dire que leurs largeurs sont des fonctions de la fenêtre ou du conteneur de grille plutôt que leur propre contenu;
• Étant donné que nous connaissons un la largeur de la carte (en pourcentage de son parent, au moins), nous avons résolu la dimension horizontale et nous avons juste besoin que la hauteur de la carte augmente pour s'adapter à la plus grande de sa face avant ou arrière; et
• Si nous pouvons le faire et que chaque carte est auto-dimensionnée verticalement, nous pouvons utiliser CSS Grid grid-auto-row pour rendre toutes les rangées de cartes aussi hautes comme la carte la plus haute.

Comprendre l'astuce de la carte

Alors, comment dimensionner nous-mêmes les cartes? Maintenant que nous avons simplifié notre problème, nous sommes à portée de la solution.

Oubliez un instant l'idée de mettre du contenu au-dessus des autres contenus et concentrez-vous sur notre nouvelle exigence: un parent aussi grand comme son enfant le plus grand. C'est facile! En utilisant des colonnes, nous pouvons faire en sorte qu'un parent se développe à la hauteur de son plus grand enfant. Ensuite, il suffit d'utiliser un petit tour de main pour aligner les enfants:

1. Définissez les enfants pour qu'ils aient la même largeur que leur parent
2. Laissez le deuxième enfant déborder vers la droite
3. Transformez-le vers la gauche à sa place

 .cards {
  affichage: grille;
}

.card-body {
  affichage: flex;
}

.card-front, .card-back {
  largeur min: 100%;
  mix-blend-mode: multiplier; // Aperçu des deux faces
}

.card-back {
  transformer: traduire (-100%, 0);
}

Si cette approche semble évidente, soyez assuré que j'ai dépensé de nombreuses heures en passant par des idées vraiment terribles avant d'y penser. Au début, j'avais prévu d'imprimer une version cachée en double du texte de la face arrière à l'intérieur de la face avant pour étendre la carte à la bonne taille. Et quand j'ai pensé à utiliser le débordement de colonne, je recadrais à l'origine la colonne de droite en utilisant débordement: caché et en le transformant uniquement au dernier moment lorsque le survol a commencé, comme je ne l'avais pas encore réalisé Je pourrais simplement le garder transformé depuis le début et utiliser une autre méthode telle que l'opacité ou visibilité arrière pour l'activer et le désactiver au besoin.

En d'autres termes, des solutions évidentes sont le résultat d'un travail acharné! Si vous sentez que vous vous frottez la tête contre votre bureau pendant des heures sur un problème de mise en page, il est important de prendre du recul et de décider si vous passez le temps de votre client à bon escient: s'il faut lui suggérer de modifier la conception et pour rechercher la solution dans votre propre temps comme un exercice d'apprentissage lorsque la pression est coupée. Mais quand vous trouvez des méthodes simples, ne vous sentez jamais stupide car cela a pris beaucoup de temps . Examinons maintenant notre solution complète.

 .cards {
  affichage: grille;
}

.carte {
  perspective: 40rem;
}

.card-body {
  affichage: flex;
  transformer-style: préserver-3d;
  transition: var (- time) transform;

  .card: survoler & {
    transform: rotationX (-180deg);
  }
}

.card-front, .card-back {
  visibilité arrière: cachée;
  largeur min: 100%;
}

.card-back {
  transform: RotateX (-180deg) translate (-100%, 0);
}

Y a-t-il des mises en garde?

La ​​solution fonctionne bien en général, avec juste quelques mises en garde mineures à garder à l'esprit:

• Les cartes doivent être présentes dans une disposition de grille ou dans un autre contexte où leur largeur ne dépend pas du contenu.
• Les cartes nécessitent un wrapper de contenu quelconque (notre corps de carte ) pour que la zone de vol stationnaire ne change pas pendant les animations. Si la carte elle-même est animée, vous verrez des pépins lorsque l'animation s'arrête et redémarre rapidement.
• Les styles tels que les arrière-plans et les ombres de boîte sont mieux placés directement sur les faces avant et arrière, comme tout effet sur la carte elle-même ne sera pas animé. Méfiez-vous des styles tels que les ombres de boîte sur le corps de la carte, car naturellement, ils seront retournés à l'envers.
• Les faces avant et arrière des cartes ont besoin que leur propriété de dimensionnement de boîte soit définie sur border- boîte s'ils ont leur propre rembourrage, en raison de leur largeur minimale sinon ils déborderont .
• Safari nécessite toujours -webkit -backface-visibilité sous sa forme préfixée par le fournisseur.

Ajout d'un peu de polonais

Maintenant que nous avons résolu le problème difficile, examinons quelques ajustements que nous pouvons apporter pour que toute l'interaction fonctionne comme

Vérifiez d'abord si les cartes se chevauchent lors du retournement. Cela dépendra de l'utilisation de plusieurs colonnes, de la largeur de la gouttière de colonne, de l'orientation du retournement et de la valeur de la perspective de la carte, mais cela risque de se produire. Vous pouvez augmenter la durée de l'animation pour voir les choses plus clairement. En vol stationnaire, il semble anormal que la carte survolée passe sous ses voisins ultérieurs, nous devons donc la placer au-dessus en utilisant z-index . Assez facile, mais attention! Nous devons attendre la fin de l'animation sortante avant de restaurer le z-index . Entrez délai de transition :

 .card {
  transition: z-index;
  délai de transition: var (- time);
  indice z: 0;
  
  &: survoler {
    délai de transition: 0s;
    indice z: 1;
  }
}

Ensuite, envisagez de créer un état actif pour les cartes. J'essaie généralement de créer des cartes comme celles-ci vers un endroit pertinent – même s'il n'est pas spécifié par le concepteur – car les éléments avec des effets de survol comme celui-ci semblent très utilisables, il est donc bon de fournir une destination aux lecteurs qui tentent leur chance. J'aime une transformation d'échelle courte et subtile, car elle fonctionne assez bien, que la deuxième moitié de l'animation soit coupée ou non en chargeant la page de destination (j'aimerais que les navigateurs terminent proprement les animations en vol avant la navigation, cependant Je suis sûr que ce serait beaucoup plus difficile à mettre en œuvre dans la pratique qu'il n'y paraît.

C'est aussi une excellente occasion de réfléchir à la façon dont le contenu de nos cartes est accessible. Notre balisage est concis et bien ordonné, nous avons donc couvert les lecteurs d'écran et autres cas d'utilisation qui ignorent le style, mais qu'en est-il des utilisateurs de clavier? Si nous voulons rendre les cartes elles-mêmes ancrées, elles recevront le focus en tant qu'onglet d'utilisateurs du clavier sur la page. Réutilisons l'état de survol de la carte comme état de focus, et le contenu arrière apparaîtra naturellement pendant la navigation au clavier.

 .card {
  transition: z-index, transform calc (var (- time) / 4);
  délai de transition: var (- temps), 0s;
  indice z: 0;
  
  &: survoler {
    délai de transition: 0s;
    indice z: 1;
  }

  &:actif {
    transformer: échelle (0,975);
  }
}

.card-body {
  .card: survoler &, .card: focus & {
    transform: rotationX (-180deg);
  }
}

Enfin, n'oubliez pas que maintenant la carte évolue automatiquement pour s'adapter à son contenu, vous pouvez utiliser à peu près toutes les techniques d'alignement et d'espacement que vous aimez à l'intérieur des conteneurs avant et arrière. Utilisez l'alignement flexible pour centrer les titres, ajouter du rembourrage, même mettre une autre grille à l'intérieur de la carte. C'est la beauté de bonnes solutions de mise en page qui évoluent avec leur contenu – un couplage réduit des enfants aux parents et la modularité qui vous permet de vous concentrer sur une chose à la fois.

 .card-front, .card-back {
  affichage: flex;
  align-items: centre;
  couleur de fond: blanc;
  boîte-ombre: 0 5px 10px noir;
  rayon-frontière: 0,25rem;
  rembourrage: 1,5rem;
}

Conclusion

J'espère que cette technique CSS vous sera utile! Pourquoi ne pas essayer quelques variations sur l'animation, comme un effet d'échelle ou un simple fondu enchaîné? La technique n'est pas non plus limitée au facteur de forme des cartes. Il peut être utilisé partout où la responsabilité du dimensionnement vertical incombe à plusieurs éléments. Imaginez un site Web de magazine contenant de grandes photographies avec des sous-titres superposés – vous pouvez l'utiliser pour accueillir à la fois des images avec des proportions élevées et un texte long et dynamique.

Surtout, souvenez-vous des avantages de prendre du temps pour vraiment réfléchir sérieusement à la manière d'implémenter une conception qui semble fonctionner uniquement avec un dimensionnement et une position fixes. Souvent, il y a, et peu importe à quel point le problème peut sembler délicat au premier abord, noter toutes vos exigences, mettre du temps de côté pour créer un cas de test minimal et y passer méthodiquement est toujours le meilleur pari.

(ra, il)