Verlieben Sie sich in die einfachen CSS-Details, obwohl unbedeutend, können die Effizienz verbessern
|
Die Zukunft von CSS ist so aufregend: Einerseits bietet es eine völlig neue Art des Seitenlayouts, andererseits bietet es coole Filter, Farben und andere visuelle Effekte. Diese CSS sind bei Entwicklern gefragt und werden überall in Zeitschriften und Blog-Artikeln vorgestellt. Wenn diese Funktionen die großartige Seite von CSS sind, schauen wir uns doch einmal seine schlichte Seite an: sehr unauffällige Dinge wie Selektoren, Einheiten und Funktionen (Methoden). Ich sage oft, dass das knifflige Dinger sind, aber was ich meine, ist, dass sie eine wunderbare Arbeit leisten, und das möchte ich weitergeben. Schauen wir uns die einfachen CSS-Details an, die am besten funktionieren – Details, die weit weniger ins Auge fallen als die schicken CSS-Effekte. Einige von ihnen gibt es schon seit einiger Zeit, aber sie hätten es verdient, bekannter zu werden, während andere neu auf der Bildfläche sind. Obwohl sie unauffällig sind, können sie unsere Arbeitseffizienz verbessern – auf bescheidene Weise. Relative Einheiten <br />Intelligente, vorausschauende Entwickler verwenden bereits relative Einheiten – wie em oder Prozentsätze – und verstehen daher das Problem, das aufgrund der Elementvererbung bei der Verwendung eines Rechners als Hilfsmittel zur Berechnung von Größen auftritt. Beispielsweise ist es üblich, eine globale Größe für die Schriftart auf einer Seite festzulegen und dann relative Einheiten zu verwenden, um andere Elemente auf der Seite zu definieren. Das CSS würde wahrscheinlich so aussehen: Code kopieren Der Code lautet wie folgt:html { Schriftgröße: 10px; } p { Schriftgröße: 1,4em; } Dies funktioniert einwandfrei, bis ein untergeordnetes Element eine andere Schriftgröße benötigt, beispielsweise in einem Tag wie diesem: Die Katze saß auf der Matte. Was müssen Sie tun, wenn Sie die Schriftgröße eines Bereichs auf 1,2em einstellen möchten? Nehmen Sie Ihren Taschenrechner zur Hand und berechnen Sie 1,2 geteilt durch 1,4. Hier ist das Ergebnis: Code kopieren Der Code lautet wie folgt:p span { Schriftgröße: 0,85714em; } Dieses Problem ist nicht auf EM beschränkt. Wenn Sie Prozentwerte verwenden, um eine Website mit responsivem, flüssigem Layout zu erstellen, beziehen sich die Prozentwerte auf den Container. Wenn Sie also ein Element so definieren möchten, dass es 40 % seines Containers ausmacht, beträgt seine Höhe 75 % und seine Breite muss auf 53,33333 % eingestellt werden. Dies ist natürlich unbequem. Wurzelbezogene Längeneinheiten <br />Um Probleme mit der Schriftgrößendefinition zu beheben, ist es jetzt möglich, die Einheit „rem“ (Wurzel-em) zu verwenden. rem ist zwar ebenfalls eine relative Einheit, entspricht aber einem festen Grundwert, nämlich der Schriftgröße des Root-Elements des Dokuments (in einer HTML-Datei also des html-Elements). Angenommen, die Schriftgröße des Stammelements ist wie im vorherigen Beispiel auf 10px eingestellt, würde das CSS folgendermaßen geschrieben werden: Code kopieren Der Code lautet wie folgt:p { Schriftgröße: 1,4rem; } p span { Schriftgröße: 1,2rem; } Beide CSS-Regeln beziehen sich auf die Schriftgröße des Stammelements, was den Code eleganter und einfacher macht, insbesondere beim Festlegen einfacher Werte wie 10px oder 12px. Dies ist der Verwendung von px-Werten sehr ähnlich, außer dass rem skalierbar ist. Unter den in diesem Artikel vorgestellten Funktionen ist die Rem-Funktion relativ kompatibel und kann von fortschrittlichen Browsern, einschließlich IE9, mit Ausnahme von Opera Mobile, unterstützt werden. Fensterbezogene Längeneinheiten <br />Ich finde REM-Einheiten cool. Noch cooler wäre es, wenn es einen weiteren Einheitensatz gäbe, der das Prozentproblem lösen könnte. Es ähnelt rem, ist jedoch nicht relativ zum Stammelement des Dokuments, sondern relativ zur Größe des Gerätefensters selbst. Diese beiden Einheiten sind vh und vw. Sie geben die Höhe und Breite im Verhältnis zur Fenstergröße an. Jeder Einheit ist eine Zahl vorangestellt, die den Prozentsatz darstellt. Code kopieren Der Code lautet wie folgt:div { Höhe: 50vh; } Im obigen Beispiel ist die Höhe auf die halbe Fensterhöhe eingestellt. 1vh entspricht einem Prozentsatz der Fensterhöhe, also sind 50vh 50 % der Fensterhöhe. Ändert sich die Fenstergröße, ändert sich auch dieser Wert. Der Vorteil dieses relativen Prozentsatzes besteht darin, dass Sie sich nicht um den übergeordneten Container kümmern müssen. Unabhängig davon, welcher übergeordnete Container es ist, beträgt das 10vw-Element immer 10 % der Fenstergröße. Dementsprechend gibt es die Einheit vmin, die dem Mindestwert von vh oder vw entspricht, und kürzlich wurde angekündigt, dass dem Spezifikationsdokument eine Einheit vmax hinzugefügt wird (obwohl sie zum Zeitpunkt dieses Beitrags noch nicht verfügbar ist). Derzeit unterstützen IE9+, Chrome und Safari 6 diese Funktion. Ausdruckswerte <br />Wenn Sie an einem responsiven, fließenden Layout arbeiten, stoßen Sie häufig auf das Problem gemischter Einheiten: Sie verwenden Prozentsätze zum Festlegen des Rasters, aber feste Pixelbreiten zum Festlegen der Ränder. wie: Code kopieren Der Code lautet wie folgt:div { Rand: 0 20px; Breite: 33 %;} Wenn das Layout nur Polsterung und Rahmen verwendet, können Sie das Problem mithilfe der Box-Größe lösen, aber Sie können nichts am Rand ändern. Ein besserer und flexiblerer Ansatz besteht darin, die Funktion calc() zu verwenden und mathematische Gleichungen zwischen verschiedenen Einheiten wie folgt aufzustellen: Code kopieren Der Code lautet wie folgt:div { Rand: 0 20px; Breite: calc(33% - 40px);} Damit lässt sich nicht nur die Breite, sondern auch die Länge berechnen. Bei Bedarf können Sie calc() innerhalb von calc() hinzufügen. Diese Funktion wird von IE9+ und Firefox unterstützt. Firefox muss das Präfix -moz- hinzufügen (in Version 16 oder 17 muss es möglicherweise nicht vorangestellt werden). Chrome und Safari unterstützen es ebenfalls, müssen aber das Präfix -webkit- hinzufügen. Mobiles Webkit wird jedoch noch nicht unterstützt. Laden von Teilschriftarten aus einer Schriftbibliothek <br />Eine überragende Leistung ist immer wichtig, insbesondere bei der großen Vielfalt an Mobilgeräten auf dem Markt, die zu Unterschieden und Unsicherheiten bei den Verbindungsgeschwindigkeiten führt. Eine Möglichkeit, das Laden von Seiten zu beschleunigen, besteht darin, die Anzahl externer Dateien zu reduzieren. Zu diesem Zweck wird ein neues Attribut unicode-range von @font-face erstellt. Dieses Attribut ist ein Unicode-Bereich, der den Parameterbereich der codierten Schriftart darstellt. Beim Laden externer Dateien werden nur die verwendeten Schriftarten geladen und nicht die gesamte Schriftartenbibliothek. Der folgende Code zeigt, wie nur drei Schriftarten aus der Schriftartenbibliothek foo.ttf geladen werden: Code kopieren Der Code lautet wie folgt:@font-face {Schriftfamilie: foo;Quelle: URL('foo.ttf');Unicode-Bereich: U+31-33;} Dies ist besonders nützlich für Seiten, die Schriftsymbole verwenden. Ich habe es getestet und festgestellt, dass die Verwendung des Unicode-Bereichs die zum Laden von Schriftdateien erforderliche Zeit um durchschnittlich 0,85 Sekunden verkürzt, was nicht wenig ist. Natürlich kann es sein, dass Sie das nicht glauben. Diese Eigenschaft funktioniert derzeit in den Browsern IE9+ und Webkit (wie Chrome und Safari). Neue Pseudoklassen <br />Es lohnt sich, sowohl Einheiten als auch Werte zu nutzen, aber ich bin mehr von Selektoren und Pseudoklassen begeistert. Ich bin von der Idee eines gut entwickelten Selektormusters begeistert, auch wenn nur wenige Browser es unterstützen. Um Steve Jobs zu zitieren: Machen Sie die Innenseite des Zauns so schön wie die Außenseite, auch wenn niemand sonst hineinsehen kann – denn Sie wissen, was sich darin befindet. Als ich :nth-of-type() zum ersten Mal verwendete, war es wie ein Durchbruch, als hätte ich mich von den Fesseln meines Denkens befreit. Ok, da habe ich etwas übertrieben. Aber einige der neuen CSS-Pseudoklassen geben Anlass zur Freude. Die Negations-Pseudoklasse <br />Wahrscheinlich kennen Sie die Vorteile der Pseudoklasse :not() erst, wenn Sie sie selbst ausprobieren. :not() mit Parametern ist nur ein normaler Selektor – kein zusammengesetzter Selektor. Eine Gruppe von Elementen plus der Selektor: not() bedeutet, dass die Elemente, die diesen Parameter erfüllen, ausgeschlossen werden. Klingt etwas kompliziert, oder? Dabei ist es eigentlich ganz einfach. Annahme: Sie möchten die ungeraden Zeilen einer Liste von Elementen mit Ausnahme der letzten Zeile auswählen. Wenn dies vorher der Fall war, müssen Sie Folgendes schreiben: Code kopieren Der Code lautet wie folgt:li { Farbe: #00F; } li:n-tes Kind (ungerade) { Farbe: #F00; } li:letztes Kind { Farbe: #00F; } Indem wir nun :last-child als Parameter der negierten Pseudoklasse festlegen, können wir das letzte Element ausschließen, was eine Codezeile einspart und den Code prägnanter und einfacher zu warten macht. Code kopieren Der Code lautet wie folgt:li { Farbe: #00F; } li:n-tes-Kind(ungerade):nicht(:letztes-Kind) { Farbe: #F00; } Die Negations-Pseudoklasse scheint vielleicht keine große Sache zu sein und man kann damit durchkommen, aber sie ist trotzdem nützlich. Ich habe es in Projekten verwendet, die auf Webkit basieren, und die Vorteile liegen ziemlich auf der Hand. Ehrlich gesagt ist es einer meiner liebsten Pseudokurse. Ja, ich habe eine Lieblings-Pseudoklasse. Von den in diesem Artikel erwähnten Funktionen ist die Negations-Pseudoklasse die kompatibelste und wird von den Browsern IE9+ und höher unterstützt (ohne dass ein Browser-Anbieterpräfix erforderlich ist). Wenn Sie mit jQuery vertraut sind, sind Sie wahrscheinlich daran gewöhnt – es gibt es seit Version 1.0, zusammen mit der ähnlichen Methode not(). Die Pseudoklasse „gilt für“ Die Pseudoklasse :matches() kann einen normalen Selektor, einen zusammengesetzten Selektor, eine durch Kommas getrennte Liste oder eine beliebige Kombination von Selektoren als Argument annehmen. wunderbar! Aber was kann es? Der leistungsfähigste Aspekt der Pseudoklasse :matches() besteht darin, dass sie zum Aggregieren mehrerer Selektoren verwendet werden kann. Um beispielsweise die p-Elemente in mehreren verschiedenen untergeordneten Containern im übergeordneten Container auszuwählen, könnte der Code vorher wie folgt geschrieben werden: Code kopieren Der Code lautet wie folgt:.home Kopfzeile p,.home Fußzeile p,.home nebenbei p {Farbe: #F00;} Mit der Pseudoklasse :matches() können Sie die gemeinsamen Punkte extrahieren und die Codemenge reduzieren. In diesem Beispiel besteht die Gemeinsamkeit der Selektoren darin, dass sie mit „home“ beginnen und mit „p“ enden. Daher können wir :matches() verwenden, um alle Elemente dazwischen zu gruppieren. Sind Sie ein wenig verwirrt? Schauen Sie sich einfach den Code an und Sie werden es verstehen: Code kopieren Der Code lautet wie folgt:.home :matches(Kopfzeile, Fußzeile, Seite) p { Farbe: #F00; } Dies ist tatsächlich Teil von CSS4 (genauer gesagt CSS-Selektorlevel 4), und im Spezifikationsdokument wird auch erwähnt, dass eine ähnliche Syntax (durch Kommas getrennte zusammengesetzte Selektoren) auf die Pseudoklasse :not() angewendet wird. Aufgeregt! Derzeit kann :matches() in den Browsern Chrome und Safari funktionieren, muss aber mit -webkit- beginnen. Firefox unterstützt es auch, muss aber auf die alte Weise geschrieben werden: any() und mit -moz- beginnen. Sind Sie in diese einfachen CSS-Details verliebt? Das Beste an den in diesem Beitrag besprochenen Funktionen ist, dass sie echte Probleme lösen, von trivialen und komplizierten Selektoren bis hin zu den neuen Herausforderungen beim Erstellen reaktionsfähiger Websites. Tatsächlich erwarte ich, dass jede Funktion selbst in den banalsten Projekten zum Einsatz kommt. Neue Funktionen wie Filter mögen intuitiv und auffällig sein, aber ich möchte lieber die kleinen praktischen Tricks entdecken, die tief im Inneren verborgen sind. Während Sie aktiv erkunden, kann jede Funktion Ihre Karriere erleichtern. Wenn Sie darüber nachdenken, wird es Ihnen nicht mühsam erscheinen. |
<<: Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.
>>: JavaScript-Flusskontrolle (Schleife)
Artikel empfehlen
Eine Zusammenfassung detaillierter Einblicke in den Import von CSS
Auf die Entwicklungsgeschichte von CSS wird hier ...
Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen
Inhaltsverzeichnis Canvas-bezogene Dokumente Effe...
Konfigurationslösung für die MySQL Dual-Master-Architektur (Master-Master)
In Unternehmen hat die hohe Verfügbarkeit von Dat...
Einführung in Docker-Container
1. Übersicht 1.1 Grundlegende Konzepte: Docker is...
Lösung für mehrere Docker-Container, die nicht die gleiche Portnummer haben
Hintergrund In Docker werden vier Container mit d...
Nginx-Inhaltscache und allgemeine Parameterkonfigurationsdetails
Anwendungsszenarien: Die Seiten des Projekts müss...
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
MySQL extrahiert zufällig eine bestimmte Anzahl von Datensätzen
Früher habe ich zur Handhabung dieser Art von Nut...
CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen
Detaillierte Beschreibung der Eigenschaften Der Z...
Zusammenfassung der CJK-Zeichen (vereinheitlichte chinesische, japanische und koreanische Ideogramme) in Unicode
CJK ist die Abkürzung für CJK Unified Ideographs,...
So migrieren Sie das Datenverzeichnis in Docker
Inhaltsverzeichnis Datenträgernutzung anzeigen Da...
Detaillierte Erläuterung der Idee zur Implementierung dynamischer Spalten in AngularJS-Loop-Objekteigenschaften
AngularJS-Loop-Objekteigenschaften zum Erreichen ...
Vue implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird
Problembeschreibung html <iframe id="h5In...
Docker- und Portainer-Konfigurationsmethoden unter Linux
1. Installieren und verwenden Sie Docer CE Dieser...