替换元素和非替换元素_HTML中的替换元素：神话与现实

替换元素和非替换元素

Some HTML elements have always caused headaches for front-end developers everywhere, like iframes, applets, embedded objects or form controls. One could never have complete control over their display, because they look different from one browser to another, from one OS to another.

一些HTML元素总是使各地的前端开发人员感到头疼，例如iframe，applet，嵌入式对象或表单控件。 一个人永远不可能完全控制它们的显示，因为从一个浏览器到另一个浏览器，从一个操作系统到另一个操作系统，它们看起来都不同。

Countless libraries and frameworks created replacements, from jQueryUI to Bootstrap, and many more. But have you ever wondered why those elements behave the way they do? Some voices (including a few well-known websites) will point their finger to a fairly obscure definition from W3C, namely the one concerning replaced elements. But are they 100% right? This is the quest we will chase together today.

无数的库和框架创建了从jQueryUI到Bootstrap等的替代品。 但是您是否曾经想过， 为什么这些元素会表现出它们的行为方式？ 一些声音(包括一些著名的网站)将把他们的手指指向W3C相当模糊的定义，即有关替换元素的定义 。 但是他们100％对吗？ 这是我们今天将共同追求的追求。

什么是替换元素？ (What are Replaced Elements?)

Any good quest must start with research. Therefore let’s have a look at what the official specs say a replaced element is:

任何好的追求都必须从研究开始。 因此，让我们看一下官方规范中所说的替换元素是：

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

内容超出CSS格式模型范围的元素，例如图像，嵌入式文档或applet。 例如，HTML IMG元素的内容通常被其“ src”属性指定的图像替换。 替换元素通常具有固有尺寸：固有宽度，固有高度和固有比率。 例如，位图图像具有以绝对单位指定的固有宽度和固有高度(由此可以明显确定固有比率)。 另一方面，其他文档可能没有任何固有维度(例如，空白HTML文档)。

Source: 3. Conformance: Requirements and Recommendations > 3.1 – Definitions

来源： 3.符合性：要求和建议> 3.1 –定义

So far, so good – we got a general description of what a replaced element is. Before we go deeper into this spec section, let’s make a small detour and clarify the “intrinsic dimensions” part.

到目前为止，一切都很好–我们对被替换的元素有一个总体描述。 在深入介绍此规范部分之前，让我们先绕道走一圈，并阐明“内部尺寸”部分。

什么是内在尺寸？ (What are Intrinsic Dimensions?)

The best definition available now for intrinsic dimensions comes from the CSS Image Values and Replaced Content Module Level 3 document:

现在，可用于内在尺寸的最佳定义来自CSS图像值和“替换的内容模块3级”文档：

The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object. These intrinsic dimensions represent a preferred or natural size of the object itself; that is, they are not a function of the context in which the object is used. CSS does not define how the intrinsic dimensions are found in general.

术语“固有尺寸”是指固有高度 ， 固有宽度和固有纵横比 (宽度与高度之比)的集合，对于给定的对象，可能不存在。 这些固有尺寸表示对象本身的首选大小或自然大小。 也就是说，它们不是使用对象的上下文的函数。 CSS并未定义通常如何找到内在维。

Here are some examples:

这里有些例子：

• A normal image has all three dimensions: width, height and aspect ratio.
  普通图像具有所有三个维度：宽度，高度和纵横比。
• An SVG image can have only the aspect ratio. Its scaling nature means that the width and height are not restricted to a single value.
  SVG图像只能具有宽高比。 它的缩放性质意味着宽度和高度不限于单个值。

• An empty HTML page, inserted via an iframe element has no dimensions at all.

  通过iframe元素插入的空白HTML页面完全没有尺寸。

The way these properties are tied to one another means that there can be no object with only two dimensions. Knowing two of them automatically determines the third one.

这些属性相互关联的方式意味着不可能只有二维的对象。 知道其中两个会自动确定第三个。

