css 相同的css属性

I have the privilege of working for Mozilla on the Mozilla Developer Network (MDN).  As with any Mozilla-made website, localization is paramount to MDN, so we must be mindful of that when we put text anywhere on the site.  I was recently working on a feature which made use of :  a visual notice on an element's pseudo-element which are experimental and only available to beta testers.  The obvious problem in doing so is that hardcoding the generated content message in the stylesheet means I can't localize it;  a definite localization taboo.  The solution was simple:  use the attr expression to pull the localization message from an element's custom data- attribute.

我有幸在Mozilla开发人员网络(MDN)上为Mozilla工作。 与任何Mozilla制作的网站一样，本地化对MDN至关重要，因此，当我们在网站上的任意位置放置文字时，我们必须谨记这一点。 最近，我正在研究一个利用 ：关于元素伪元素的视觉通知，这是实验性的，仅适用于beta测试人员。 这样做的一个明显问题是，在样式表中对生成的内容消息进行硬编码意味着我无法对其进行本地化。 明确的本地化禁忌。 解决方案很简单：使用attr表达式从元素的自定义data-属性中提取本地化消息。

HTML (The HTML)

Start by outputting the localized text to a data- attribute:

首先将本地化文本输出到data-属性：

With the text available in an attribute, the CSS attr expression and content will be used to display the text in a pseudo-element:

在属性中有可用文本的情况下，CSS attr表达式和content将用于以伪元素显示文本：

.beta-feature:after {	content: attr(data-message);	/* formatting here */}

The formatting is up to the developer but the main point is that we get to use the attribute value to display the variable text.

格式取决于开发人员，但主要要点是我们可以使用属性值来显示变量文本。

This post isn't groundbreaking and it's not meant to be;  I just want to reinforce how awesome and useful CSS content paired with attr can be.  I love that this strategy prevents the need to preprocess CSS files with the localized text, and love that...it's just so easy!

这篇文章不是开创性的，也不意味着是。 我只想强调与attr配对的真棒和有用CSS content 。 我喜欢这种策略，无需使用本地化的文本对CSS文件进行预处理，因此...非常简单！

翻译自:

css 相同的css属性