CSS-Tipps, die Sie in den Tutorials kaum finden können

Published on November 08, 2018

CSS-Tipps, die Sie in den Tutorials kaum finden können

Ursprünglicher Autor: Cristian Traina
  • Übersetzung
Es gibt bestimmte CSS-Regeln, die in jedem Tutorial zu finden sind. Es gibt jedoch auch CSS-Regeln, die Sie in den Handbüchern nicht finden, aber sobald Sie mit dem Schreiben von Code beginnen, auf sie stoßen. Ich bin sicher, Sie haben bereits herausgefunden, wie Sie ein Element vertikal ausrichten oder ein komplexes Layout erstellen. Wir werden nicht darüber reden.

Schließlich gibt es CSS-Regeln, die Sie in den Handbüchern kaum erkennen können und die Sie möglicherweise nicht kennen. Für einige Zeit sammelte ich diese Tipps und entschied mich nun, einen Artikel in der Hoffnung zu schreiben, dass sie nützlich wären. Folgendes haben mir die CSS-Tutorials nicht beigebracht.





Padding-top-Eigenschaft relativ zur Breite des übergeordneten Elements


Wie oft haben Sie relative Einheiten in CSS verwendet? Ich bin ein großer Fan von ihnen, weil sie es Ihnen ermöglichen, eine responsive Website zu erstellen, ohne auf Medienanfragen zu gehen. Wenn Sie die Höhe des Elements auf die Hälfte der Höhe des übergeordneten Elements festlegen möchten, schreiben Sie einfach height: 50%.

Sie können relative Einheiten überall verwenden. Wenn Sie einen Abstand zwischen zwei vertikalen Elementen hinzufügen möchten, können Sie schreiben margin-top: 15%und ein externer Einzug wird angezeigt. Der Abstand beträgt 15% der ursprünglichen Höhe. Ich denke, Sie wissen das alles und ich werde Ihre Zeit nicht verschwenden. Aber vielleicht wissen Sie nicht, dass nicht alles so einfach ist.

In einigen Situationen ist es besser, anstelle des Randes eine Auffüllung zu verwenden . Aber bei der Installation padding-top: 15%... Was zum ...?

Die Immobilie funktioniert nicht wie erwartet. Es werden keine Parameter relativ zur Höhe des übergeordneten Elements festgelegt. Was ist los?

Erklärung


Sie legt die Parameter relativ zur übergeordneten Breite fest. Benötigen Sie eine Demonstration? Hier ist:


Spielen Sie einfach mit der Änderung der Breite der Elternteile und sehen Sie, wie sich dies auf die Einrückung des Kindes auswirkt. Auf den ersten Blick mag das seltsam erscheinen, aber es gibt einen guten Grund, warum dies passiert. Sie werden es finden, wenn Sie die CSS-Spezifikation lesen ...

Nein, ich mache nur Spaß - es gibt keine Erklärung dafür, warum dies geschieht. Zumindest konnte ich nirgendwo eine Erklärung finden. Es passiert einfach so, denk daran.

Obwohl wir nicht verstehen, warum die Entwickler dies getan haben, können wir diese Funktion zu unserem Vorteil nutzen. Für unseren Artikel legen wir Folgendes fest:

.parent {
  height: auto;
  width: 100px;
}
.child {
  padding-top: 100%;
}

Die Höhe des Elements entspricht dann der Höhe des Kindes, obwohl wir dies angegeben haben height: auto. Auf der anderen Seite ist die Höhe des untergeordneten Elements gleich der Breite des übergeordneten Elements padding-top: 100%. Das Ergebnis ist ein Quadrat, und das Element behält dieses Verhältnis für alle Größen bei.

Hier ist ein Arbeitsbeispiel:


Wenn Sie padding-top: 100%zu einem anderen Prozentsatz wechseln , erhalten Sie ein Rechteck. Wenn Sie die Breite ändern, bleibt das Verhältnis erhalten.

Transformation kann Regeln ansammeln


Wenn Sie Informatik studiert haben, werden Sie sich sicherlich an diese schreckliche Schildkröte und ihren beweglichen Stift erinnern. Dieses pädagogische Konzept ist besser bekannt als die Schildkröten-Karte , deren Zweck es ist, die Schildkröte mit einfachen Anweisungen entlang des Weges zu führen - "20 Schritte vorwärts", "90 Grad-Drehung" und dergleichen.

Wenn Sie CSS verwenden, können Sie einen Befehl zum Verschieben von „20 Pixeln nach rechts“ relativ zur aktuellen Position des Elements anstelle der Startposition angeben. Und wenn ich sage, dass Sie es mit einer Eigenschaft tun können transform?

