CSSクラスは、「 - 」私自身の個人的なスタイルでサファリ

Question

では無視され、私はそのような

<div class="button --small --red"></div> 

しかし、私のように、コマンドライン引数に似た構文を持つ小さなヘルパーCSSクラスを追加気に入っSafariとiOSでは--という接頭辞が付いているクラスは無視されていますが、FirefoxとChromeでは期待どおりに動作するようです。これには何らかの理由がありますか？

Answer 1

CSS 2.1 it is invalid grammarと識別子については、最新のCSS3（see the "railroad tracks"）の推奨事項と同じです。ここでCSS 2.1に関連するルールは、次のとおり

ident  -?{nmstart}{nmchar}* 
nmstart  [_a-z]|{nonascii}|{escape} 
nmchar  [_a-z0-9-]|{nonascii}|{escape} 

識別子は任意-（0x2d）で開始することができます。 2番目の文字は制限付きnmstartのもので、-またはASCII数字にすることはできません。

--fooを識別子として受け入れるブラウザでは、「よりリラックスした」ルール（必要に応じて分類）を使用しています。

---

本当に混乱/ファンシー/技術的な取得したい場合は、{nonascii}に準拠して、0x240よりも高いCPを持つ任意のUnicode文字は、二番目の文字として使用することができます - これはhyphen/minus-like charactersの広い範囲を含みます。ブラウザの相互運用性と持続可能性に関するメーリングリストへ：最初の2つのEN DASH（0x2013）文字で、後者は単一のEM DASH（0x2014）文字です：

<div class="button ––small —red"></div> 

これを実行しないでください。セレクタ/コードのいずれかでデバッグすることをお勧めします。