CSS-Snippets
Textklarheit
Ändert die Standard-Rendering-Methode des Browsers für eine bessere Darstellung des Texts.
Mit diesem Snippet sieht der Text auf der Seite besser aus.
Fokusstatus für Tastaturinteraktion
Erzeugt einen einheitlichen "Effekt" für alle fokussierbaren Elemente im Build.
Es verwendet das Attribut tabindex, um alle fokussierbaren Elemente anzusprechen.
Webflow ermöglicht es uns, den Status focus-visible (im Dropdown-Menü "Focused (keyboard)" genannt) für jedes Element separat zu stylen. Verwende es, wenn du den Standardstil, den wir mit dem Snippet erstellt haben, überschreiben willst.
Entfernung des oberen Rands bei Rich Text
Entfernt den oberen Margin vom ersten Element im Rich Text.
Unser H2 soll zum Beispiel margin-top: 4rem haben. Das ist der Wert, den wir für das gesamte Rich Text-Element wünschen. Für das erste Element des Rich Textes wollen wir diesen margin-top jedoch nicht. Durch die 4rem Margin entsteht ein unerwünschter Abstand zwischen dem oberen Rand des Rich Text-Elements und dem ersten H2-Text.
Entfernung des unteren Rands bei Rich Text
Entfernt den unteren Margin für das letzte Element im Rich Text.
Wir wollen zum Beispiel, dass unser paragraph margin-bottom: 0.5rem hat. Das ist der Wert, den wir für das gesamte Rich Text-Element wünschen. Für das letzte Element des Rich Textes wollen wir diesen margin-bottom jedoch nicht.
Pointer events
Legt fest, ob mit einem Element in irgendeiner Weise interagiert werden kann oder nicht.
Manchmal wollen wir nicht, dass ein bestimmtes Element mit dem Mauszeiger, der Cursorbewegung oder dem Klick interagiert. Für diese Fälle verwenden wir die Eigenschaft pointer-events: none. Diese CSS-Eigenschaft und dieser Wert verhindern jegliche Benutzerinteraktion mit einem Element.
Wir können zum Beispiel die Klasse pointer-events-none auf überlagerte Hintergrundgrafiken anwenden. Die Grafiken können einen klickbaren Button stören, der (aus Gründen des Designs) hinter den Grafiken liegt.
In manchen Fällen soll nur ein bestimmtes Child eines nicht klickbaren Parents klickbar oder interaktiv sein. Für diese Fälle verwenden wir pointer-events: auto. Die Klasse pointer-events-auto aktiviert Ereignisse für dieses bestimmte Element.
Sieh dir ein Beispiel für die Verwendung von pointer-events an, um einen eigenen Cursor zu erstellen.
Container zentrieren
Erzwingt die horizontale Zentrierung aller container- Klassen.
Wir möchten, dass margin-left und margin-right immer auf auto gesetzt sind. Wenn wir, ein anderer Entwickler oder unser Kunde versehentlich eine Änderung vornehmen, bleibt der Wert auto durch !important erhalten.
Vererbte Stile für verschiedene Webflow-Elemente
Entfernt einige fest einprogrammierte Stile und Größen von Standard-Webflow-Elementen.
Standardmäßig ist dieser Stil im Client-First Cloneable "ausgeschaltet" (auskommentiert). Du musst ihn manuell einschalten, wenn du ihn verwenden willst.
Dieses Snippet macht das Stylen einiger Webflow-Elemente einfacher. Anstatt die fest kodierten Stile manuell zu überschreiben, können wir die Stile vom Parent erben (inherit).
Zum Beispiel folgen Webflow-Formulareingaben nie der font-size des body. Das liegt daran, dass die Formulareingaben fest auf 14px eingestellt sind. Wir müssen eine Klasse auf die Eingabe anwenden und eine font-size deklarieren. Mit diesem Snippet verwenden die Formulareingaben nicht 14px, sondern erben (inherit) die font-size des body.
Warum ist dieses Snippet standardmäßig deaktiviert? Wir halten dies für eine erweiterte Option, weil sie zu unerwartetem Verhalten führen kann. Wir können zum Beispiel nicht mehr "Alle Links" auswählen und ihre Farbe ändern. Die Aktualisierung des Stils "Alle Links" wird nichts ändern, weil wir nicht mehr mit fest programmierten Werten für diese Elemente arbeiten. Wir setzen diese Option außer Kraft, indem wir inherit verwenden.
Inline-Flex hinzufügen
Füge inline-flex als eine im Webflow Designer verfügbare CSS-Eigenschaft hinzu. Diese CSS-Eigenschaft ist in Webflow nicht nativ verfügbar.
Ein Element mit inline-flex verhält sich selbst inline und stellt gleichzeitig sicher, dass seine Children wie üblich flex ausgerichtet werden können.
Wenn wir zum Beispiel flex auf einen CTA Button anwenden, wird er auf 100% Breite gestreckt. Wenn wir inline-flex auf den Button anwenden, behält der Button durch das Inline-Verhalten die richtige Breite bei und die Children des Buttons nutzen die Vorteile von flex.
!important Deklarationen
Verhindert CSS-spezifische Probleme für unsere Utility Classes display, padding und margin.
Dieses Snippet stellt sicher, dass unsere Utility Classes ihre CSS-Eigenschaften immer so haben, wie wir es beabsichtigt haben. !important zwingt die Utility Classes, ihre globalen Stile beizubehalten.
Squareify
Diese CSS-Magie fügt die Klasse div-square in unser Projekt ein. Diese Klasse bildet immer ein Quadrat, egal welche Breite du ihm gibst.
Bitte beachte: Um Children innerhalb eines div-square zu platzieren, musst du ein absolute positioniertes Div mit der position: full einfügen. Füge die Children innerhalb dieses absolute positionierten Divs ein.