Photo de Kon Karampelas sur Unsplash
Source: https://ishadeed.com/article/new-facebook-css/
Auteur: Ahmad Shadeed
Traduction: Sélection frontale de langue étrangère
Récemment, le nouveau design Facebook a commencé à être lancé pour les utilisateurs. Je l'ai reçu il y a environ deux semaines. Initialement, chaque élément de l'interface utilisateur était un peu gros pour moi. J'ai passé plusieurs jours à m'y habituer. Dans cet article, je vais discuter de toutes les choses intéressantes que j'ai vues.
Voyons comment Facebook utilise CSS!
Les avatars utilisent SVG
SVG est utilisé pour les photos d'avatar, telles que les photos de profil, votre page ou votre groupe.
<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>
Je me suis demandé, pourquoi l'utilisaient-ils? Voici mon idée:
- L'avatar doit avoir une bordure interne et un noir transparent (10%), pour que l'avatar brillant apparaisse comme un cercle, même s'il est complètement blanc.
- Vous ne pouvez pas imbriquer
box-shadowajouté à HTML<img>. Par conséquent, ils ont utilisé SVG pour le résoudre. - Pour arrondir l'image, ils ont utilisé
<mask>des<image>éléments SVG et SVG .
Comme je l'ai mentionné, la bordure à l'intérieur de l'avatar est utile pour les images lumineuses. Il s'agit d'un modèle montrant le prototype en détail.
La bordure intérieure est ajoutée comme suit:
circle,rect { stroke-width: 2; stroke: rgba(0, 0, 0, 0.1); fill: none;}
Si l'image est rectangulaire, la forme utilisée est rectangulaire:
<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, la tête d' accueil Flux consiste à utiliser <img>et transparents frontière interne des <div>éléments de construction. Comme suit:
<div class="avatar-wrapper> <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt=""> <div class="avatar-outline"></div></div>
CSS est comme suit
.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 0001pxrgba(0, 0, 0, 0.1); border-radius: 50%;}
Parce que la technologie SVG est utilisé que dans quelques endroits, je veux utiliser <img>et <div>provoque la taille de la page. Si SVG est utilisé pour l'avatar du flux, cela entraînera le téléchargement des Ko lorsque l'utilisateur défile vers le bas.
Utilisez des intervalles div au lieu de blancs
Je n'étais pas assez grand pour vivre dans l'intervalle des GIFS, mais j'ai vu quelque chose qui leur était lié. Si je peux, je l'appelle un div spacer?
J'ajoute un peu de fond ici, ce qui précède est la partie demande d'ami qui apparaît au hasard dans le flux de la page d'accueil. Il y a une grille de personne et cette grille a une marge gauche. D' habitude, je vais passer par margin-left:16pxpour effectuer cette opération. Cependant, Facebook a ajouté <div>un espace entre le bord du conteneur et la grille.
Je veux savoir quelle en est la raison?
- Peut-être que dans le système de conception qu'ils ont construit, l'élément conteneur ne permet pas d'ajouter des marges?
- Peut-être est un
reactcomposant qui peut être utilisé partout en spécifiant la largeur?
Pourquoi n'y a-t-il pas de marge? Pour autant que je puisse voir, CSS (environ 100K lignes) est plein de classes utilitaires, et il est facile d'ajouter une classe à l'encapsuleur pour la laisser vide.
Utiliser des filtres CSS
Voyez-vous les quatre icônes là-bas? De plus, les signes et les flèches sont des images, tandis que Messenger et les notifications sont des éléments SVG. Je ne sais pas quelle est la raison de ce mélange.
Lorsque vous cliquez sur le dernier, la couleur de l'icône devient bleue. Je me suis demandé, comment la couleur change-t-elle quand c'est une photo? L'image est-elle susceptible de changer en vol stationnaire? Non! J'ai remarqué qu'il existe un filtre CSS qui peut être utilisé pour changer la couleur de l'image.
.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%)}
Oui, c'est le code de production de Facebook.com, ce qui m'est très étrange. Il change simplement avec des icônes SVG au lieu de fillcouleur difficile?
Ceci est également utilisé pour les icônes de compte vérifiées.
Et également utilisé pour le lien du profil utilisateur.
.icon { filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);}
Si vous souhaitez en savoir plus sur l'utilisation d'un filtre CSS pour convertir une image noire en n'importe quelle couleur, cette réponse [1] est pour vous.
Utiliser des images pour les ombres
Ceci est une 2px * 14pximage en cours de répétition. Non seulement cela, il y a un spécial <div>pour l'ombre. Quel est le but de l'utiliser?
Royi Hagigi de Facebook a confirmé que la raison de l'utilisation des images est la performance. Dans les navigateurs, les ombres sur les en-têtes flottants comme celui-ci tueront les performances de défilement.
Lorsqu'on a demandé à Royi Hagigi comment tester, il a répondu: "En faisant défiler une page pleine de vidéos, des parties aléatoires de la page disparaîtront et réapparaîtront. C'est mauvais."
Je suis totalement d'accord.
Utilisation extensive des variables CSS
J'aime qu'ils utilisent des variables CSS. D'après ce que je peux voir, :rootplus de 320 variables ont été ajoutées à l'élément. Ces valeurs sont également utilisées en mode sombre.
Lors du passage du mode sombre, une __fb-dark-modeclasse à des éléments HTML. Après l'addition, il remplace :roottoutes les variables sont définies comme suit:
:root { /* Light模式变量 */ -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 { /* 覆盖light变量 */ --fds-active-icon: black; --fds-attachment-footer-background: black; --fds-blue-05: black; --fds-blue-30: black; --fds-blue-40: black;}
Ceci est une vidéo de changement de classe. Je suggère de le visualiser en plein écran!
Troncature de ligne (tronquer plusieurs lignes de texte)
Dans la barre latérale, il y a une liste de liens, tels que le profil utilisateur, récent, mémoire ... etc. J'ai remarqué que la troncature de texte sur plusieurs lignes est utilisée ici.
.element { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
Les styles ci-dessus sont ajoutés en tant que styles en ligne, et ils changeront également en fonction du navigateur. Voir le modèle ci-dessous:
Le navigateur prend très bien en charge cette fonctionnalité CSS. Selon CanIUse, tous les principaux navigateurs prennent en charge cette fonctionnalité, mais elle doit être préfixée.
Utilisez l'effet de survol des Divs
Habituellement, nous avons un effet de survol en CSS. Par exemple, lorsque vous survolez des boutons qui nécessitent différentes nuances de gris, nous utilisons simplement la commande suivante:
.element:hover { background: #ccc;}
Cependant, pour les grands sites comme Facebook, cela semble peu pratique. En testant et en vérifiant les choses, j'ai remarqué un élément, qui n'était affiché que sur le survol, sa tâche principale était d'exécuter un élément de survol.
.hover-div { position: absolute; right: 0; left: 0; top: 0; bottom: 0; pointer-events: none; border-radius: 6px; inset: 4px0px; background-color: var(--hover-overlay); transition-property: opacity; transition-timing-function: var(--fds-animation-fade-out); cursor: pointer;}
Cet élément est mis en JavaScript, et non pas opacitydu 0changement 1, donc j'ai fait quelques - unes de ses opérations et a constaté qu'il était largement utilisé pour de nombreux composants.
Voir la collection de captures d'écran ci-dessous pour savoir où utiliser cet élément:
J'aime la cohérence et la simplicité d'utiliser le même effet de survol sur de nombreux éléments. Si cela signifie quelque chose, c'est que le langage de conception est cohérent et que le système est soigneusement conçu. Bien joué, Facebook!
Utilisez l'attribut encart
Il s'agit d'un raccourci pour les attributs supérieur, droit, inférieur et gauche. Peut être utilisé comme ceci:
.element { inset: 4px0; /* 这相当于: top: 4px, bottom: 4px, left: 0, right: 0 */}
insetLes attributs sont utilisés pour survoler les divs de certains éléments et sont ajoutés en ligne HTML. Je l'ai remarqué sur les composants suivants:
Au moment de la rédaction, selon CanIUse, seul Firefox 66+ est pris en charge inset.
dir = attributs logiques auto et CSS
Pour les sites Web multilingues comme Facebook, il est parfois difficile de prédire à quoi ressemblera le contenu. Par exemple, le nom d'utilisateur dispose d' un poste assemblage dir=" auto"propriété. Cela signifie que la direction du texte sera basée sur la langue. Par exemple, pour l'anglais, il sera de gauche à droite, pour l'arabe, il sera de droite à gauche.
De plus, il y a un CSS en ligne , vous pouvez changer la direction du texte (regards dir=autone sont pas assez).
<div dir="auto" style="text-align: start;">محتوى بالعربية</div>
Notez qu'il a été ajouté sur l'élément text-align:start. Ceci est une propriété CSS logique équivalente à la text-align:LTRmise en page de la revendication.
Fond de photo de couverture dynamique
Avez-vous remarqué un dégradé avec une couleur similaire à la couleur principale sur la photo de couverture? Ceci est ajouté dynamiquement en fonction de la photo de couverture. Comment ça marche?
1. Obtenez la couleur principale
Tout d'abord, nous devons obtenir la couleur dominante (la plus utilisée) sur la photo de couverture. L'équipe a créé une petite photo de couverture dans cette couleur uniquement.
2. Ajoutez un arrière-plan en utilisant la couleur principale
L'arrière-plan ajouté à l'élément provient de la couleur principale, et pour plus de clarté, je souligne la photo originale de la couverture avec une bordure blanche.
3. Ajoutez un dégradé au-dessus de l'arrière-plan
.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));}
Lorsque le motif est sombre, le dégradé passe du blanc au noir:
.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));}
Astuce: vous pouvez utiliser cet outil [2] pour obtenir la couleur principale de l'image.
Ombre de boîte multiple
J'aime la façon dont cette équipe crée des ombres pour des éléments comme les menus déroulants. Les ombres vous feront penser qu'il a de la profondeur et est plus réaliste que les ombres ordinaires.
.element { box-shadow: 012px28px0rgba(0, 0, 0, 0.2), 02px4px0rgba(0, 0, 0, 0.1), inset 0001pxrgba(255, 255, 255, 0.5);}
Vous vous demandez peut-être pourquoi il y a une ombre intégrée avec 50% de blanc transparent? Ok, c'est en mode sombre. Voir l'image agrandie ci-dessous concernant l'ombre insérée:
Intelligent, j'aime ça!
Éléments vides de la grille Flexbox
J'ai remarqué que toutes les grilles du site utilisent Flexbox. Une chose qui a attiré mon attention est la section "Vos photos".
.wrapper { display: flex; flex-wrap: wrap; justify-items: space-between;}.item { width: 205px;}
Sonne bien, non? Utilisation space-betweencomme espacement est risqué, car il peut échouer dans le cas de seulement trois photos. Découvrez comment le prototype suivant échoue:
Comment résolvent-ils ce problème? De plus, il y a quatre vide <div>élément, qui est égale à la largeur de chaque photo. Le HTML ressemble à ceci:
<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>
De cette façon, ces divs vides agiront comme de faux articles, et l'espacement entre eux restera égal.
Utiliser des requêtes média verticales
Pour moi, je vois rarement l'utilisation de requêtes verticales sur les médias. J'aime qu'ils l'utilisent pour raccourcir la largeur du fil d'actualité sur la page d'accueil. Voici le CSS utilisé:
@media (min-height:700px) { .element { width: 584px; }}
Voilà, les gars. J'aime écrire cet article et j'ai beaucoup appris. J'espère que vous le trouverez utile, veuillez le diffuser.
Recommandation de service
