display
Некоторые значения свойства display полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.
| Начальное значение | inline |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного. |
| Animation type | Not animatable |
Синтаксис
Свойство display задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:
«Наследственные» значения отображения
Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.
Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:
Формальный синтаксис
Примеры
Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:
Доступность
display: none;
Если свойство display принимает значение none на элементе, то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.
Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование комбинации свойств для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.
display: contents;
CSS: о выводе коротких и длинных текстов
Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.
Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
Обзор проблем
Прежде чем я расскажу о том, как работать с текстами средствами CSS, мне хотелось бы остановиться на проблемах, связанных с выводом текстов. Предположим, у нас есть вертикальное меню.
Вертикальное меню при переносе имени пользователя на вторую строку выглядит необычно
В начале меню выводится имя пользователя. Длина имени может варьироваться. Особенно — если речь идёт о мультиязычных сайтах. В правой части вышеприведённого примера видно, что имя пользователя, при достижении им определённой длины, занимает две строки. По этому поводу можно задаться несколькими вопросами:
Слово вышло за пределы контейнера
Фронтенд-разработчик должен быть готов к такому, заранее приняв решение о том, как страница должна вести себя в подобных ситуациях. К счастью, существуют CSS-свойства, созданные специально для того чтобы решать подобные проблемы.
Кроме того, проблемы на страницах могут вызывать не только слишком длинные, но и слишком короткие тексты. Вывод короткого текста в элементе, не рассчитанном на такой текст, может либо «сломать» интерфейс, либо, как минимум, сделать так, что этот элемент будет странно выглядеть. Вот пример.
Кнопка, в которой выводится слишком короткий текст, выглядит необычно
Как видите, проблемы могут возникать как при выводе длинных, так и при выводе коротких текстов. Но, прибегнув к некоторым возможностям CSS, мы можем, по меньшей мере, ослабить влияние этих проблем на внешний вид и работоспособность страниц.
Длинные тексты
Теперь, когда мы обсудили проблемы, поговорим о возможностях CSS, которые позволяют наладить нормальную работу с длинными текстами.
▍Свойство overflow-wrap
Свойство overflow-wrap позволяет сообщить браузеру о том, что он должен разорвать слово, перенеся его на новую строку, в том случае, если слово не помещается в контейнер.
Без использования свойства overflow-wrap слово выходит за пределы контейнера
▍Свойство hyphens
Без использования свойства hyphens браузер не переносит слово на новую строку
Применяя значение auto свойства hyphens важно помнить о том, что браузер будет переносить любое слово, которое не помещается в строку. Что это значит? Взгляните на следующий рисунок.
Браузер может использовать знак переноса в любом слове
Обратите внимание на то, что браузер использовал знак переноса в слове, которое вполне может быть целиком перенесено на новую строку. При использовании свойства hyphens: auto браузер способен разрывать даже такие слова, которые не выходят за пределы контейнеров.
▍Обрезка однострочного текста
При обрезке текста, для вывода которого предусмотрено поле, вмещающее лишь одну строку, предложение укорачивается, а в его конец добавляется многоточие, указывающее на то, что текст, на самом деле, длиннее того фрагмента, который выведен на экране.
Слева — однострочный текст, при выводе которого обрезка не используется. Справа — текст, при выводе которого используется обрезка
В CSS нет свойства, которое могло бы называться «text-truncation», применимого для настройки автоматической обрезки текстов. Тут нам понадобится комбинация из нескольких свойств:
▍Обрезка многострочного текста
Если нужно обрезать текст, для вывода которого предусмотрено поле, вмещающее несколько строк, нужно прибегнуть к CSS-свойству line-clamp :
Сравнение обрезки однострочного и многострочного текста
Настройка свойства padding приводит к нарушению вывода текста
▍Вывод длинных текстов в полях, поддерживающих горизонтальную прокрутку
В некоторых ситуациях непрактично организовывать разрыв слов или их перенос на новые строки с использованием дефиса. Например, если имеется поле, в котором должен выводиться фрагмент JavaScript-кода, такой код будет тяжело читать в том случае, если слова будут выводиться с переносом на новые строки. В подобном случае облегчить работу с текстом можно, предусмотрев возможность горизонтальной прокрутки содержимого поля.
Поле, в котором осуществляется перенос слов на новые строки, и поле, в котором применяется горизонтальная прокрутка
▍Свойство padding
Проблема при выводе подписи к флажку
Тут имеется набор флажков. Подпись одного из них выводится слишком близко к другому. Причина этого заключается в том, что при проектировании макета, используемого для вывода флажков, не настроены промежутки между ячейками сетки, в которых размещены данные. Этот пример, кстати, взят с реального сайта (Techcrunch).
Короткие тексты
Я знаю о том, что проблемы, связанные с короткими текстами распространены не так сильно, как проблемы, связанные с длинными текстами. Но возможность их возникновения, всё равно, очень важно учитывать при проектировании пользовательских интерфейсов.
▍Установка минимальной ширины элемента
Кнопка, в которой выводится слишком короткий текст
Результаты настройки минимальной ширины кнопки
Теперь, когда мы поговорили о проблемах вывода длинных и коротких текстов и о решениях этих проблем, давайте разберём несколько практических примеров.
Практические примеры
▍Карточка профиля пользователя
Карточки профиля пользователя часто содержат достаточно длинные тексты. В частности, проектируя подобную карточку, разработчику почти невозможно заранее узнать о том, насколько длинным будет имя пользователя. Как же быть?
Имя пользователя обычной длины, помещающееся на карточке целиком. Обрезанное длинное имя, выводимое в одной строке. Обрезанное длинное имя, выводимое в нескольких строках
Проектируя подобную карточку можно подготовиться к выводу в ней длинного имени пользователя, применив один из следующих двух приёмов:
Как видите, длинный текст можно обрезать, выведя его либо в одной строке, либо — в нескольких строках.
▍Навигационные элементы
При работе над макетами мультиязычных сайтов нужно учитывать тот факт, что тексты, имеющие один и тот же смысл, но написанные на разных языках, могут иметь различную длину.
Названия навигационных элементов, выведенные на разных языках
Длина слова About из LTR-языка больше, чем длина аналогичного по смыслу слова из RTL-языка. При выводе на таком языке соответствующий пункт навигационного меню выглядит слишком коротким. Известно, что если в дизайне страниц используются маленькие области, с которыми нужно взаимодействовать пользователям, это плохо сказывается на UX. Как исправить проблему? В данном случае можно просто настроить минимальную ширину навигационного элемента:
Решение проблемы короткого текста
Если вас интересуют вопросы вывода данных на разных языках — взгляните на этот мой материал.
▍Поле для вывода содержимого статей
В полях для вывода объёмных текстов вполне могут попадаться очень длинные слова, не помещающиеся в контейнеры. Особенно часто с этим можно столкнуться при работе с сайтами на мобильных устройствах.
Длинное слово выходит за пределы контейнера
Например, эту проблему можно решить так:
▍Оформление виртуальной корзины для покупок
Названия товаров, которые покупатели интернет-магазинов «кладут» в корзины, могут быть очень разными. Это может быть и одно слово, и несколько строк. В следующем примере длина названия товара такова, что текст перекрывается кнопкой для удаления товара из корзины. Причина этого в том, что при проектировании макета корзины не было уделено достаточного внимания настройке расстояния между элементами.
Вывод коротких и длинных названий в макете, который настроен неправильно
Решить эту проблему можно, настроив внутренние или внешние отступы элементов. Конкретные действия зависят от ситуации. Здесь я приведу простой пример, предусматривающий использование свойства margin-right при настройке элемента, выводящего название товара.
▍Flexbox-макеты и вывод длинных текстов
При выводе длинных текстов во Flexbox-макетах возможна ситуация, когда такие тексты переполняют родительские элементы. Взгляните на следующий пример.
Элементы выглядят нормально
Вот разметка к этому примеру:
Если имя пользователя не слишком длинно — всё выглядит нормально. Но что случится в том случае, если имя окажется достаточно длинным? В такой ситуации текст переполнит родительский элемент, а это «поломает» макет.
Длинное имя пользователя портит внешний вид страницы
После этого даже вывод в элементе длинного имени пользователя не испортит макет. Некоторые подробности об использовании свойства min-width при разработке Flexbox-макетов вы можете найти в этом материале.
Итоги
Надеюсь, теперь вы сможете справиться с проектированием элементов, поддерживающих аккуратный вывод длинных и коротких текстов. Я с большим удовольствием писал эту статью. Я, благодаря этому, вспомнил некоторые тонкости работы с разными текстами. А статья будет служить мне хорошим напоминанием о том, как важно обращать внимание на подготовку элементов страниц к выводу текстов разной длины.
Сталкивались ли вы с проблемами, связанными с выводом текстов разной длины на веб-страницах?
Особенности –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+.
Однако всё не так просто:
Как же решить уже найденные проблемы?
Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.
Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.
Почему бы просто не убрать float? – А вот почему:
Я приведу список всех рабочих аналогов flex-свойств и box-свойств:
-webkit-box-orient (flex-direction) – направление оси элементов.
Бывает нескольких видов в случае нового синтаксиса:
— column – колонка;
— row (по умолчанию) – строка;
— row-reverse – реверсия строки;
— column-reverse – реверсия колонки.
В случае старого синтаксиса я использую всего два свойства:
— vertical – колонка;
— horizontal – строка.
Есть еще два свойства, но они не работают как аналоги реверсивных свойств нового синтаксиса, поэтому я не использую их в своей практике.
-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 и Gecko, такие как Firefox и Google Chrome. Вот почему мы также подробно рассмотрели применение традиционной блочной модели.
В этом разделе мы познакомимся с работой гибкой блочной модели, узнаем, как применить ее к нашему шаблону, а также изучим предоставляемые этой моделью новые возможности.
Одна из главных особенностей данной модели заключается в том, что некоторые возможности (например, ориентация — вертикальная или горизонтальная) объявляются в родительских блоках. Из этого следует, что для правильной организации блоков необходимо одни блоки вставлять в другие. В новой модели у каждого набора блоков обязательно должен быть родительский блок.
Если вы взглянете на шаблон, с которым мы до сих пор работали, то увидите, что несколько родительских блоков там уже определены. Элемент и обертку
Вот как наш шаблон будет выглядеть после добавления новой обертки.
Листинг 2.37. Добавление родительского блока для обрамления и
Кому нужны флексы
Кому нужны флексы, если на них не делают сайты? — спрашивает наш зритель Алексей. Ну, как не делают, Алексей: 12% сайтов уже используют флексы. А нужны они вам, чтобы было удобнее верстать. Давайте разберёмся.
Флексы, или Flexible Box Layout, с нами аж с 2006 года. Это получается одиннадцать лет! Их тогда внедрили в Mozilla для построения интерфейсов Firefox. Представьте себе, что вы настраиваете панель браузера: кнопочки разбегаются по краям, отталкиваются и ровно встают по горизонтали. Самый настоящий флексбокс. В 2009 году Mozilla предложила добавить эту систему в CSS.
С тех пор много чего случилось: тот самый первый флекс появился в Safari и других браузерах на WebKit. Вторая версия появилась в IE 10 в 2012 году. Флексы в текущем виде, с переносами flex-wrap, стали широко поддерживаться в 2014 году с выходом Firefox 28. Сейчас почти 98% браузеров по миру поддерживают флексбокс хоть какой-то версии. Даже Opera Mini на последнем вздохе движка Presto научилась флексам.
Зачем они вообще нужны? Это первая система раскладки в CSS, которая не хак. Таблицы, флоаты и инлайн-блоки придумали совсем для другого. Представьте три простых примера. Колонки одинаковой резиновой высоты: одна растёт по содержимому, другие идут за ней, что бы ни было. Или горизонтальный блок, внутри элементы распределены равномерно, сколько бы их ни было. Или блок произвольных размеров внутри родителя — ровно по центру.
Знаю, знаю — всё это можно имитировать десятком способов. CSS очень гибкий и кроме флоатов, инлайн-блоков и табличных свойств, можно применять хитрое позиционирование. Сам много лет это имитировал и набил руку на хаках и трюках. Но по-настоящему просто и явно это делает только флекс.
Что это вообще такое? Флекс — это такой контекст форматирования: вы задаёте родителю display: flex и его дети начинают подозрительно хорошо себя вести. Ещё есть старинный контекст display: table, когда блоки прикидываются внутренностями таблицы, и совсем новый — грид, ещё круче флекса. Гриды и флексы имеют кое-что общее и очень ценное.
Мало раскидать резиновые блоки, это можно сделать хоть на флоатах. Нужно ещё сказать, где они начинаются по главной оси, как делят пустое место внутри родителя и как выравниваются поперёк оси — во флексах ведь можно менять её направление. Этими вопросами занимается отдельная спецификация Box Alignment.
Флексы и гриды включают Box Alignment для своих детей и это то, чего нам всем очень не хватало. Когда-нибудь свойства justify-content, align-self, justify-items и другие заработают в других контекстах. Ведь до сих пор самый популярный вопрос по вёрстке — это как выровнять блок по вертикали. Проще всего это сделать на флексах.
Ладно, флексы классные, дайте две. Но почему тогда главные студии страны выпускают сайты для главных компаний страны, где всё по-прежнему на флоатах? А для надёжности иногда даже на таблицах. Варианта здесь два: либо им нужна поддержка IE 9, либо там работают упёртые староверы. У них всё и так работает на флоатах, зачем что-то менять?
Оставим консервативных верстальщиков в покое и разберёмся с браузерной поддержкой. Если вам нужны старые Android 4.3, iOS 6 или Firefox 27, то флексы у вас будут только в одной строке, без переносов: flex-wrap там ещё не работает. Сделать удобный список карточек одинаковой высоты, которые переносятся друг за другом по строкам, не получится.
Про баги отдельно: в старых реализациях с префиксами в Firefox, Safari и IE багов хватает. Но все они более-менее описаны в коллекции Flexbugs Филипа Уолтона. Прежде всего, вам нужно определиться с браузерами, которые вы поддерживаете и может быть вместо старых флексов с префиксами просто отдать им флоаты?
Да, это самое приятное: вы можете сделать простую вёрстку на флоатах или в контексте table, а потом объявить display: flex и сделать ещё лучше для браузеров которые умеют флексы. Сайты не должны выглядеть одинаково во всех браузерах, что бы там ни требовали заказчики. Тем более в старых, где главная задача — сохранить доступное содержимое.
Флоаты придумали чтобы текст обтекал картинку и нашей вёрстке давно пора перестать куда-то плыть. Мы тоже переводим программу интенсивов HTML Академии на флексы — и вам рекомендуем. Уже можно.
