Каковы последствия отображения содержимого с помощью CSS с: before,: after и content ""

Question

Мне нужны ваши советы об этом, прежде чем я остановлюсь на предмете.

Недавно коллега скопировал «предложение» из Интернета в одном из наших проектов, чтобы переделать <table> в отзывчивом дизайне.

CSS

.responsive td:nth-of-type(1):before { content: ""; } 
.responsive td:nth-of-type(2):before { content: "Second table header"; } 
.responsive td:nth-of-type(3):before { content: "Third table header"; } 
.responsive td:nth-of-type(4):before { content: "A forth table header"; } 
.responsive td:nth-of-type(5):before { content: "A fifth table header"; } 
.responsive td:nth-of-type(6):before { content: "A sixth table header"; } 

HTML (Там нет необходимости, чтобы показать таблицу HTML)

<table class="responsive"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>SKU</th> 
      <th>Second table header</th> 
      <th>Third table header</th> 
      <th>A forth table header</th> 
      <th>A fifth table header</th> 
      <th>A sixth table header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> ... </td> 
     </tr> 
    </tbody> 
</table> 

Я должен обсудить этот вопрос и необходимость [моя мысль], чтобы избежать разбора содержимого с помощью CSS , но поскольку CSS3 считается «волшебным», и большинство веб-интеграторов думают, что это лучший из когда-либо, потому что другие «копируют» вклеивание без глубоких знаний.

Мои основные моменты были:

Минусы:

• может не рассматриваться поисковыми системами [ищут 'дисплей: доли не имеет' и «видимость: скрытый] (SEO) (Google Ajax-ползет https://developers.google.com/webmasters/ajax-crawling/)
• нужно дублировать .css файлов для разных языков (Workflow)
• джемы стол в «статическом» способ отображения данных (из PHP range)
• Будет довольно сложно поддерживать
• : Поддержка nth-of-type()?

Плюсы:

• Легко повторно макет <table> заголовка с CSS в TwitterBootstrap без необходимости переписывать HTML. (Нет дублирования ТАБЛИЦЫ)

Благодарим вас за все ваши советы.

[postnote] Согласно MARS 17, 2016; Я пересмотрел переписывание рендеринга DTD и связал с ним сброс css для модели дисплея с заголовком медиа-запроса.

Answer 1

Я думаю, что две основные вещи, чтобы рассмотреть здесь было бы:

1. content, nth-child и :before and :after не поддерживаются в некоторых наиболее часто используемых в старых браузерах.

2. Пользователи со стилями отключены.

В обеих этих ситуациях пользователь не будет видеть это содержимое.

Answer 2

Эти элементы сами по себе не являются плохими.nth-child() поддержка, а также другая используемая тактика, are actually pretty wide-spread, и устаревшая поддержка IE может быть добавлена ​​с такими вещами, как Selectivizr.

Где вы должны нарисовать линию содержание против презентации. В тех случаях, когда использование этого сбой происходит, когда тело атрибута content составляет , фактическое содержание, в отличие от представленного содержимого (например, символ », который вы можете видеть на кнопках).

С точки зрения кода в вашем вопросе мне кажется, что информация может быть дополнительной (это трудно сказать без рабочего примера). Если в CSS-содержимом есть в дополнение к фактическим заголовкам таблицы, тогда идея не обязательно плохая (хотя выполнение, вероятно, может использовать полировку). Если это действительно добавочно, то SEO не является проблемой, потому что тот же контент уже существует для поисковых систем.

Для решения ваших проблем, связанных с PHP и языковым переводом, есть более эффективные способы, такие как создание PHP с помощью CSS или добавление JavaScript в content CSS динамически с содержимым элемента th этого столбца. Оба они могут обрабатывать переводы, в зависимости от того, как переводится ваш сайт, а также о ваших проблемах обслуживания (поскольку автоматизация генерации).