Inline CSS in Jekyll

Key Takeaways

• Inline -CSS in Jekyll kann ein wertvolles Werkzeug für Websites mit genug CSS sein, da Sie alle Stile im ersten Server -Roundtrip senden können, wodurch die Notwendigkeit eines externen Stylesheetes beseitigt wird. Dies ist besonders effektiv für die Bereitstellung kritischer Stile, die das Aussehen der oberen und Hauptinhaltsbereiche der Seite prägen.
• In Jekyll können Stile direkt in den Ordner _includes aufgenommen und dann im Kopf des Dokuments importiert werden. Wenn Sie SASS verwenden, kann der SCSSIFY-Filter verwendet werden, um eine SASS-formatierte Zeichenfolge in CSS umzuwandeln, wodurch die Möglichkeit beibehält, SASS auch beim Inline-Styles zu verwenden.
• Der ScsSify -Filter in Jekyll respektiert auch Ihre SASS -Konfiguration von _config.yml. Wenn Sie also den Ausgangsstil auf komprimierte in Ihrer Konfigurationsdatei einstellen, kompiliert der Filter SASS zu komprimierten CSS und hilft in der Minifikation.

Ich bin seit langem ein Fan von Jekyll. Es hat einige Mängel und ist nicht immer das beste Werkzeug für den Job. Es kann jedoch ein großartiges Werkzeug für einige Situationen sein. Ich habe die Zählung der vielen Websites verloren, die ich damit erstellt habe.

Vor kurzem habe ich eine weitere Website mit Jekyll gemacht, diesmal für vereinfachtes JavaScript -Jargon und ich war vor einem nicht so atypischen Problem - in den Styles in der

.

das Bedürfnis

Sie haben vielleicht von kritischen CSS gehört. Die Idee hinter dem Konzept besteht darin, kritische Stile (die für das Aussehen der oberen und Hauptinhaltsbereiche der Seite verantwortlich) so bald wie möglich zum Browser bereitzustellen, damit keine Verzögerung vor dem Zugriff auf den Inhalt vorhanden ist.

Es gibt eine gemeinsame Regel, die besagt, dass es gut ist, das zu senden, was benötigt wird, um die Spitze der Seite unter 14 KB zu rendern, da dies ungefähr so ​​viel der Server in einem Roundtrip verarbeiten kann. Google PageSpeed ​​Insights gibt weitere Informationen dazu in ihrer Dokumentation. Erleben Sie also einen Blick, wenn Sie wissen möchten, warum es so funktioniert.

In diesem Ausmaß könnten Sie, wenn Ihr CSS klein genug ist (wie für SJSJ), alles in die

inzieren und alles im ersten Roundtrip zusammenzusenden, ohne sich nur um ein externes Stylesheet zu beschäftigen. Das ist nicht sehr häufig, aber wenn es so ist, ist es ziemlich rad.

Zurück zu Jekyll

meine Idee war es also, Stile in ein

Dann wurde mir klar, dass ich, wenn ich in der Lage war, alle meine Stile in den Kopf der Seite zu investieren, nicht so viele von ihnen hatte, also konnte ich das Problem definitiv umgekehrt angehen.

Anstatt meine Stile nach dem Build in den Ordner _includes zu bewegen, konnte ich sie direkt in diesem Ordner erstellen. Ich könnte dann eine CSS -Datei im Kopf des Dokuments von dort importieren lassen.

<span>/* _includes/styles.css */
</span>
<span><span>.foo-bar</span> {
</span>  <span>color: pink;
</span><span>}
</span>

und dann:

<span><!-- _includes/head.html -->
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span><span>{% include styles.css %}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

tada! Es gibt uns genau das, was wir wollen:

