Какой браузер из представленных корректно без багов поддерживает все значения свойства display
Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.
История flexbox
Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.
Flexbox был реализован экспериментальным путём в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счёте префиксы всё равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.
В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.
Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.
В конечном счёте спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновлённой версии спецификации отличная.
Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде display: box или display: flexbox , то это уже устаревшая информация.
Поддержка браузерами
Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:
- Internet Explorer 10, который внедрил display: flexbox версию спецификации с префиксом -ms- .
- UC Browser, который все ещё поддерживает спецификацию версии 2009 год с display: box и префиксом -webkit- .
Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.
Common issues
The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.
If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.
Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.
Useful fallback techniques
Given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.
Floated items
“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - 3. Flex Containers
In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.
You can test the fallback behaviour by removing display: flex from the wrapper.
display: inline-block
Once an inline-block item becomes a flex item, it is block ified and so behavior of display: inline-block like preserving white space between items no longer applies.
Remove display: flex to see the fallback behavior. You'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.
display: table-
The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.
If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.
If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.
“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - 4. Flex Items
The vertical-align property
The live example below demonstrates use of the vertical-align property along with display: inline-block . Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.
Feature Queries and flexbox
You can use feature queries to detect flexbox support:
Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:
For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.
Conclusion
While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.
Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».
Inline-block, заманчивое значение для свойства display, которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:
и плакал.
Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.
Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.
Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block:
Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:
Кажется, будто что-то не так с вертикальным выравниванием. Говоря по правде, никаких ошибок нет, это как раз корректное поведение браузера, но совсем не тот результат, которого мы бы хотели.
А происходит здесь следующее, базовая линия (baseline) каждого элемента выравнивается с базовой линией родительского элемента . Вы спросите, что такое базовая линия? Лучше один раз увидеть, чем сто раз услышать:
Базовая линия на рисунке выше обозначена линией, идущей через основание символов. Значением по-умолчанию для свойства vertical-align у inline и inline-block элементов является baseline. Это значит, что базовая линия элементов выравнивается с базовой линией родителя. На рисунке ниже представлен пример такого выравнивания:
Как видите, каждая базовая линия блоков на рисунке выше выравнена по базовой линии текста «This is the baseline», который не является элементом . Это просто текстовый узел, находящийся непосредственно в , помещенный туда в качестве индикатора расположения базовой линии элемента .
Получить желаемый изначально вариант выравнивания довольно просто, достаточно для свойства vertical-align указать значение top и получить в результате отличную сетку:
Вот только это не работает в Firefox 2, IE 6 и 7:
Для начала займемся Firefox 2.
Firefox 2 не поддерживает значение inline-block, зато отлично понимает специфичное для Мозиллы значение -moz-inline-stack для свойства display. Оно приводит к результатам, подобным действию inline-block. Когда мы добавляем его перед display: inline-block, то Firefox 2 игнорирует вышеуказанное, так как не понимает его, и использует -moz-inline-stack. Другие браузеры используют inline-block, игнорируя непонятное для них -moz-inline-stack.
К сожалению, это вызывает небольшой баг:
Честно, я не знаю, что является его причиной. К счастью, лечится он довольно просто обертыванием всего содержимого элемента дополнительным .
Теперь перейдем к IE 7. Он тоже не поддерживает inline-block, но мы можем использовать трюк, благодаря которому элементы будут выводиться на экран так, будто используют значение inline-block. Как? Будем использовать hasLayout, волшебное свойство IE, делающее доступными многие манипуляции. Вы не можете явно указать для элемента hasLayout: true или сделать это каким-либо подобным простым образом, однако можете запустить механизм, указав zoom: 1.
Технически элементы с hasLayout, установленным в значение true сами отвечают за рендеринг самих себя и дочерних элементов. Объедините это с min-height и width, и получите результат, очень близкий к display: block. Это как магический порошок, заставляющий исчезать все появляющиеся при отображении проблемы.
Когда мы добавим zoom: 1 и *display: inline (звездочка является хаком для IE 6 и IE 7) для элементов , то научим IE 7 отображать их совсем как inline-block:
Почти готово. Остался лишь IE 6:
IE 6 не поддерживает min-height, но взамен мы можем использовать его неверное обращение к свойству height. Установим для _height (обратите внимание на подчеркивание спереди) значение в 250px и получим все элементы с нужной высотой. Если же содержимое превысит указанную величину, то просто растянет свой контейнер. Все остальные браузеры проигнорируют _height.
В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.
CSS проверка на поддержку
Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции CSS.supports() , про которую я буду писать ниже. С помощью этой директивы, можно проверить браузер на поддержку указанного CSS свойства.
Общий вид директивы
Пример использования
Если браузер поддерживает свойство display: flex , то он запустит свойства из директивы.
Ключевое слово not
С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.
Если браузер не поддерживает display: flex , то он запустит свойства из директивы
Ключевое слово or
Используя ключевое слово or, можно осуществить проверку на поддержку хотя бы одного свойства из указанных.
Если браузер поддерживает display: flex или display: -webkit-flex , то он запустит свойства из директивы
Ключевое слово and
Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.
Если браузер поддерживает display: flex и display: -webkit-flex , то он запустит свойства из директивы
Множественные проверки и условия
Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то он запустит свойства из директивы
JavaScript проверка на поддержку
Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.
-
С помощью функции CSS.supports() , про которую я упоминал выше.
Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true , если свойство поддерживается, и false — если нет.
Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:
Если браузер поддерживает display: flex , то скрипт вернёт true .
Второй вариант требует передачи в качестве аргумента целой строки:
Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то скрипт вернёт true .
Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.
В итоге у нас выходит следующая функция:
Или же можно обойтись без try. catch , если будем записывать свойства через cssText :
Проверка с помощью этой функции выглядит следующим образом:
Преимущество данной функции в том, что она будет работать во многих браузер, в том числе старых. Я протестировал функцию в браузерах IE, Edge, старом Safari, Chrome, Opera.
Примечание: если вы проверяете поддержку свойства в старом браузере, через эмулятор современного, то данный метод будем показывать true на значениях, которые не поддерживаются.
Это происходит из за того, что хоть вы и эмулируете старую версию, но браузер, через который вы это делаете, знает это значение CSS свойства и может применить.
На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.
Определите, что будет выведено в окно браузера после обработки следующего кода:
(CSS2.1 - CSS3, HTML 5)
Тема/шкала: Кроссбраузерность, различия в трактовке CSS между браузерами (IE , Opera, Mozilla/Firefox)
Тема/шкала: Кроссбраузерность, различия в трактовке CSS между браузерами (IE , Opera, Mozilla/Firefox)
Каким будет порядок расположения слоев после обработки браузером следующего кода?
(CSS2.1 - CSS3, HTML 5)
Как можно корректно заменить универсальным свойством background следующий стиль (то есть оптимизировать данный фрагмент кода)?
(CSS2.1 - CSS3, HTML 5)
Каким будет положение двух блоков текста "box1" и "box2" после обработки браузером следующего кода?
(CSS2.1 - CSS3, HTML 5)
Необходимо указать цвет фона для ссылки при нажатии на нее.
Какой псевдокласс позволит решить поставленную задачу?
Как работает следующая запись?
?) Селектор "а" приобретет данное свойство только когда он будет последовательно вложен в расположенные слева от него селекторы,
в указанном порядке, но необязательно подряд
Необходимо разместить логотип сайта в левом вернем углу с отступом сверху 50px и слева 10px таким образом, чтобы он не изменял своего положения при возможном изменении содержимого страницы сайта(в том числе был всегда виден на странице).
Какие 2 значения НЕ являются верными для свойства background, заданного для логотипа?
Тема/шкала: Кроссбраузерность, различия в трактовке CSS между браузерами (IE , Opera, Mozilla/Firefox)
Необходимо изменить внешний вид полос прокрутки страницы при помощи следующей конструкции:
Какой из перечисленных ниже браузеров корректно обработает этот фрагмент кода?
Какой порядок следования трех блочных элементов First, Second и Third в приведённых ниже фрагментах кода является верным?
?) В первом примере First - на первой строке. Second и Third - на второй строке; на втором примере First и Second - на первой строке, Third - на второй
?) В первом примере First, Second и Third расположены каждый на новой строке; во втором примере все они расположены на одной строке
?) В первом примере - First , на той же строке - Second и на следующей строке – Third; во втором примере - First, на следующей строке - Second и рядом - Third
?) Оба примера одинаковы с точки зрения относительного расположения блочных элементов и будут располагаться на одной строке
Какой будет отступ текста от левого края окна браузера в следующем коде?
(CSS2.1 - CSS3, HTML 5)
Что из предложенного нужно подставить на место заштрихованного участка следующего кода, чтобы получить такой результат:
(CSS2.1 - CSS3, HTML 5)
Какими свойствами рамки будет обладать блок с идентификатором "box" после обработки браузером следующего фрагмента кода?
(CSS2.1 - CSS3, HTML 5)
Какое выравнивание будет иметь текст после обработки браузером следующего кода:
Какой результат соответствует следующему коду?
(CSS2.1 - CSS3, HTML 5)
Каким будет порядок расположения слоев после обработки браузером следующего кода?
(CSS2.1 - CSS3, HTML 5)
К какому результату приведет обработка браузером следующего кода?
(CSS2.1 - CSS3, HTML 5)
Какой из предложенных результатов соответствует следующему коду?
(CSS2.1 - CSS3, HTML 5)
Какова полная ширина блока с классом "layer1" в представленном коде?
(CSS2.1 - CSS3, HTML 5)
-
, если код следующий:
(CSS 2.1 - CSS3, HTML 5)
?) При наведении на любое место внутри рамки произойдет смена фона на серебристый.
Но ссылка будет работать лишь при нажатии ЛКМ на слове "Link".
?) Вне зависимости от того, на какое место внутри рамки будет наведен курсор, фон изменится на серебристый
?) При нажатии ЛКМ на слове "Link" фон сменится на серебристый и произойдет переход по ссылке.
Остальная область в рамке никак влияет на состояние окна браузера
Тема/шкала: Кроссбраузерность, различия в трактовке CSS между браузерами (IE , Opera, Mozilla/Firefox)
Для каких двух браузеров из представленных не работает данный код (прозрачность элемента input не изменится)?
Какая строка приведенного ниже фрагмента кода НЕ содержит ошибок?
Каким будет порядок расположения слоев после обработки браузером следующего фрагмента кода?
(CSS2.1 - CSS3, HTML 5)
Необходимо создать небольшой сайт. Решено подключить стилевую таблицу, чтобы она влияла на определенные, заранее отмеченные элементы всего сайта.
Какая последовательность действий приведет к решению поставленной задачи?
?) Разместить на главной странице сайта (index.html) в заголовке описания элементов конструкцию
В чём состоят отличия между следующими двумя фрагментами кода?
?) В первом примере свойства двух селекторов p и i идентичны. Во втором примере содержатся ошибки,
поэтому браузер будет игнорировать данный стиль
?) В первом примере свойства двух селекторов p и i идентичны, а во втором селектор i приобретает указанные свойства
лишь в случае позиционирования внутри селектора p
?) В первом примере селектор i приобретает указанные свойства лишь в случае позиционирования внутри селектора p.
Во втором примере свойства идентичны
?) Конструкция в первом примере содержит недопустимые синтаксические ошибки и браузер будет игнорировать указанные свойства селекторов.
Во втором примере селектор p приобретает указанные свойства лишь в случае позиционирования внутри селектора i
Тема/шкала: Кроссбраузерность, различия в трактовке CSS между браузерами (IE , Opera, Mozilla/Firefox)
Свойство display (CSS) определяет , имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).
Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.
Начальное значение | inline |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного. |
Animation type | Not animatable |
Синтаксис
Свойство display задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:
Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока. (en-US) Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент). Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка. (en-US) Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок. (en-US) Эти значения определяют, генерирует ли элемент отображение боксов вообще. (en-US) В CSS 2 используется синтаксис с одним ключевым словом для свойства display , для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки. Non-Standard Устарело Gecko 62 Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.
"Наследственные" значения отображения
Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.
Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:
В настоящее время это можно задать с помощью одного значения .
Формальный синтаксис
Примеры
В разделе Syntax содержатся несколько примеров для разных типов значений display , которые это свойство может принимать.
Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:
Доступность
display: none;
Если свойство display принимает значение none на элементе, то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.
Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование комбинации свойств для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.
display: contents;
Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM .
Читайте также: