web-dev-qa-db-ja.com

上部または下部のCSSスタイルシート？または空白ページの問題を解決する方法は？

私はhtmlの上（<head></head>の間）にスタイルシートを置いてきました。私が理解している限り、これがベストプラクティスです。 （例 http://stevesouders.com/hpws/css-bottom.php ）

とにかく、最近私はさまざまな結果を経験しました。代わりに、test.cssが遅い場合、以下のコードは空白のページを返します。これは、プログレッシブレンダリングが発生していないことを意味します。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

次に、test.cssを一番下に置くと、プログレッシブレンダリングが表示されます。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

私がこれまで理解して考えてきた限りでは、それは逆のはずです。おそらく私が見落としている他の要因がありますか？

cssrenderingprogressive
17
forestclown

グーグルは頭の中で「属する」スタイルの伝統を急速に破壊している。確かに、重要なスタイルは<head>タグまたはインラインのいずれかに属することを推奨していますが、他の必須ではないスタイルは、</html>タグを閉じる後に参照する必要があります。これは、すべてではないにしても、ほとんどの最新のブラウザーで機能します（すべてをテストしたわけではありません）。

この背後にある理由は、スタイルの大部分を非ブロッキング参照としてロードし、ブラウザーがすべての（潜在的に）かさばるスタイルを取得する前にページへの書き込みを開始できるようにするためです。 「クリティカル」スタイルの内容によっては、スタイリングがレンダリングされる前に、これにより恐ろしい比率の初期レイアウトが発生する可能性があります（ [〜＃〜] fouc [〜＃〜] ）。それはおそらくあなたが「空白ページ」の問題で経験していることです。

CSSがほぼ20年前（1996年）にリリースされたことも忘れないでください。そのため、Google（およびその他）が概念の従来のパラメーターを操作して押し出しているのは当然のことです。

ばかばかしいほど単純な例：

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
48
Jongosi

CSSは<head>で定義する必要があります。

このように、要素がDOMに読み込まれると、適切なスタイルがすぐに適用されてレンダリングされます。

6
maček

Internet Explorerは@importを使用して他のファイルによってロードされたCSSファイルをキャッシュしませんが、ブラウザが最初にCSSファイルをロードするとき、通常はそれをキャッシュすることを覚えておく価値があります。

そのため、次回ページが読み込まれるときは、キャッシュされたバージョンが速度の問題なしで使用されます。したがって、実際には、ユーザーが最初にページをロードしたときに唯一の問題が発生する可能性があります。

すべてのCSSをそれが属する<head>に配置します。

1
JG Estiot

矛盾する情報はインターネットのいたるところにあります。

今日の時点では、次の方法を使用して、重要なCSSのみをブロッキングCSSとして配置し、残りを非レンダリングブロッキングとして配置することを強くお勧めします。

    <link rel="stylesheet" href="/path/to/css.css" media="none"  onload="if(media!='all')media='all'">

これにより、mediaパラメータがnoneとして使用されます。これは、まったく読み込まれないことを意味します。次に、読み込まれたページがonloadにスワップされてallに強制されます。ロードします。

メディア属性の詳細については、こちらをご覧ください： https://www.w3schools.com/tags/att_link_media.asp

0
Steven Church