search

anjia / blog

博客，积累与沉淀
106 stars 4 forks source link

CSS WG #27

Open anjia opened 5 years ago

anjia commented 5 years ago

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 的新代表人

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

anjia commented 5 years ago

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

涉及规范：CSS Text Decoration Module Level 4

该提议里提到的问题：

  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 commented 5 years ago

Constructable Stylesheet Objects

解决的问题

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

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

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

所以本次提议了这个。

简介

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

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

使用：

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 commented 5 years ago

Spatial Navigation

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

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

规范目前是ED，Editors 是：

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

它能：

其它：

anjia commented 5 years ago

CSS Environment Variables

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

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

与 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.