深入前端之replaced element

摘要： 在閱讀CSS2 visual formatting model details 時，裡面出現了大量的關於replaced element 和non-replaced element 的概念。visual formatting model details 中將e...

在閱讀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 的概念就是必不可少的了。

那麼本篇筆記主要解決下面幾個問題：

replaced element
intrinsic dimensions
replaced element
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 gradient 3種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 sizeThe 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 theintrinsic dimensions , thespecified size , and thedefault object size for the context the image or object is used in, CSS then computes aconcrete 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 對齊）。