Fehlersuche in CSS

Haben Sie benutzerdefinierte CSS für Ihre Formulare erstellt, konnten diese Stile aber bei der Anzeige Ihrer Website nicht sehen? Es gibt ein paar häufige Probleme, die dazu führen können, dass CSS auf einer Website nicht korrekt angezeigt wird.

In diesem Lernprogramm werden die Möglichkeiten zur Fehlersuche bei CSS-Problemen erläutert und mögliche Lösungen angeboten.

Browser-Caching

Browser zwischenspeichern oft Ressourcen von Websites, die Sie besuchen, um die Ladegeschwindigkeit zu erhöhen. Einige Websites verwenden auch Plugins für zusätzliches Caching. Wenn Sie Ihre benutzerdefinierten Stile auf Ihrer Website nicht sehen, liegt das oft daran, dass der Browser oder ein anderes System eine ältere Version Ihrer Website zwischengespeichert hat.

Hier finden Sie eine Anleitung, die Sie durch die wichtigsten Schritte führt, um Ihre Website- und Plugin-Caches zu löschen.

Wenn das Löschen des Browser-Caches nicht zu funktionieren scheint, gibt es einige weitere Strategien, die Sie ausprobieren können:

Einen anderen Browser ausprobieren

Jeder Browser speichert die von Ihnen besuchten Websites in seinem Cache. Wenn Sie Ihre Website in einem anderen Browser öffnen (oder in dem von einigen Browsern angebotenen privaten Modus, z. B. dem Inkognito-Fenster von Chrome), können Sie oft eine nicht zwischengespeicherte Version Ihrer Website sehen.

Fragen Sie Ihren Gastgeber, ob er einen Cache hat

Einige Hoster bieten Caching für Ihre Website direkt auf ihren Servern an, wo die Dateien Ihrer Website gespeichert sind. Wenn Sie sich nicht sicher sind, sollten Sie sich bei Ihrem Hoster erkundigen, ob er Ihre Website im Cache speichert, und wenn ja, ihn bitten, diesen Cache für Sie zu löschen.

Versuchen Sie eine andere Internetquelle

Gelegentlich kann das Laden Ihrer Website über eine andere Internetquelle helfen, einen bestehenden Cache zu umgehen. Wenn Sie ein mobiles Gerät mit verfügbaren Daten haben, ist es am einfachsten, das WLAN auf Ihrem Gerät vorübergehend zu deaktivieren und die Seite neu zu laden.

Ungültiges CSS-Format

CSS muss in einem bestimmten Format geschrieben werden, damit ein Browser es verstehen kann. Es gibt viele Online-Tools, mit denen Sie überprüfen können, ob Ihr CSS gültig ist, darunter der CSS Validator von W3School. Dies ist eine hervorragende Option, wenn Sie viel benutzerdefiniertes CSS verwenden und zumindest ein wenig Erfahrung in der Erstellung von CSS haben.

Wenn Sie jedoch nur wenig CSS verwenden, kann es manchmal einfacher sein, selbst eine schnelle Formatprüfung vorzunehmen. Schauen wir uns zunächst einen Ausschnitt aus gültigem CSS an:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Deshalb ist dieses CSS gültig bzw. von Browsern lesbar:

• Korrektes Selektorformat: Wenn der Selektor mehrere Teile enthält, muss er von "größte" bis "kleinste" geschrieben werden. Im obigen Beispiel, div.wpforms-container-full ist das größte Container-Element in HTML, während .wpforms-form innerhalb dieses Containers befindet. Das kleinste und letzte Element im Selektor, .wpforms-titleinnerhalb der beiden anderen Elemente enthalten ist. In jeder anderen Reihenfolge kann der Browser diesen Selektor nicht lesen.
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• Doppelpunkt und Semikolon: Achten Sie darauf, einen Doppelpunkt (:) zwischen jeder CSS-Eigenschaft und jedem Wert und ein Semikolon (;) nach jedem Wert einzufügen, damit der Browser Ihr CSS lesen kann (z. B., font-size: 26px;).
• Korrekte Verwendung von Leerzeichen: In den meisten Fällen ist CSS nicht sehr wählerisch in Bezug auf Leerraum (einschließlich Tabulatoren und Leerzeichen). Eine Ausnahme gilt jedoch für Einheiten. 26px funktionieren, während zum Beispiel 26 px wird nicht.

Weitere Informationen zum Schreiben von CSS mit der richtigen Syntax finden Sie in diesem Tutorial von W3Schools.

CSS-Spezifität

Da alle Themes und die meisten Plugins ihre eigenen Stile enthalten, werden Sie oft feststellen, dass Ihre benutzerdefinierten Stile mit vorhandenen Stilen "konkurrieren" müssen. In solchen Situationen wird der spezifischere CSS-Selektor fast immer über einen weniger spezifischen Selektor siegen.

Zum Beispiel, hier ist die Standard-CSS, die die Schriftgröße des Formulars Titel in WPForms setzt:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Versuchen wir nun, diese CSS zu überschreiben, um die Schrift größer zu machen. Es mag verlockend sein, einen kurzen CSS-Selektor wie diesen zu verwenden:

.wpforms-title {
    font-size: 40px;
}

Dieses CSS ist gültig, aber seine Stile werden im Browser nicht angezeigt. Stattdessen werden die Standardstile angewendet, weil sie einen spezifischeren Selektor haben. Sie müssen stattdessen den gleichen, längeren Selektor wie den Standardstil für Ihr benutzerdefiniertes CSS verwenden:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Verwendung von !important in CSS

In manchen Situationen können Sie ein weniger spezifisches CSS-Snippet erzwingen, indem Sie die !important Regel vor dem Semikolon. Es ist immer besser, zuerst einen spezifischeren Selektor (wie oben beschrieben) zu verwenden, aber manchmal kann dies eine schnelle Lösung sein.

Es ist jedoch wichtig zu beachten, dass die Hinzufügung der !important Regel wird nicht immer funktionieren. Versuchen wir diesen Ansatz für das CSS, das wir im letzten Beispiel besprochen haben:

.wpforms-title {
    font-size: 40px !important;
}

In dieser Situation bevorzugt der Browser die Spezifität des Standard-CSS gegenüber dem !important Regel, so dass dieses CSS nicht auf Ihre Website angewendet wird.

Schauen wir uns ein Beispiel an, bei dem das Hinzufügen der !important Regel tut Arbeit. Standardmäßig ist das Sternchen (*), das ein "erforderliches" Feld in WPForms markiert, rot:

Hier ist das CSS, das diesen Stil erzeugt (#ff0000 ist ein Hex-Code für die Farbe Rot):

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Wir möchten, dass diese Sternchen stattdessen blau erscheinen. Wir könnten den vollständigen Selektor aus dem obigen CSS kopieren, oder wir könnten einen kurzen Selektor verwenden und die !important Regel, wie in diesem CSS-Schnipsel:

.wpforms-required-label {
    color: #007acc !important;
}

Es kann schwierig sein, zu wissen, ob die !important Regel funktionieren, also müssen Sie es wahrscheinlich ausprobieren und testen.

Das war's! Wir haben die häufigsten Fehlerbehebungsstrategien behandelt, die Sie anwenden können, wenn CSS nicht funktioniert. Wenn Sie immer noch Probleme mit dem Styling Ihrer WPForms haben, wenden Sie sich bitte an den Support, damit wir Ihnen helfen können.

Möchten Sie Ihre Formulare noch weiter anpassen? In unserem Tutorial zur Anpassung einzelner Formularfelder finden Sie Details und Beispiele.