CSS3 Best Practices für Designer

Wenn Sie in erster Linie Designer sind und vor kurzem mit dem Erlernen von CSS begonnen haben, haben Sie wahrscheinlich damit begonnen, einige der neuen CSS-Funktionen zu integrieren, die der Sprache hinzugefügt wurden CSS3. Wenn Sie jedoch nicht viel Erfahrung mit CSS haben, versuchen Sie wahrscheinlich herauszufinden, wie Sie einige der Herausforderungen am besten bewältigen können, die sich aus der Verwendung mehrerer Herstellerpräfixe, dem Umgang mit älteren Versionen von Internet Explorer usw. ergeben. und andere CSS3-spezifische Dilemmata. In diesem Artikel werde ich versuchen, einige wichtige Dinge zu behandeln, die Sie bei der Bewältigung dieser Probleme beachten sollten. Bedenken Sie, dass hier nichts in Stein gemeißelt ist, sondern dass es sich lediglich um Richtlinien handeln soll, die Ihnen dabei helfen, effektiveren, einfacher zu wartenden und zukunftssicheren Code zu schreiben.

Kennen Sie Ihre Support-Charts

Sie müssen sich wahrscheinlich nicht merken, welche Funktionen in welchen Browsern funktionieren. In den meisten Fällen funktionieren CSS3-Funktionen nicht in allen verwendeten Browsern. Und in einigen Fällen bieten selbst die neuesten Browserversionen keine vollständige Unterstützung. Daher sollten Sie zunächst erkennen, wo es an Unterstützung mangelt. Die primäre Ressource, die Sie verwenden sollten, ist die Wann kann ich … verwenden? Website, die Diagramme für CSS3, HTML5 und vieles mehr enthält. Sie können sogar direkte Vergleiche mit verschiedenen Browsern durchführen, wie im Screenshot unten gezeigt vergleicht die CSS3-Unterstützung in Firefox 3.6 mit IE9:

Obwohl Wann kann ich … verwenden? wahrscheinlich die einzige Unterstützungstabellenquelle ist, die Sie benötigen, hier sind ein paar andere Optionen, die Sie in Betracht ziehen sollten: Beachten Sie jedoch, dass eine CSS-Funktion zwar irgendwo als „unterstützt“ aufgeführt ist, das aber nicht bedeutet, dass sie frei von Fehlern oder Inkonsistenzen ist. Also gründlich testen.

Verwenden Sie Polyfills nicht zu häufig

Aufgrund des Drucks von Kunden oder Agenturen oder einfach weil Sie möchten, dass alles überall gleich aussieht und funktioniert, könnten Sie versucht sein, die vielen Optionen zu verwenden CSS-Polyfills. Viele dieser Skripte können Ihre Seiten jedoch erheblich verlangsamen – insbesondere, wenn Sie mehr als eines verwenden. Es gibt viele Studien und Quellen die zeigen, wie wichtig die Geschwindigkeit einer Website ist. Daher sollten alle Polyfills sorgfältig und unter Berücksichtigung der allgemeinen Interessen Ihrer Website oder App geprüft werden. Um Ihnen bei der Entscheidung zu helfen, was Sie polyfillen und was Sie nur auf ein geringeres Erlebnis reduzieren lassen möchten, verwenden Sie die Bitte HTML5 Website. Wie im Beispiel-Screenshot unten gezeigt, Bitte HTML5 wird häufig empfehlen, Polyfills für bestimmte Funktionen zu vermeiden:

Lesen:  7 Geschäftsideen für passives Einkommen, die Sie nebenbei starten können

Testen Sie, wie sich Funktionen verschlechtern