Overall this means that such an object, when placed into the page, will provide these intrinsic dimensions to the document so that they can be rendered properly. This information will be useful later, but for now, let’s return to the main path.

总的来说，这意味着将这样的对象放置在页面中后，它们将为文档提供这些固有尺寸，以便可以正确呈现它们。 这些信息以后会有用，但是现在，让我们回到主路径。

现实世界中的替换元素 (Replaced Elements in the Real World)

For a full description of the replaced elements we need to go to a different resource, namely the Rendering section of the HTML Living Standard document. As one goes deeper into the specs, it’s easy to see how this topic can be confusing. This is because some HTML elements act as replaced elements all the time, while other do it only in specific circumstances.

有关被替换元素的完整描述，我们需要转到其他资源，即HTML Living Standard文档的“ 渲染”部分。 随着人们对规范的深入了解，很容易看出该主题如何令人困惑。 这是因为某些HTML元素一直都充当替换元素，而其他HTML元素仅在特定情况下才起作用。

Fortunately the Subsection 14.4 gives us all the information we need to properly understand each case.

幸运的是， 第14.4小节为我们提供了正确理解每种情况所需的所有信息。

内嵌内容 (Embedded content)

The first category of replaced elements is embedded content. This includes any element that imports another resource into the document, or content from another vocabulary that is inserted into the document. These external resources, by their own nature, have the intrinsic dimensions that match the requirements of the definition.

被替换元素的第一类是嵌入内容。 这包括将另一个资源导入到文档中的任何元素，或来自插入到文档中的另一个词汇表中的内容的任何元素。 这些外部资源就其自身性质而言，具有与定义要求匹配的内在维度。

The main elements in this category are embed, iframe, and video. These elements are always treated as replaced elements because they always import external content into your document.

此类别中的主要元素是embed ， iframe和video 。 这些元素始终被视为替换元素，因为它们总是将外部内容导入到您的文档中。

Things are a bit more complicated with elements that fall into this category only in special circumstances:

仅在特殊情况下，属于此类别的元素会使事情变得更加复杂：

• applet – Treated as a replaced element when it represents a plugin, otherwise it’s treated as an ordinary element.

  applet –当它代表插件时被视为替换元素，否则被视为普通元素。

• audio – Treated as a replaced element only when it is “exposing a user interface element”. Will render about one line high, as wide as is necessary to expose the user agent’s user interface features.

  audio –仅在“ 公开用户界面元素 ”时才被视为替换元素。 将呈现大约高一线的宽度，以显示用户代理的用户界面功能所需的宽度。

• object – Treated as a replaced element when it represents an image, plugin, or nested browsing context (similar to an iframe).

  object –当它表示图像，插件或嵌套的浏览上下文(类似于iframe )时，被视为替换元素。

• canvas – Treated as a replaced element when it represents embedded content. That is, it contains the element’s bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the element.

  canvas –当它表示嵌入式内容时，被视为替换元素。 也就是说，它包含元素的位图(如果有)，或者包含一个透明的黑色位图，其固有尺寸与元素相同。

These are the only cases where the elements above are treated as replaced elements (which covers almost all cases where these elements are used). For full details on this, please see WHATWG’s rendering rules for embedded content.

这些是上面元素被视为替换元素的唯一情况(几乎涵盖了使用这些元素的所有情况)。 有关此内容的完整详细信息，请参见WHATWG的嵌入式内容渲染规则 。

图片 (Images)

Next on our list are images. In the vast majority of cases (when the image is displayed properly), the img element is treated as a replaced element with the intrinsic dimensions of the image. This category also includes the input elements with a type="image" attribute.

我们列表的下一个是图像。 在绝大多数情况下(当图像正确显示时)， img元素被视为具有图像固有尺寸的替换元素。 此类别还包括具有type="image"属性的input元素。

