深刻前端之replaced element

阅读注意事项

1. 本篇文章的依赖主要是html specification 和 CSS specification。也就是说都是第一手资料，而不是转手资料。
2. 本篇总体比较细节和理论，可能会看起来枯燥。可是我认为有时候阅读枯燥的文档式文章是有必要的。
3. 写这篇的文章主要目的在于集群众之力量来修补本身之知识图谱。所以但愿你们可以多多指出文章中不恰当之地方。
4. 永久博文地址

introduction

在阅读CSS2 visual formatting model details时，里面出现了大量的关于replaced element和non-replaced element的概念。visual formatting model details中将element在inline-level and block-level和replaced and non-replaced两个不一样的维度展开描述。所以，若是咱们想要深刻理解CSS的内部世界，那么理解replaced element的概念就是必不可少的了。

那么本篇笔记主要解决下面几个问题：

1. 什么是replaced element?
2. 什么是intrinsic dimensions?
3. 实际开发中如何计算replaced element的尺寸?
4. 对于前端来说，HTML中具体有哪些elments能够被认为是replaced element?

什么是replaced element

w3c css2.2中对replaced element有一段简短的描述(来源于3.conformance: Requirements and Recommendations):

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).

从这段基本的描述中，咱们能够总结出什么：

1. replaced element的content处于CSS formatting model控制以外。
2. 常见的replaced element好比image, embedded document, applet
3. replaced element一般包含intrinsic dimensions: intrinsic width, intrinsic height, intrinsic ratio。可是并非全部的replaced element都同时包含这三个属性值。
4. 推论：replaced element之因此冠以replaced的形容词，是由于这类element的内容会被指向的外部资源给replace掉。

上述的描述中引入一个新的名词intrinsic dimensions. 那么，咱们来看一看什么事intrinsic dimensions.

什么是intrinsic dimensions

从文字意义上来看，intrinsic dimensions表示的是内部尺寸。

另外，w3c CSS2.2中一样对intrinsic dimensions给出了一段简短的描述:

The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.

从上面的定义中咱们能够总结出几点：

1. CSS2中只有replaced element有intrinsic dimensions.
2. replaced element的width和height都由element本身定义.

可是，咱们光从上面的定义中很难真正的理解intrinsic dimensions. 所以咱们再来看CSS3，CSS Image Values and Replaced Content Module Level 3 5.1小节有更加精确的定义：

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. Raster images are an example of an object with all three intrinsic dimensions. SVG images designed to scale might have only an intrinsic aspect ratio; SVG images can also be created with only an intrinsic width or height. CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all. Another example of this is embedded documents, such as the<iframe> element in HTML. An object cannot have only two intrinsic dimensions, as any two automatically define the third. If an object (such as an icon) has multiple sizes, then the largest size (by area) is taken as its intrinsic size. If it has multiple aspect ratios at that size, or has multiple aspect ratios and no size, then the aspect ratio closest to the aspect ratio of the default object size is used. Determine this by seeing which aspect ratio produces the largest area when fitting it within the default object size using a contain fit; if multiple sizes tie for the largest area, the wider size is chosen as its intrinsic size.

上面的definition主要包含4大块内容：

1. 术语intrinsic dimensions一般指代intrinsic height， intrinsic width, intrinsic aspect ratio(width / height)三种值的集合。可是对于不一样replaced element中的object来说，这三种value不必定都会存在。
2. intrinsic dimensions表示的是引入object的本身的natural size,也就意味着这是和context无关的。一般来说，CSS并不会定义如何得到intrinsic dimensions.

