Display webkit box: Особенности –webkit-box или как «подружить» flexbox со старыми Safari / Хабр

Особенности –webkit-box или как «подружить» flexbox со старыми Safari / Хабр

Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.

А что делать остальным?

Если мы делаем красивый, качественный и суперадаптивный сайт, построенный на flexbox — так же красиво и качественно он будет отображаться только на устройствах, которые его грамотно интерпретируют.

На помощь в этом приходит так называемый старый синтаксис flexbox – display: box;
Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.

Однако всё не так просто:

1. Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
2. Странно работает с float.
3. Аналогов некоторым современным свойствам нет.

Это те ошибки, которые отловил лично я. В будущем список будет пополняться.

Как же решить уже найденные проблемы?

Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.

Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.

Почему бы просто не убрать float? – А вот почему:

Я приведу список всех рабочих аналогов flex-свойств и box-свойств:

-webkit-box-orient (flex-direction) – направление оси элементов.

Бывает нескольких видов в случае нового синтаксиса:

— column – колонка;
— row (по умолчанию) – строка;
— row-reverse – реверсия строки;
— column-reverse – реверсия колонки.

В случае старого синтаксиса я использую всего два свойства:

— vertical – колонка;
— horizontal – строка.

Есть еще два свойства, но они не работают как аналоги реверсивных свойств нового синтаксиса, поэтому я не использую их в своей практике.

Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.

-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к началу/концу родителя;
— space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов;
— center – центрирует элементы.

Старый синтаксис:

— start, end – аналог flex-start, flex-end;
— justify – аналог space-between;
— center – то же, что и center в новом.

У space-around НЕТ аналога!

-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к верху/низу родителя;
— baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний;
— center – центрирует элементы;
— stretch – растягивает дочерние блоки по высоте.

Старый синтаксис:

— start, end – аналог flex-start, flex-end.

Остальные свойства идентичны

-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе.
В обоих случаях задается цифрой.

Других вариантов либо нет, либо они не работают. Например:

-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.

И напоследок.

Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:

@media all and (-webkit-min-device-pixel-ratio:0) {
/*Всё, что вы сюда напишете, будет работать только с -webkit-*/
}

Делитесь своим опытом и удачи!

Автор статьи: Виктор Рябовол

box-sizing | htmlbook.ru

Internet Explorer	Chrome		Opera	Safari		Firefox	Android		iOS
8.0+	4.0+	10.0+	7.0+	3.1+	5.0+	1.0+	2.1+	4.0+	3.2+	5.0+

Краткая информация

Значение по умолчанию	content-box
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-ui/#box-sizing

Версии CSS

CSS 1	CSS 2	CSS 2. 1	CSS 3

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box

Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

border-box

Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

padding-box

Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

inherit

Наследует значение родителя.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
   .box1 { 
    background: #f0f0f0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    border: 2px solid #000; /* Параметры рамки */
   }
   .box2 { 
    background: #fc0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    margin-top: 10px; /* Отступ сверху */
    border: 2px solid #000; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body> 
  <div>Ширина с учетом значения свойства width, полей и границ.</div>
  <div>Ширина равна значению свойства width.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing.

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing.

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box.

Размеры

CSS по теме

• box-sizing

Статьи по теме

• DIV-ные колонки одинаковой высоты на CSS
• Блочная модель
• Использование box-sizing
• Ширина блока

Статьи по теме

Рецепты CSS

box-flex — CSS: Каскадные таблицы стилей

Нестандартные: Эта функция является нестандартной и не соответствует стандартам. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

Предупреждение: Это свойство для управления частями блочной модели XUL. Он не соответствует ни старым черновикам модуля CSS Flexible Box Layout для « box-flex » (которые были основаны на этом свойстве), ни поведению « -webkit-box-flex » (который основан на этих черновиках). ). См. flexbox для получения информации о текущем стандарте.

Свойства CSS -moz-box-flex и -webkit-box-flex определяют, как0013 -moz-box или -webkit-box увеличивается, чтобы заполнить блок, который его содержит, в направлении макета содержащего блока.

 /* <число> значений */
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3,5;
-вебкит-бокс-флекс: 0;
-вебкит-бокс-флекс: 2;
-webkit-box-flex: 3.5;
/* Глобальные значения */
-moz-box-flex: наследовать;
-moz-box-flex: начальный;
-moz-box-flex: вернуться;
-moz-box-flex: восстановить слой;
-moz-box-flex: не установлено;
-webkit-box-flex: наследовать;
-webkit-box-flex: начальный;
-webkit-box-flex: вернуться;
-webkit-box-flex: восстановить слой;
-webkit-box-flex: не установлено;
 

Свойство box-flex указано как . Если значение равно 0, поле не увеличивается. Если он больше 0, поле увеличивается, чтобы заполнить часть доступного пространства.

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

Элементы контента с нулевой гибкостью не увеличиваются.

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

Элементы контента с одинаковой гибкостью увеличиваются на одинаковые абсолютные величины.

Если значение flex установлено с использованием атрибута flex элемента, то стиль игнорируется.

Чтобы элементы XUL в содержащем блоке были одинакового размера, задайте для атрибута equalsize содержащего блока значение всегда . У этого атрибута нет соответствующего свойства CSS.

Уловка, позволяющая сделать все элементы содержимого в содержащем блоке одинакового размера, состоит в том, чтобы придать им всем фиксированный размер (например, height: 0 ), и такое же значение

box-flex больше нуля (например, -moz-box-flex: 1 ).

 коробка-гибкая =
  <число>
 

Настройка box-flex

 

  <голова>
    <метакодировка="UTF-8" />
    
    <стиль>
      div. example {
        дисплей: -moz-box;
        дисплей: -webkit-box;
        граница: 1px сплошной черный;
        ширина: 100%;
      }
      div.example > p:nth-child(1) {
        -moz-box-flex: 1; /* Мозилла */
        -вебкит-бокс-флекс: 1; /* Веб-кит */
        граница: 1px сплошной черный;
      }
      div.example > p:nth-child(2) {
        -moz-box-flex: 0; /* Мозилла */
        -вебкит-бокс-флекс: 0; /* Веб-кит */
        граница: 1px сплошной черный;
      }
    
  
  <тело>
    <дел>
      
Я расширюсь, чтобы заполнить дополнительное пространство
      
Я не буду расширяться
    

 .a{display:-webkit-box;ширина:300px;высота:100px;фон:#222}
.a div{-webkit-box-flex:1;высота:100px}
.a-1 {фон: красный}
.a-2 {фон: желтый}
.a-3 {фон: синий}
 

 

    
азбука
    
abcdddd
    
abcddddddddde