深刻前端之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