Je suis curieux. Il est toujours intéressant pour moi d'ouvrir les outils du développeur de navigateur et de comprendre comment est créé un site Web que j'ai consulté. Ce matériel est ma première histoire sur une telle recherche. Le fait est que j'ai trouvé des exemples intéressants d'utilisation de CSS (au moins ils me semblaient intéressants) dont je voulais parler. Nous parlons des trouvailles CSS dans le nouveau design de Facebook. Cette conception est apparue relativement récemment. Je l'ai vu il y a quelques semaines. Au début, tous les éléments de l'interface me semblaient inhabituellement volumineux, mais je m'y suis habitué en quelques jours seulement. Ici, je vais parler de tout ce que j'ai trouvé intéressant dans la conception de Facebook.
Utilisation de graphiques SVG dans les avatars
Les graphiques Avatars SVG sont utilisés pour les images d'avatar, telles que les photos de profil, les photos sur les pages utilisateur ou en groupe.Voici le code HTML:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>
Quand j'ai vu cela, je me suis demandé pourquoi cette approche était utilisée. J'ai plusieurs réponses à cette question:- L'avatar doit avoir un cadre intérieur qui a une couleur noire translucide (10%). C'est pour que les avatars légers ressemblent à des images rondes. De plus, même si ce sont des images complètement blanches.
- Vous
<img>ne pouvez pas ajouter une ombre intérieure ( box-shadow) à un élément HTML à l' aide d'un mot clé inset. SVG est utilisé pour résoudre ce problème. - Pour que l'image ait une forme ronde, des éléments SVG
<mask>et sont utilisés <image>.
Comme je l'ai dit, les cadres à l'intérieur de l'avatar sont très utiles pour des images lumineuses. Voici une mise en page qui illustre cette idée.Avatars Lecadre intérieur est configuré à l'aide du CSS suivant:circle,
rect {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}
Si l'image est carrée, la figure est utilisée rect:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</g>
</svg>
Fait intéressant, sur la page principale du flux, les avatars sont créés à l'aide de la balise <img>et de l'élément <div>utilisé pour configurer le cadre translucide interne:<div class="avatar-wrapper>
<img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
<div class="avatar-outline"></div>
</div>
Voici les styles de ce HTML:.avatar-wrapper {
position: relative;
}
.avatar {
display: block;
border-radius: 50%;
}
.avatar-outline {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
Étant donné que SVG dans les avatars n'est utilisé qu'à certains endroits, je peux supposer que la raison de l'utilisation <img>et <div>associée à une taille de page. Si des graphiques SVG étaient utilisés dans les avatars de la bande, cela entraînerait une augmentation de la quantité de données chargées lors du défilement sur la bande.Utiliser comme séparateurs d'éléments <div>, pas de marges extérieures
Je n'ai pas trouvé ces moments où les images GIF étaient utilisées comme séparateurs d'éléments de page Web. Mais j'ai vu quelque chose qui ressemblait à cette technique. Je pense que oui, ce dont je parle peut être appelé séparateurs div.<div> Éléments utilisés comme séparateursPermettez-moi de clarifier un peu la figure ci-dessus. Ceci est un fragment de la section qui contient les demandes d'amis qui apparaissent sur la page d'accueil. Devant nous se trouve une certaine grille avec des informations sur les gens. Cette grille doit avoir un retrait extérieur gauche. Jehabitudeajouter aux éléments tels que la frontière:margin-left: 16px. Mais Facebook a fait la même chose en utilisant l'élément<div>qui sépare la grille du bord de l'élément conteneur.Pourquoi les concepteurs ont-ils fait ça? J'ai quelques suppositions:- Peut-être que l'indentation des éléments de conteneur ne peut pas être ajoutée au système de conception qu'ils ont créé?
- Peut-être que c'est un composant React qui peut être utilisé n'importe où en définissant sa largeur?
Pourquoi l'indentation n'est-elle pas utilisée ici? Quant à moi, un site CSS (environ 100 000 lignes), qui regorge de classes auxiliaires, est capable d'accueillir une autre classe qui vous permet d'ajuster l'indentation de l'élément souhaité.Utilisation de filtres CSS
Icônes créées à l'aide des éléments <img> et <svg>Jetez un œil à ces quatre icônes. Une icône avec un signe plus et une icône de flèche sont créées à l'aide d'un élément<img>. Et les icônes et notifications de messager - en utilisant des éléments SVG. Les raisons de ce mélange de technologies me sont inconnues.Si vous cliquez sur la dernière icône, la flèche sera repeinte en bleu. "Comment la couleur change-t-elle ici, parce que la flèche est une image ordinaire?", Me suis-je demandé. Peut-être que lorsque vous survolez l'icône, une image change simplement en une autre? Non ce n'est pas comme ça. J'ai découvert qu'un filtre CSS est utilisé pour changer la couleur de l'icône sur l'icône:.icon {
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}
Et c'est d'ailleurs le code de production de facebook.com. Ce code me semble très étrange. Est-il difficile de remplacer cet élément <img>par une image SVG et de simplement changer la couleur spécifiée par l'attribut fill?La même chose est utilisée lors de la création d'une icône pour les comptes vérifiés.Icône de compte vérifiéQuelque chose de similaire s'applique aux liens du profil utilisateur:.icon {
filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}
Voilà à quoi ça ressembleLiens dans le profil utilisateurSi vous souhaitez apprendre à utiliser un filtre CSS pour colorer une image en noir avec n'importe quelle couleur, jetez un œil à cette réponse sur Stack Overflow. Vous y trouverez un outil pour créer des filtres CSS. Jetez également un œil à ce tweet.Utiliser des images pour créer des ombres
Une ombre créée avec background-imageLe titre de la fenêtre principale a une ombre. On peut supposer qu'il a été créé à l'aide de la propriété CSSbox-shadow. Mais ce n'est pas le cas. Ici, nous avons utilisé un élément<div>avec une image d'arrière-plan qui se répète le long de l'axex.J'ai téléchargé l'image utilisée ici, ce qui me permet de regarder de plus près.L'image utilisée pour créer l'ombreIl s'agit d'une image de 2 x 14 pixels qui, pour créer l'effet d'ombre, est répétée plusieurs fois. Non seulement l'image, mais aussi un élément spécial est impliqué dans la formation de l'effet d'ombre<div>. Pourquoi l'ombre a-t-elle été créée de cette façon?Un employé de Facebook a déclaré que l'image ici avait été utilisée pour des raisons de performances. Il est intéressant de noter qu'une si petite ombre peut entraîner des problèmes de vitesse du site.Lorsqu'on lui a demandé comment ce problème avait été identifié, il a répondu que l'ombre avait provoqué une baisse importante des performances et des effets visuels désagréables. Ainsi, lors du défilement d'une page sur laquelle il y avait de nombreuses vidéos, certaines parties de la page sont apparues et ont disparu.Eh bien, si l'ombre cause de tels problèmes - je ne vois rien de mal à la remplacer par l'image correspondante.Utilisation généralisée des variables CSS
J'adore le fait que les concepteurs de Facebook utilisent des variables CSS. À en juger par ce que j'ai vu, :rootplus de 320 variables ont été ajoutées à l'élément . Ces variables sont utilisées dans les thèmes clairs et sombres du site.Lorsqu'un thème sombre est activé, une classe est ajoutée à l'élément HTML __fb-dark-mode. Ensuite, il remplace toutes les variables déclarées dans l'élément :root::root {
-fds-active-icon: #3578E5;
--fds-attachment-footer-background: #F2F3F5;
--fds-blue-05: #ECF3FF;
--fds-blue-30: #AAC9FF;
--fds-blue-40: #77A7FF;
}
.__fb-dark-mode:root, .__fb-dark-mode {
--fds-active-icon: black;
--fds-attachment-footer-background: black;
--fds-blue-05: black;
--fds-blue-30: black;
--fds-blue-40: black;
}
Voici une vidéo qui montre ce qui se passe après le passage à un sujet sombre. Je vous conseille de le regarder en mode plein écran.Utilisation de la propriété CSS de coupure de ligne pour découper du texte multiligne
Les signatures utilisent le rognage de texte multiligne.La barre latérale contient une liste de liens, tels que ceux qui mènent au profil utilisateur, aux derniers documents, à la section Mémoires. J'ai remarqué que le découpage du texte multiligne est utilisé ici:.element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Ce sont des styles intégrés qui, en outre, varient en fonction du navigateur.Code de découpage de texte dans Chrome et FirefoxCette fonctionnalité CSS bénéficie d'une assez bonne prise en charge du navigateur. CanIUse signale que tous les principaux navigateurs prennent en charge cette propriété (bien qu'avec un préfixe). Les détails sur cette propriété peuvent être trouvés ici .Utiliser un div pour créer des éléments qui répondent au survol de la souris
En règle générale, les effets qui accompagnent la souris sur un élément sont créés à l'aide de CSS. Par exemple, si un certain bouton doit être peint avec une nuance de gris spéciale lorsque vous le survolez, procédez comme suit:.element:hover {
background: #ccc;
}
Cependant, il semble que sur de grands sites comme Facebook, cette approche ne soit pas pratique. Dans le processus d'exploration du site, j'ai attiré l'attention sur un élément qui s'affiche uniquement lorsque vous le survolez avec une souris (appelons-le «l'élément de survol»). C'est sa tâche principale. Voici son style:.hover-div {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
pointer-events: none;
border-radius: 6px;
inset: 4px 0px;
background-color: var(--hover-overlay);
transition-property: opacity;
transition-timing-function: var(--fds-animation-fade-out);
cursor: pointer;
}
La valeur de propriété de opacitycet élément est modifiée par JavaScript de 0à 1. Je l'ai expérimenté et j'ai découvert qu'il est utilisé pour de nombreux composants. Vous trouverez ci-dessous un ensemble de captures d'écran illustrant l'utilisation de cet élément.En utilisant un élément de vol stationnaire,j'aime l'uniformité et la simplicité fournies en utilisant le même effet pour plusieurs éléments. Si cela signifie quelque chose, cela signifie que le langage de conception utilisé sur le site est uniforme et que le système a été soigneusement conçu. Bon travail, Facebook!Utilisation de la propriété inset
Nous parlons d'un enregistrement abrégé des valeurs de propriété, impliquant un impact sur les parties supérieure, droite, inférieure et gauche d'un élément. Vous pouvez utiliser la propriété insetcomme suit:.element {
inset: 4px 0;
}
La propriété est insetconfigurée pour les éléments de survol ci-dessus associés à certains autres éléments. Le style est intégré dans HTML. J'ai remarqué son application au composant illustré ci-dessous.Les zones affectées par la propriété incrustée sont surlignées en bleu.Lorsque ce document est écrit, la propriéténeinset prend en charge que Firefox 66+.Attribut Dir = "auto" et propriétés booléennes CSS
Sur des sites multilingues comme Facebook, il est parfois difficile de prédire exactement quel sera le contenu. Par exemple, le nom d'utilisateur dans un composant a un attribut dir=«auto». Cela signifie que la direction du texte dépendra de la langue. Dites, lorsque vous utilisez l'anglais, le texte sera affiché de gauche à droite, et lorsque vous utilisez l'arabe - de droite à gauche.De plus, il convient de noter qu'il existe un style intégré qui change la direction du texte (on a le sentiment que l'attribut n'est dir=«auto»pas suffisant). Voici à quoi ça ressemble:<div dir="auto" style="text-align: start;">محتوى بالعربية</div>
Notez qu'un style a été ajouté à l'élément text-align: start. Cela utilise une propriété CSS logique. Le style, pour les dispositions LTR, ressemblera text-align: right.Si vous êtes intéressé par les fonctionnalités de la stylisation RTL - jetez un œil à ce matériel.Arrière-plan dynamique en fonction de la photo principale
Arrière-plan en fonction de la photo principaleAvez-vous remarqué qu'un dégradé et une couleur similaire à la couleur de la photo principale sont utilisés pour concevoir l'arrière-plan? Ce fond est formé dynamiquement, il est basé sur la couleur de la photo. Comment c'est fait?▍1. Obtenir une couleur dominante
Vous devez d'abord obtenir la couleur dominante (utilisée plus souvent que les autres) de la photo principale. Une fois cette couleur trouvée, une version réduite de la photo principale est créée, peinte uniquement avec cette couleur.Trouver une couleur dominante▍2. Ajout d'un fond de couleur dominant
Fond utilisant la couleur dominantetrouvée Le fond utilise la couleur dominante trouvée précédemment. Pour plus de clarté, j'ai mis en évidence l'image affichée sur la page comme photo principale avec un cadre blanc.▍3. Ajout d'un dégradé sur l'arrière-plan
Pour ajouter un dégradé sur l'arrière-plan, utilisez le code CSS suivant:.element {
background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}
Ajout d'un dégradé (des couleurs claires sont utilisées dans la conception)Dans le cas où des couleurs sombres sont utilisées dans la conception, le dégradé inverse est utilisé:.element {
background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}
Ajout d'un dégradé (des couleurs sombres sont utilisées dans la conception)Vous pouvez utiliser cet outilpour trouver la couleur dominante de l'image.Ombres multiples
OmbresJ'ai aimé l'approche utilisée par les développeurs Facebook pour créer des ombres pour divers éléments comme les menus déroulants. Une telle ombre crée l'illusion de volume, qui est beaucoup plus réaliste que l'illusion réalisable avec une ombre régulière.Menus déroulantsVoici le CSS:.element {
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
Ici, vous pouvez vous demander pourquoi ici une ombre de couleur blanche est créée avec une transparence de 50%? Le fait est que c'est une ombre pour le régime obscur. Ci-dessous, un fragment agrandi de l'interface dans laquelle une telle ombre est utilisée.Un fragment agrandi de l'interface avec une ombre incrustée.J'aime cette solution raisonnable.Éléments vides pour les grilles flexbox
J'ai remarqué que toutes les dispositions de grille sur le site sont basées sur flexbox. Voici un exemple d'une telle disposition que j'ai trouvée dans la section photos de l'utilisateur.Éléments vides dans la disposition de la grilleVoici le CSS:.wrapper {
display: flex;
flex-wrap: wrap;
justify-items: space-between;
}
.item {
width: 205px;
}
Tout cela semble intéressant, non? L'utilisation d'une valeur space-betweenpour ajuster le placement des éléments est risquée. La mise en page ne sera pas correcte si, par exemple, il n'y a que trois photos. Un exemple d'une telle disposition est présenté ci-dessous.Le danger d'utiliser l'espace entre les deuxComment l'équipe Facebook a-t-elle géré ce problème? Très simple: il y a quatre éléments vides<div>, dont la largeur est égale à la largeur de la photo. Voici le HTML de cette solution:<div class="wrapper">
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</div>
Avec cette approche, ces éléments vides <div>jouent le rôle d'éléments artificiels. Ils aident à maintenir la même distance entre les éléments.Utilisation de requêtes multimédias verticales
Je vois rarement des requêtes médiatiques verticales, pour ainsi dire, dans la nature. J'aime le fait que les développeurs de Facebook aient utilisé cette requête pour réduire la largeur du fil d'actualité sur la page d'accueil:@media (min-height: 700px) {
.element {
width: 584px;
}
}
Sommaire
C'est tout. J'étais très intéressé à travailler sur cet article. En explorant la conception du site Facebook, j'ai beaucoup appris. J'espère que vous avez également trouvé dans mon histoire quelque chose qui vous semblait nouveau et intéressant.Chers lecteurs! Avez-vous déjà trouvé quelque chose d'intéressant en analysant le code des sites que vous visitez?