Кастомный подход для нормализации и сброса стилей (custom-reset.css)

  • Tutorial


Здесь я поделюсь своими наработками для нормализации и сброса стилей.
За несколько лет у меня сформировался небольшой файл, за основу которого, изначально, был взят нормалайз.

Почему нормалайз, а не ресет. Он заточен именно под кросбраузерность, что очень важно. Но в чистом виде он меня вообще не устраивал, различные отступы, бордеры и т. д. только мешали, потому я немного подогнал его под свои потребности, поудаляв то, что мне было не нужно.
Со временем файл разрастался, лишнее из нормалайза удалялось, недостающее добавлялось.
Основной целью его создания было максимально подготовить основу для любого проэкта, что по-моему получилось, даже очень удачно. Файл получился довольно универсальный, но все же перед подготовкой проэкта в него нужно заглядывать и возможно что-то коректировать.

Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css

Краткое описание


  • Возможность изменения тегов без ущерба верстке. Что соответствует принципу DRY ( — минимизация объема редактирования, необходимого для внесения изменений).
  • Полное обнуление браузерных стилей.
    То что элемент имеет стили по дефолту совершенно не значит, что они будут нужны именно в том, месте где используется этот тег.
  • Нормализация нужных браузерных штук.
  • IE 10+
  • Некоторые простые полезные снипеты.
  • и советы



Определение блочной модели


*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

Такое определение дает возможность переопределить box-sizing, в случае необходимости, для определенной области, например, если на проект был добавлен компомент у которого был box-sizing: content-box;

Базовые настройки


