深入前端之replaced element

JunYu發表於2019-02-12
前端

閱讀注意事項

  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的演算法。

  1. 主要是幾個例子。raster image這個object同時擁有3個intrinsic dimensions value。SVG iamges可能只擁有一個intrinsic aspect ratio或者intrinsic width或者intrinsic height.CSS gradient3種intrinsic dimension value都沒有。
  2. 主要是一些邊界情況，比如如果一個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

相關文章