CSS-Tipps, die Sie in Tutorials wahrscheinlich nicht finden

Es gibt bestimmte CSS-Regeln, die in jedem Tutorial zu finden sind. Es gibt aber auch CSS-Regeln, die Sie in Tutorials nicht finden, aber Sie werden darauf stoßen, sobald Sie mit dem Schreiben von Code beginnen. Ich bin sicher, Sie haben bereits herausgefunden, wie Sie ein Element vertikal ausrichten oder ein komplexes Layout erstellen können. Wir werden nicht darüber reden.

Schließlich gibt es CSS-Regeln, die Sie in den Handbüchern wahrscheinlich nicht sehen und die Sie möglicherweise nicht kennen. Für einige Zeit habe ich diese Tipps gesammelt und jetzt habe ich beschlossen, einen Artikel zu schreiben, in der Hoffnung, dass sie nützlich sein werden.



Im Folgenden finden Sie, was mir CSS-Tutorials nicht beigebracht haben.

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 damit eine reaktionsschnelle Website erstellen können, ohne sich zu sehr mit Medienanfragen zu befassen. Wenn Sie die Höhe des Elements auf die Hälfte der Höhe des übergeordneten Elements einstellen möchten, schreiben Sie einfach die height: 50% .

Sie können überall relative Einheiten verwenden. Wenn Sie den Abstand zwischen zwei vertikalen Elementen hinzufügen möchten, können Sie margin-top: 15% schreiben margin-top: 15% und ein äußerer Einzug wird angezeigt. Der Abstand beträgt 15% der ursprünglichen Höhe. Ich denke, Sie alle wissen das 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 Polsterung zu verwenden . Aber wenn Sie das padding-top: 15% einstellen padding-top: 15% ... Was zur Hölle? ..

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

Erklärung

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


Spielen Sie einfach herum und ändern Sie die Breite der Eltern. Sehen Sie, wie sich dies auf die innere Einbuchtung des Kindes auswirkt. Auf den ersten Blick mag dies seltsam erscheinen, aber tatsächlich gibt es einen guten Grund, warum dies geschieht. Sie finden es in der CSS-Spezifikation ...

Nein, ich scherze - es gibt keine Erklärung, warum dies passiert. Zumindest konnte ich nirgendwo eine Erklärung finden. Es passiert einfach, denken Sie daran.

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

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

Dann entspricht die Höhe des Elements der Höhe des untergeordneten Elements, obwohl wir die height: auto festlegen height: auto . Auf der anderen Seite entspricht die Größe des Kindes der Breite des Elternteils, da wir die padding-top: 100% . Das Ergebnis ist ein Quadrat, und das Element behält dieses Verhältnis bei jeder Größe bei.

Hier ist ein Arbeitsbeispiel:


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

Transformation kann Regeln akkumulieren

Wenn Sie Informatik studiert haben, erinnern Sie sich wahrscheinlich an diese schreckliche Schildkröte und ihren beweglichen Griff. Dieses pädagogische Konzept ist besser bekannt als Schildkrötengrafik , deren Zweck darin besteht, die Schildkröte mit einfachen Anweisungen auf dem Weg zu führen - „20 Schritte vorwärts“, „90-Grad-Drehung“ und dergleichen.

Was wäre, wenn Sie mit CSS den Befehl "20 Pixel rechts" relativ zur aktuellen Position des Elements anstelle seiner Startposition eingeben könnten? Und wenn ich sage, dass Sie dies mit der transform Eigenschaft tun können?

Viele Entwickler wissen nicht, dass die transform Regeln akkumulieren kann, und die n + 1- Regel 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:


Bitte 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 - sie wird nacheinander angewendet. Die Tatsache, dass sie konsequent angewendet werden, ist wichtig. Wenn Sie das Element drehen, ändern Sie den Referenzrahmen. Weitere Regeln gelten für den neuen Referenzrahmen. Also dieser Eintrag:

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

wird anders sein als:

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

Sie können auch verschiedene Einheiten kombinieren. Beispielsweise können Sie ein Element der Größe 600 wie folgt zentrieren:

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

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

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


Leider zeichnet sie noch nicht. Wenn Sie möchten, können Sie die Zeichenfunktion jederzeit implementieren.

Außen- und Innenränder werden im Uhrzeigersinn gezählt

Es ist einfach und viele Leute denken, dass ich banale Dinge schreibe, aber ich habe so viele Leute gesehen, die mit den Vieren zu kämpfen hatten, dass ich es nicht mehr für selbstverständlich hielt.

Vielen Entwicklern ist nicht bewusst, dass fast jede CSS-Eigenschaft eine Kurzalternative bietet. Andere Entwickler wissen dies, verwenden jedoch weiterhin die Vollversionen, da sie sich nie an die Reihenfolge erinnern.

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