Wenn Sie viele Polyfills vermeiden möchten, müssen Sie natürlich zulassen, dass viele CSS3-Funktionen in älteren Browsern (normalerweise IE6-8) zu einem primitiveren Erlebnis werden. Aber gehen Sie nicht davon aus, dass dies automatisch geschieht. In vielen Fällen (z. B. bei Verwendung mehrerer Hintergründe) müssen Sie eine Eigenschaft deklarieren, die von der CSS3-Funktion überschrieben wird, in älteren Browsern jedoch weiterhin angezeigt wird. Für mehrere Hintergründe könnten Sie beispielsweise Folgendes tun: .element { background: url(images/fallback.jpg) no-repeat; Hintergrund: url(images/example.png) Mitte Mitte ohne Wiederholung, url(images/example-2.png) oben links wiederholen; } Beachten Sie das einzelne Hintergrundbild, das vor der Zeile mit mehreren Hintergrundbildern deklariert wurde. Nicht unterstützende Browser zeigen das einzelne Bild an, ignorieren jedoch die zweite Zeile. Unterstützende Browser lesen beide Zeilen, aber die erste Zeile wird durch die zweite überschrieben. Einige andere CSS3-Funktionen, die von dieser Art von Fallback profitieren könnten, sind RGBA-Farben, HSLA-Farben und Farbverläufe. Um zu sehen, wie sich die CSS3-Funktion in älteren Browsern verschlechtert, können Sie ein Bookmarklet namens verwenden deCSS3.

Derzeit funktioniert es nur in Chrome und Safari. Ziehen Sie jedoch einfach den Link in Ihre Lesezeichenleiste und klicken Sie dann auf den Link auf einer beliebigen Website, deren CSS3 Sie deaktivieren möchten. Die Website wird dann mit Textschatten, abgerundeten Ecken usw. angezeigt neue Sachen entfernt. Dies ist natürlich kein Ersatz für tatsächliche Browsertests, kann aber als nützlicher Leitfaden für eine schnellere Entwicklung dienen, bevor Sie gegen Ende des Projekts Ihre letzten Tests durchführen. Ein weiteres Hilfsmittel zur Bewältigung von Fallbacks ist das Modernisierung JavaScript-Bibliothek. Aber wenn Sie sich von Bibliotheken einschüchtern lassen, lassen Sie sich davon nicht abschrecken. Aus CSS-Sicht ist Modernizr nicht schwer zu handhaben. Schauen Sie sich dieses Tutorial für eine schmerzfreie Einführung an.

Lesen:  Wie leihe ich mir Geld mit der Cash-App?

Umgang mit Herstellerpräfixen

Einer der chaotischen Aspekte von CSS3 besteht darin, sich mit all den verschiedenen Herstellerpräfixen auseinandersetzen zu müssen. Die Pflege von Code, der alle Präfixe verwendet, ist mühsam und in manchen Fällen werden nicht alle benötigt. Wer kann sich schon merken, wann „-o-“ oder „-ms-“ eingefügt werden muss und wann nicht? Nun, wie bereits erwähnt, hilft die Verwendung der Support-Charts. Aber hier sind ein paar andere Vorschläge, die Ihnen beim Umgang mit Herstellerpräfixen helfen.

Verwenden Sie einen CSS-Präprozessor

Präprozessoren liegen derzeit voll im Trend. Aber CSS-Anfänger und Designer, die keine Hardcore-Entwickler oder -Programmierer sind, könnten Schwierigkeiten haben, mit diesen neuen Tools umzugehen. Obwohl Präprozessoren sicherlich nicht jedermanns Sache sind, sind sie auf jeden Fall eine Überlegung wert, da sie Ihre Produktions- und Wartungszeit erheblich verkürzen können. Eine ausführliche Erörterung von Präprozessoren würde diesen Artikel sicherlich sprengen, aber hier sind einige Links, die Ihnen den Einstieg erleichtern sollen: Und wenn Sie das zu schwer finden, hat Chris Coyier von CSS-Tricks welche Gedanken zu Präprozessoren Das könnte Ihnen helfen, einen Gesamtüberblick zu bekommen. Und hier ist ein Beitrag auf Nettuts+ Darin werden einige der Funktionen und Vorteile der Verwendung einiger der beliebtesten CSS-Präprozessoren behandelt.

Seien Sie in Ihrem Code konsistent

