CSS WG

[anjia]

Schedule 见 TPAC 2018 / CSS WG

Proposed Agenda

1. csswg-drafts 有 4+n 个 Issues
   • Initial Letter Layout 和 other Inline Layout 相关的
   • 3118, [css-text-decor-4] Rethinking text-underline-offset,
   • 1744, 提议把 lang 作为 font-face 描述符, 理想情况下用 I18n Core
   • 2875, Apple's color-filter proposal (status gathering)
   • 3117, src:local() font 唯一名字匹配 ambiguous & restricts matched locale
2. Tuesday: Constructable Stylesheet Objects Idea
   • 共12个issues
     • 相同结构的样式表，能在两个不同的的文档里使用吗？
     • 需要定义从 sheet 中获取的各种加载的内容
     • 在 adoptStyleSheets 里，我们可以从<style>/<link>里使用 CSSStyleSheets 吗？
     • adoptedStyleSheets, 我们是用 FrozenArray 还是 StyleSheetList?
   • 要把这个 spec 从 WICG 移到 CSS WG 吗？
   • Blink 有实现的兴趣
3. CSS Environment Variables Module Level 1 ED
4. CSS Text Module Level 4 text-spacing属性
5. CSS Scrollbars Module Level 1,FPWD
   • 标准化了 color scrollbars，它是 Windows IE 5.5 在 2000 年引入的
   • 实验性的 implementation? 还要点 demos?
6. CSS Basic User Interface Module Level 4 ED 共4个
   • [css-ui-4] [Agenda+ F2F] 的2个 Issues
   • 及其它2个
7. Spatial Navigation
8. fxtf-drafts 有2个 Issues
   • FX Task Force 是和 graphics 相关的资源，CSS WG 和 SVG WG
   • 282, 根元素的 filter 效果
   • 53, Backdrop filters
9. 确定 CSS A11Y task force 的新代表人
   • CSS A11Y TF
   • CSS Accessibility Task Force, CSS无障碍功能工作组
   • https://www.w3.org/WAI/APA/task-forces/css-a11y/

https://wiki.csswg.org/planning/tpac-2018

[anjia]

3118, [css-text-decor-4] Rethinking text-underline-offset

涉及规范：CSS Text Decoration Module Level 4

• text-underline-offset定义了下划线从它 initial position 的 offset
  • 下划线的 initial position 依赖于text-underline-position，有对应关系
    • 不是由UA自行决定，当值是auto时才会由UA自行决定
  • 值可以是auto | from-font | <length>
    • from-font 是 Level 4 新增的，它可让author决定UA是否用字体本身带的下划线信息
      • 详见 Issue 459, 2376
• text-underline-position
  • 加入原因：设置和下划线UI（颜色-线条）无关的其它属性，并且和语言相关
  • 值可以是auto | under | left | right
    • under在元素的 text content 之下。此时下划线不会超过descender。也叫accounting下划线
    • under Chrome 33+ 已经支持了

该提议里提到的问题：

1. 当text-underline-offset:from-font和text-underline-position:under用同一元素时似乎无意义
   • from-font可以解析成0；或者算出字体下划线的最佳位置和baseline的距离-用它作为offset的值
2. text-underline-offset让它的值可以是个百分比，这样就能根据字体大小而响应式了
   • 嗯，这是一个问题。以后要让属性间的问题一致
     • 还可能涉及到其它属性 letter-spacing word-spacing line-height
3. text-underline-offset 和 text-underline-position 的区别，有人建议把两者合二为一
   • 合并了之后，两个属性需要一起继承吗？或者有没有典型的例子，需要重置其中的一个。

[anjia]

Constructable Stylesheet Objects

解决的问题

一个包含了很多Web组件的网页，可能同一个组件用了多次。但是每个组件却分别有个样式表<style>或者<link>，实在是有点 redundant，也不利于渲染引擎优化内存，也不利于组件构造的速度

大多数组件都用 Shadow DOM，目前是必须向 shadow root 指定一个<style>。问题就是：