body {
  margin: 0; 
  background-color: #fff;
  line-height: 1; 
  text-rendering: optimizeLegibility;
  text-decoration-skip: objects;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

  • text-rendering — определяет как браузеру оптимизировать рендеринг текста.
    optimizeLegibility – качественное отображение важнее скорости, разрешает кернинг и лигатуры.
  • text-decoration-skip: objects;
    Делает подчеркивание с помощью text-decoration: underline; необрывистым (там где это работает).


  • -webkit-text-size-adjust: 100%; — запретить корректировку размера шрифта после изменения ориентации в iOS.
  • -webkit-font-smoothing: antialiased; — делает текст более тонким в Сафари на Маках (начертание сглаженное и четкое одновременно, приятно читать.).
  • -webkit-tap-highlight-color: transparent; — убирает синее подсвечивание при клике на девайсах.




focus это важно, а outline нет



:focus {
  outline: none;
}

Состояние фокуса это очень важный момент для взаимодействия с интерективными элементами. (Как и почему здесь). Но outline зачастую не вписывается в дизайн. И сами дизайнеры редко прорисовывают это состоние, потому частой практикой стало дублирование стилей ховера.

Это ленивый способ.


.no-touch {
  &:hover,
  &:focus {
    ...
  }
}

Нормальные дизайнеры всегда прорисовывают состояние фокуса.

Три основных состояния должны всегда присутствовать на каждом интерактивном элементе (:hover, :focus, :active).



Codepen

Отступы


Отступы обнулены, текстовые свойства наследуются.


p,
dd,
dl,
figure,
blockquote {
  margin: 0;
}
/* Совутую не забывать о списке определений <dl>. Семантика это хорошо.
Для более удобного использования можно позьзоваться дивом (валидно):
dl>div*3>dd{value}+dt{prop} */

blockquote, 
q {
  quotes: none;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

audio,
video {
  display: block;
}

img {
  display: block;
  border: none;
  /*max-width: 100%;*/
}

iframe {
  border: none;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

Если вам нужны отступы для пользовательского контента (а они нужны), должен быть свой класс обертка и свой стайлгайд.

Пример:


.description {
  h1,
  h2,
  h3,
  h4 {
    /* style */
  }
  
  p {
    /* style */
  }

    /* и т. д. */
}

Текстовый контент тоже нужно уметь правильно верстать выставляя правильные отступы и высоту строки.

Вот статья на эту тему.

О том, каким может быть пользовательский контент:



Текстовые элементы


Полное наследование. Ссылки больше не синие, стронг не болд, ем не италик. Em, strong это семантические элементы, они используются не для оформления. Например для названиях товаров, в карточках. То что они имеют по дефолту стили не значит, что они будут нужны именно в том, месте где используется этот тег.

Цвет и подчеркивание ссылки мешает когда эта ссылка в виде кнопки или в виде большой кнопки с картинкой и текстом.


a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr {
  border: none;
  text-decoration: none;
}

b,
strong {
  font-weight: inherit;
}

i,
em {
  font-style: inherit;
}

dfn {
  font-style: inherit;
}

mark {
  background-color: transparent;
  color: inherit;
}

small {
  font-size: inherit;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: inherit;
  line-height: 0;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

Элементы форм:


Удаляются полностью стили присвоенные кнопкам и инпутам, что может кому-то показаться спорным.

Бывает, возникают неудобства с кнопками при смене тегов, чаще всего это бывает с ссылки на кнопку и наоборот.


button,
input,
optgroup,
select,
textarea {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  font: inherit; /* По дефолту, шрифтовые свойства, для этих элементов не наследуются */
  color: inherit;
  letter-spacing: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-align: left;
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  cursor: pointer;
  -webkit-appearance: none;
}

textarea {
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border: none;
  padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: none;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

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

[type='search'] {
  outline: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; 
}

(Тег button нельзя использовать как флекс контейнер. На IOSах сломается.)

fieldset и legend



fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

legend {
  display: block; 
  padding: 0;
  white-space: normal;
}

Часто встречал, что эти семантические элементы форм использовались в декоратиыных целях.

Для такого:



Никогда так не делайте, это пример худшей практики. Вот пару примров с нормальной реализацией:

Пример 1, пример 2

(Тег fieldset нельзя использовать как флекс контейнер. Не работает просто.)

select


Отменяем стандартное отображение select'а


select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

→ Оформляем select сами: codepen

placeholder



::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
  transition: opacity .3s;
}

::-moz-placeholder {
  color: inherit;
  opacity: 1;
  transition: opacity .3s;
}

:-moz-placeholder {
  color: inherit;
  opacity: 1;
  transition: opacity .3s;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
  transition: opacity .3s;
}

:focus::-webkit-input-placeholder {
  opacity: 0;
}

:focus::-moz-placeholder {
  opacity: 0;
}

:focus:-moz-placeholder {
  opacity: 0;
}

:focus:-ms-input-placeholder {
  opacity: 0;
}

Плейсхолдер наслудует цвет. Исчезает при фокусе.



svg (работа с иконками)


Тег svg хоть и полноценный тег, который поддерживает любые свойства, я всегда использую для него обертку, которой и задаю размеры и цвет. Такой подход очень удобный для работы с спрайтами 2-х типов.

Расскажу, как мы работаем с иконками:

Иконочный шрифт мы не используем.

У нас есть 2 типа иконок:

— одноцветные
— цветные (иконки и мелкие изображения).

Все они в формате svg.

Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется. Выглядит это так:


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="search" viewBox="0 0 24 24">
    <path></path>
  </symbol>
</svg>

И инклюдится на страницу он так:


<svg class="alert__ico">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
</svg>

И стили для него: (этот код добавляется в файл)


svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

Для цветных используется css спрайт:


.icon-ico-color:after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D...;
}

И стили для него:


[class*='icon-']:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; 
}

Загружается css спрайт асинхронно


<script>
  $(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='../css/icons.min.css' />");
  })
</script>

Генерируется это, понятное дело, галпом.

Что дает такой подход

Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.


<div class="elem__ico">
  <svg class="alert__ico">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
  </svg>
</div>

<div class="elem__ico  icon-ico-color"></div>



hidden



[hidden] {
  display: none; // IE10
}

Атрибут, который скрывает элемент. Пригодится.

:disabled



:disabled,
.disabled {
  cursor: not-allowed;
}

Правильный курсор. Так как задизейбленной кнопкой может быть ссылка, то псевдокласс уже не сработает, так как ссылка не элемент формы. Для этого добавляйте класс.



::-ms-clear


Псевдоэлемент в инпуте IE для очистки текста.


::-ms-clear {
  display: none;
}

Убираем его.



:-webkit-autofill




:-webkit-autofill {
  box-shadow: 0 0 100px #fff inset;
  -webkit-text-fill-color: currentColor;
}

С помощью внутренней тени закрашиваем этот псевдоэлемент под нужный цвет. И наследует заданный цвет.

::selection



::selection {
  color: #fff;
  background-color: #004fe4;
}



Классы


.clearfix



.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

Хоть сейчас во всю используются флексы, не стоит забывать про флоаты, и тем более не стоит забывать про чистку потока для флоатов.

.visually-hidden



.visually-hidden {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

Для семантики: Когда надо спрятать заголовок, который должен быть, но его нет в дизайне. Скрытие этим способом не игнорируется скринридером.

Для кастомизация цекбоксов/радиобаттонов:



Скрывать с помощью display: none; или атрибута hidden плохая идея, так как инпут теряет способность получать фокус, а фокус (как мы знаем) это важно.

А если скрывать с помощью класса .visually-hidden то инпут не теряет способность получать фокус.

Метод «padding-bottom» для изображений (.cover-pic, .contain-pic.)


В работе с изображениями, а именно с тегом

<img>

есть некоторые сложности:

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

Метод «padding-bottom» отлично подходит для решения этих проблем. Контроль размеров изображения происходит за счет обертки.

<div class="img-wrap"> <img src="" alt=""> </div>

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

И чтоб этого не происходило, высота задается за счет padding в % для псевдоэлемента обертки (:before). Как известно padding в % берет значение ширины родителя, не зависимо заданы вертикальные или горизонтальные значения.

(padding в % некоректно отображается в мозиле, если он задан флекс итему).


.img-wrap {
  position: relative;
  width: 30%;
}

.img-wrap:before {
  content: '';
  display: block;
  padding-bottom: 60%;
}

Само изображение нужно спозиционировать абсолютно относительно обертки. Когда необходимо, чтоб изображение занимало все пространство (на подобии background-size: cover;). Используется класс .cover-pic


.cover-pic,
.contain-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cover-pic {
  object-fit: cover;
}

.contain-pic {
  object-fit: contain;
}

Когда необходимо, чтоб изображение занимало не все пространство (на подобии background-size: contain;). Используется класс .contain-pic

В итоге получается:

  • Изображение резинится.
  • Имеет нужные пропорции (заданы дизайном).
  • Не дергает контент при подгрузке.

Из недостатков: Поддержка object-fit IE. Потому приходится использовать полифил.

Тем же методом сверстаны изображения в инстаграмме, только они нарезаются нужной формы и необходимость в object-fit отпадает.
Пример

Прижатие футера



html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.footer-page {
  margin-top: auto;
}

Фикс при прижатии футера для IE. В блоке с min-height (которым в данном случае служит body) flex некоректно работает.


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  html {
    display: flex;
    flex-direction: column;
  }
}

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

Codepen



Так почему не ресет или не нормалайз? Они не могут полноценно подготовить проект, в любом случае приходится немало дописывать, и потому практически у каждого верстальщика есть свои наработки.

Спасибо, что прочитали мою статью, надеюсь она будет вам полезна. Вопросы и предложения, идеи и замечания приветствуются.

P. S. Советую ознакомиться с публикацией Организация отступов в верстке (margin/padding). И советую использовать css линтеры. И кому интересно, может решить css задачку.
Поделиться публикацией

Похожие публикации

Комментарии 34

    +1
    Большое спасибо за статью. Сам давно использую кастомный reset, но некоторые фишки стали откровением.
      +1
      У вас ошибки в файле. Например, в статье все верно:
      blockquote,
      q{
      quotes: none;
      }

      А в файле:
      
      blockquote,
      q,
      quotes: none;
      }
      

      Или я чего-то не понимаю?
        0
        да, спасибо, поправлю
        +1
        Кину в закладки. Мерси!
          +1
          Статья любопытная, натолкнула на некоторый мысли.
          Но спорных моментов просто море. Перечислю только то, что бросается в глаза навскидку.

          1. box-sizing: inherit;
          Идея с наследованием какбы понятна, но на практике смысла в этом нет никакого. В реальности модель border-box используется почти везде, а padding/content-box нужны в редких специфических ситуациях. И уж тем более, никогда не приходится их распространять на потомков.

          2.
          body {
            background-color: #fff;
          }
          Главный фон надо указывать для html, а не для body.

          3. line-height: 1.15;
          Это откуда и зачем? 16px * 1.15 = 18.4 — зачем мне строки дробной высоты?

          4. font-family: monospace, monospace;
          Лучше сразу указать человеческий фонт-стек — Consolas, Monaco и вот это всё.

          5.
          b,
          strong {
            font-weight: inherit;
          }
          
          i,
          em {
            font-style: inherit;
          }
          
          Как верно замечено в тексте, strong/em — это семантические элементы, для них сброс оправдан. А вот b/i — именно оформительские, их не нужно трогать!

          6.
          small {
            font-size: inherit;
          }
          
          Но комментс.

          7.
          select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
          }

          Большой перегиб палки. Кастомное оформление селектов используется далеко не всегда и ломать их вот так просто по умолчанию нельзя!

          8.
          Для кастомизация цекбоксов/радиобаттонов:

          если скрывать с помощью класса .visually-hidden то инпут не теряет способность получать фокус.

          А самый простой способ — position: absolute; opacity: 0; и больше ничего не надо.

          9. Прижатие футера
          body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
          }
          
          Я понимаю, что vh моднее процентов, но следует использовать именно проценты.
            0
            1. box-sizing: случаи были.
            2. Фон для боди: html наследует фон. Уже привык что хтмлю ничего не пишут. а так вообще не принципиально. мб подкинете инфы на эту тему?
            3. line-height: да
            4. font-family ни разу неюзабельная для меня штука. почитаю о шрифтах, мб поправлю.
            5. i, b тоже остаются семантическими. но маловесомыми.
              Как можно было заметить, i очень часто используют для иконок.
              b часто используют для выделения текста, не только болдном, но и цветом. и иногда используют для декора.
            6. small. здесь в любом случае размер шрифта надо задавать руками(по дизайну).
            7. Про селект, это тот случай, когда можно ненужное удалить.
              Мне в последнее время не попадаются селекты, где можно оставить его с родной стрелкой.
            8. .visually-hidden: класс нужный, и раз он уже есть, то чтоб скрывать инпуты он отлично подходит. да было бы хорошо, если б хоть и вашим способом скрывали, лишь бы не дисплей ноном.
            9. Футер: здесь как посмотреть.
              не надо писать для html стили. и в айфоне 10 при viewport-fit=cover в хроме, футер до низа экрана немного не доставал. и были другие приколы с % на девайсах. не помню точно что именно уже.
              0
              1. Случаи чего, наследования? Верю, что могли быть. Но это настолько большая редкость, что их лучше прописать руками для конкретного элемента, чем фигачить в стили по умолчанию.

              2. Если высота body меньше высоты окна браузера, цвет фона не будет его (окно) заполнять: codepen.io/anon/pen/NLWgKa
              И стили хтмлу очень даже пишут — хотя бы размер шрифта, потому что rem будет ссылаться именно на него.

              4. Не понял насчет неюзабельности font-family. Есть какие-то альтернативы?

              5. Специально полез в спеку… Мда, похоже они там что-то опять намутили. Но отчетливо помню, что когда переходили на html5, эти тэги объявили оформительскими без изменения значимости. А сейчас опять иначе.

              6. Ну для sub/sub вы почему-то задали некие ненулевые значения по умолчанию? Тут случай совершенно аналогичен. Это тег не с расплывчатой (как strong), а совершенно конкретной семантикой, поэтому ему можно и нужно задать некое адекватное значение по умолчанию. А переопределить всегда можно.

              9. Если на сайте будет (или непроизвольно появится из-за непредвиденного контента) горизонтальный скролл-бар, 100vh сразу станут больше, чем 100%.
                0
                1. Вы предлагаете такую запись?
                * {box-sizing: border-box;}
                

                Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.
                Если нет, то какую?

                2. Если высота body меньше высоты окна браузера, цвет фона не будет его заполнять, только в том случае если задан цвет и html и body, как у вас.
                codepen.io/yurch-html/pen/pOowVG
                А так html наследует bg body.
                Да шрифт сам юзал.

                4. Я имел в виду, что оно мне не пригождалось.

                6. для этих тегов да, чтоб было понятно что менять чтоб подвинуть в нужное место.
                — использовался раньше для того, чтобы просто сделать текст помельче, теперь же он предназначен для пометок и небольших надписей.
                9. сам 100vh не оч воспринимаю. но из-за тех багов отказвлся пока от %. со временем проработаю 100%.
                  0
                  Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.
                  Я имею в виду, что такого случая не будет с вероятностью 99,(9)%.
                  Раньше (до флексов, гридов, единиц vw и прочих благ цивилизации) content/padding-box использовались относительно часто — пригождался для некоторых контейнеров в лейауте. Сейчас они реально не нужны почти никогда. Исключения составляют некоторые очень специфические ситуации, и всегда речь идет об 1-2 элементах-обертках, внутри которых нужно вернуться обратно к человеческому border-box. Какие 50 тегов? Окститесь.

                  Насчет font-family — как это не пригождался? o_O
                  Неужели вы предлагаете пользоваться исключительно свойством font? Это плохая практика. Или может я что-то недопонимаю.
                    0
                    я имею в виду тег с моноспейсом. pre и тд.
                    0
                    Я заинтересовался вопросом фона html/body, полез в спеку и действительно там такое написано: www.w3.org/TR/css-backgrounds-3/#body-background
                    И написано довольно давно (проследил историю документа до 2012 года, дальше лень; протестировал в IE11 — работает).

                    С другой стороны, хотя такое поведение и определено в стандарте, и довольно логично… Лично мне полагаться на него как-то стремновато — ведь его легко поломать. Если что-то можно определить явно, лучше определить явно, а не надеяться на косвенные механизмы.

                    С третьей стороны, фон страницы вообще лучше не трогать на уровне глобального ресета — это уровень ответственности конкретного сайта/приложения.
                      0
                      Как по мне, это вообще не принципиально. Лично я не встречал браузеров, где боди был бы не белым. В этой песочнице jsfiddle только видел, от этого и решил фон добавить.
                      Вы встречали мб браузеры с не белым боди?
                        +1
                        Кажется, браузеры должны подхватывать эту настройку из системы. Во всяком случае под Виндой — там есть параметр типа «фон документов». Много лет назад, в студенчестве, я ставил в системе светло-серый и все текстовые редакторы становились такого цвета. И кажется, браузеры должны тоже. Но на 100% утверждать не возьмусь, возможно, сейчас уже что-то поменялось.
                    0
                    Все таки. Протестил я проценты. И оказалось, что на девайсах проценты лучше чем vh. На десктопе без разницы в принципе.
                      0
                      На десктопе тоже есть разница, и выше я уже объяснял почему. Если на сайте есть вертикальный/горизонтальный скролл-бар, сразу появляется несоответствие 100vw/vh != 100%. И в обратную сторону: при некоторых условиях, эти единицы сами могут спровоцировать нежелательное появление скролла.
                      Во всяком случае, под Windows так. На Маке скролл-бар работает подобно мобильным девайсам, не отъедая пиксели от вьюпорта.
                  0
                  8. Я прописываю position:absolute; left:-9999%;
                  С прозрачностью в одном случае были свои специфичные сложности.
                    0
                    Не катит. В случае с чекбоксами они должны оставаться кликабельными. Как они будут кликабельными с позицией -100500%?
                      0
                      стилизуется лейбл
                        0
                        Я перепутал: лейбл терял у меня кликабельность при сокрытии чекбокса через display. И кажется, даже через visibility тоже.
                  +1
                  Попробовал решить css-задачу: мой_вариант
                  Может, кто подскажет, как заполнить бэкграундом всю высоту контейнера, как было изначально?
                  Или я неправильно подошел к вопросу? Изменения только в одном блоке:

                  body > div > div > div > div {
                    position: absolute;
                  ++top: 50%;  /* было 0 */
                    left: 0;
                    background: rgba(0, 0, 0, .4);
                    width: 100%;
                  --/* height: 100%; */
                    font-size: 24px;
                    color: #fff;
                    text-align: center;
                    transition:.3s;
                  ++opacity: 1; /* для удобства отладки */
                  ++transform: translateY(-50%); /* верт. выравнивание с top:50% */
                  }

                  Пробовал расширить по вертикали паддингом — но он должен быть разным для каждого из трех блоков, что противоречит условию задачи. Правда, про бэкграунд в условии ничего не сказано, а текст-то я выровнял. ))
                    0
                    направление у вас правильное
                      +1
                      Мой вариант «в лоб»: codepen.io/anon/pen/XPWezY… лень сильно ковыряться
                        0
                        оно)
                          0
                          Спасибо за подсказку! Если взять отсюда «overflow: hidden;» — то мой вариант с паддингами тоже прокатывает. И вместо двух блоков с «after» просто добавляется одна строка «padding: 50% 0;» =)
                        0
                        .
                          0
                          -webkit-tap-highlight-color: transparent; — убирает синее подсвечивание при клике на девайсах.

                          Тоже раньше всегда прописывал это правило. Но один раз забыл. Некоторое время поюзал на телефоне с этим подсвечиванием тач-а… оказалось очень удобно и к тому же нативно. Сразу видно клацнулось оно или палец жирный..)

                          Стилизация селектов себе дороже.
                          Ввёл для себя правило всеми способами уговорить оставить все интерактивные контролы нативными. В итоге они будут выглядеть так, как привыкли пользователи соответствующей оси/браузера/устройства. И браузеру легче переварить, и скринридеры наиболее адекватно отработают, и поддержка клавиатуры из коробки.
                            0
                            как правило, на интерективных всегда есть оформленный псевдокласс :active, и по нему видно, был клик или нет.
                            В селекте стилизируется сам селект, это ж не js плагин подключается. Тут просто стрелку самому надо сделать под дизайн. На сколько я знаю, на маках сильно отличается стрелка(двойная). Ну если можно оставить нативное, то это конечно хорошо.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              в статье объясняется, и приводится более подходящее решение.
                                –1

                                Ховеры рисуют, чтобы было симпатично (градиентик сдвинулся, цвет стал бледнее), аутлайны нужны для того, чтобы явно говорить «ты здесь, этот элемент активный». Ваш дефолт не только бесполезный, но и вредный.

                                  0
                                  По поводу outline:
                                  Фокус это состояние, а аутлайн это свойство, которое можно заменить другим более подходящим свойством, если это нужно.

                                  Взять к примеру требования по верстке HTML Academy.
                                  Доступность
                                  Д17. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
                                  Активное состояние интерактивных элементов при нажатии или фокусе с клавиатуры должно оставаться либо встроенным браузерным, либо быть равноценно переназначено. В таком случае по интерактивным элементам сайта можно передвигаться с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии.

                                  Стандартное требование в принципе.
                                  Здесь дефолтная обводка убирается для замены на дизайнерскую. Если вам этого делать не нужно, то никто не заставляет.
                                  Этот момент абсолютно не спорный, когда жесткие требования к дизайну, то это обнуление надо, когда требование аутлайн — то аутлайн.

                                  По поводу бесполезности: непонятна ваша критичность.

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

                                    0
                                    Допустим я пишу дизайнерские обводки себе в классах, зачем мне оставлять это свойство?
                                    :focus {
                                    outline: none;
                                    }
                                      0
                                      Вот для примера гифка.
                                      image
                                      Фокус в том же стиле, что и кнопка.(здесь аутлайн был бы лишним)
                                      Вряд ли будет возможность так просто все стандартизировать пара классами.
                              +1
                              Крутая статья! Узнала много интересных вещей. Картинки паддинг боттом практичная штука,
                              автофил надо пересматривать будет, но хорошо, что сразу есть способ решения.
                              P.S. outline: none пока обнулять не буду.

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое