blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon anjia

CSS WG

Open anjia opened this issue 6 years ago • 4 comments

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 avatar Oct 16 '18 07:10 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 avatar Oct 16 '18 10:10 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 avatar Oct 18 '18 03:10 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 avatar Oct 18 '18 11:10 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自定义变量
    • 若只是场景/上下文之类不同，若弄个新概念/新概念有点大
    • 后期的更新，也不好维护

anjia avatar Oct 20 '18 21:10 anjia