Ich möchte Ihnen noch einmal über die Ergebnisse einer Site-Design-Studie berichten, die meine Aufmerksamkeit erregt hat. Das letzte Mal habe ich über die CSS-Mechanismen geschrieben, die dem neuen Facebook-Design zugrunde liegen. Und jetzt bin ich neugierig auf Twitter CSS. Das neue Twitter-Design erschien vor fast einem Jahr. Ich fand viele interessante Dinge im CSS CSS: etwas schien mir in Ordnung zu sein, und etwas war seltsam.
Seitenverhältnis der Benutzeravatare
Ich habe eine interessante Implementierung des Benutzer-Avatars auf der Profilseite bemerkt. Diese Implementierung verwendet eine CSS-Technik zum Beibehalten des Seitenverhältnisses eines Elements.Benutzeravatar auf der ProfilseiteDer folgende HTML- und CSS-Code veranschaulicht die Implementierung des Avatars.<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%;
}
Die Technik zum Beibehalten des Seitenverhältnisses eines Elements funktioniert aufgrund der Tatsache, dass bei einem vertikalen Einzug (Eigenschaft padding-bottomoder padding-top) eines Elements der Einzug von der Breite des Elements abhängt. Schauen Sie sich das folgende Beispiel an:.element {
width: 250px;
padding-bottom: 100%;
}
Der berechnete Wert padding-bottomist gleich 250px. Dies bedeutet, dass wir ein perfektes Quadrat haben. Das Twitter-Team verwendete dieselbe Technik, wandte sie jedoch auf ein Element an <img>, das in Bezug auf das übergeordnete Element absolut positioniert ist. Warum? Hier ist der Grund.Mit dem Avatar stimmt etwasnicht . Wenn das Bild nicht absolut positioniert ist, sieht der Avatar wie in der vorherigen Abbildung gezeigt aus. Das Bild muss mit einem Wert100%für Breite und Höhepositioniert werden. Bei diesem Ansatz wird seine Größe entsprechend der Größe des Wrapper-Elements festgelegt.Nachdem wir die Idee hinter dieser Lösung herausgefunden haben, kehren wir zurück zu der Umsetzung dieser Idee auf Twitter.Die Eigenschaftwidth: 25%basiert auf der Breite des Wrapper-Elements. Auf meinem Bildschirm ist es -600px. Ich fragte mich, warum eine solche Technik gewählt wurde. Nachdem ich mehr über CSS-Code erfahren hatte, stellte ich fest, dass dieselbe Komponente im modalen Fenster Profil bearbeiten verwendet wird. Richtig, das Element hier ist aufgrund der Verwendung des folgenden Stils kleiner:.avatar {
max-width: 8rem;
}
Ich mag die Idee, Bilder zu verwalten, indem man nur die Eigenschaft beeinflusst width. Hier ist ein Video, das diese Idee veranschaulicht.BildbreitensteuerungHier finden Sie ein Demo-Projekt für diesen Abschnitt.Prozentualer oberer Einzug
Damit der Avatar des Benutzers das Foto oben auf der Profilseite überlappt, wird ein negativer externer Einzug in Prozent verwendet:.avatar {
margin-top: -18%;
}
Richtig, im modalen Fenster Profil bearbeiten wird das Design bereits zum Anpassen der oberen Einrückung verwendet margin-top: -3rem. Beachten Sie, dass der Einzug im modalen Fenster mit Einheiten festgelegt wird rem. Dieselben Einheiten werden zum Festlegen der Eigenschaft verwendet max-width.Seltsame Verwendung der calc () CSS-Funktion
Mir ist aufgefallen, dass das folgende CSS zum Stylen einiger Schaltflächen verwendet wird:.button {
min-width: calc(45.08px)
}
Warum übergibt Funktionen einen calc()einzelnen Wert? Ich verstehe den Punkt nicht. Vielleicht wollten sie die Zahl 45.08 runden? Bei diesem Ansatz wird es jedoch nicht auf 45 gerundet. Die Breite der Schaltfläche ist sehr klein. Die Schaltfläche ist zu klein, wenn die Anwendung in eine RTL-Sprache wie Arabisch übersetzt wird.Eine zu kleine SchaltflächeDie Funktion wirdcalc()im Inline-CSS angezeigt. Daher glaube ich, dass dies das Ergebnis des dynamischen Stils der Schaltfläche mit React ist.Mischen Sie CSS-Hintergründe und HTML-Bilder
An vielen Stellen auf der Website fand ich eine Mischung aus Hintergrundbildern, die durch CSS- und HTML-Bilder definiert wurden. Schauen Sie sich das folgende Beispiel an:<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">
Ich habe dies im Benutzerprofil und in der Komponente gesehen, die bei der Erstellung des Rasterlayouts verwendet wurde. Interessanterweise ist die opacityElementeigenschaft auf <img>gesetzt 0. Die Quelle des aktiven Bildes ist eine Eigenschaft background-image. Zusätzlich wird hier eine Eigenschaft verwendet background-size: cover, die Bildverzerrungen vermeidet.Ich habe versucht, das Gegenteil zu tun, dh das Element anzuzeigen <img>und den CSS-Hintergrund auszublenden, und die Rasterlayouts verglichen. Die Ergebnisse dieses Vergleichs sind unten gezeigt.Links ist die Option, in der das Hintergrundbild verwendet wird, und rechts ist die Option, in der das HTML-Bild verwendet wird.Offensichtlich ist das Bild rechts verzerrt! Ich weiß nicht, warum das Entwicklungsteam die CSS-Eigenschaft nicht verwendet hatobject-fit: cover, um Verzerrungen zu vermeiden. Und ich würde gerne wissen, warum hier zwei Bilder verwendet werden.Stile zurücksetzen
Ich habe ein Muster bemerkt, nämlich die ständige Verwendung der CSS-Klasse, die den Elementen hinzugefügt wird <div>. Hier ist das relevante CSS:.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;
}
Dieser Stil gilt buchstäblich für jedes Element <div>auf der Seite. Warum? Reicht das Zurücksetzen von CSS-Stilen hier nicht aus?Einige der oben beschriebenen Stile sind für mich ziemlich verständlich min-width: 0, da eine gewisse Verbindung zu Flexbox besteht. Aber was ist mit Einrückung, Einrückung, Grenzen? Warum müssen für ein Element <div>Stile zurückgesetzt werden, da dieses Element nicht über die entsprechenden Eigenschaften verfügt?Flexbox und Mindestbreite: 0
Der Standardwert der Eigenschaft min-widthist autoNull. Wenn etwas als Flex-Element angezeigt wird, entspricht der Wert seiner Eigenschaft min-widthder Größe seines Inhalts. Das Zulassen dieses Verhaltens kann das Layout verletzen, wenn der Inhalt des Elements größer als er ist.Um dieses Problem zu vermeiden, müssen Sie die Eigenschaft min-widthfür Nachkommen von Flex-Elementen zurücksetzen .Flex-Element und Flexbox-WrapperDas oben gezeigte Layout zeigt, was passieren kann, wenn der Inhalt des Flex-Elements zu lang ist. Beachten Sie, dass der Text die Grenzen des Wrapper-Elements überschreitet. Aber was passiert bei der Nutzung der Eigenschaftmin-width: 0.Der Inhalt geht nicht über das Flex-Element hinausPosition verwenden: klebrige Eigenschaft
Ich habe die Verwendung der Eigenschaft position: stickyin der rechten Seitenleiste von Twitter bemerkt (wo Medientrends und Empfehlungen zu den zu befolgenden Benutzern angezeigt werden). Es schien mir interessant, wie die Arbeit mit Eigenschaftswerten organisiert war bottomund topwann gescrollt wurde. Die Standardwerte lauten wie folgt:.sidebar {
position: sticky;
width: 350px;
bottom: -470.5px;
}
Wenn die Seite nach unten gescrollt wird, wird die Eigenschaft bottomdurch die Eigenschaft ersetzt top: -480.5px. Ich denke, dass Designer dies getan haben, damit der Benutzer zuerst das Ende der Seitenleiste erreichen kann. Die Eigenschaft wird danach tophinzugefügt.Trennelemente
Genau wie im Facebook-Design, das ich zuvor analysiert habe, werden im Twitter-Design vielerorts Trennelemente verwendet. All dies sind Flex-Elemente, deren Breite mithilfe der Eigenschaft festgelegt wird flex-basis.TrennelementeDas erste im vorherigen Bild gezeigte Element verwendet die Eigenschaft beim Festlegen des Trennelementsflex-grow: 1. Die zweite verwendet eine feste Breite in Pixel.Tweet-Inhalte erstellen
TweetOben wird von mir Tweet erstellt. Auf den ersten Blick scheint es, als hätten wir ein Element vor uns<p>oder<span>, in das Text eingefügt wird. Wie sich herausstellte, wird jedes Emoticon durch ein separates Tag dargestellt<span>. Wenn sich der Text zwischen zwei solchen Elementen befindet, wird er auch als Tag angezeigt<span>.Das Design des Textes des TweetsEmoticon -<span>in dem sich ein Element befindet<div>,<div>enthält zwei Bilder. Einer ist der CSS-Hintergrund, der zweite ist das HTML-Bild.Da der erste Satz in ein Tag eingeschlossen ist<span>, müssen zwischen ihm und Elementen derselben Ebene Trennzeichen stehen. Designer haben am Anfang des zweiten Satzes eine neue Zeile hinzugefügt, um die Sätze zu trennen.Zweiter SatzVerwenden berechneter Werte zum Trennen von Elementen
Zurück-SchaltflächeWenn Sie eine Suche auf Twitter durchführen oder eine Profilseite öffnen, wird eine Schaltfläche angezeigtmargin-left: -4pxwurdeein Stil angewendet, der einen negativen äußeren linken Einzug angibt. Ich interessierte mich für das Verfahren zur Berechnung dieses Wertes..back-button {
margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}
Die obigen Berechnungen ergeben einen Wert -4px. Warum nicht einfach fragen -4px? Ist das in diesem Fall besser als die Verwendung einer Funktion calc()?Breite der Navigationslinks
NavigationslinksAls ich am ersten Tag auf ein Navigationslinkfeld stieß, bemerkte ich, dass ihre Breite dem Inhalt entspricht, wenn Sie mit der Maus darüber fahren. Ich fragte mich, warum das Symbol und die Beschriftung nicht die gesamte Breite des Navigationselements abdecken sollten.Hier wurde ich auf die Verwendung einer Eigenschaftflex-direction: columnfür jedes Element der Navigationsleiste aufmerksam gemacht. Warum? Ist dies in einer Situation notwendig, in der hier nur ein Kind verwendet wird?Externer Einzug für alle Fälle hinzugefügt
Die betreffende Einrückung ist im Design vorhanden, um unerwünschtes Seitenlayoutverhalten zu verhindern. Ich machte auf zwei Beispiele für die Verwendung von Einrückungen aufmerksam, die den Elementen sozusagen „nur für den Fall“ hinzugefügt wurden. Schauen wir sie uns an.Einrückung zu Elementen "nur für den Fall" hinzugefügt. Links ist der normale Inhalt des Elements. Auf der rechten Seite befindet sich der Inhalt, der merklich länger als normal ist.Achten Sie darauf, was passiert, wenn der Inhalt des Elements merklich länger als der normale Inhalt ist. Hier tritt nämlich Folgendes auf:- Der Text wird beschnitten.
- Zwischen den Elementen befindet sich ein Einzug.
Externe Einrückungen spielen die Rolle eines Platzhalters, der verhindert, dass das Element den gesamten Raum einnimmt. Wenn Sie dies rechtzeitig berücksichtigen, können Sie unerwartete Probleme vermeiden, die während des Projekts auftreten können. Es wird empfohlen, Seitenlayouts immer mit Inhalten zu testen, die länger als eine „normale“ Länge sind.Modale Fenster in kleinen Sichtbereichen
Ich habe das Fenster zur Bearbeitung des modalen Profils untersucht. Es stellte sich heraus, dass in einer bestimmten Höhe des Anzeigebereichs die Schaltfläche für ein Savesolches Fenster nicht verfügbar ist. So sieht es aus.Unzugängliche Schaltfläche SpeichernDa das modale Fenster das Scrollen nicht unterstützt,Savekonnte ich nichtauf die Schaltfläche zugreifen. Das Fenster zur Steuerung des Erscheinungsbilds von Elementen unterstützt jedoch die dynamische Höhenänderung und das Scrollen.Ein Fenster, das dynamische Höhenänderungen unterstütztWarum unterstützt ein Fenster das Scrollen und das andere nicht? Es ist interessant zu wissen, welches laut Twitter-Designern wichtiger ist? Für mich ist dies genau das Fenster, in dem das Profil bearbeitet wird.Planen Sie Ideen aus dem Twitter-Design zu übernehmen?