这里若是仔细的话，咱们这里使用了element和object两个名词。使用两个不一样的名词是有必定的目的的。首先咱们在html specific replaced element中了解到html中的replaced element能够是<audio>,<img>,<canvas>,<embed>,<iframe>,<input>, <object>, <video>这几种。另外咱们在什么是replaced element小节中推论到，replaced element之因此冠以replaced的形容词，是由于这类element的内容会被指向的外部资源给replace掉。因此这里就使用了element和object两个名词，object表示引入的外部资源自己，资源自己会有本身固定的的dimensions。 Note：可是，这并不意味着咱们没法使用CSS来控制html element的外部展现，CSS控制replaced element的布局和intrinsic dimension二者并不冲突。具体细节能够看下面concrete object size的算法。

3. 主要是几个例子。raster image这个object同时拥有3个intrinsic dimensions value。SVG iamges可能只拥有一个intrinsic aspect ratio或者intrinsic width或者intrinsic height.CSS gradient3种intrinsic dimension value都没有。
4. 主要是一些边界状况，好比若是一个object有多个size。那么该选择哪个？规范中是largest size将会做为该object的intrinsic size.若是有多个aspect ratio值，那么最接近ratio of the default object size的aspect ratio将会被选择。若是default object size使用contain fit的话，产生最大area的aspect ratio将会被选择。

可是，这些定义对于咱们实际开发当中有什么用呢？ 换个角度来说，就是咱们在实际开发中，replaced element的布局与尺寸该如何来计算呢？

要给出上面的答案，咱们可能还须要知道更多相关的名词：

specified size The specified size of an object is given by CSS, such as through the ‘width’ and ‘height’ or ‘background-size’ properties. The specified size can be a definite width and height, a set of constraints, or a combination thereof. concrete object size The concrete object size is the result of combining an object's intrinsic dimensions and specified size with the default object size of the context it's used in, producing a rectangle with a definite width and height. default object size The default object size is a rectangle with a definite height and width used to determine the concrete object size when both the intrinsic dimensions and specified size are missing dimensions.

有上面的定义能够知道：

1. specified size: specified size由CSS指定，好比经过width、height、background-size属性。specified size能够是有限的width和height, constraints集合或者二者的结合。
2. concrete object size: concrete object size由object's intrinsic dimensions, specified size和default object size这三者决定，产生一个有definite width and height的矩形。
3. default object size: default object size是一个有definite height and width的矩形。

理解了上面三种size的定义，咱们开始来看看在规范的5.2 CSS Object Negotiation中Objects in CSS 的size是如何被决定而且渲染的：

1. When an image or object is specified in a document, such as through a ‘url()’ value in a ‘background-image’ property or an src attribute on an <img> element, CSS queries the object for its intrinsic dimensions.
2. Using the intrinsic dimensions, the specified size, and the default object size for the context the image or object is used in, CSS then computes a concrete object size. (See the following section.) This defines the size and position of the region the object will render in.
3. CSS asks the object to render itself at the concrete object size. CSS does not define how objects render when the concrete object size is different from the object's intrinsic dimensions. The object may adjust itself to match the concrete object size in some way, or even render itself larger or smaller than the concrete object size to satisfy sizing constraints of its own.
4. Unless otherwise specified by CSS, the object is then clipped to the concrete object size.

1. 第一步，当image or object在document当中被指定（好比background-image经过url()或者<img> element经过src来指定），CSS会先去查找object的intrinsic size.
2. 第二步，浏览器根据intrinsic dimensions, specified size, 和 default object size来计算出concrete object size(具体计算方法看下面).
3. 第三步，CSS通知object根据concrete object size来渲染本身。CSS并无规定当concrete object size和intinsic dimensions不同的时候该如何渲染。object可能会本身调整本身来适应concrete object size或者为了知足本身的sizing constraints来大于或小于concrete object size。
4. 第四步，除非CSS另有指定，否则object会被剪切为concrete object size大小。

下面咱们展开来说解一下第二步- 如何肯定concrete object size。在规范5.3. Concrete Object Size Resolution中介绍了Default Sizing Algorithm:

