Firefox, button and flexbox

Как интересно! Если вы хотите красиво расположить внутри кнопки несколько элементов, используя чудную технологию flexbox, то вас может ждать неприятный сюрприз. Внутри элемента button в Firefox 46.0.1 (в других не проверял) flexbox не работает :(
Как это хотелось бы видеть и как это выглядит в Хроме и даже в ИЕ11:
flexbox внутри button в Хроме
И как это в Firefox:
flexbox внтури кнопки в Firefox

See the Pen eZqEGy by Sergey Kirichenko (@oknechirik) on CodePen.

P.S. Для себя эту проблему решил, обернув содержимое кнопки div’ом.
P.P.S. И баг есть такой.

Update: проблема решена в Firefox 52!!!

О сколько нам открытий чудных :)

Только что узнал о замечательном псевдоэлементе ::-ms-clear. Он задаёт стиль кнопки для очистки текстового поля в браузерах семейства IE.
P.S. Не является стандартом.

Flexbox и растягивание вложенных элементов на всю ширину родителя

Если хотите, чтобы вложенные элементы, так сказать flex-items, заняли всю ширину родителя (если у вас flex-direction: row) или по высоте (если flex-direction: column), пропишите им свойство flex-grow, отличное от 0 (нуля), что задано по умолчанию.
P.S. Flexbox нереально крут :) Очень удобный инструмент для создания разметки. Вовсю стал его использовать только недавно.

Retina и фоновые картинки

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

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
    }
}

Вероятно я не был внимателен, читая этот рецепт. Оказалось, что недостаточно подпихнуть ретине картинку с удвоенным разрешением. Обязательным является прописывание свойства background-size. Например, так:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
        background-size: contain;
    }
}

Мне этого оказалось достаточно. Но может понадобиться и вписать явным образом размер под размер блока, которому нуден этот фон.

background-size: 100px 100px;

Как-то так:)

Bootstrap и универсальный селектор *

Есть в CSS универсальный селектор. Он позволяет выбрать все элементы на странице или же все элементы, вложенные в какой-либо другой, например:

* {
margin: 0;
padding: 0;
}

Эта запись обнуляет все отступы у всех элементов на странице. Или же так:


.classname * {
    color: red;
}

Так мы задаем красный цвет всем элементам, вложенным в блок с классом classname.
Первый вариант раньше был весьма популярен для глобального так называемого reset’а.
Но у универсального селектора есть недостаток — низкая производительность. И сейчас не рекомендуется использовать такой селектор. Для reset’а стилей в браузерах сейчас принято использовать различные варианты, например такой, как используется в шаблоне html5boilerplate.
Каково же было мое удивление обнаружить вот такую запись


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

в очень популярном сейчас фреймворке, как Bootstrap. Мало того, что здесь использован универсальный селектор, так здесь ещё происходит глобальная перезагрузка боксовой модели CSS. На моей практике необходимость переключать боксовую модель возникала не очень часто и для весьма ограниченного набора элементов. В Bootstrap же без этого правила не будет работать даже их сетка (grid).
Я уважаю опыт и знания разработчиков Bootstrap и последнее время часто использую их наработки, но в этом случае я совершенно с ними не согласен. И настоятельно не рекомендую использовать это стилевое правило.
Лучшим вариантом было бы добавить в таблицу стилей отдельные классы, например:


.border-box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__before:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__after:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__all,
.border-box__all:before
.border-box__all:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Я намеренно разделил правила на отдельные классы, потому как не всегда будет необходимость обрабатывать элементы и псевдо-элементы одинаково.
В общем, я сильно удивлен решением разработчиков Bootstrap.
P.S. Справедливости ради отмечу, что на стартовой странице Bootstrap’а указана эта особенность фреймворка.

Равномерно расположить картинки по ширине страницы

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

fig Самый простой вариант, который я сам использую – это использовать таблицу. Это, так скажем, не самое правильное использование таблицы, но зато самое простое и наименее времезатратное, что бывает важно.

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю ширину (table {width: 100%})

fig2

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

fig3 Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих больше отводится большее место), пустые ячейки сжались до минимальной ширины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание ширины ячейкам, эти ячейки будут растянуты по ширине содержимого, если только таблице на задано свойство table-layout:fixed.

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

Еще раз про inline-block (коротко)

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для IЕ 6 и 7 версий. Это необходимо, так как IЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия IЕ*/
}

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для IЕ.
Работает в IЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее — везде).
Для ФФ2 нужен костыль.

Правильная сокращенная запись шрифта

Использовал на корпоративном сайте краткую запись правила для шрифта:


body {
    font: 81.25%/1.5 Arial, Helvetica, sans-serif;
}

На работе LINUX (не умею готовить, и потому дико не люблю), потому работаю в Хроме (быстрее) и Файрфоксе (полезнее). VMWare умерла, а восстанавливать лень, потому проверяю в IЕ (благо основные посетители нашего сайта не IЕ-пользователи, хотя 25% немало, но можно смотреть иногда сквозь пальцы на мелкие баги в IЕ) от случая к случаю. И вот тут смотрю и вижу в IЕ7 дефолтные шрифты. Это был IЕ8 в режиме IЕ7. Причем встроенный тулбар показывает, что шрифт применяется какой-надо. Но на странице ни фига не Arial. Оказалось все просто. В Eclipse есть возможность отформатировать код (хоть и не совсем удачная реализация). И в какой-то момент случайно я отформатировал CSS. И это форматирование добавило кучу пробелов и переносов строк, в том числе и перед значением LINE-HEIGHT. Получилось вот так:


body {
    font: 81.25%/ 1.5 Arial, Helvetica, sans-serif;
}

И IЕ7 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?» Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол  прятался в мелочах.

Странная бага Оперы

Случайно столкнулся со странной багой в опере 9.64 и 10. Есть простой всем известный способ растянуть сайт на всю высоту окна браузера:

CSS

html, body {
    background:#fff;
    border:0;
    height:100%; /*trick*/
    margin:0;
    padding:0;
}
.wrap {
    background:red;/* для контраста*/
    min-height:100%;
    _height:100%;/* ie6 underscore hack*/
    margin:0 auto;/* расположим блок посередине экрана */
    width:90%;/*необязательно*/
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Странная бага оперы</title>

<link href="minheightbug.css" media="screen" type="text/css" rel="stylesheet">

</head>

<body>

<div class="wrap">немного текста для теста. 
Странная бага оперы с определением высоты блока</div>

 </body>

</html>

И вариант со стилями в самом .HTML файле, прописанными в HEAD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Странная бага оперы</title>

<style type="text/css">
html, body {
    background:#fff;
    height:100%;
    margin:0;
    padding:0;
}
.wrap {
    background:red;
    min-height:100%;
    margin:0 auto;
    width:90%;
}
</style type="text/css">


</head>

<body>

<div class="wrap">немного текста для теста. 
Странная бага оперы с определением высоты блока</div>

 </body>

</html>


(DOCTYPE не важно какой)
Простой общеизвестный способ. Но...
Игрался как-то с разметкой (чуть позже распишу с какой). Создал html-файл и начал писать стили в
HEAD, для скорости и чтоб не делать лишних телодвижений (еще один файл, переключаться из HTML в CSS). Начал тестить: ФФ — гут, Хром — гут, Сафари (вин) — гут, ИЕ (о чудо) — гут. И тут черед дошёл до оперы…
И я увидел, что блок WRAP не растягивается на всю высоту окна. Отресайзишь окно — растягивает. Обновишь — опять WRAP по высоте на свой контент.

Странная бага оперы
Странная бага оперы
то же самое после ресайза окна
то же самое после ресайза окна в опере

Решил посмотреть предыдущую работу, в которой использован этот же способ. Опера все показывает правильно. Одна разница: там стили подключены внешним файлом через LINK. Я в недоумении. Опера правильно применила все стили, прописанные в HEAD, кроме определения минимальной высоты. И только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.

  1. Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
  2. Да и неверно это в принципе писать стили в HEAD: растет размер страницы, стили не кешируются, если у вас больше, чем один шаблон, то править стили придется в нескольких местах

В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.