JekyllのインラインCSS

キーテイクアウト

JekyllのインラインCSSは、最初のサーバーの往復ですべてのスタイルを送信し、外部スタイルシートの必要性を排除できるため、十分な小さなCSSを持つサイトにとって貴重なツールになります。これは、ページの上部およびメインコンテンツ領域の外観を形作る重要なスタイルを提供するのに特に効果的です。 Jekyllでは、スタイルを_includesフォルダーに直接含めることができ、ドキュメントのヘッド内にインポートできます。 SASSを使用している場合、SCSSifyフィルターを使用してSASS形式の文字列をCSSに変換し、スタイルをインランス化する場合でもSASSを使用する機能を維持できます。 JekyllのScssifyフィルターは、_config.ymlからのSASS構成も尊重しています。したがって、構成ファイルで出力スタイルを圧縮するように設定すると、フィルターはSASSを圧縮CSSにコンパイルし、模倣を支援します。
私は長い間ジキルのファンでした。いくつかの欠陥があり、常に仕事に最適なツールではありませんが、状況によっては素晴らしいツールになる可能性があります。私はそれで構築したウェブサイトの数のカウントを失いました。
• 最近、私はJekyllでさらに別のサイトを作成しました。今回はSimplified JavaScript Jargonのために、それほど非定型の問題に直面していることに気づきました。
ニーズ
重要なCSSについて聞いたことがあるかもしれません。コンセプトの背後にあるアイデアは、重要なスタイル（ページのトップおよびメインコンテンツ領域の外観を担当するもの）をブラウザにできるだけ早く提供することです。

14kb未満でページの上部をレンダリングするために必要なものを送信するのが良いと言う一般的なルールがあります。これは、サーバーが1つの往復でどのくらいの量を処理できるかです。 Google PagesSpeed Insightsは、これについての詳細情報をドキュメントで提供しているので、この方法で機能する理由を知りたい場合は、お気軽にお問い合わせください。

その程度まで、CSSが十分に小さい場合（SJSJのように）、

にすべてインラインし、外部スタイルシートを悩ませることなく最初の往復ですべてを一緒に送信できます。それは非常に一般的ではありませんが、そうであるとき、それはかなりradです。 jekyll

に戻る

私のアイデアは、ドキュメントのヘッドに tada！それは私たちが望むものを私たちに与えてくれます：

 sassはどうですか？

わかりました、あなたは「はい、それはもうSASSを使用できないことを意味します。」と考えているかもしれません。はい、いいえ。基本的に、私たちはジキルからサスパイプライン全体を完全に取り出しましたが、まだ方法があります。
 Jekyllのドキュメントを読んだことがあるなら、SCSSIFYとSASSIFYフィルターがあることに気付いたかもしれません。ドキュメントでは、これにより：が可能になります

SASSまたはSCSS形式の文字列をCSSに変換します

いい。つまり、ファイル全体をこのことに配管することで、SASSを使用できることを意味します。唯一の問題は、{％を含む％}など、ブロックにフィルターを適用できないことです。トリックは、ファイルのコンテンツを変数でキャプチャすることです（{％Capture％}のおかげで）、出力するときにこの変数にフィルターを適用します。

 tada（再び）！

ミニフィケーションはどうですか？

{% capture styles %}
{% include styles.css %}
{% endcapture %}



このscssifyフィルターで良いことは、_config.ymlからのSASS構成を尊重することです。そのため、構成ファイルで出力スタイルを圧縮するように設定すると、フィルターはSASSを圧縮CSSにコンパイルします。


 tada（もう一度）！

最終的な考え
# _config.yml

sass:
  style: compressed

ご覧のとおり、この記事には何も画期的なものはありませんでした。しかし、先日、この問題について考えるのに時間を費やす前に、_includesフォルダーに自分のスタイルを書くことができると本当に起こったことは決してないと言わざるを得ません。
もちろん、このアイデア全体は、14kBよりもはるかに大きいスタイルシートを扱うときに不足しています。ここでは、いくつかのツールで重要なCSSを抽出する必要があります。しかし、小さなページやサイトの場合 - それは非常に便利です！<


