Pull to refresh
0
ex-Wargaming
Издатель и разработчик free-to-play MMO

Голые пятницы #1

Reading time 3 min
Views 38K
голые пятницы

Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения.

Новые единицы измерения


Не так давно к плеяде единиц измерения CSS примкнуло новое семейство:
  • vw (viewport width) — 1 процент от ширины окна браузера;
  • vh (viewport height) — 1 процент от высоты окна браузера;
  • vmin и vmax — выбирают среди vw или vh меньшее или большее значение.

Об этих единицах уже писали на хабре в бородатом 2011-м. Зачем же мы снова пишем о них? Дело в том, что они уже вполне неплохо поддерживаются браузерами.

Зачем они нужны? Они значительно упрощают верстку объектов, напрямую зависящих от размеров окна. Больше никаких процентов от родительских блоков, и, упаси боже, JS.
К примеру, можно очень удобно задавать размеры шрифта:
.some-text {
    font-size: 100vh;
    line-height: 100vh;
}



Или поместить резиновый попап в центре страницы:
.blackSquare {
    background: black;
    position: fixed;
    height: 50vh;
    width: 50vw;
    left: 25vw;
    top: 25vh;
}

Согласитесь, выглядит лаконично.

Интересным примером использования новых единиц измерения поделился пользователь DonSinDRom. Суть его в том, что текст практически всегда заполняет собой родительский блок, независимо от ширины и высоты.

Противопоказания
  • IE 9 признает обозначение «vm» вместо «vmin»;
  • iOS7 может работать с «vh» с багами;
  • Поддержка свойства «vmax» пока недостаточно полная для использования.


Стилизация выделенного текста


Всего парой строк кода мы можем изменить выделение текста на всем сайте:
*::selection {
    color: #fff;
    background: #000;
}
*::-moz-selection {    /*Только Firefox до сих пор использует префикс*/
    color: #fff;
    background: #000;
}


Помимо цвета для текста и фона, можно также задавать text-shadow!

У свойства хорошая поддержка: IE9+, все популярные настольные браузеры и даже Android последних версий.

Конечно, такие украшательства подойдут не для каждого сайта, но порой они смотрятся очень симпатично и уместно.

Отступы в кнопках Firefox


Браузер Firefox рассчитывает отступы в кнопках отличными от других браузеров методами. По какой-то причине, он добавляет дополнительные внутренние отступы.

отступы в firefox

Исправить это можно таким вот хитрым способом:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
    padding:0;
}


Скролл в блоках на тач устройствах


Если у вас на странице есть блоки с внутренним скроллом, помимо overflow: scroll / auto, обязательно добавьте к нему свойство

-webkit-overflow-scrolling: touch;

Дело в том, что мобильные браузеры порой не очень корректно работают со свойством overflow: scroll, и пролистывают всю страницу вместо нужного блока. А если у браузера еще прячется адресная строка, работа с такими блоками вовсе может превратиться в полный хаос. И здесь ощутимо помогает -webkit-overflow-scrolling: нужный блок скроллится намного охотнее. Это тяжело показать на картинке, просто попробуйте, и почувствуйте разницу)

Color + Border = Border-Color


Не все знают, что если элементу задать цвет текста, он автоматически определяется и как цвет границы этого элемента:
input[type="text"] {
    color: red;
    border: 1px solid;
}



Это может быть полезно при стилизации полей и псевдоссылок (ссылок с пунктирными границами), так как у них цвета текста и границ часто совпадают.

На сегодня все. Надеемся, вы узнали для себя что-то новое! До скорых встреч!
Only registered users can participate in poll. Log in, please.
Оказалось ли для вас полезной эта подборка?
52.8% Да, узнал много нового; 716
39.31% Новыми для меня оказалось 1-2 рецепта; 533
7.89% Все это я уже знал. 107
1356 users voted. 307 users abstained.
Tags:
Hubs:
+64
Comments 22
Comments Comments 22

Articles

Information

Website
lesta.ru
Registered
Founded
Employees
501–1,000 employees
Location
Россия