H1等初期block要素のdisplayをinitialするとinlineになる

前提

現在HPを作成しており、noscript対応を行いたく、CSSにてdisplay制御によって表示分けを行おうとしております。
動作の確認中に疑問に思った挙動が認められたため質問させていただきました。

発生している問題

以下「該当ソースコード」をブラウザにて表示すると、H1タグとPタグがinlineとなってしまい横に並んでしまいます。想定としてはH1とPのdisplay：initial；すると、初期化されてblockにある想定でした。

W3C規定ではinlineとなっているのでしょうか（※情報見つけられませんでした。）
もしそうであればブラウザ仕様によりH1のスタイルがオーバーライドされており、display: initial;によってブラウザスタイルが効く前の状態に戻っているということでしょうか。なんにせよ良い対応方法が思いつかないので助力を願いたいです。

なお当該クラスにより、初期block要素やinline要素のdisplayがそれぞれ初期化されることを望んでいますので、例えばnoscript内にてdisplay:block;を指定することは望んでいません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<title>Document</title>
7	<style>
8		.test {
9			display: none;
10		}
11	</style>
12	<!-- <noscript> 動作確認中のためコメントアウト-->
13		<style>
14			.test {
15				display: initial;
16			}
17		</style>
18	<!-- </noscript> -->
19</head>
20
21<body>
22	<main>
23		<h1 class="test">testH1</h1>
24		<p class="test">testParagraph</p>
25	</main>
26</body>
27
28</html>

試したこと

一度display:none;することは関係がないようです。
単純にdisplay: initial;にしただけでも発生します。

動作確認環境

MAC OS X

Google Chrome 78.0.3904.97
Safari 13.0.3

m.ts10806

2019/11/16 04:34

クラスを分けた場合はどうでしょう

nanica.jp

2019/11/16 04:53

回答ありがとうございます。なるほどです。inlineとblockで別クラスにする方法ですね。欲を言うと使い分ける実装はあまりしたくないのですが、しかたないんですかね。。。SEOのこと考えるとマークアップもあんまり変えたくないですし・・・

行動規範の内容に同意します

回答2件

ベストアンサー

初期block要素やinline要素のdisplayがそれぞれ初期化されることを望んでいます

そういう指定は出来ないと思います。

【initial - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/initial

CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。初期値をブラウザーのスタイルシートで指定された値と混同しないでください。

【Visual formatting model】
https://drafts.csswg.org/css2/visuren.html#propdef-display

Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

投稿2019/11/16 05:08