• 它耗time和memory，如果用户代理强制为每个样式元素解析和存储样式表规则
• 有些UA也会优化，可能会尝试通过在样式元素的不同实例之间共享内部样式表
  • 问题是JS可能会修改样式规则，不利于样式表共享，也会在performance和memory里有大量成本
• shadow root 会包含3个元素

之前的解决方案 Shadow Piercing，虽然避免了在每一个 Shadow DOM 里都要一个 style 元素，但是封装性不好了。它现在已经从规范里移除了。

所以本次提议了这个。

简介

Constructable Stylesheet Objects 定义了CSSOM的附加功能，使 StyleSheet 对象可以直接构造，也提供了对应的方法和API，以便在自定义元素、相似元素的上下文中，更容易处理样式表。

它提供了一个API，可以在脚本里创建样式表对象，而不需要 style 元素。脚本可以选择 add/remove 规则，从一个 stylesheet object。每一个 stylesheet object 可以被添加到同文档中的任意多个 shadow roots。

使用：

• 每个 constructed 的CSSStylesheet都被绑到了它构建的Document，需要是同一个document tree。
• 自己变了后，被添加到的DocumentOrShadowRoot也会自动生效
• adoptedStyleSheets位置后点，所以优先级高点，和DocumentOrShadowRoot的style sheets相比。

https://discourse.wicg.io/t/proposal-constructable-stylesheet-objects/2572
https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md

---

1月底2月初正式提了一次。Blink 和 Mozilla 很感兴趣

2017年chromium有个bug说 shadow tree 里的StyleElement::processStyleSheet()还可以更快。
https://bugs.chromium.org/p/chromium/issues/detail?id=712080

2016年11月4日，（二者的具体区别，未细看）
https://tabatkins.github.io/specs/construct-stylesheets/

2016.3.30 在 w3c/webcomponents 报了个 Issue：给自定义元素提供一种轻量的机制来添加样式
Provide a lightweight mechanism to add styles to a custom element #468

[anjia]

Spatial Navigation

空间导航，使用箭头键移动焦点。不是单纯地用Tab键按顺序导航，而是根据位置来。

目的是将Web技术适普到其它领域，eg.TV, IVI, game console, smart devices, a11y下的PC和mobile。

规范目前是ED，Editors 是：

• Jihye Hong (LG Electronics)
• Florian Rivoal (Invited Expert)

它能：

• 将焦点快速移动到目标元素
  • 有些布局会让UI看到的和实际HTML写的顺序不一致，eg.grid布局, float这会让Tab键的顺序导航变得会不可预测
  • 可自定义然后只关注个别类型的元素；也可识别下最短路径，因为有时可获得焦点的元素太多了
• 按照作者的意图移动焦点

其它：

• 取下一个获得焦点元素的算法
• 会考虑当遇到可滚动的容器时

[anjia]

CSS Environment Variables

CSS Environment Variables 允许获取和使用 browser- 和 author- 定义的全局变量，比如 typography, color, notch 和其它 specific layout/device 的值。它用在 Media Queries 里。

有人提到说它算是从 cascade 里独立出来 CSS variables，好处是：

• for perf/code 组织
• 在媒体查询里可以用它们了

与 CSS 的自定义属性和var()类似

CSS Custom Properties 不能和 media queries 和 selectors 一起工作的原因，据说是因为它是 cascade 的，会导致一些很奇怪的无线循环的逻辑。

所以，不能用于MQ的真正原因是什么

另，The Notch 缺口，凹槽。就是iphone的刘海。
<meta name="viewport" content="viewport-fit=cover">。

如果想解决 the notch 的问题是evn()提出来的最初原因，那...

• 设计本身...
• 设备特定的问题。在其它浏览器上也有类似的问题吗？

详见：
https://drafts.csswg.org/css-env-1/
https://css-tricks.com/the-notch-and-css/

---

p.s.

• CSS环境变量要解决的问题，用CSS自定义变量能覆盖到吗？
  • 比如给var()增加个参数什么的
• 若可以，合并成一个挺好的。都用CSS自定义变量
  • 若只是场景/上下文之类不同，若弄个新概念/新概念有点大
  • 后期的更新，也不好维护