Mythos - CSS der Zukunft schreiben

CSS hat eine Reihe neuer Funktionen wie CSS-Verläufe, Schatten, Rahmenradius und Animation eingeführt, die alle nur mit CSS erreicht werden können. Es gibt auch einige Funktionen, die aufgrund der fehlenden Browserunterstützung für CSS-Variablen und CSS-Funktionen von calc() noch implementiert werden müssen. Aber wenn Sie nicht wirklich auf die Zukunft warten können, lassen Sie uns einen Blick auf Myth werfen.

Mythos verwendet im Gegensatz zu anderen Vorprozessoren, die eine eigene Syntax erfinden, dieselbe Syntax wie die Standardspezifikation . Sie können Variablen verwenden, mathematische oder Farboperationen ausführen und neue CSS-Eigenschaften in ihrer offiziellen Form schreiben. Sein Ziel ist es, Entwicklern zu ermöglichen, reines CSS zu schreiben, und gleichzeitig in der Lage sein, zukünftige Standardsyntax zu verwenden.

Anfangen

Um zu beginnen, müssen wir Myth binary installieren, um es auf den aktuellen CSS-Standard zu kompilieren. Es gibt keine GUI-Anwendung wie Codekit oder Koala, die Myth zum Zeitpunkt des Schreibens unterstützt, daher ist dies die einzige Möglichkeit , Myth in browserkonformes CSS-Format zu übersetzen .

Geben Sie in Terminal den folgenden Befehl ein:

 npm install -g Mythos 

Sie können dann diesen Befehl verwenden, um beispielsweise source.css in output.css zu kompilieren.

 mythus source.css output.css 

Oder geben Sie Folgendes ein, um die source.css zu überwachen und sie für jede Änderung in output.css zu kompilieren.

 myth --watch source.css output.css 

Myth stellt keine neue Erweiterung vor. Es funktioniert mit .css wie oben gezeigt.

CSS mit Mythos schreiben

Myth stellt auch keine proprietären Funktionen und Regeln wie die anderen CSS-Preprozessoren vor, so dass Sie sich fast sofort an Mythen gewöhnen sollten. Es ist wie einfaches CSS.

Variablen

Beginnen wir mit Variablen. In CSS wird eine Variable wie folgt deklariert:

 : root {var-length: 10px; var-Farbe: # 000; } .class {Hintergrundfarbe: var (Farbe); Breite: var (Länge); } 

Myth compiliert diesen Code in ein browserkonformes Format:

 .class {Hintergrundfarbe: # 000; Breite: 20px; } 

Sie können auf unseren vorherigen Artikel über die Verwendung von CSS-Variablen für weitere Details verweisen.

Mathematische Operationen

Wie erwähnt, können wir auch mathematische Operationen mit der neuen CSS3-Funktion calc() ausführen. Wir haben diese Funktion auch in unserem vorherigen Artikel behandelt: Verwenden der CSS3-Berechnungsfunktion.

Lasst uns unser erstes Beispiel damit erweitern:

 : root {var-length: 10px; var-Farbe: # 000; } .class {Hintergrundfarbe: var (Farbe); Breite: calc (var (Länge) / 2); } 

Myth compiles die obigen Codes in:

 .class {Hintergrundfarbe: # 000; Breite: 10px; } 

Farbanpassungen

Myth unterstützt auch einige Farboperationen oder Anpassungen wie in LESS oder Sass. Es wird vorgeschlagen, eine neue Standardfunktion in die CSS-Spezifikation namens color() einzufügen - einschließlich einer Reihe von Farbanpassungsfunktionen wie tint(), shade() und blend() nur einige zu nennen.

Unten sehen Sie ein Beispiel: Wir erhöhen die Helligkeit der Hintergrundfarbe um 80% und verringern die Randfarbe um 50% .

 : root {var-length: 20px; var-schwarz: # 000; var-weiß: #fff; } .class {Hintergrundfarbe: Farbe (var (schwarz) Helligkeit (+ 80%)); Rahmen: var (Rahmenbreite) einfarbig (var (weiß) Helligkeit (- 50%)); Breite: calc (var (Länge) / 2); } 

Dieser Code erzeugt:

 .class {Hintergrundfarbe: rgb (204, 204, 204); Grenze: 2px festes rgb (128, 128, 128); Breite: 10px; } 

Autoprefixer

Myth fügt den CSS-Eigenschaften automatisch auch ein Lieferantenpräfix hinzu . Wir können zum Beispiel einfach CSS Box Shadow schreiben:

 .class {Box-Schatten: 2px 1px 0px var (schwarz); } 

Die Ausgabe ist:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; Box-Schatten: 2px 1px 0px # 000; } 

Letzter Gedanke

Ich liebe die Idee von Mythos. Damit können wir heute pures CSS der Zukunft schreiben, ohne uns Gedanken über die Browserunterstützung machen zu müssen. Und da es die Standardsyntax verwendet, müssen wir später, wenn alle Browser es (als Standard) implementiert haben, den gesamten Code nicht neu schreiben. Ich denke, ich werde es in jedem meiner zukünftigen Projekte verwenden. Was ist mit Ihnen? Wirst du das gleiche übernehmen?

Vergleichen Sie die Ladegeschwindigkeit von Websites (Side-by-Side) mit diesem Tool

Es ist kein Geheimnis, dass die Ladezeit einer Website ein wichtiger Faktor für die Benutzerfreundlichkeit ist. Dies wirkt sich auch auf die Google-Rangliste Ihrer Website aus. Daher ist die Optimierung Ihrer Seitengeschwindigkeit auf jeden Fall empfehlenswert.Wenn es einen Wettbewerber gibt, den Sie versuchen, einen Messwert zu übertreffen, den Sie analysieren könnten, ist die Seitengeschwindigkeit . U

(Tech- und Design-Tipps)

WordPress Überwachung und Tracking mit Stream

WordPress enthält alle Funktionen, mit denen Sie eine Website erstellen und dann selbst betreiben können. Wenn Ihre Website und Ihr Unternehmen wachsen, müssen Sie jedoch ein Team einstellen, um an der Erweiterung der Website zu arbeiten . Einige von ihnen benötigen wahrscheinlich Zugriff auf die Back-End-Administration der Site (WP-Admin).Es

(Tech- und Design-Tipps)