4 einfache Techniken zum schnellen Debuggen und Reparieren Ihres CSS-Codes in fast jedem Browser

4 einfache Techniken zum schnellen Debuggen und Reparieren Ihres CSS-Codes in fast jedem Browser

Sie haben das perfekte Layout für Ihre neue und kommende Website entworfen. Aber jetzt konvertieren alle, die schöne Photoshop PSD-Layer-Datei in einen Pixel perfekten Code ist der schwierige Teil. Es ist nicht schwierig, weil Sie nicht wissen, wie man codiert, sondern schwieriger, weil verschiedene Browser Ihren Code unterschiedlich rendern, selbst wenn Sie einen vollständig gültigen CSS-Code verwenden, um den fantastischen semantischen HTML5-Code anzuzeigen, den Sie geschrieben haben. Dies ist noch frustrierender, wenn die Behebung eines Fehlers in einem Browser jetzt zu einem neuen Fehler in einem anderen Browser wird. Auch wenn das keine Herausforderung ist, stellen Sie sich jetzt vor, Sie sollen den Code eines anderen reparieren, der überall ist. Oft ist dieser letzte Fall derjenige, bei dem Sie an den Haaren ziehen und zahlreiche WTFs sagen, bevor Sie vollständig verstehen, was in ihrem Code vor sich geht, da Sie wahrscheinlich Ihr gesamtes Stylesheet auswendig kennen und dieser neue Code keiner Codierungskonvention nahe kommt. Der Moment, sich mit dem Debuggen dieses CSS-Codes zu beschäftigen, ist jedoch dank dieser sehr einfachen Tools und Techniken viel einfacher und weniger frustrierend als zuvor.

1) Inspect Element Tool

Inspect element ist bei weitem das beste Tool, um mit dem Debuggen von CSS zu beginnen. Wenn Sie Websites entwickeln, benötigen Sie die richtigen Webentwicklungstools. Glücklicherweise ist Inspect Element jetzt nativ in alle modernen Webbrowser als Teil ihrer Entwicklertools integriert. Mit diesem Tool können Sie das spezifische Element auf der Seite auswählen, das Sie reparieren möchten, und sofort sehen, welche CSS-Regeln auf dieses Element angewendet werden, die dazu führen, dass das ausgewählte Element auf diese Weise angezeigt wird. Sie müssen lediglich mit der rechten Maustaste klicken und im Kontextmenü „Element prüfen“ auswählen.

Jetzt haben Sie vollen visuellen Zugriff auf alle Regeln, die für dieses Element berechnet werden. Wenn Sie nicht das richtige Element ausgewählt haben, können Sie einfach auf die Quelle klicken und genau auf das Element zeigen, das Sie diagnostizieren möchten. Wie Sie im obigen Screenshot sehen, können Sie jetzt Ihre CSS-Regeln optimieren. Mit dem Kontrollkästchen auf der linken Seite jeder CSS-Eigenschaft können Sie diese Eigenschaft umschalten oder sogar auf die Eigenschaft klicken und ihren Wert ändern oder sogar die Eingabetaste drücken und neue Regeln für Ihr Element hinzufügen. Am erstaunlichsten ist, wie einfach es möglich ist, einen Schwebestatus eines Elements zu debuggen, indem Sie einfach das Dropdown-Menü neben dem ausgewählten Element öffnen und wählen: Schwebestatus. Wie Sie im rechten Bereich sehen konnten, zeigt Ihnen dieses erstaunliche Tool sogar die Stylesheet-Datei und die Zeilennummer der CSS-Regel, die auf dieser Seite ausgeführt wird. Darüber hinaus ist es verständlicher zu verstehen, warum unser Element eine 10px obere und untere Polsterung anstelle von 5px hat, weil die Regel in Zeile 1026 des Stils.css unserer Medienabfrage CSS überschreibt die alte Regel in Zeile 916 derselben Datei. Es ist sogar möglich, das Kastenmodell des ausgewählten Elements mit seinen aktuellen Abmessungen anzuzeigen, ohne ein Lineal oder Messwerkzeug eines Drittanbieters zu verwenden. Diese Fülle an Informationen macht unseren Debugging-Job jetzt viel einfacher. Angenommen, Ihr Stylesheet-E-Mail-Formularfeld ähnelt nicht anderen Eingabeelementen, und Sie fragen sich, wie Sie dies lösen können. Sie überprüfen dieses Element und stellen fest, dass Ihr Design-Designer aufgrund der Verwendung der neuen HTML5-Eingabefeldtypen keine CSS-Regeln für input sodass Sie diesen Selektor dem Stylesheet hinzufügen.

