Encore une fois, je veux vous parler des résultats d'une étude de conception de site qui a attiré mon attention. La dernière fois, j'ai écrit sur les mécanismes CSS qui sous-tendent le nouveau design de Facebook. Et maintenant, je suis curieux d'explorer CSS CSS. Le nouveau design de Twitter est apparu il y a presque un an. J'ai trouvé beaucoup de choses intéressantes dans le CSS CSS: quelque chose me semblait très bien, et quelque chose était étrange.
Ratio d'aspect des avatars utilisateur
J'ai remarqué une implémentation intéressante de l'avatar de l'utilisateur sur la page de profil. Cette implémentation utilise une technique CSS pour conserver les proportions d'un élément.Avatar de l'utilisateur sur la page de profilLe code HTML et CSS suivant illustre la mise en œuvre de l'avatar.<a href="#" class="avatar">
<div class="avatar-aspect-ratio"></div>
<img alt="" src="me.jpg">
</a>
.avatar {
position: relative;
width: 25%;
display: block;
}
.avatar-aspect-ratio {
width: 100%;
padding-bottom: 100%;
}
.avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
La technique de conservation du rapport hauteur / largeur d'un élément fonctionne du fait que lorsqu'un élément a un retrait vertical (propriété padding-bottomou padding-top), le retrait dépend de la largeur de l'élément. Jetez un œil à l'exemple suivant:.element {
width: 250px;
padding-bottom: 100%;
}
La valeur calculée padding-bottomest égale 250px. Cela signifie que nous avons un carré parfait. L'équipe Twitter a utilisé la même technique, mais appliquée à un élément <img>qui, par rapport à l'élément parent, est absolument positionné. Pourquoi? Voici la raison.Quelque chose ne va pas avec l'avatar.Lorsque l'image n'est pas positionnée de manière absolue, l'avatar ressemblera à celui illustré dans la figure précédente. L'image doit être positionnée à l'aide d'une valeur100%de largeur et de hauteur. Avec cette approche, sa taille sera définie en fonction de la taille de l'élément wrapper.Maintenant que nous avons compris l'idée derrière cette solution, revenons à la façon dont cette idée a été mise en œuvre sur Twitter.La propriété estwidth: 25%basée sur la largeur de l'élément wrapper. Sur mon écran, c'est -600px. Je me suis demandé pourquoi une telle technique avait été choisie. Après avoir appris plus sur le code CSS, j'ai remarqué que le même composant est utilisé dans la fenêtre modale Modifier le profil. Certes, l'élément ici est plus petit en raison de l'utilisation du style suivant:.avatar {
max-width: 8rem;
}
J'aime vraiment l'idée de gérer les images en n'influençant que la propriété width. Voici une vidéo illustrant cette idée.Contrôle de la largeur de l'imageIci vous pouvez trouver un projet de démonstration pour cette section.Pourcentage de retrait supérieur
Pour que l'avatar de l'utilisateur chevauche la photo située en haut de la page de profil, un retrait externe négatif spécifié en pourcentage est utilisé:.avatar {
margin-top: -18%;
}
Certes, dans la fenêtre modale Modifier le profil, le dessin est déjà utilisé pour ajuster le retrait supérieur margin-top: -3rem. Notez que l'indentation dans la fenêtre modale est définie à l'aide d'unités rem. Les mêmes unités sont utilisées pour définir la propriété max-width.Utilisation étrange de la fonction CSS calc ()
J'ai remarqué que le CSS suivant est utilisé pour styliser certains boutons:.button {
min-width: calc(45.08px)
}
Pourquoi passer des fonctions à une calc()seule valeur? Je ne vois pas l'intérêt. Peut-être voulaient-ils arrondir le nombre 45,08? Mais avec cette approche, il n'est pas arrondi à 45. La largeur du bouton est très petite. Le bouton, lors de la traduction de l'application dans une langue RTL, telle que l'arabe, sera trop petit.Un bouton trop petitLa fonctioncalc()apparaît dans le CSS en ligne. Par conséquent, je pense que c'est le résultat du style dynamique du bouton utilisant React.Mélanger les arrière-plans CSS et les images HTML
À de nombreux endroits sur le site, j'ai trouvé un mélange d'images d'arrière-plan définies par des images CSS et HTML. Jetez un œil à l'exemple suivant:<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">
Je l'ai vu dans le profil utilisateur et dans le composant utilisé dans la formation de la disposition de la grille. Fait intéressant, la propriété opacityelement est <img>définie sur 0. La source de l'image active est une propriété background-image. De plus, une propriété est utilisée ici background-size: coverqui évite la distorsion de l'image.J'ai essayé de faire le contraire, c'est-à-dire d'afficher l'élément <img>et de masquer l'arrière-plan CSS, et j'ai comparé les dispositions de la grille. Les résultats de cette comparaison sont présentés ci-dessous.A gauche se trouve l'option dans laquelle l'image d'arrière-plan est utilisée, et à droite se trouve l'option dans laquelle l'image HTML est utilisée.Evidemment, l'image de droite est déformée! Je ne sais pas pourquoi l'équipe de développement n'a pas utilisé la propriété CSSobject-fit: coverpour éviter la distorsion. Et j'aimerais savoir pourquoi deux images sont utilisées ici.Réinitialiser les styles
J'ai remarqué un modèle, qui est l'utilisation constante de la classe CSS qui est ajoutée aux éléments <div>. Voici le CSS pertinent:.css-1dbjc4n {
align-items: stretch;
border: 0 solid black;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
z-index: 0;
}
Ce style s'applique littéralement à chaque élément <div>de la page. Pourquoi? La réinitialisation des styles CSS ne suffit-elle pas ici?Certains des styles décrits ci-dessus me sont assez compréhensibles, en quelque sorte min-width: 0, car il existe une certaine connexion avec Flexbox. Mais qu'en est-il de l'indentation, de l'indentation, des frontières? Pourquoi un élément <div>doit-il être réinitialisé les styles, étant donné que cet élément n'a pas les propriétés appropriées?Flexbox et min-largeur: 0
La valeur par défaut de la propriété min-widthest auto, ce qui s'avère être zéro. Lorsqu'un élément est affiché en tant qu'élément flexible, la valeur de sa propriété min-widthest égale à la taille de son contenu. Autoriser ce comportement peut violer la mise en page si le contenu de l'élément est plus grand qu'il ne l'est.Afin d'éviter ce problème, vous devez réinitialiser la propriété min-widthpour les descendants des éléments flexibles.Élément Flex et wrapper FlexboxLa disposition ci-dessus montre ce qui pourrait arriver si le contenu de l'élément Flex est trop long. Notez que le texte dépasse les limites de l'élément wrapper. Mais que se passe-t-il lors de l'utilisation de la propriétémin-width: 0.Le contenu ne va pas au-delà de l'élément flexUtilisation de la position: propriété collante
J'ai remarqué l'utilisation de la propriété position: stickydans la barre latérale droite de Twitter (où les tendances médiatiques et les recommandations concernant les utilisateurs à suivre sont affichées). Il m'a semblé intéressant de voir comment le travail avec les valeurs des propriétés était organisé bottomet toplors du défilement. Les valeurs par défaut sont les suivantes:.sidebar {
position: sticky;
width: 350px;
bottom: -470.5px;
}
Lorsque la page défile vers le bas, la propriété bottomest remplacée par la propriété top: -480.5px. Je pense que les concepteurs l'ont fait pour permettre à l'utilisateur d'atteindre d'abord l'extrémité de la barre latérale. La propriété est topajoutée après cela.Éléments de séparation
Tout comme dans la conception Facebook que j'ai analysée plus tôt, dans la conception Twitter, dans de nombreux endroits, des éléments de séparation sont utilisés. Tous ces éléments sont flex dont la largeur est définie à l'aide de la propriété flex-basis.Éléments de séparationLe premier élément montré dans l'image précédente utilise la propriété lors de la définition de l'élément de séparationflex-grow: 1. Le second utilise une largeur fixe spécifiée en pixels.Création de contenu Tweet
TweetCi-dessus est créé par moi tweet. À première vue, il peut sembler que nous ayons devant nous un élément<p>ou<span>, auquel du texte est ajouté. Mais, comme il s'est avéré, chaque smiley est représenté par une balise distincte<span>, et si le texte est entre deux de ces éléments, il est également établi comme une balise<span>.La conception du texte de l'émoticône tweet - celle-ci<span>, dans laquelle il y a un élément<div>,<div>contient deux images. L'un est l'arrière-plan CSS, le second est l'image HTML.Étant donné que la première phrase est enveloppée dans une balise<span>, il doit y avoir des séparateurs entre elle et des éléments du même niveau qu'elle. Les concepteurs ont ajouté une nouvelle ligne au début de la deuxième phrase afin de séparer les phrases.Deuxième phraseUtilisation de valeurs calculées pour séparer les éléments
Bouton RetourLorsque vous effectuez une recherche sur Twitter ou lorsque vous ouvrez une page de profil, un bouton est visiblemargin-left: -4px, spécifiant un retrait extérieur gauche négatif. Je m'intéressais à la procédure de calcul de cette valeur..back-button {
margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}
Les calculs ci-dessus donnent une valeur -4px. Pourquoi ne pas simplement demander -4px? Est-ce mieux dans ce cas que d'utiliser une fonction calc()?Largeur des liens de navigation
Liens de navigationDès le premier jour, lorsque je suis tombé sur un panneau de liens de navigation, j'ai remarqué que lorsque vous passez la souris dessus, leur largeur est égale à leur contenu. Je me suis demandé pourquoi ne pas faire en sorte que l'icône et l'étiquette couvrent toute la largeur de l'élément de navigation.Ici, mon attention a été attirée sur l'utilisation d'une propriétéflex-direction: columnpour chaque élément de la barre de navigation. Pourquoi? Est-ce nécessaire dans une situation où un seul enfant est utilisé ici?Retrait externe ajouté juste au cas où
L'indentation en question est présente dans la conception pour empêcher tout comportement de mise en page indésirable. J'ai appelé l'attention sur deux exemples d'utilisation de l'indentation ajoutée aux éléments, pour ainsi dire, «au cas où». Regardons-les.Indentation ajoutée aux éléments «au cas où». À gauche, le contenu normal de l'élément. À droite, le contenu est sensiblement plus long que la normale.Faites attention à ce qui se passe lorsque le contenu de l'élément est sensiblement plus long que son contenu normal. À savoir, ce qui suit se produit ici:- Le texte est rogné.
- Il y a un retrait entre les éléments.
L'indentation externe joue le rôle d'un espace réservé, ce qui empêche l'élément d'occuper tout l'espace. Si vous en tenez compte à temps, vous pouvez éviter les problèmes inattendus qui peuvent survenir pendant le projet. Il est recommandé de toujours tester les mises en page en utilisant un contenu plus long qu'une longueur «normale».Fenêtres modales dans de petites zones de visualisation
J'ai examiné la fenêtre d'édition du profil modal. Il s'est avéré qu'à une certaine hauteur de la zone de visualisation, le bouton d' Saveune telle fenêtre n'est pas disponible. Voici à quoi ça ressemble.Bouton Enregistrer inaccessibleÉtant donné que la fenêtre modale ne prend pas en charge le défilement,Saveje n'ai pas pu accéderau bouton. Mais la fenêtre utilisée pour contrôler l'apparence des éléments prend en charge le changement de hauteur dynamique et le défilement.Une fenêtre qui prend en charge les changements de hauteur dynamiquesPourquoi une fenêtre prend-elle en charge le défilement et l'autre non? Il est intéressant de savoir lequel, selon les concepteurs de Twitter, est le plus important? Quant à moi - c'est exactement la fenêtre qui est utilisée pour éditer le profil.Envisagez-vous d'adopter des idées de conception Twitter?