Viele Entwickler wissen nicht, dass eine Eigenschaft transformRegeln sammeln kann, und die Regel n + 1 bezieht sich auf die in der n-ten Regel erreichte Position und nicht auf die ursprüngliche Position.

Bist du verwirrt Vielleicht hilft Ihnen dieses Beispiel bei der Wiederherstellung:


Beachten Sie, dass wir keine JavaScript-Variablen verwendet haben, um die aktuelle Position oder die aktuelle Drehung zu speichern. Diese Informationen werden nirgendwo gespeichert! Die Lösung ist einfach, wenn Sie schreiben:

transform: translateX(20px);

Fügen Sie dann die folgende Regel hinzu:

transform: translateX(20px) translateX(40px)

Die zweite Regel ersetzt nicht die erste Regel, sie wird einheitlich angewendet. Die Tatsache, dass sie konsequent angewendet werden, ist wichtig. Wenn Sie ein Element drehen, ändern Sie das Bezugssystem. Weitere Regeln gelten für das neue Bezugssystem. Also dieser Eintrag:

transform: rotateZ(20deg) translateX(30px)

wird sich davon unterscheiden:

transform: translateX(30px) rotateZ(20deg)

Sie können auch verschiedene Maßeinheiten kombinieren. Sie können ein Element mit der Größe 600 beispielsweise wie folgt zentrieren:

transform: translateX(50vw) translateX(-300px)

Aber wenn Sie es nicht animieren wollen, dann vielleicht die calc ()beste Alternative.

Wenn Sie sich Sorgen um die Schildkröte machen, habe ich ein weiteres Fragment erstellt, das die Dynamik neu erzeugt:


Leider zieht sie noch nicht. Wenn Sie möchten, können Sie die Zeichnungsfunktion jedoch jederzeit implementieren.

Externe und interne Einrückungen werden im Uhrzeigersinn gezählt.


Das ist einfach und viele werden denken, dass ich banale Dinge schreibe, aber ich habe gesehen, dass so viele Menschen mit den vieren zu kämpfen haben, dass ich aufgehört habe, es für selbstverständlich zu halten.

Viele Entwickler wissen nicht, dass fast jede CSS-Eigenschaft eine abgekürzte Alternative hat. Andere Entwickler wissen das, verwenden aber weiterhin die Vollversion, da sie sich nie an die Bestellung erinnern.

Lassen Sie mich Ihnen einen Hinweis geben:
Einrückungen und Ränder folgen im Uhrzeigersinn

. Sie können mit Zuversicht verwenden:

padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;

Sie können aber auch eine kürzere Alternative verwenden:

padding: 3px 6px 3px 6px;

Die Prozedur ist leicht zu merken - schauen Sie sich diese Uhr an:



Starten Sie um 12:00 Uhr und bewegen Sie sich im Uhrzeigersinn. Sie erhalten die richtige Reihenfolge.

Wenn Sie stattdessen nur zwei Werte verwenden:

padding: 2px 4px;

Der Browser erweitert ihn, indem er die Parameter wiederholt:

padding: 2px 4px 2px 4px;

Wenn Sie drei Werte verwenden:

padding: 2px 4px 6px;

Der Browser verwendet den Mittelwert für den linken und den rechten Rand, als ob Sie schreiben würden:

padding: 2px 4px 6px 4px;

Hintergrund unterstützt mehrere Bilder.


Dies ist eine der am wenigsten bekannten Eigenschaften, obwohl sie allgemein unterstützt wird.

Sie wissen, dass Sie die URL des Bildes in der Eigenschaft angeben können, Sie können backgroundjedoch bei Bedarf beliebig viele Bilder einfügen. Sie müssen sie nur mit einem Komma trennen:

background: url('first-image.jpeg') top left,
            url('second-image.jpeg') bottom right;

Warum kann das nützlich sein? Was halten Sie von Linus Torvalds vor dem Hintergrund des generierten Sonnenaufgangs mit CSS?


Sie können auch ein rechteckiges rechteckiges Bild erstellen, indem Sie die schattierten Rahmen hinzufügen, die auf Instagram so beliebt sind. Dazu wiederholte ich dasselbe Bild zweimal und vergrößerte das Hintergrundbild fünf Mal:


Sensorerkennung


Dank Medienanfragen können wir Websites flexibel gestalten und Layouts an Bildschirme unterschiedlicher Größe anpassen. Das reicht aber nicht aus!

Smartphones, Tablets und klassische PCs unterscheiden sich in der Natur. Es geht nicht um die Bildschirmgröße.

Auf einem Touchscreen-Gerät verwenden Sie Bildschirmgesten, und Tools wie HammerJS helfen dabei. Mit der Maus klicken Sie einfach mit größerer Genauigkeit. Wenn Sie Ihre Website an Bildschirme unterschiedlicher Größe angepasst haben, denken Sie möglicherweise über ihre Flexibilität in andere Richtungen nach und unterstützen verschiedene Eingabearten!

Sie benötigen keinen komplexen JavaScript-Code, um einen Benutzeragenten zu definieren. Alles was Sie brauchen, ist in CSS:

@media (any-pointer: fine) {
  /*
    These rules will be applied to not-touchscreen devices
  */
}
@media (any-pointer: coarse) {
  /*
    These rules will be applied to touchscreen devices only
  */
}

Hier ist ein Beispiel:


Tipp : Sie benötigen kein Smartphone zum Testen. Sie können ein Touch-Gerät mit Google Chrome-Tools simulieren, indem Sie auf dieses Symbol klicken:



Es ist sehr nützlich und ich weiß nicht, warum es nicht üblich ist, obwohl es anständig unterstützt wird. Ich habe es beispielsweise in einem Karussell verwendet, um Chevron-Symbole auf Touchscreen-Geräten zu verbergen, um ein natürlicheres Aussehen zu erzielen.

Am Ende können Sie eine Datei bereitstellen touchscreen.cssund ggf. importieren:

@import url('touchscreen.css') screen and (any-pointer: coarse);

Hinweis : Firefox wird derzeit nicht unterstützt, wie Sie auf caniuse.com sehen können .

Einrückungen kollabieren



„Und beobachte die Treppe. Sie lieben es, sich zu ändern. “(Percy Weasley bis Harry Potter)

Ich mag CSS - es ist sauber, präzise und elegant, es hat alles, was die Entwickler brauchen.

Sie wenden die Regel an und es funktioniert. Als ich dachte, ich wüsste alles über CSS, passierte dies:


Was zum Teufel ist los? Sie warten wahrscheinlich darauf, dass sich der Text im Titelfeld befindet, der Titel befindet sich jedoch unten. Ich wollte dieses Szenario nicht. Später entdeckte ich, dass Verwirrung mit Einrückungen auftritt.

Was bedeutet das? Angenommen, wir möchten ein solches Layout erstellen:



Wir haben Markup für die drei Elemente erstellt und für jedes Element eine andere Höhe für den oberen Rand festgelegt. Es scheint, dass alles funktionieren sollte? Nein.

Wenn Sie dies tun, erkennt der Browser drei nebeneinander liegende Felder und möchte diese zu einem großen Block kombinieren.

Das Ergebnis sieht so aus:



Was ist passiert? Ich weiß nicht. Dies ist eine historische Funktion von CSS. Ich denke, als CSS standardisiert wurde, waren die Ränder überhaupt kein Problem und die Layouts waren nicht so kompliziert wie jetzt. Daher haben die Entwickler entschieden, dass dies eine nützliche Funktion ist. Aber jetzt macht es keinen Sinn.

Wenn Sie seit vielen Jahren mit CSS arbeiten und dieses Problem noch nie aufgetreten ist, liegt dies daran, dass Einzüge nur dann kombiniert werden, wenn

  • die Felder sind vertikal (bei horizontalem tritt dies nicht auf);
  • externe Elemente enthalten keinen Text oder sonstigen Inhalt;
  • Es sind keine internen Füllungen oder Ränder gesetzt.
  • Die Anzeigeeigenschaft wird als "Block" definiert.
  • die Überlaufeigenschaft unterscheidet sich von "initial";
  • Einrückungen sind nicht negativ.

Und die Liste geht weiter. Wenn Sie auf dieses Problem stoßen, können Sie einfach eine dieser Bedingungen (außer der ersten) beseitigen, und die Einrückungen werden wieder normal. Sie können auch die Verwendung vermeiden margin-topund stattdessen topund verwenden padding-top.

Bitte beachten Sie, dass dies für Elemente derselben Ebene passieren kann. Wenn Sie zwei aufeinander bezogene Elemente haben und margin-bottom: 30pxfür das erste und margin-top: 60pxfür das zweite Element festlegen, werden die geringsten Probleme auftreten. Einrückungen im Ergebnis sind nicht gleich 30 + 60 = 90 Pixel, sondern gleich dem höchsten Wert (30, 60) = 60 Pixel.

Letzte Gedanken


Das ist alles Ich hoffe, ich habe keine Zeit mit dem Artikel verschwendet und es hat sich als nützlich für Sie herausgestellt.


Gehen Sie zu VPS.today - eine Site zum Durchsuchen virtueller Server. 1500 Tarife von 130 Hostern, eine komfortable Schnittstelle und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.