input,input{ border: 1px solid #ccc;}

Google Chrome verfügt auch über ähnliche Entwicklertools, die dieselben Funktionen aktivieren. Es ist sogar möglich, Ihren Debugging-Modus auf die Bildschirmauflösung eines Geräts zu ändern, auf dem Sie Ihr Layout testen und herausfinden möchten, wie sich Ihr Media-CSS unter diesen Bedingungen verhält.

Diese Entwicklertools verfügen über sehr leistungsstarke Funktionen, die auch über die CSS-Entwicklung hinausgehen, z. B. DOM-Inspektion, JavaScript-Profilerstellung, JavaScript-Konsole, Ressourcenüberwachungstools und eine ganze Reihe anderer Funktionen, die über diesen Artikel hinaus einen eigenen Tutorial-Abschnitt benötigen. Wie Sie im Bild oben sehen können, ist es in Chrome Developer Tools sogar möglich, verschiedene Browser-User-Agents zu emulieren oder sogar Berührungsereignisse wie Wischen zu emulieren. Mit diesen Tools müssen Sie Ihr CSS zumindest teilweise nicht einmal aktiv im mobilen Browser Ihres Smartphones debuggen.

Welche Browser-Entwickler-Tools ist die beste ist eine Frage, die Sie durch Experimentieren herausfinden. Am Ende des Tages hängt alles davon ab, was Sie erreichen möchten und ob Sie mit diesem Toolset Ihr endgültiges Ziel erreichen können. Ich persönlich nutze all diese Tools zu meinem Vorteil. Jeder hat etwas, das ich mag und hilfreich finde, wenn ich meinen Code debuggen möchte. Zum Beispiel finde ich die kleine quadratische Farbdarstellung der Hex-Farben neben den CSS-Farbeigenschaften irgendwie nützlich, obwohl ich die RGB-Farbe in meinem Kopf verarbeiten und eine ungefähre Farbwertvisualisierung erhalten kann.

Firebug

Firebug war eines der ersten Tools, das diese Funktion bereitstellte. Es ist eines der beliebtesten Webentwicklungstools mit fast 3 Millionen durchschnittlichen täglichen Benutzern. Zum Zeitpunkt des Schreibens sind Firefox CSS-Debugging-Tools ausreichend genug für mich, um Firebug nicht zu verwenden, aber für JavaScript-Debugging in Firefox verwende ich immer noch Firebug.

Angst vor IE7? Sei nicht mehr

Sie werden überrascht sein, aber Internet Explorer hat sogar Inspect Element (Strg + B) Funktion in ihren Entwicklertools (F12). Obwohl nicht so freundlich wie die Entwicklertools anderer Browser, ist diese in Internet Explorer 9 integrierte Funktion dennoch sehr hilfreich, um Ihre Layouts im IE7- und IE8-Emulationsmodus zu testen. Damals, als keines dieser Entwicklertools zum Debuggen alter IE-Browser verfügbar war, war diese zweite Technik normalerweise sehr praktisch.

2) Debuggen im Stil

