通过CSS显示内容的后果是：before，：after和content“” [英] What are the consequences of displaying content via CSS with :before, :after and content""
问题描述
最近，一个同事的副本粘贴了一个来自网络的建议我们的一个项目，以便在响应式设计中重新呈现< table> 。
/ p>
.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>第二个表头< / th>
< th>第三个表格标题< / th>
< th>第四个表头< / th>
< th>第五个表格标题< / th>
< th>第六个表格标题< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> ...< / td>
< / tr>
< / tbody>
< / table>
我需要辩论这一点，并且需要[我的想法]避免通过CSS解析内容，因为CSS3被认为是魔术，大多数网络集成商认为它是最好的，因为其他人是没有更深的知识的复制粘贴。
我的要点是：
缺点：
- 搜索引擎可能不会显示[搜索display：none和visibility：hidden（SEO）
（google ajax- crawling https://developers.google.com/webmasters/ajax-crawling/ ） - 需要复制不同语言的.css文件（WORKFLOW）
- 以静态方式显示数据（超出PHP范围），以阻止表格
<
p> 优点：
- 轻松重新布局
< table& code>在TwitterBootstrap中的CSS，而不必重写HTML。 （没有TABLE重复）
感谢您的建议。
[后注]根据2016年3月17日;我重新考虑覆盖DTD渲染并联合到一个带有媒体查询头的显示模型的css重置。
，在自己和自己，不坏。 nth-child（）支持，以及使用的其他策略，实际上是相当广泛的，并且可以添加旧的IE支持，例如 Selectivizr
您要绘制的行是内容与演示。当使用失败时， content 属性的主体是实际内容，而不是演示内容（例如»
从你的问题的代码看，在我看来，信息可能是补充的（没有一个工作示例很难说明）。如果CSS内容除了 实际表标题，那么这个想法不一定是坏的（虽然执行可能使用抛光）。如果它确实是补充，那么SEO是一个非问题，因为相同的内容已经存在于搜索引擎。
为了解决您对PHP和语言翻译的关注 - 有更好的方法去处理它，比如让PHP生成CSS，或者让JavaScript的动态填充元素。这两个都可以处理翻译，这取决于您的网站被翻译，以及您的维护问题（因为一代是自动的）。 content > th
i need your advices about this, before i stand a state about the subject.
Recently, a colleague copy-pasted a 'suggestion' from the web, in one of our projects in order to re-render a <table> in a responsive design.
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 ( There is no need to show the HTML table )
<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>
I need to debate this point and the necessity [my thought] to avoid parsing content via CSS, but since CSS3 is considered has 'magic' and that most of web-integrators think that it is the best ever because others are 'copy-pasting' without deeper knowledge.
My primary points were :
Cons :
- Might NOT be seen by search engines [searching for 'display:none' and 'visibility:hidden] ( SEO ) ( google ajax-crawling https://developers.google.com/webmasters/ajax-crawling/ )
- Need to duplicate .css files for different languages ( WORKFLOW )
- Jams the table in a 'static' way of displaying data (out of PHP range)
- Will get pretty complicated to maintain
- :nth-of-type() support ?
Pros :
- Easy re-layout of
<table>header with CSS within TwitterBootstrap without having to rewrite HTML. (No TABLE duplication)
Thank you for all your advices.
[postnote] As per MARS 17, 2016; I reconsidered overwriting the DTD rendering and joint to it a css reset for the display model with a media query header.
These elements, in and of themselves, are not bad. nth-child() support, as well as the other tactics used, are actually pretty wide-spread, and legacy IE support can be added with things like Selectivizr.
Where you have to draw the line is content vs presentation. Where using this fails is when the body of the content attribute is actual content, as opposed to presentational content (such as the » symbol you might see on buttons).
From the looks of the code in your question, it seems to me that the information may be supplemental (it's hard telling without a working example). If the CSS content is there in addition to actual table headers, then the idea isn't necessarily bad (though the execution could probably use polishing). If it is indeed supplemental, then SEO is a non-issue, because the same content is already there for search engines.
To address your concerns regarding PHP and language translation - there are better ways to go about it, such as having PHP generate that CSS, or having JavaScript fill in the content CSS dynamically with the contents of the column's th element. Both of these can handle translations, depending on how your site is being translated, as well as your maintenance concerns (because the generation is automated).
这篇关于通过CSS显示内容的后果是：before，：after和content“”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