Things get a bit more complicated when, for various reasons, the image is not rendered on the page. A missing image that the browser expects it will render eventually has to be treated as a replaced element whose content is the text that the element represents (optionally an icon can also be added). The <input type="image"> will be displayed as a normal button instead. The complete set of rules and conditions can be reviewed in the spec.

当由于各种原因图像未在页面上呈现时，事情会变得更加复杂。 浏览器希望最终呈现的丢失图像最终必须被视为替换后的元素，其内容是该元素表示的文本(也可以添加图标)。 <input type="image">将显示为普通按钮。 可以在规范中查看完整的规则和条件集。

替换元素的默认大小 (Default Size of Replaced Elements)

This is where the information we gathered about intrinsic dimensions becomes useful. We have established already that the width and height properties of a replaced element come from the intrinsic dimensions of the content they bring into the page. If these dimensions can’t be calculated (like in the case of an iframe loading a blank HTML page), the browser must fall back to the default rules, as specified in Visual formatting model details. The set of rules itself is fairly large and complicated, but we are only going to focus on the “nothing else works” ones:

这是我们收集的有关内在维度的信息变得有用的地方。 我们已经确定，替换元素的width和height属性来自它们带入页面的内容的固有尺寸。 如果无法计算这些尺寸(例如，在iframe加载空白HTML页面的情况下)，则浏览器必须退回到默认规则，如Visual formatting model details中所指定。 规则本身相当庞大且复杂，但是我们仅关注“没有其他作用”的规则：

Otherwise, if ‘width’ has a computed value of ‘auto’, but none of the conditions above are met, then the used value of ‘width’ becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.

否则，如果“宽度”的计算值为“自动”，但不满足上述任何条件，则“宽度”的使用值将变为300px。 如果300px太宽而无法容纳设备，则UA应使用具有2：1比例的最大矩形的宽度来替代设备。

Source: 10.3 Calculating widths and margins

资料来源： 10.3计算宽度和边距

Otherwise, if ‘height’ has a computed value of ‘auto’, but none of the conditions above are met, then the used value of ‘height’ must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.

否则，如果'height'的计算值为'auto'，但不满足上述任何条件，则必须将'height'的使用值设置为比例为2：1的最大矩形的高度，高度不大于150像素，宽度不大于设备宽度。

Source: 10.6 Calculating heights and margins

资料来源： 10.6计算高度和边距

We can summarise all this in three basic rules:

我们可以用以下三个基本规则总结所有这些：

• if the object has explicit width, height and ratio values, use them;

  如果对象具有明确的width ， height和ratio值，则使用它们；

• if the object only has ratio, use auto for both width and height while maintaining the said ratio;

  如果对象仅具有ratio ，则在保持该比例的同时对宽度和高度使用auto ；

• if none of these dimensions are available:

  如果这些尺寸均不可用：

  • use width: 300px; height: 150px when the viewport is larger than 300px

    使用width: 300px; height: 150px width: 300px; height: 150px视口大于300px时为width: 300px; height: 150px

  • use “auto” for both width and height and a ratio of 2:1 when the viewport is smaller than 300px;
    视口小于300像素时，宽度和高度均使用“自动”，比例为2：1；

Here is an example illustrating the situations described above. We have a bitmap image, an SVG image, and an iframe. As you can see, the image is displayed at its normal size, the SVG keeps the aspect ratio but takes all available space while the iframe defaults to a maximum of 300×150. If we narrow down the viewport, the iframe keeps at all times an aspect ratio of 2:1.

这是说明上述情况的示例。 我们有一个位图图像，一个SVG图像和一个iframe。 如您所见，图像以其正常大小显示，SVG保持宽高比，但占用所有可用空间，而iframe默认最大为300×150。 如果缩小视口，则iframe始终保持2：1的宽高比。

See the Pen Replaced Elements Intrinsic Dimensions by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint )的“钢笔替换的元素固有尺寸” 。

四舍五入 (Rounding things up)

We now have enough information to put together the complete list of the replaced elements:

