Fehlerbehebung bei CSS

Haben Sie benutzerdefiniertes CSS für Ihre Formulare erstellt, aber die Stile beim Anzeigen Ihrer Website nicht sehen können? Es gibt einige häufige Probleme, die dazu führen können, dass CSS auf einer Website nicht korrekt angezeigt wird.

Dieses Tutorial führt Sie durch Optionen zur Fehlerbehebung, warum Ihr CSS nicht funktioniert, und bietet mögliche Lösungen.

Browser-Caching

Browser cachen oder speichern temporär Ressourcen von Websites, die Sie besuchen, um die Ladegeschwindigkeit zu verbessern. Einige Websites verwenden auch Plugins für zusätzliches Caching. Oftmals, wenn Sie Ihre benutzerdefinierten Stile auf Ihrer Website nicht sehen, liegt es daran, dass der Browser oder ein anderes System eine ältere Version Ihrer Website gecacht hat.

Hier ist ein Tutorial, das Sie durch die wichtigsten Schritte zum Löschen Ihres Website- und Plugin-Caches führt.

Wenn das Löschen Ihres Browser-Caches nicht zu funktionieren scheint, hier sind ein paar zusätzliche Strategien, die Sie ausprobieren können:

Einen anderen Browser ausprobieren

Jeder Browser speichert einen Cache der von Ihnen besuchten Websites. Indem Sie Ihre Website in einem anderen Browser öffnen (oder im privaten Modus, den einige Browser anbieten, wie z. B. das Inkognito-Fenster von Chrome), können Sie oft eine nicht gecachte Version Ihrer Website sehen.

Ihren Hoster fragen, 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 an Ihren Hoster wenden, um zu fragen, ob er Ihre Website cacht, und wenn ja, bitten Sie ihn, diesen Cache für Sie zu löschen.

Eine andere Internetquelle ausprobieren

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

Ungültiges CSS-Format

CSS muss in einem bestimmten Format geschrieben sein, damit ein Browser es verstehen kann. Es gibt viele Online-Tools, um zu überprüfen, ob Ihr CSS gültig ist, einschließlich des CSS-Validators von W3Schools. Dies ist eine ausgezeichnete Option, wenn Sie viel benutzerdefiniertes CSS und zumindest ein wenig Vorerfahrung mit der Erstellung von CSS haben.

Wenn Sie jedoch nur eine kleine Menge CSS verwenden, kann es manchmal einfacher sein, eine schnelle Formatprüfung selbst durchzuführen. Beginnen wir mit einem Ausschnitt von gültigem CSS:

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

Hier ist, warum dieses CSS gültig oder für Browser „lesbar“ ist:

• Korrekte Selektorformatierung: Wenn der Selektor mehrere Teile enthält, muss er von „größten“ zu „kleinsten“ geschrieben werden. Im obigen Beispiel ist div.wpforms-container-full das größte Container-Element im HTML, während .wpforms-form sich innerhalb dieses Containers befindet. Das kleinste und letzte Element im Selektor, .wpforms-title, befindet sich innerhalb beider anderer Elemente. In jeder anderen Reihenfolge kann der Browser diesen Selektor nicht lesen.
• Zwei Klammern: Direkt nach dem CSS-Selektor und am Ende der Eigenschaften- und Werteliste muss eine öffnende geschweifte Klammer ({) stehen. Das Vergessen dieser schließenden Klammer (}) ist ein häufiger Fehler und verhindert normalerweise, dass das gesamte CSS darunter im Browser angezeigt wird.
• Doppelpunkt und Semikolon: Achten Sie darauf, zwischen jeder CSS-Eigenschaft und jedem Wert einen Doppelpunkt (:) und nach jedem Wert ein Semikolon (;) einzufügen, damit der Browser Ihr CSS lesen kann (z. B. font-size: 26px;).
• Korrekte Verwendung von Leerzeichen: CSS ist in den meisten Fällen nicht sehr wählerisch, was Leerzeichen (einschließlich Tabs und Leerzeichen) angeht. Eine Ausnahme bilden jedoch Einheiten. 26px funktioniert zum Beispiel, während 26 px nicht funktioniert.

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

CSS-Spezifität

Da alle Themes und die meisten Plugins ihre eigenen Stylesätze enthalten, werden Sie oft feststellen, dass Ihre benutzerdefinierten Stile gegen bestehende Stile „konkurrieren“ müssen. In solchen Situationen gewinnt der spezifischere CSS-Selektor fast immer gegenüber einem weniger spezifischen Selektor.

Hier sind zum Beispiel die Standard-CSS, die die Schriftgröße von Formulartiteln in WPForms festlegen:

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

Versuchen wir, dieses CSS zu überschreiben, um die Schrift größer zu machen. Es kann 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 durchgesetzt. Stattdessen werden die Standardstile angewendet, da sie einen spezifischeren Selektor haben. Sie müssten stattdessen denselben, längeren Selektor wie für 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 einigen Situationen können Sie einen weniger spezifischen CSS-Schnipsel erzwingen, indem Sie die Regel !important vor dem Semikolon einfügen. Es ist immer besser, zuerst einen spezifischeren Selektor (wie oben beschrieben) zu versuchen, aber manchmal kann dies eine schnelle Lösung bieten.

Es ist jedoch wichtig zu beachten, dass das Hinzufügen der Regel !important nicht immer funktioniert. 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 der Regel !important, sodass dieses CSS nicht auf Ihre Website angewendet wird.

Betrachten wir ein Beispiel, bei dem das Hinzufügen der Regel !important *funktioniert*. Standardmäßig ist der Stern (*), der 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 denselben vollständigen Selektor aus dem obigen CSS kopieren oder einen kurzen Selektor verwenden und die Regel !important hinzufügen, wie in diesem CSS-Schnipsel:

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

Es kann schwierig sein zu wissen, ob die Regel !important funktioniert oder nicht, daher müssen Sie sie wahrscheinlich ausprobieren und testen.

Das ist alles! Wir haben die gängigsten 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 weiter anpassen? Sehen Sie sich unser Tutorial zur Anpassung einzelner Formularfelder für Details und Beispiele an.