<span><!-- … -->
</span><span><span><span><style</span>></span><span>
</span></span><span><span><span><span>.foo-bar</span> {
</span></span></span><span><span>  <span>color: pink;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span><span><!-- … -->
</span>

Was ist mit Sass?

Okay, Sie denken vielleicht: "Ja, aber es bedeutet, dass wir Sass nicht mehr benutzen können." Jein. Grundsätzlich haben wir die gesamte Sass -Pipeline von Jekyll vollständig herausgenommen, aber es gibt noch einen Weg.

Wenn Sie die Dokumentation von Jekyll jemals lesen, haben Sie möglicherweise festgestellt, dass es einen SCSSIFY- und einen Sassify -Filter gibt. Die Dokumentation besagt, dass wir:

ermöglicht werden

eine sass- oder scss-formatierte Zeichenfolge in CSS konvertieren.

schön. Dies bedeutet, dass wir SASS immer noch verwenden können, indem wir unsere gesamte Datei in dieses Ding einleiten. Das einzige Problem ist, dass wir Filter nicht auf einen Block anwenden können, z. B. { % include %}. Der Trick besteht darin, den Inhalt der Datei in einer Variablen zu erfassen (dank { % Capture %}) und dann unseren Filter bei der Ausgabe auf diese Variable anwenden.

<span><!-- _includes/head.html -->
</span>{% capture styles %}
{% include styles.css %}
{% endcapture %}

<span><span><span><style</span>></span><span>
</span></span><span><span><span>{{ styles | scssify }}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

tada (wieder)!

Was ist mit Minifikation?

Das Schöne mit diesem SCSSIFY -Filter ist, dass er Ihre SASS -Konfiguration von _config.yml respektiert. Wenn Sie also den Ausgangsstil auf komprimierte in Ihrer Konfigurationsdatei einstellen, kompiliert der Filter SASS zu komprimierten CSS.

<span># _config.yml
</span>
<span>sass:
</span>  <span>style: compressed
</span>

tada (noch einmal)!

<span><!-- … -->
</span><span><span><span><style</span>></span><span>
</span></span><span><span><span><span>.foo-bar</span>{color:pink}
</span></span></span><span><span></span><span><span></style</span>></span>
</span><span><!-- … -->
</span>

endgültige Gedanken

Wie Sie sehen können, gab es in diesem Artikel nichts Bahnbrechendes. Ich muss jedoch sagen, dass es mir nie wirklich in den Sinn gekommen ist, dass ich meine Stile einfach in den Ordner _includes direkt schreiben konnte, bevor ich neulich Zeit über dieses Problem nachgedacht hatte.

Natürlich würde diese ganze Idee beim Umgang mit einem Stylesheet, das viel größer als 14 KB ist, zu kurz kommen, wo Sie das kritische CSS mit einem Werkzeug extrahieren müssen. Aber für kleine Seiten und Websites - es ist sehr praktisch!

Wenn Sie sehen möchten, wie es in einem realen Projekt funktioniert, können Sie die Dateien im SJSJ -Repository überprüfen:

• _includes/styles.css
• _includes/head.html

hoffe es hilft und glücklich codieren!

häufig gestellte Fragen zu Inline -CSS in Jekyll

Was ist der Unterschied zwischen Inline -CSS und externem CSS? Diese Methode ist nützlich, um einzigartige Stile auf bestimmte Elemente auf einer Seite anzuwenden. Andererseits beinhaltet externe CSS die Verknüpfung mit einer externen .css -Datei aus Ihrem HTML -Dokument. Diese Methode ist von Vorteil, wenn Sie die gleichen Stile auf mehrere Seiten anwenden möchten, da sie die Wiederverwendbarkeit fördert und Redundanz verringert.

Wie kann ich Inline -CSS in Jekyll verwenden? Wenn Sie beispielsweise die Farbe eines Absatzes in Rot ändern möchten, würden Sie schreiben:

Dies ist ein roter Absatz.

. Denken Sie daran, die CSS -Eigenschaften sollten in Camelcase geschrieben werden, wenn Inline CSS in Jekyll verwendet wird.

Warum sollte ich Inline -CSS in Jekyll verwenden? Stile zu bestimmten Elementen auf einer einzelnen Seite. Es überträgt alle widersprüchlichen Stile in externen oder internen CSS und gibt Ihnen mehr Kontrolle über das Erscheinungsbild Ihrer Webseite. Es ist jedoch am besten, Inline -CSS sparsam zu verwenden, da es Ihr HTML -Dokument chaotisch und schwer zu pflegen kann, wenn Sie überbeanspruchte. Sie können sowohl Inline -CSS als auch externe CSS in Jekyll verwenden. Beachten Sie jedoch, dass Inline -CSS eine höhere Spezifität als externe CSS aufweist. Dies bedeutet, dass bei widersprüchlichen Stilen das Inline -CSS die externen CSS überschreibt. hohe Spezifität. Sie können jedoch die „! Wichtige“ Regel in Ihrem externen oder internen CSS verwenden, um Inline -CSS zu überschreiben. Wenn Sie beispielsweise einen Inline -Stil haben, der die Farbe eines Absatzes auf rot setzt, können Sie ihn in Ihren externen CSS wie folgt überschreiben: P {Farbe: Blau! Wichtig;}.

Was sind die Einschränkungen der Verwendung Inline CSS in Jekyll? Dadurch kann Ihr HTML -Dokument chaotisch und schwer zu pflegen, wenn Sie überbeansprucht werden. Es fördert auch keine Wiederverwendbarkeit, da Sie die Stile manuell auf jedes Element anwenden müssen. Die Ladegeschwindigkeit Ihrer Jekyll -Site, da der Browser keine zusätzlichen HTTP -Anforderungen zum Abrufen externer CSS -Dateien durchführen muss. Wenn Sie jedoch viele CSS haben, ist es besser, externe CSS zu verwenden, um Ihr HTML -Dokument sauber und leicht zu warten. 🎜> Nein, Sie können keine CSS -Klassen und IDs mit Inline -CSS in Jekyll verwenden. Inline CSS wird direkt auf das HTML -Element mit dem Attribut "Stil" angewendet und unterstützt keine Klassen oder IDs. Wenn Sie Klassen oder IDs verwenden möchten, sollten Sie externe oder interne CSS verwenden. CSS in Jekyll. Medienabfragen werden in externen oder internen CSS verwendet, um verschiedene Stile für verschiedene Geräte oder Bildschirmgrößen anzuwenden. Wenn Sie Medienabfragen verwenden müssen, sollten Sie externe oder interne CSS verwenden.

Kann ich Pseudoklassen und Pseudo-Elemente mit Inline-CSS in Jekyll verwenden? Pseudoklassen und Pseudoelemente werden in externen oder internen CSS verwendet, um bestimmte Teile eines Elements zu stylen oder Spezialeffekte hinzuzufügen. Wenn Sie Pseudoklassen oder Pseudoelemente verwenden möchten, sollten Sie externe oder interne CSS verwenden.

Das obige ist der detaillierte Inhalt vonInline CSS in Jekyll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!