Как стать автором
Обновить
0
ex-Wargaming
Издатель и разработчик free-to-play MMO

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

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

голые пятницы

Стилизация 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";
}

стилизованный checkboxc

Как видите, вся соль в псевдоэлементах и псевдоселекторе :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;    
}

анимированный стилизованный checkbox

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

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


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

Давайте создадим 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%;
}

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



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

Счетчики на чистом 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" выведет только четные числа).

css counter

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

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


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

.block {
    transform: translatez(0);
}

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

Классы на Unicode


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

Классы на Unicode

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

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


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


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

body {
    :) background: pink;
}


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

На сегодня все. Надеемся, это подборка была удачной. До скорых встреч.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Понравилась ли подборка?
60.13% Да, узнал много нового; 671
31.99% Новыми для меня оказалось 1-2 рецепта; 357
7.89% Все это я уже знал. 88
Проголосовали 1116 пользователей. Воздержался 141 пользователь.
Теги:
Хабы:
+42
Комментарии 39
Комментарии Комментарии 39

Публикации

Информация

Сайт
lesta.ru
Дата регистрации
Дата основания
Численность
501–1 000 человек
Местоположение
Россия

Истории