Wenn Sie Ihr CSS nicht mit einer der oben genannten Technologien vorverarbeiten möchten, müssen Sie sich um die Beibehaltung aller Herstellerpräfixe kümmern. Stellen Sie also sicher, dass Sie einen Stil und eine Reihenfolge für die Präfixe Ihres Anbieters auswählen und bleiben Sie dabei. Auf diese Weise wird Ihr Code einfacher zu lesen und zu warten. Einige CSS-Entwickler ordnen beispielsweise die Präfixzeilen ihrer Anbieter in alphabetischer Reihenfolge an und verwenden Einrückungen, damit alle Werte ausgerichtet sind, etwa so: .element { -moz-transition: background-color linear .8s; -ms-transition: Hintergrundfarbe linear .8s; -o-transition: Hintergrundfarbe linear .8s; -webkit-transition: Hintergrundfarbe linear .8s; Übergang: Hintergrundfarbe linear .8s; } Das ist nur eine Möglichkeit. Aber für welche Methode Sie sich auch entscheiden, achten Sie einfach darauf, im gesamten Code konsistent zu sein. Dies wäre besonders wichtig, wenn Sie in einem Team arbeiten, in dem andere Ihren Code lesen und/oder pflegen müssen. Natürlich sind nicht alle CSS3-Funktionen so einfach zu organisieren (der Code für Keyframe-Animationen ist beispielsweise viel komplizierter), aber für die meisten Funktionen sollten Sie in der Lage sein, einen einheitlichen Stil zu haben, der die Entwicklung und Wartung reibungsloser macht.

Lesen:  Wie KI-Videoerstellung die digitale Transformation unterstützt

Was ist mit der Standardimmobilie?

Sie werden im Beispiel im vorherigen Abschnitt feststellen, dass die letzte Eigenschaft, die nach den Vendor-Zeilen deklariert wird, die Standardversion der Eigenschaft ist. Wenn Sie die Standardeigenschaft einbeziehen möchten, sollten Sie dies auf jeden Fall so tun. Fügen Sie es also immer zuletzt hinzu, wenn Sie es hinzufügen. Dadurch soll sichergestellt werden, dass die Anbieterimplementierung der Funktion durch die Standardimplementierung überschrieben wird. Aber hier ist Vorsicht geboten. Bei einigen komplexen Animationen und Interaktionen ist es denkbar, dass sich die Implementierung so stark ändert, dass es unerwünschte Auswirkungen haben könnte, wenn der Browser mit der Unterstützung der Standardeigenschaft beginnt. In manchen Fällen ist es daher möglicherweise besser, die Standardeigenschaft ganz wegzulassen. Ich habe ausführlicher über dieses Thema geschrieben auf meinem BlogSchauen Sie sich das also an, wenn Sie eine ausführlichere Diskussion zu diesem Thema wünschen.

Verwenden Sie Präfixr

Eine der einfachsten Möglichkeiten, mit all den seltsamen Cross-Browser-Anbieter-Anbietern umzugehen, ist die Verwendung eines praktischen kleinen Tools namens Präfixr. Mit Prefixr entwickeln Sie einfach Ihren Code wie immer und können für Ihr gesamtes CSS3 einfach ein einziges Herstellerpräfix (z. B. nur „-moz-“) verwenden. Wenn Sie dann mit dem Testen in diesem einen Browser fertig sind und alles wie gewünscht funktioniert, geben Sie einfach Ihren Code in Prefixr ein, und der gesamte zusätzliche Herstellercode wird für Sie generiert. Prefixr kann auch automatisch integriert werden mit Ihrem Texteditorund beinhaltet Unterstützung für langen Keyframe-Animationscode. Alternativ können Sie auch ein von mir erstelltes Tool namens ausprobieren Animationsfüllcode Dadurch wird der zusätzliche Herstellercode für Keyframe-Animationen hinzugefügt.

Gründlich testen

Der letzte Vorschlag, den ich hier machen werde, besteht darin, alle von Ihnen unterstützten Browser gründlich zu testen. Sie können Dutzende Tools und Bibliotheken verwenden, um Sie bei Ihrer CSS3-Entwicklung zu unterstützen, aber nichts kann gründliche Tests in echten Browserumgebungen ersetzen. Und dieser Rat wäre besonders wichtig, wenn Sie viel mit responsivem Design im Zusammenhang mit CSS3 zu tun haben (z. B. Medienabfragen) und häufig typografische Funktionen verwenden. Sie möchten, dass Ihre Inhalte in allen Browsern nutzbar und lesbar sind, auch wenn die CSS3-Funktionen nicht verfügbar sind.

Aktuelle Artikel:

Empfohlen