hover疑似クラスについてのページのBasic_exampleにCSSが入っておらず、動作していない

[takayamaki]

MDN URL

https://developer.mozilla.org/ja/docs/Web/CSS/:hover

この問題に関する節や見出しはどこですか。

例→基本的な例→結果

不完全、不親切、不完全であった情報は何ですか。

EmbedLiveSampleマクロで生成されるLiveSampleにCSSが適用されておらず動作していません

どう表示されるべきだと思いますか。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover のLiveSampleと同様

補足情報となるリンク、参考資料、引用文献はありますか。

No response

他に共有したいことはありますか。

related #17651

MDN metadata

Page report details

• Folder: ja/web/css/_colon_hover
• MDN URL: https://developer.mozilla.org/ja/docs/Web/CSS/:hover
• GitHub URL: https://github.com/mdn/translated-content/blob/main/files/ja/web/css/_colon_hover/index.md
• Last commit: a6becf7
• Document last modified: 2023-10-23T12:19:07.000Z

[YujiSoftware]

調査しました。

<section aria-labelledby="基本的な例">
    <h3 id="基本的な例"><a href="#基本的な例">基本的な例</a></h3>
    <div class="section-content">
        <h4 id="html">HTML</h4>
        <div class="code-example">
            <pre class="brush: html notranslate"><code>（中略）</code></pre>
        </div>
        <h4 id="css">CSS</h4>
        <div class="code-example">
            <pre class="brush: html notranslate"><code>（中略）</code></pre>
        </div>
        <h4 id="結果">結果</h4>
        <div class="code-example" id="sect2">
            <div class="example-header play-sample" id="sect3">（中略）</div>
            <iframe class="sample-code-frame" title="基本的な例" id="frame_basic_example" src="https://live.mdnplay.dev/ja/docs/Web/CSS/:hover/runner.html?id=basic_example" loading="lazy"></iframe>
        </div>
    </div>
</section>

EmbedLiveSample の第一引数には、サンプルコードを含むヘッダの id を指定します。
https://github.com/mdn/yari/blob/5376a5683ea632fe5f33bcb247d34240b3e56f71/kumascript/macros/EmbedLiveSample.ejs#L5

今回の場合、この第一引数に Basic_example を指定しています。

translated-content/files/ja/web/css/_colon_hover/index.md

Line 51 in c25b23c

{{EmbedLiveSample("Basic_example")}}

ただ、英語版では <h3 id="basic_example"> があるのですが、日本語では翻訳していてる関係で <h3 id="基本的な例"> となってしまっているため、ヘッダを見つけられません。

その場合、フォールバックを行っています。
https://github.com/mdn/yari/blob/5376a5683ea632fe5f33bcb247d34240b3e56f71/client/src/document/code/playground.ts?#L259

このフォールバックでは、 いずれかの親要素の直下にあるヘッダ（h1〜h5）を取得します。
つまり、今回のページの場合は <div class="section-content"> の直下にある <h4 id="html">HTML</h4> です。
（英語版と異なる要素を取得してしまっています）
https://github.com/mdn/yari/blob/5376a5683ea632fe5f33bcb247d34240b3e56f71/client/src/document/code/playground.ts#L37-L46

その後、取得したヘッダ要素から次のヘッダ要素までの間にある <pre> の中身を取得します。
本来であれば、ここで h3 の次の div の中にある HTML/CSS を取得できるのですが、今回だと h4 の次の div の中にある HTML しか取得していません。

結果、HTML だけが適用された中途半端なライブサンプルになってしまっていました。

この事象が発生するのは、h4 （#### 見出し）の後に EmbedLiveSample がある場合のみです。
h3 （### 見出し）の後に EmbedLiveSample がある場合は、フォールバックによって適切にコードを拾えているので、問題は起きません。

この挙動が、バグなのか仕様なのかは微妙なところです。
もう少し、mdn/yari （レンダリングシステム）の方を調べてみます。

[YujiSoftware]

mdn/yari の方で経緯を調べたのですが、厄介そうです。
翻訳の問題があるので EmbedLiveSample の引数を省略したり、指定の要素がなかった場合に自動でコードを拾うようにしたかったようですが、h2 の下にある場合と h3 の下にある場合で DOM の構造が異なり、挙動を変えると壊れる恐れがあり保留になってるようです。

• (Auto)EmbedLiveSample is not working correctly yari#5005
• Localization differences - Address EmbedLiveSample case with its "localized" argument yari#4971

そのため、現状だと EmbedLiveSample の引数を変えるしかなさそうです。

ただ、個人的には Compat マクロや Specifications マクロのように引数を省略できたほうがいいと思うので、なんとかしたいです…。

[YujiSoftware]

related #15814

[YujiSoftware]

related #19209

[YujiSoftware]

related #19012