现在，我们有足够的信息来将替换元素的完整列表放在一起：

• embedded content: embed, iframe, and video are always treated as replaced elements

  嵌入式内容： embed ， iframe和video始终被视为替换元素

• embedded content: applet, audio, object and canvas are treated as replaced elements in specific cases

  嵌入式内容： applet ， audio ， object和canvas在特定情况下被视为替换元素

• images: img and input type="image" are treated as replaced elements when loaded properly or when the browser expects it will render eventually

  图片：正确加载或浏览器期望最终呈现时， img和input type="image"将被视为替换元素。

其他形式的控件呢？ (What About the Other Types of Form Controls?)

As I mentioned at the outset, there is a certain level of misconception that other types of form controls are replaced elements too. After all, if you add no styles and no attributes, these elements are also rendered with a default width and height. That would satisfy the requirements of the definition, wouldn’t it?

就像我一开始提到的那样，在某种程度上人们误以为其他类型的表单控件也被替换为元素。 毕竟，如果您不添加样式和属性，则这些元素也将使用默认的宽度和高度进行渲染。 那将满足定义的要求，不是吗？

Actually that is not true. Let’s consult again the Rendering section of the HTML living standard. Here we discover that 14.3.11 Form controls is a subsection of 14.3 Non-replaced elements. What most people consider intrinsic dimensions actually comes from the following line:

其实那是不对的。 让我们再次参考HTML生活标准的“ 渲染”部分。 在这里，我们发现14.3.11表单控件是14.3未替换元素的子部分 。 大多数人认为固有维度实际上来自以下几行：

Each kind of form control is also described in the Widgets section, which describes the look and feel of the control.

在“ 小部件”部分中还描述了每种形式的控件，其中描述了控件的外观。

Source: 14.3.11 Form controls

来源： 14.3.11表单控件

And here is the reason why form controls look so different from one browser to the next and from one OS to another:

这就是表单控件从一个浏览器到另一个浏览器以及从一个操作系统到另一个操作系统看起来如此不同的原因：

The elements defined in this section can be rendered in a variety of manners, within the guidelines provided below. User agents are encouraged to set the ‘appearance’ CSS property appropriately to achieve platform-native appearances for widgets, and are expected to implement any relevant animations, etc, that are appropriate for the platform.

在以下提供的指导原则内，本节中定义的元素可以多种方式呈现。 鼓励用户代理适当地设置'appearance'CSS属性，以实现小部件的平台本机外观 ，并应实现适合该平台的任何相关动画等。

Source: 14.5 Widgets > 14.5.1 Introduction

来源： 14.5小部件> 14.5.1简介

The term “platform-native appearances” explains why form elements are rendered in such a different way from one browser to another and across different operating systems. It comes down to each browser to define their own interpretation of the way these widgets must look.

术语“ 平台本机外观 ”解释了为什么表单元素以一种不同的方式呈现(从一个浏览器到另一个浏览器以及跨不同的操作系统)。 取决于每个浏览器来定义他们自己对这些小部件外观的解释。

结论 (Conclusion)

Looking back, it’s understandable how replaced elements and form controls got mixed up. Diving deep into both the HTML and CSS specs was necessary in order to unearth the truth. They are different categories of HTML elements, with <input type="image"> being the only form control that is a replaced element.

回顾过去，可以理解将替换元素和表单控件混合在一起是可以理解的。 为了发掘真相，有必要深入研究HTML和CSS规范。 它们是HTML元素的不同类别，其中<input type="image">是唯一被替换的表单控件。

And here we are at the end of our quest. The results might not be exactly what we expected, but I think they show a clearer picture of a not-so-well-known area of HTML.

在这里，我们到了探索的尽头。 结果可能并不完全符合我们的预期，但我认为它们显示了不太知名HTML区域的清晰图片。

翻译自: https://www.sitepoint.com/replaced-elements-html-myths-realities/

替换元素和非替换元素