Für die Webentwicklung ist CSS die effektivste Technik, um Seiten zu verschönern und Seitenlayouts festzulegen. Das Problem ist jedoch, dass CSS eine Auszeichnungssprache mit einer sehr lockeren und unpräzisen Syntaxstruktur ist. WEB-Programmierer finden in ihren eigenen oder fremden CSS-Dateien oft viel redundanten Code, Fehler oder Bereiche, die erheblich optimiert werden können. Wenn Sie häufig statische Programmiersprachen (wie Java, C) verwenden, werden Sie feststellen, dass praktische IDE-Tools enorme Effizienz für die Programmierung bringen. Eine integrierte Entwicklungsumgebung wie Eclipse, die Codeprobleme in Echtzeit automatisch analysieren kann, ist ein typisches Beispiel. Haben CSS-Programmierer also solch hilfreiche Tools?

Die 10 unten vorgestellten Tools sind alle Online-Anwendungen. Sie müssen sie nicht auf Ihrem Computer installieren. Solange Sie Zugang zum Internet haben, können Sie sie verwenden. Die meisten dieser Tools sind sehr einfach zu bedienen, aber einige erfordern Geschick.

Tool zur Prüfung von CSS-Problemen:CSS Lint

CSS Lint ist ein Open-Source-Tool zur Validierung der Qualität von CSS-Dateien. Es wurde ursprünglich von Nicholas C. Zakas und Nicole Sullivan geschrieben, und die erste Version wurde im Juni 2011 auf der Velocity-Konferenz veröffentlicht. Die Erkennungsregeln von CSS Lint umfassen Fehler und Warnungen. Wenn Selektoren oder Eigenschaften falsch geschrieben sind, geschweifte Klammern fehlen oder Semikolons überflüssig hinzugefügt werden, werden Parsing-Fehler gemeldet, und Parsing-Fehler werden vorrangig angezeigt.

Tool zur Analyse und Statistik von CSS-Code:CSS Stats

Css Stats ist ein Online-Tool zur Analyse von CSS-Code. Sie können CSS-Code analysieren, indem Sie die CSS-URL der Website eingeben. Css Stats ist ein leistungsstarkes Tool für Front-End-Webdesigner, um den CSS-Code von Websites zu analysieren. Es kann Regeln, Schriftgrößen, Breiten und Höhen, Anzahl der Farben usw. im CSS-Code zählen.

Für Webdesigner ist das Teilen von CSS-Code für Webseiten ein Muss. Um die Wirkung des gesamten Website-Designs zu analysieren, benötigen Sie detaillierte Statistiken darüber, wie viele Schriftarten, Schriftgrößen, Farben und Hintergrundfarben im Website-Design verwendet werden. Css Stats bietet außerdem CSS-Analysedaten für beliebte Websites wie Google, Yahoo, Twitter, Facebook, Tumblr usw.

CSS-Code-Optimierungs- und Komprimierungstool:CSS Shrinks

CSS Shrinks kann die Größe Ihres CSS erheblich komprimieren. Viele Webprogrammierer schreiben CSS-Code mit viel redundanter Syntax und Leerraum. Dieses Tool kann die CSS-Syntax optimieren, unnötige Leerzeichen und Leerzeilen entfernen, die CSS-Ausgabe erheblich komprimieren und die Bandbreitenverschwendung stark reduzieren, ohne die Korrektheit Ihres CSS zu beeinträchtigen.

CSS-Code-Formatierungstool:ProCSSor

ProCSSor bietet nicht nur grundlegende Funktionen zur Optimierung von CSS-Code, sondern auch eine Vielzahl von Anpassungsoptionen. Beispielsweise können Sie Optimierungsoptionen für CSS-Regeln, CSS-Eigenschaften und CSS-Syntax festlegen. Es bietet auch Fallback-Lösungen für die Inkompatibilität neuer CSS3-Eigenschaften und -Regeln in verschiedenen Browsern.

Codrops CSS-Syntaxreferenz

Die Codrops-CSS-Referenz ist umfangreich und umfassend, und die Benutzeroberfläche ist klar und einfach. Mit diesem Tool können Sie sich die wichtigsten und umfassendsten CSS-Kenntnisse aneignen. Die CSS-Wissensdatenbank ist in mehrere Kategorien unterteilt, darunter Pseudoklassen, Eigenschaften, Funktionen, Datentypen, Konzepte, Regeln usw.

Tool zur Abfrage der CSS3-Browserkompatibilität:Can I Use

