【问题标题】:What are the concrete risks of using custom HTML attributes?使用自定义 HTML 属性的具体风险是什么?
【发布时间】:2023-03-23 10:57:02
【问题描述】:

这个话题在办公室变成了激烈的讨论,所以我很想知道你的想法。

我们正在开发一个只针对某些特定浏览器的网络应用程序。这些浏览器目前包括不同风格的 Opera 9 和 Mozilla 1.7.12。未来我们可能还必须支持 Opera 10 和不同风格的 WebKit。但我们不太可能不得不处理任何版本的 IE。

我们的网络应用在其文档类型中声明 HTML 4.0 严格。

最近,我提出了在 HTML 中使用自定义属性作为特定问题的解决方案。我提出了一些看起来像这样的东西:

<span translationkey="someKey">...</span>

由于这不是有效的 HTML 4,因此我们的 HTML 人员并不满意,因此我们陷入了争论。

我的问题是:如果有的话,使用自定义属性有什么风险?我知道页面不会验证,但不是所有的浏览器都会忽略他们不知道的属性吗?或者是否可以想象某些浏览器会更改为“怪癖模式”并呈现页面,就好像它不是严格的 HTML 4.0 一样

更新:

Hilited 提出的实际问题。

【问题讨论】:

    标签: html doctype


    【解决方案1】:

    没有浏览器限制/风险。只有 w3 验证器会吠叫,但吠狗不会咬人。

    w3 spec 表示以下内容:

    • 如果用户代理遇到它无法识别的属性,它 应该忽略整个属性 规范(即,属性和 它的价值)。

    IE 也将以怪癖模式或某些人可能认为的方式呈现。它只会对无效/强制的文档类型执行此操作,而不是对无效属性执行此操作。

    但是,请记住,一些 Javascript 库/框架会在 DOM 树中“隐形”添加/使用自定义 HTML 属性,例如几个 jQuery 插件。这样,您可能会冒属性冲突的风险,因为它“巧合”地使用了与您为自己的目的同名的属性。遗憾的是,这通常很差,甚至根本没有记录。

    【讨论】:

    • 我接受了这个答案,因为它解决了我提出的问题。不过,某种权威来源会很好。
    【解决方案2】:

    HTML 5 允许使用“data-”前缀的自定义属性,请参阅http://ejohn.org/blog/html-5-data-attributes/

    【讨论】:

    • 我知道。唉,我们需要支持的浏览器确实支持 HTML 5。
    • 那你为什么不直接引入一个data-translationkey="someKey" 属性呢?
    【解决方案3】:

    如果它的目标是保持有效的 html4.0 严格,那么你为什么要放入自定义属性并不重要,你正在打破这个目标。

    我认为你需要问的问题是,为什么你需要打破 4.0 严格来获得你想要的功能:任何你可以为你使用自定义属性的东西,你都可以在现有属性中使用 a:

    <span translationkey="someKey">...</span>
    

    可能是:

    <span class="Translationkey@someKey">...</span>
    

    解析所有类信息将需要一些额外的周期,但只要您不在该类上放置任何 css 信息,它就不会改变显示,不会让您进入怪癖模式,并且不会不要让你在工作中打架。

    【讨论】:

    • 我的观点是,遵循标准本身不应该成为目标。我们使用 html4.0 strict 是因为我们要确保特定的浏览器行为。所以我的问题真的是:我是否会通过使用自定义属性来危害这个目标?
    • 回答您的问题:自定义属性使得在 MooTools 中查找 DOM 中的元素变得非常方便: foo.getElements("[myAttr]") 找到 foo 的所有具有 myAttr 属性的子节点。使用您提出的解决方案会更加复杂,并且可能会更慢。
    • 在类属性中重载信息,然后解析它以提取正确的信息并忽略噪音似乎效率低下且缺乏清晰度。
    【解决方案4】:
    【解决方案5】:

    或者是否可以想象某些浏览器会更改为“怪癖模式”并将页面呈现为不同于严格的 HTML 4.0 的页面?

    不,错误的属性不会强制改变渲染模式。

    如果您不关心验证,请随心所欲,但验证是检测简单错误的有用工具,否则您可能会忙于调试。鉴于有许多其他非常好的替代方法可以将数据传递给 JavaScript,我更喜欢使用其中一种,而不是放弃验证。

    另外,当您添加任意属性时,您实际上是在全局命名空间中播放。无法保证某些未来的浏览器或标准不会决定将名称“translationkey”用于某些会使您的脚本出错的新功能。因此,如果您必须添加属性,请给它们起一个晦涩且可能唯一的名称,或者直接使用 HTML5 data- 前缀。

    【讨论】:

      【解决方案6】:

      如果页面被声明为 HTML 4 严格的,那么它不应该添加在该 HTML 指定中未使用的属性。不同的是,尚不清楚浏览器的行为方式。
      如前所述,添加附加属性的一种方法是将它们添加为类,即使这有一些限制。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-05-18
        • 1970-01-01
        • 2011-12-30
        • 2010-11-19
        • 1970-01-01
        • 2017-01-04
        • 2011-07-20
        • 2021-09-12
        相关资源
        最近更新 更多