3

そのような：

<img style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)" />

私が持っているアプリケーションは、承認書を表示してから、キャンバスを表示します。キャンバスはタッチ/マウス イベントを許可し、ユーザーはそれに自分の名前を署名することができます。次に、HTML と署名が保存されます。顧客は、今後署名 PNG ファイルと HTML テキスト ファイルの不一致が発生しないように、これらを 1 つのファイルに保存することを要求しています。

したがって、私はこのアプローチの外観が好きではありませんが、Chrome や IE でも問題なく動作するようで、署名された認証で 1 つのファイルを保存するだけでよいという顧客の要求を解決します。

私の質問は - これは合法的な HTML ですか、それとも Chrome は私に親切ですか?

4

4 に答える 4

4

引用OP: 

<img style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)" />

「私の質問は、これは合法的な HTML ですか?」

いいえ。W3C HTML 仕様によると、src属性"must be present"です。

あなたを に変えてみませんimgかdiv？

<div style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)"></div>

一般に、HTML の有効性に関する質問は、SO にアクセスする前にオンライン バリデーターに問い合わせる必要があります: http://validator.w3.org/

于 2012-09-18T21:30:24.017 に答える
1

HTML が無効です。しかし、少し掘り下げると、HTML4 仕様のデータ URI スキームへの参照が見つかります。

<OBJECT id="clock1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, ...base64 data...">
    A clock.
</OBJECT>

...だから問題はdata:ウリではありません。これがクロム専用かどうかについては、データ URI スキームに関するウィキペディアの記事に、ブラウザーのサポートに関するセクションが含まれています。

CSSも有効ではないようです。以下は、w3c CSS バリデーターでの検証に失敗します。

.wtv {
    background:url(data:image/png;base64,BLAH);
    color:red;
}

バリデーターは次のエラーを返します。

Value Error : background url(data:image/png;base64,BLAH) is an incorrect URL url(data:image/png;base64,BLAH)

だからあなたがしていることはうまくいきますが、法律の文言によれば、それは有効ではありません.

于 2012-09-18T21:21:01.690 に答える
0

私の意見では問題ありません。CSS 宣言に実際の base64 画像データを含めることは問題ありません。プロセスの出力が単なる HTML ファイルの場合、興味深いアプローチです。

于 2012-09-18T21:19:09.240 に答える
0

この場合、これが有効な CSS であるかどうかが問題になります。ただし、両方で使用でき、有効である必要があります。ただし、すべてのブラウザがサポートしているわけではないことに注意してください。

ウィキペディア: データ URI スキーム

于 2012-09-18T21:20:59.223 に答える