"Can I Use" - Hier finden Sie die Kompatibilität aller neuen Web-Funktionen über verschiedene Browsermarken und verschiedene Versionen jeder Marke hinweg. Wenn Sie wissen, welche Browser Ihre Zielnutzer verwenden, sind diese Tabellen eine große Hilfe beim Aufbau Ihrer Website. Öffnen Sie caniuse.com, die Startseite listet alle HTML5-, CSS3- und anderen neuen Web-Funktionen auf. Wenn Sie die Kompatibilität einer Funktion in verschiedenen Browsern anzeigen möchten, klicken Sie einfach darauf. Um beispielsweise die Kompatibilität von @font-face-Webschriften in verschiedenen Browsern zu sehen, klicken Sie auf den ersten Eintrag im CSS-Bereich, und Sie sehen eine Tabelle mit allen Browserversionen, wobei verschiedene Farben die Unterstützung von @font-face-Webschriften durch die einzelnen Browser darstellen. Rot bedeutet keine Unterstützung, Hellgrün bedeutet teilweise Unterstützung. Die in der Abbildung aufgeführten Browser umfassen auch einige Browser für Mobil- und Tablet-Geräte, wie z. B. den Browser des Android-Systems. Mit solch umfassenden Informationen können Sie beim Entwerfen einer Website je nach den Zielnutzern der Website gezielt fortgeschrittene CSS- und JavaScript-Funktionen einsetzen, um die Benutzererfahrung zu verbessern.

Prüfen Sie, ob Ihr Code den CSS-Standards entspricht:W3C CSS Validation Service

Dieses Tool wird verwendet, um zu prüfen, ob Ihre CSS-Syntax korrekt ist und ob sie den W3C-CSS-Standards entspricht. Wir wissen, dass seit dem frühesten IE verschiedene Browser ihre eigenen Dialekte implementiert haben, die zwischen den Browsern nicht miteinander kompatibel sind. Beim Entwickeln von Webseiten müssen wir jedoch die Browserkompatibilität so weit wie möglich berücksichtigen. Der beste Weg ist, die CSS-Standardspezifikationen des W3C zu befolgen. Der W3C CSS Validation Service wird verwendet, um die Probleme in Ihrem CSS zu validieren. Er weist Sie darauf hin, welche Syntax, welche Eigenschaften und welche Regeln Probleme haben.

CodePad

Codepad.org ist eine sehr interessante Website. Ihre Startseite ist sehr einfach: Auf der linken Seite befinden sich die Programmiersprachen, die kompiliert und ausgeführt werden können, auf der rechten Seite das Eingabefeld, in das Sie Ihr Programm eingeben, und unter dem Eingabefeld ein "Run Code"-Kontrollkästchen und eine Schaltfläche "Submit".

Die Bedienung ist ebenfalls sehr einfach. Wählen Sie zuerst die Programmiersprache aus, die kompiliert und ausgeführt werden soll, fügen Sie dann den Quellcode des Programms in das Eingabefeld ein oder geben Sie ihn dort ein, und klicken Sie anschließend auf "Submit". Sie können die Fehlermeldungen aus der Kompilierung oder die Ausführungsergebnisse sehen.

Vielleicht denken Sie, es sei langweilig, aber ich finde, es kann zu bestimmten Zeiten sehr nützlich sein, besonders wenn Sie keinen Compiler finden können und ein Stück Code überprüfen möchten. Solche Situationen sind ziemlich häufig. Insbesondere ist es schwierig, einen Computer zu haben, der alle Sprachen ausführen kann. Wenn es einen gibt, muss es Ihr eigener persönlicher Computer sein. Wenn Sie nicht Ihren eigenen Computer verwenden, werden Sie nervös. Außerdem finde ich diesen Dienst sehr interessant, denn auf diese Weise können Sie sogar Programme in jeder Sprache auf Ihrem Mobiltelefon schreiben.

Derzeit unterstützt diese Website die folgenden Sprachen - C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl.

Tool zur Generierung von CSS-Animationen:Gradient Animator

Dies ist ein Tool zur Generierung dynamischer Hintergründe, das mit den Technologien CSS Gradient und CSS Animation umgesetzt wurde. Das Tool ist sehr einfach zu bedienen. Mit ein paar Mausklicks wird Code für einen modernen dynamischen Farbverlaufshintergrund generiert. Dadurch kann der CSS-Farbverlaufshintergrund fließend bewegt werden. Sie können den Bewegungswinkel, die Bewegungsgeschwindigkeit und den Winkel des Farbverlaufs einstellen. Es unterstützt alle modernen Browser und IE 10+. Es eignet sich sehr gut für die Erstellung von Splash-Screens für Webseiten.

Web-Farbwerkzeug:CSS Colours

Wie der Name schon sagt, wird dieses Tool verwendet, um Webdesignern das Auffinden von Farben zu erleichtern. Es bietet die visuellen Effekte verschiedener Farben sowie die englischen Namen der Farben, RGB-Werte und Hexadezimalwerte, was die Verwendung sehr bequem macht.

Quelle: http://www.webhek.com/10-css-tools