"Семантика" правил CSS: таблицы, строка таблицы, ячейки таблицы

В последнее время я часто использую эти свойства, особенно display: table-cell. Он хорошо поддерживается в современных браузерах и имеет много преимуществ для некоторых сеток и для выравнивания контента очень легко, без необходимости сложных наценок. Но в последние несколько дней я видел, как люди говорили об этом, как о плохой практике/подходе, использующем эти атрибуты, как в этом ответе .

Плюсы (которые приходят мне на ум прямо сейчас):

  • не добавляет семантики к HTML-разметка
  • хорошо поддерживается в современных браузерах
  • полезно для выравнивания содержимого
  • полезно для грид-систем (скорее всего, в сочетании с выравниванием контента)

Минусы

  • Если вы просто используете display: table-cell; недостающие части (строка и таблица) добавляются автоматически

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

Я думаю, что этот вопрос будет закрыт (я мог бы это понять), но, возможно, у кого-то есть достойный ответ - даже положительно относится к их использованию.

3 3
css semantic-markup

3 ответа:

Цитата из связанного ответа:

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

Я не буду делать это долго: CSS просто не имеет ничего общего с семантикой.

4

Мне нравится устанавливать отображение и позиции по мере необходимости, хотя любые большие элементы я почти всегда устанавливаю в position: relative;, чтобы мне было намного легче обращаться со своими детьми.

Что касается display:table-cell - это всего лишь изменение того, как это изложено. Вместо того, чтобы кодировать полную таблицу, Если вам просто нужна аккуратная маленькая сетка 4x4, почему бы не использовать ее? Это очень простая, очень чистая и очень простая альтернатива кодированию большой (грязной) таблицы.

Мой совет: "если он не сломался, не чините его". display: изменяет только кстати предметы есть... отображается ~ поди разберись!

Я использую столько display:, Сколько нужно, например меню может быть :inline-block; для запросов СМИ или :block для полных статей, или :table-cell для хорошего простого даже 2-столбцового бита на разделе боковой панели/статьи.

1

Один положительный момент: обеспечивает табличную компоновку без использования элементов таблицы. один минус: негативно влияет на некоторые агенты пользователей: http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/ это один из тех "все зависит..." вопрос.

1