Ich werde es einfacher erklären. Sie können mit Vertrauen verwenden:

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

Auf die gleiche Weise können Sie auch eine kürzere Alternative verwenden:

 padding: 3px 6px 3px 6px; 

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



Beginnen Sie um 12:00 Uhr und fahren Sie im Uhrzeigersinn fort. Sie erhalten die richtige Bestellung.

Wenn Sie stattdessen nur zwei Werte verwenden:

 padding: 2px 4px; 

Der Browser erweitert es durch Wiederholen der Parameter:

 padding: 2px 4px 2px 4px; 

Wenn Sie drei Werte verwenden:

 padding: 2px 4px 6px; 

Der Browser verwendet den Durchschnitt sowohl für den linken als auch für den rechten Rand, als ob Sie geschrieben hätten:

 padding: 2px 4px 6px 4px; 

Hintergrund unterstützt mehrere Bilder

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

Sie wissen, dass Sie die URL des Bildes in der background angeben können, aber bei Bedarf können Sie so viele Bilder einfügen, wie Sie möchten. Sie müssen sie nur durch ein Komma trennen:

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

Warum könnte dies hilfreich sein? Was halten Sie von Linus Torvalds gegen einen CSS-generierten Sonnenaufgang?


Sie können ein rechteckiges Bild auch quadrieren, indem Sie die schattierten Ränder hinzufügen, die auf Instagram so beliebt sind. Zu diesem Zweck habe ich dasselbe Bild zweimal wiederholt und das Hintergrundbild fünfmal vergrößert:

Berühren Sie Geräteerkennung

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

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

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

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, um dies zu überprüfen. Sie können ein Touch-Gerät mithilfe der Google Chrome-Tools simulieren, indem Sie einfach 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. Zum Beispiel habe ich es in einem Karussell verwendet, um Chevron-Symbole auf Touchscreen-Geräten für ein natürlicheres Aussehen auszublenden.

Am Ende können Sie eine touchscreen.css Datei bereitstellen und bei Bedarf importieren:

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

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

Einrückung bricht zusammen

^{„Und pass auf die Treppe auf. Sie lieben es, sich zu verändern. “(Percy Weasley zu Harry Potter)}

Ich mag CSS - es ist eine saubere, präzise und elegante Sprache, die alles enthält, was Entwickler brauchen.

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


Was zur Hölle ist los? Sie erwarten wahrscheinlich, dass sich der Text im Kopfzeilenfeld befindet, aber der Titel befindet sich unten. Ich wollte eine solche Situation nicht. Später entdeckte ich, dass Einrückungen verwirrend sind.

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



Wir haben ein Markup für die drei Elemente erstellt und für jedes Element eine andere Höhe für den oberen Rand festgelegt. Alles scheint zu funktionieren? Nein.

Wenn Sie dies tun, bemerkt der Browser drei benachbarte Felder und möchte sie zu einem großen Block kombinieren.

Das Ergebnis sieht folgendermaßen aus:



Was ist passiert? Ich weiß nicht. Dies ist ein historisches Merkmal von CSS. Ich denke, als CSS standardisiert wurde, waren Felder überhaupt kein Problem, und 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 festgestellt haben, liegt dies daran, dass Einrückungen nur kombiniert werden, wenn:

• Die Felder sind vertikal (dies ist bei horizontalen Feldern nicht der Fall).
• externe Elemente enthalten keinen Text oder anderen Inhalt;
• Es werden keine Einrückungen oder Grenzen gesetzt.
• Die Anzeigeeigenschaft ist als "Block" definiert.
• Die Überlaufeigenschaft unterscheidet sich von "initial".
• Einrückung ist nicht negativ.

Und die Liste geht weiter. Wenn Sie auf dieses Problem stoßen, können Sie einfach eine dieser Bedingungen (mit Ausnahme der ersten) ausschließen, und der Einzug wird wieder normal. Sie können auch die Verwendung von margin-top vermeiden und stattdessen top und padding-top verwenden.

Bitte beachten Sie, dass dies für Elemente derselben Ebene passieren kann. Wenn Sie zwei verwandte Elemente übereinander haben und den margin-bottom: 30px für das erste und den margin-top: 60px für das zweite, treten Probleme mit dem kleinsten auf. Einrückungen sind daher nicht gleich 30 + 60 = 90 Pixel, sondern gleich dem größten Wert (30, 60) = 60 Pixel.

Letzte Gedanken

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

Schauen Sie sich VPS.today an , eine Website zum Auffinden virtueller Server. 1500 Tarife von 130 Hostern, eine praktische Schnittstelle und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.