Unicodeセレクター名

誰もそうしなかった場合、CSSセレクター名にUnicode文字を使用できます。 一般的には。 :)



今考えてみましょう それの使用は何ですか？

小さな例。



丸みを帯びた通常のブロック：

CSSコード：

.rounded {

width: 400px;

margin: 32px;

background-color: #DDD;

color: #000;

}

.rounded-tl { background-image: url( 'i/tl.gif' ); background-repeat: no-repeat; background-position: top left; }

.rounded-tr { background-image: url( 'i/tr.gif' ); background-repeat: no-repeat; background-position: top right; }

.rounded-bl { background-image: url( 'i/bl.gif' ); background-repeat: no-repeat; background-position: bottom left; }

.rounded-br { background-image: url( 'i/br.gif' ); background-repeat: no-repeat; background-position: bottom right; padding: 18px; }



* This source code was highlighted with Source Code Highlighter .

HTMLコード：

< div class ="rounded" >

< div class ="rounded-tl" >

< div class ="rounded-tr" >

< div class ="rounded-bl" >

< div class ="rounded-br" >

< p > . :) </ p >

< p > CSS- . </ p >

</ div >

</ div >

</ div >

</ div >

</ div >



* This source code was highlighted with Source Code Highlighter .

しかし、次のようにできます：

.○

{

width: 400px;

margin: 32px;

background-color: #BBB;

color: #000;

}

.┌ { background-image: url( 'i/tl.gif' ); background-repeat: no-repeat; background-position: top left; }

.┐ { background-image: url( 'i/tr.gif' ); background-repeat: no-repeat; background-position: top right; }

.└ { background-image: url( 'i/bl.gif' ); background-repeat: no-repeat; background-position: bottom left; }

.┘ { background-image: url( 'i/br.gif' ); background-repeat: no-repeat; background-position: bottom right; padding: 18px; }





* This source code was highlighted with Source Code Highlighter .

HTMLコード内のクラス名を上記のものに置き換えると、同じことが得られますが、コードのサイズを小さくするだけで（もちろん疑わしい利点があります）、可視性が向上します。

< div class ="○" >

< div class ="┌" >

< div class ="┐" >

< div class ="└" >

< div class ="┘" >

< p > . :) </ p >

< p >     —   ,   ,     , ┌   (U+250C), ┐   (U+2510), └   (U+2514), ┘   (U+2518)   ○   (U+25CB). </ p >

< p > ○   □   (U+25A1), (   — ) . </ p >



</ div >

</ div >

</ div >

</ div >

</ div >



* This source code was highlighted with Source Code Highlighter .

使い方と場所-それは完全にあなた次第です、おそらくこのチップは価値のあるアプリケーションを見つけるでしょう。



アイデアをくれたジョナサン・スヌークに感謝します。