Подборка занимательных CSS рецептов «Голые пятницы #2»

В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

bbf038e94de346f4848dbbdd05f64bbe

Стилизация checkbox и radiobutton

По традиции, начнем с рубрики «пыльные полки». На хабре уже писали, и не один раз, как стилизовать инпуты без JavaScript. Но мы пойдем немного дальше, и откажемся также от картинок:

    <input type="checkbox" id="check" name="check" />
    <label for="check">Checkbox</label>

 

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {
    content: "";
    border: 1px solid #000;
    font-size: 11px;    
    line-height: 10px;
    margin: 0 5px 0 0;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: middle;
}

input[type=checkbox]:checked + label:before {
    content: "\2713";
}

3c49d0bd93ce48fc97bc2cea812158db

Как видите, вся соль в псевдоэлементах и псевдоселекторе :checked (IE9+). В коде выше мы прячем оригинальный инпут, вместо него выводим стилизованный псевдоэлемент, и при клике показываем символ Unicode в свойстве content.

Обратите внимание, что форма записи символа Unicode в CSS отличается от таковой в HTML. Здесь через слеш указывается номер символа, тогда как HTML код будет выглядеть так: &#10003;.

Давайте же пойдем еще дальше и АНИМИРУЕМ наш checkbox:

input[type=checkbox] + label:before {
    content: "\2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
    color: #000;
}

или radiobutton:

input[type=radio] + label:before {
    content: "\26AB";
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 0;    
    transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
    font-size: 10px;    
}

0b47f606c78746b0bbe14f50567f4222

Инпутов такого рода в интернете пока что маловато, поэтому дерзайте!
Полный список символов юникода можно посмотреть здесь. Поиграться с кодом — здесь

Вертикальные отступы элемента, заданные в процентах

Невероятно, но факт. Вертикальные отступы в процентах пересчитываются исходя из ширины, а не высоты родительского элемента.

Давайте создадим 2 блока:

<div class="parent">
    <div class="child"></div>
</div>

 

.parent {
    height: 400px;
    width: 200px;
}
.child {
    height: 50%;
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
}

По идее, дочерний блок должен заполнить родителя по высоте. Но что мы видим?

e5571ec5936d482c93f0187c97b2dee2

Т.к. проценты высчитываются от ширины родителя, высоты не хватает. Этот нюанс нужно иметь ввиду.

Счетчики на чистом CSS

Немногие знают, что еще со времен IE8 силами одного только CSS можно вести счет элементов.

<ol class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

 

.list {
    counter-reset: i; //обнуляем счетчик
}
.list > li {
    counter-increment: i; //присваиваем счетчику идентификатор
}
.list li:after {
    content: "[" counter(i) "]"; //выводим значение
}

В свойстве counter-reset мы задаем произвольный иденитификатор (или несколько), а также начальное значение (по умолчанию = 0).
В свойстве counter-increment после ссылки на идентификатор также можно указывать число. Оно будет определять значение приращения счетчика (например, «counter-increment: i 2» выведет только четные числа).

f25b181609934a23b2725b211e5b672e

Думаете, это можно использовать только для упорядоченных списков? А вот и нет! Счетчик работает со всеми элементами.

Включение аппаратного ускорения

Порой анимация некоторых элементов тормозит на слабых машинах и мобильных устройствах. Довольно популярным методом исправить это является включение аппаратного ускорения при отображении нужного элемента:

.block {
    transform: translatez(0);
}

В статике вы не заметите никакой разницы, однако браузер понимает, что элемент следует обрабатывать как трехмерный, для чего включает акселерацию. Пока нет нормальной поддержки специально для этого предназначенного свойства will-change, данный способ вполне сойдет.

Классы на Unicode

Прогресс не стоит на месте, и теперь вы можете именовать классы как душе угодно:

.❤ {
    ...
}
.☢ {
    ...
}
.☭ {
    ...
}
.★ {
    ...
}
.☯ {
    ...
}

649bd2a4210848399e40cd1350cde48f

Теперь скучные классы, типа «arrow» можно заменить на ««! Долой скучные буквы!

А на самом деле
Конечно же, это была шутка. В серьезных проектах классы лучше именовать по старинке, ибо utf-8 может быть включен не везде.

 

Бонус для ретроградов

Если вам до сих пор приходится поддерживать IE7 и писать для него опостылевшие хаки через скучный символ «*«, для вас есть отличная новость! Теперь хаки можно обозначать веселым смайликом!

body {
    :) background: pink;
}

Не правда ли, такая запись намного приятнее глазу? Есть в ней какой-то символизм. После смайлика даже можно ставить пробел, и это никак не повлияет на последующие свойства!

На сегодня все. Надеемся, это подборка была удачной. До скорых встреч.