1. 若是specified size是有限的width和height，那么concrete object size的值就是specified size.
2. 若是specified size只有width或height其中一个。那么concrete object size的相同属性的值为specified size提供。另一个值由如下方式来计算：
   1. 若是该object拥有intrinsic aspect ratio, 那么concrete object size将使用intrinsic aspect ratio来计算。
   2. 不然的话，咱们再看缺乏的dimension是否在object的intrinsic dimensions中存在，若是存在，则取用该值。
   3. 不然的话，concrete object size缺乏的dimension则取用default object size.
3. 若是specified size没有任何的constraints：
   1. 若是object有intrinsic height或者intrinsic width，那么该concrete object size由intrinsic size来决定。
   2. 不然的话，concrete object size则被当作是相对于default object size的contain constraint。

另外，咱们须要了解两个常见的specified sizes：contain constraint和cover constraint.二者都是经过constraint rectangle和object's intrinsic aspect ratio来决定concrete object size的大小。

• contain constraint: concrete object size将会被设置为一个根据object's intrinsic aspect ratio计算出来的最大的rectangle，而且该rectangle的width或height都各自比constraint rectangle的wdith和height小或相等。
• cover constraint:concrete object size会被设置成一个根据object's intrinsic aspect ratio计算出来的最小的rectangle，而且该rectangle的width或height都各自比constraint rectangle的width和height大或相等。
• 在上面两种状况下，若是object没有intrinsic aspect ratio，那么concrete object size就是specified constraint rectangle.

HTML中有哪些元素能够被称为replaced element

从上面的内容，我能够知道replaced element的定义和计算细节。那么HTML中有哪些元素能够被称为replaced element呢？ 这个咱们得从HTML standard 14.4 replaced element中来看。 规范中主要将replaced element分为两大类：

1. Embedded content(嵌入内容):

   • 首先，<embed>, <iframe>, <video> 这三种元素被看做是replaced elements.
   • 对于<canvas>元素来说，若是<canvas>中表明的是embedded content,那么该<canvas>元素也被看成replaced element(好比<canvas>中的content是bitmap)。不然的话，<canvas>会被看做是普通的rendering model中的元素。
   • 对于<object>元素来说，和<canvas>同样得分为两种状况。<object>中展现的是image, plugin, nested browsing context(好比iframe) 时被看作是replaced element.其余状况下被认为是普通元素。
   • 对于<audio>来说，一般browser会对这类元素有对应的user interface，若是<audio>的user interface被展现，那么<audio>就会被认为是replaced element.

2. Images: HTML当中中images主要分为2种：<img>和<input type="image"> user agent主要按照下面的规则来render上面两种元素：

   • 若是该元素展现的image: 那么user agent将认为该元素是replaced element，而且根据CSS来render。
   • 若是该element不展现image,可是该element包含intrinsic dimensions（好比来自dimension attributes 或CSS rules）- 该element被认为是replaced element:
     • user agent认为image在未来会是肯用的而且会在适当的时候被render
     • 或者 element没有alt attribute
     • 或者当前document处于quirks mode.
   • 若是<img> element表示的是一些文本而且user agent不但愿其发生改变： 该元素被看作是non-replaced phrasing element
   • 若是<img> element表示的是nonthing,而且user agent不但愿其发生改变：该元素被看作是empty inline element
   • 若是input element不展现image而且user agent不但愿其发生改变：那么该element被看作是replaced element（元素包含一个button，button的内容是element的可替换内容）。

Note：1. 对于embed, iframe, img, object元素或者<input type="image">元素的align attribute等于center or middle时，该element的vertical-align将会被设定为value（element的vertical middle和parent element baseline 对齐）。

总结

到这里为止，咱们基本已经可以来回答在introduction中提出的4个问题。对于更多的细节（好比width和height如何计算等等）能够看specification。

reference

1. 3.conformance: Requirements and Recommendations
2. CSS Image Values and Replaced Content Module Level 3
3. HTML standard 14.4 replaced element
4. Replaced Elements in HTML: Myths and Realities