Если кто не знал — в именах CSS-селекторов можно использовать юникодовые символы. Вообще любые. :)
Теперь подумаем, какой с этого толк?
Небольшой пример.
Обычный блок со скругленными краями:
CSS-код:
HTML-код:
Но можно ведь сделать и так:
Заменив имена классов в HTML-коде на вышенаписанные, получим то же самое, только уменьшив размер кода (сомнительное, конечно, преимущество), и повысив наглядность:
Как и где использовать — дело всецело ваше, возможно, этой фишке найдется достойное применение.
За идею спасибо Джонатану Снуку
Теперь подумаем, какой с этого толк?
Небольшой пример.
Обычный блок со скругленными краями:
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.
Как и где использовать — дело всецело ваше, возможно, этой фишке найдется достойное применение.
За идею спасибо Джонатану Снуку