So gut Inspect Element auch ist, manchmal haben Sie entweder keinen Zugriff auf dieses Tool, z. B. mobile Browser, oder Sie möchten das Styling einiger Elemente auf der Seite anpassen, anstatt nur eines bestimmten. Ich liebe es, die Grenzen des Elements zu kennen, das ich gestylt habe, also weiß ich, ob es Überläufe, schwebende Probleme usw. gibt … Aus diesem Grund füge ich dem aktiven Element, das ich gestylt habe, eine helle und auffällige Hintergrundfarbe hinzu Nehmen Sie die Hintergrundfarbe heraus, sobald das Styling abgeschlossen ist. Manchmal gehe ich hin und her, um diese Elemente anzupassen, also verschiebe ich den Debugging-Code einfach an das Ende meines Stylesheets, kommentiere ihn aus und kommentiere ihn aus, sobald ich ihn wieder brauche. Auf diese Weise kann ich den Debugging-Modus schnell umschalten und sehen, wie jedes Element auf dem Bildschirm positioniert ist.

Welche Ergebnisse zu …

In diesem Beispiel habe ich den Elementen des Hauptstrukturblocks auf meiner Seite gerade Debug-Code hinzugefügt. Jetzt kann ich sagen, wo jeder Beitrag beginnt und wie viel Lücke zwischen jedem Beitrag oder Widget-Element in meiner Seitenleiste besteht, und wenn ich eine Lücke zwischen der Seitenleiste und dem Hauptinhalt hinzufügen möchte, kann ich sie visuell in hellen Farben sehen.

Das Gegenteil davon ist auch möglich, indem eine Reihe von Debug-Regeln definiert und diese Klasse zu dem Element hinzugefügt wird, das wir sehen möchten. Zum Beispiel habe ich oben eine neue Klasse namens debug mit dem folgenden Code definiert.

.debug{ border:1px solid red; }

und wann immer ich ein Element debuggen möchte, füge ich diesem Element einfach eine Debug-Klasse hinzu.

<div class="foo debug">Div element with foo and debug classes</div>

3) Debuggen Sie CSS mit JavaScript

Diese Technik ist der obigen sehr ähnlich, aber manchmal kommt es aus seltsamen Gründen vor, dass die obige Situation nicht machbar ist. Dies ist ein Stück jQuery-Code, der uns hilft, indem wir die Debug-Klasse auf das foo-Element anwenden oder in diesem Fall sogar CSS direkt zum bar-Element hinzufügen.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

Diese Situation kann sehr selten vorkommen, aber ich weiß, dass ich diese Technik in der Vergangenheit angewendet habe.

4) Lernen Sie die Kaskade kennen

Einige CSS-Probleme sind so häufig wie die Clearing-Floats, dass Sie einmal in diese Falle tappen und wenn Sie das nächste Mal auf etwas Ähnliches stoßen, wissen Sie, was das Problem verursacht hat und wie Sie es beheben können. Im Allgemeinen sind die meisten CSS-Probleme leicht zu lösen, wenn Sie wissen, wie sich die CSS-Regeln gegenseitig überschreiben. Beispielsweise überschreiben spezifischere Selektoren allgemeinere, oder der ID-Selektor überschreibt den Klassenselektor, oder die Deklaration !important hat Vorrang vor einer normalen Deklaration. Wenn Sie die Kaskade kennenlernen, können Sie Ihren Cascading Style Sheets-Code schneller auflösen.

Hier ist ein Beispiel direkt aus der W3C-Spezifikation, wie die Selektorspezifität funktioniert.

Einige Beispiele:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

Im obigen Beispiel wäre die Farbe des P-Elements grün. Die Deklaration im Attribut „style“ überschreibt aufgrund der Kaskadierungsregel 3 die Deklaration im STYLE-Element, da sie eine höhere Spezifität aufweist. Wenn Sie der Meinung sind, dass dieses Beispiel schwer zu verstehen ist, lesen Sie diesen Artikel zur CSS-Rangfolge.

Abschließende Anmerkungen

Das Erzielen pixelgenauer Ergebnisse ist aufgrund unterschiedlicher Renderings durch verschiedene Browser schwierig. Einige alte Browser unterstützen nicht voll CSS3 oder HTML5, so überprüfen HTML5Please Community-Projekt, um zu sehen, ob die Syntax, die Sie verwenden möchten, wird von den meisten Browsern unterstützt. Sie können jedoch optional Fallbacks oder Polyfills verwenden, um fehlende Funktionen für Browser bereitzustellen, die keine vollständige CSS3- oder HTML5-Implementierung unterstützen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.