Zeitsparende CSS3-Tools und Generatoren
Viele der CSS3-Spezifikationen wurden in früheren Beiträgen hier im Webentwickler-Blog überprüft und vorgestellt. Die Implementierung auf allen Geräten und Browsern kann eine Herausforderung sein, je nachdem, welche Stileigenschaften unterstützt werden. Zusätzliche Präfixcodes helfen, aber die Einhaltung der Spezifikationsraten bei Browsern kann zu großen Kopfschmerzen führen.
Eine der einfacheren Möglichkeiten, Ihren CSS3-Code mit Anpassungen auf den neuesten Stand zu bringen, besteht darin, Online-Tools und automatisch generierte Codeanwendungen zu verwenden, die das Rätselraten Ihres Entwicklungsprozesses erleichtern. In diesem Beitrag werde ich einige der Tools und Generatoren hervorheben und überprüfen, die große Vorteile und Unterstützung bieten, um Ihr CSS3 in den meisten modernen Browsern auf dem neuesten Stand und effektiv zu halten.
CSS-Auswahltest
Ein Test im IE 8.0.6-Browser ergab 20 nicht unterstützte Selektoren und 1 Buggy-Selektor von einundvierzig Selektoren. Von den insgesamt 574 Tests haben 345 bestanden, was einer Punktzahl von 60% entspricht. Ein Test in Firefox 7.0.1 berichtete von den 41 Selektoren, dass 41 bestanden wurden, 0 fehlerhaft waren und 0 nicht unterstützt wurden, und bestand 574 von 574 Tests für eine 100% bestandene Punktzahl. Ein letzter Test, den ich in Chrome 15.0 durchgeführt habe, ergab die gleichen Ergebnisse wie Firefox, was einer 100% igen Punktzahl entspricht.
Ultimativer CSS-Gradientengenerator

Der CSS Gradient Generator funktioniert am besten mit den neuesten Versionen von Firefox, Chrome, Safari, Opera oder IE. Der Generator bietet einen Import aus vorhandenem CSS, mehr als 135 Verlaufsvoreinstellungen, Opazitätsunterstützung mit mehreren Stopps und einen Import aus einem Bild, der einen Bildverlauf in CSS konvertiert.
Ich habe die Voreinstellung mit dem Namen "Blau bis transparent scharf" ausgewählt und dann die vertikale Ausrichtung von links oben nach rechts unten in Diagonale geändert, den IE überprüft, die Kommentare überprüft und eine Überprüfung für die IE9-Unterstützung hinzugefügt, die eine Verlaufsklasse zusammen mit einem generiert IE 9-Überschreibung, die dem HTML-Code hinzugefügt werden soll, und Vervollständigung der IE9-Unterstützung. Die Gradientenstopps können zusammen mit Schiebereglern zum Einstellen von Farbton, Sättigung und Helligkeit ebenfalls angepasst werden. Für die Auswahl des Farbformats steht eine weitere Option zur Verfügung, die standardmäßig rgba ist. Es werden jedoch auch die Farbformate hex, rgb, hsl und hsla bereitgestellt. Sobald Sie fertig sind, können Sie über den eindeutigen Link einen Link zum aktuellen Verlauf erstellen, diesen speichern oder freigeben oder das generierte CSS kopieren und in Ihr CSS-Dokument einfügen. Ich habe den Code in meinen Texteditor kopiert und musste einige Anpassungen vornehmen, da der automatisch generierte Code jedes Styling als Hintergrund auflistete : Ich habe sie an das Hintergrundbild angepasst : und dann funktionierten alle Styling-Eigenschaften.
Ich habe auch ein Verlaufsbild importiert und das CSS3 aus dem Generator-Tool erstellt. Ich musste den Code genau wie in der zuvor automatisch generierten Aufgabe optimieren, damit er ordnungsgemäß funktioniert. Die Ausgabe für jeden der getesteten Farbverläufe wird in Chrome 15.0 in Abbildung C angezeigt:CSS3 Bitte!

Ich habe die Online-Anwendung mit dem ersten Snippet getestet, bei dem es sich um die Styling-Eigenschaft .round_box handelt, bei der der Randradius zum Festlegen der Ecken verwendet wird. Ich habe die Standardeinstellung 12px geändert, auf 24px erhöht und in meine Zwischenablage kopiert. Dann fügte ich einige Ergänzungen des Rahmenstils und der Farbe sowie eine definierte Höhe hinzu und hatte innerhalb weniger Minuten dieses einfache abgerundete Feld erstellt, wie es in Chrome 15.0 unten angezeigt wird.
Abbildung E.
CSS Gen.

Beim Kopieren in mein Dokumentprojekt ist dies das Beispielergebnis in Chrome 15.0:
Abbildung H.
CSS3-Spielplatz

Wenn Sie in CSS3 von Grund auf neu programmieren und gestalten und es einfach zu lange dauert oder wenn Sie eine schnelle Änderung vornehmen müssen, sparen diese Online-CSS3-Tools und Codegeneratoren Zeit und sind nützlich, wenn Sie unter Druck stehen Mach es jetzt fertig.