実際のプロジェクトでどのように機能するかを確認したい場合は、SJSJリポジトリのファイルを確認できます。




 _includes/styles.css
 _includes/head.html

それが役立つことを願っています、そして幸せなコーディング！




JekyllのインラインCSSに関するよくある質問<



インラインCSSと外部CSSの違いは何ですか？
インラインCSSは、「スタイル」属性を使用してCSSがHTMLタグ内に直接適用される方法です。この方法は、ページ上の特定の要素に一意のスタイルを適用するのに役立ちます。一方、外部CSSには、HTMLドキュメントから外部.CSSファイルにリンクすることが含まれます。この方法は、複数のページに同じスタイルを適用したい場合に有益です。これは、再利用性を促進し、冗長性を低下させるためです。
 JekyllでインラインCSSを使用するにはどうすればよいですか？ ​​
JekyllでインラインCSSを使用するには、「スタイル」属性を使用してHTMLタグ内にCSSを直接​​適用する必要があります。たとえば、段落の色を赤に変更する場合は、
これは赤い段落です。。 JekyllでインラインCSSを使用する場合は、CSSプロパティをCamelcaseに記述する必要があります。単一ページの特定の要素へのスタイル。外部または内部のCSSで競合するスタイルをオーバーライドし、Webページの外観をより制御できます。ただし、HTMLドキュメントを乱雑で維持するのが難しくなる可能性があるため、インラインCSSを控えめに使用することが最善です。 、JekyllでインラインCSSと外部CSSの両方を使用できます。ただし、インラインCSSは外部CSSよりも高い特異性を持っていることに留意してください。これは、競合するスタイルがある場合、インラインCSSが外部CSSをオーバーライドすることを意味します。高い特異性。ただし、外部または内部のCSSで「！重要」ルールを使用して、インラインCSSをオーバーライドできます。たとえば、パラグラフの色を赤に設定するインラインスタイルがある場合、次のような外部CSSでオーバーライドできます。 JekyllのインラインCSS？
JekyllのインラインCSSは、個々の要素を高いレベルの制御を提供しますが、制限があります。 HTMLドキュメントを乱雑で維持するのが難しくなる可能性があります。また、各要素にスタイルを手動で適用する必要があるため、再利用性を促進しません。
インラインCSSは、Jekyllサイトの負荷速度にどのように影響しますか？ブラウザが外部のCSSファイルを取得するために追加のHTTP要求を作成する必要がないため、Jekyllサイトの読み込み速度。ただし、多くのCSSがある場合は、外部CSSを使用してHTMLドキュメントを清潔でメンテナンスに保つ方が良いです。 🎜>いいえ、JekyllでインラインCSSを使用してCSSクラスとIDを使用することはできません。インラインCSSは、「スタイル」属性を使用してHTML要素に直接適用され、クラスやIDをサポートしていません。クラスまたはIDSを使用する場合は、外部または内部のCSSを使用する必要があります。
JekyllのインラインCSSでメディアクエリを使用するにはどうすればよいですか？ジキルのCSS。メディアクエリは、外部または内部のCSSで使用され、さまざまなデバイスまたは画面サイズにさまざまなスタイルを適用します。メディアクエリを使用する必要がある場合は、外部または内部のCSSを使用する必要があります。
 JekyllのインラインCSSを備えた擬似クラスと擬似要素を使用できますか？擬似クラスと擬似要素は、外部または内部のCSSで使用され、要素の特定の部分をスタイリングしたり、特殊効果を追加したりします。擬似クラスまたは擬似要素を使用する場合は、外部または内部のCSSを使用する必要があります。
以上がJekyllのインラインCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。