Блог «Дивасофт»

Каждый фронтенд-разработчик в своей практике сталкивался с элементами дизайна, которые ни в верстке, ни в стилях, ни в js не предусматривались. Откуда они взялись? Отладчик – верный помощник любого фронтендера, как на зло, так же ничем помочь не может, он просто ничего не показывает.

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

Часто появляющимися псевдоэлементами может похвалиться Google Chrome, впрочем, другим движкам на webkit так же ничего не мешает отличиться.

Надо методично стилизовать все внутренние стили браузера.

Например, довольно часто встречается баг фича с input, когда на input с типом search появляется «синий крестик». На самом деле это кнопка, которая чистит ввод поиска пользователя. Кнопка может и полезная, но практика показывает, что с точки зрения дизайна сайта она совершенно не приемлема и не вписывается в общую концепцию. Убирается эта кнопка по средствам следующей конструкции:

input[type=search]{ -webkit-appearance: none;}

Еще одним интересным примером является настройка placeholder все в том же input. Помимо стандартного: цвета шрифта и бекграунда формы, выявилась интересная особенность ее отображения внешнего вида все в том же Google Chrome. Суть проблемы заключалась в том, что слово, заложенное в placeholder на темном бекграунде так же оставалось темным. Несмотря на значение color: #fff для input, ничего не менялось. Решение представлено ниже. Обратите внимание на двойное двоеточие. Если оно будет одинарным, то правило не сработает:

input[type=text]::placeholder{opacity: 1; color: #fff;}

В <input type=“number”> в разных браузерах появляются «стрелочки» прокрутки цифр. Для разных браузеров убираются они по-разному.

Для браузеров на webkit:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}

Для Firefox:

input[type='number'] {
-moz-appearance: textfield;
}

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