blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon anjia

Terminology

Open anjia opened this issue 6 years ago • 3 comments

Object-Sizing

  • intrinsic dimensions
  • specified size
  • default object size
  • concrete object size

intrinsic dimensions 内在/固有尺寸

intrinsic dimensions 是指 intrinsic height, intrinsic width 和 intrinsic aspect ratio（宽高比）的集合。对于特定对象，每个都是有可能存在，也可能不存在。intrinsic dimensions 代表物体本身的 preferred 或者 natural size，它与上下文无关。CSS 没有定义如何找出 intrinsic dimensions。

举例：

  • 有3个的：raster images（光栅图像）是同时拥有这三个 intrinsic dimensions 的对象
  • 有1个的：SVG image 可能只有一个，那就是 intrinsic aspect ratio
  • 有0个的：
    • CSS gradients，它就没有一个 intrinsic dimensions
    • embedded documents 也没有，比如 HTML 里的 <iframe> 元素
  • 有2个的：
    • 通常，对象不能只有两个 intrinsic dimensions，因为任何两个都会自动算出第三个维度
    • 但是，有些 replaced elements（比如 form 控件）就只有两个，有 intrinsic width 和 intrinsic height 而没有 intrinsic aspect ratio

如果一个对象（比如 icon）有多个 sizes，则将最大的 size（按面积）作为它的 intrinsic size。如果在那个 size 上它有多个 aspect ratios，或者有多个 aspect ratios 但是没 size，则就使用最接近 default object size 的 aspect ratio 的 aspect ratio。通过使用 contain constraint（包含约束）fit 来看哪一个 aspect ratio 在 default object size 里 fitting 后的面积最大；如果最大面积有多个 sizes，那就选 the widest size 作为它的 intrinsic size。

specified size 指定大小

一个对象的 specified size 是由 CSS 指定的，比如通过 width, height, 或者 background-size 属性。 specified size 可以是确定的 width 和 height，可以是一组约束，也可以是它们的组合。

default object size 默认对象大小

default object size 是一个具有确定 height 和 width 的矩形，用来在既没有 intrinsic dimensions 也没有 specified size 的时候，确定 concrete object size 的。

concrete object size 具体对象大小

concrete object size 是综合对象的 intrinsic dimensions、specified size 以及 default object size，从而生成一个有明确 width 和 height 的矩形。

https://drafts.csswg.org/css-images-3/#sizing-terms

anjia avatar Nov 15 '18 15:11 anjia

Value Processing

1. declared values

2. cascaded values

3. specified value 指定值

4. computed value 计算值

computed value 是解析 specified value 的结果，通常会 absolutizing it（将它绝对化）以用于 inheritance

  • specified value 是 property definition table 中的 Computed Value 行定义的
  • computing 一个 relative value 通常会 absolutizes it
    • specified value 可以是 absolute（i.e. 不相对于另一个值，例如red和2mm），也可以是 relative（i.e. 是相对于另一个值，例如auto和2em）
    • absolutize relative value
      • 值是相对单位的（em ex vh vw）必须乘以适当的 reference size 变成 absolute 的
      • certain keywords（比如smaller bolder）必须根据其定义被替换掉
      • percentage 必须乘以相应的 reference value
      • 有效的 valid relative URLs 必须解析成 absolute 的
  • 注意：
    • computed value 是 inheritance 期间从 parent 传到 child 的 value。由于历史原因，它不一定是getComputedStyle()函数的返回值
    • 通常，the computed value 解析 the specified value 时，会尽可能的不 laying out the document，也尽可能的不执行其它 expensive 或者 hard-to-parallelize（难以并行化的）操作，比如解析 network requests 和 retrieving 既不是本元素的也不是其父元素的 values

computed value 也可能存在，即使 property 没有 apply-应用（属性定义表格里的 Applies To 行会给出）。但是，some properties 可能会根据 property 是否应用于 element 来更改确定 computed value 的方式。

5. used value

6. actual values

https://www.w3.org/TR/css-cascade-4/#value-stages

anjia avatar Feb 13 '19 05:02 anjia

shorthand property

shorthand property longhand sub-properties

有些 properties 是 shorthand properties，这意味着它们允许 authors 使用 single property 指定 several properties 的值。shorthand property 设置其所有的 longhand sub-properties。

eg. background font

若 shorthand 形式里省略了某些值，除非另外定义，否则每个 missing 的 sub-property 会被分配成它的 initial value。

https://www.w3.org/TR/css-cascade-4/#shorthand

anjia avatar Feb 13 '19 05:02 anjia

Abstract Box Terminology

CSS 里有三组 directional terms（方向性术语）：

physical 是相对 page 的，和 writing mode 无关。physical directions 包括：

  • left, right
  • top, bottom

flow-relative 是相对 the flow of content（内容流）的。flow-relative directions 包括：

  • start, end
  • block-start, block-end
  • inline-start, inline-end（如何 dimension 也不明确）

line-relative 是相对 orientation of the line box 的。line-relative directions 包括：

  • line-left, line-right
  • line-over, line-under

physical dimensions（物理尺寸）是 width 和 height，分别对应沿 x-axis（horizontal dimension）和 y-axis（vertical dimension）的 measurements（测量值）。Abstract dimensions（抽象尺寸）在 flow-relative 和 line-relative 的术语中都是一样的，所以只有一组术语。

flexbox 还定义了 flex-relative 术语，用于描述 flex layout

1. Abstract Dimensions

  • block dimension
  • inline dimension
  • block axis
  • inline axis
  • block size / logical height
  • inline size / logical width

2. Flow-relative Directions

  • block-start
  • block-end
  • inline-start
  • inline-end

3. Line-relative Directions

  • over / line-over
  • under / line-under
  • line-left
  • line-right

4. Abstract-to-Physical Mappings

下面的表格总结了 abstract-to-physical mappings：

1 abstrack-physical-mapping

点击查看最新的

https://www.w3.org/TR/css-writing-modes-4/#abstract-box

anjia avatar Feb 14 '19 07:02 anjia