Pull to refresh

Юникодовые имена селекторов

Reading time 3 min
Views 652
CSS *
Если кто не знал — в именах CSS-селекторов можно использовать юникодовые символы. Вообще любые. :)

Теперь подумаем, какой с этого толк?
Небольшой пример.

Обычный блок со скругленными краями:
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.


Как и где использовать — дело всецело ваше, возможно, этой фишке найдется достойное применение.

За идею спасибо Джонатану Снуку
Tags:
Hubs:
Total votes 110: ↑94 and ↓16 +78
Comments 76
Comments Comments 76

Posts