2019 年 CSS 愿望清单 | CSS-Tricks

您希望 CSS 可以原生实现哪些现在还无法实现的功能？首先，让我们回顾一下我们上次在 2013 年做这件事的时候。

❌ “我希望能够根据元素是否包含另一个特定选择器来选择元素”
❌ “我希望能够根据元素包含的内容来选择元素”
❌ “我希望有多个伪元素”
❌ “我希望能够将某个元素动画/过渡到 height: auto;“
❌ “我希望有 Sass 的功能，比如 @extend、@mixin 和嵌套”
❌ “我希望有 ::nth-letter、::nth-word 等”
✅ “我希望所有主要浏览器都能自动更新”

哎哟，好吧。我不确定这些功能是否真的有那么受欢迎，或者它们是否真的可以实现。它们只是我认为在 2013 年可能很有用的想法，事实证明，我现在仍然觉得它们有用。

这一次，我们不自己列出愿望，而是去网上看看其他人整理的 CSS 愿望清单。

TLDR 清单

在观察了人们对 CSS 愿望的讨论来源后，这些似乎是最常见的请求

父查询。即，以任何方式选择一个元素，然后选择该元素的父元素。我们有一些证据表明，使用 :focus-within 可以实现这一点。
容器查询。当元素本身处于特定条件下时，选择该元素。
表单元素的标准化样式。
Has/Contains 选择器。
向 auto 尺寸过渡。
视窗单位处理的改进。

值得注意的是，让我感到有趣的是，人们很少要求样式 *作用域*。它出现过几次，但不多。它似乎是 CSS-in-JS 讨论中的重要组成部分，所以我很惊讶在关于“CSS 需要什么”的普遍讨论中很少提及它。

Jen Simmons 询问了我们的愿望清单

列出我对 CSS 在 2019 年想看到发生的事情的愿望清单。您的清单上有什么？您想学习的东西？您希望得到帮助解决的问题？您需要的新的属性？您希望可以编码的设计想法？您希望拥有的资源？说出您的愿望。

— Jen Simmons (@jensimmons) 2018 年 11 月 14 日

该话题下值得注意的回复

纵横比（它在 CSS 中非常棘手，可能会添加到 HTML 中，也许有一天我们会通过一个属性在 CSS 中原生获得它）
排除
区域
子网格 (即将推出！)
text-wrap: avoid-widows-and-orphans
嵌套
带圆角的轮廓
动画背景渐变（无需通过移动它们或其他方式来伪造）
text-overflow:ellipsis 在多行上 / 行截断
从 0 到 auto 的过渡
父选择器
异步 @import
数学函数，例如 sqrt()、sin() 和 cos()
font-min-size 和 font-max-size
砌体

Tab Atkins 想知道 CSS 中哪些部分让我们最头疼

由于浏览器行为差异，CSS 中哪些部分让您最头疼？收集一些数据，请转发。（如果移动设备和台式机答案不同，请告诉我。）

— 💖Taudry Hepburn💖 (@tabatkins) 2018 年 10 月 3 日

该话题下值得注意的回复

人们强烈要求以标准化方式对表单元素进行样式化 - 不仅是为了样式设计，而且是为了可访问性，以防止为样式牺牲标准。
能够使用 @supports 测试对除属性/值以外的其他内容的浏览器支持
改进视窗单位处理及其与其他浏览器 UI 的关系
改进对多列布局处理的处理
弹性滚动

Tommy Hodgins 在 Twitter 上做了一个 CSS+JS 圣诞日历，记录了一些有趣的功能

12 月 1 日：父选择器 🎄🎁 虽然 CSS 没有 :parent 选择器，但您可以使用一个小 JavaScript 函数来创建自己的选择器，并在今天的 CSS 样式表中使用 [–parent] 这样的选择器！

演示：https://#/9N1A1Un8XT
代码：https://#/NNUuvOi1zH #css #javascript pic.twitter.com/Nv8V3rl2AF

— Tommy Hodgins (@innovati) 2018 年 12 月 1 日

Tommy 的清单

父选择器
Has 选择器
Closest 选择器
文档中的第一个元素（就像 querySelector 的工作方式一样）
兄弟选择器
前一个兄弟选择器
Contains 选择器
正则表达式选择器
计算后的样式选择器
:nth-letter / :nth-word
媒体伪选择器
非空白的有效/无效选择器
元素查询
属性比较选择器
自定义特异性
可见性选择器
溢出检测选择器
用户代理检测选择器
存储查询
日期查询
协议查询
深度悬停

我们也询问过

整理一份最想要的原生 CSS 功能清单。有许多想法！

告诉我快速的想法。不要想太多。

— CSS-Tricks (@css) 2018 年 12 月 17 日

该话题下值得注意的回复

容器查询
Has 选择器
区域
颜色修改函数
嵌套
着色器
向 auto 尺寸过渡 / 从 display: none; 过渡
前一个兄弟选择器
font-size: fit;
对 grid-template-areas 进行样式化
在 grid-template-areas 之间进行动画
自定义属性的类型
clip-path 接受路径
inline-styles: ignore;
纵横比
作用域
// 单行注释
角形

Bert de Vries

# 2019 年 1 月 18 日

可能不完全与主题相关，但有一件事是我真正希望在 CSS 中实现的。我希望有一种方法可以使未使用的 CSS 规则可见。就像一个可以打开和关闭的日志文件，它会列出给定 HTML 页面中未使用的或始终被覆盖的选择器。我不知道这样的功能是否可行，但如果有就太好了。这样就可以清理 CSS。我从未找到过类似的功能，也没有任何关于它的请求。

Nicola

评论永久链接# 2019 年 1 月 18 日

这没有您的评论中提到的那么强大，但您见过 Chrome 开发者工具中的覆盖率选项卡吗？
今天看到了这篇文章
https://umaar.com/dev-tips/121-css-coverage/

或者
https://www.vojtechruzicka.com/measuring-javascript-and-css-coverage-with-google-chrome-developer-tools/

Peter

# 2019 年 1 月 18 日

怎么样：基于视窗方向（纵向/横向）的媒体查询

或者这已经可以实现了吗？

Ana Tudor

评论永久链接# 2019 年 1 月 18 日

可以！它已经可以实现超过五年了。演示.
Adam Giese

评论永久链接# 2019 年 1 月 18 日

现在可以实现！点击此处了解更多信息.

一项非常有用的功能！

Alex

# 2019 年 1 月 18 日

我希望有一个简单的
text-align: center center;
用于水平和垂直居中。
在 2019 年，我们仍然必须使用奇怪的技巧或不合理的 div 嵌套。

Brad

评论永久链接# 2019 年 1 月 18 日

这是一个布局问题，而不是文本对齐问题。它不是一行代码，但 flexbox 可以轻松实现这一点。
Josiah

永久链接到评论# 2019 年 1 月 25 日

如果您知道包含文本的容器的高度，并且文本只有一行，那么这很容易实现。将行高设置为元素高度。

当然，这是一个非常具体的用例，不涵盖大多数情况。如果您不知道容器高度或文本有多行，可以使用 position: relative; top: 50%; transform: translateY(-50%);。

请参阅我的演示，它展示了两种方法。我同意 text-align: center center 很好。不过，这需要修改现有规则才能变成简写形式。我们不需要 text-align，而是需要 text-align-vertical 和 text-align-horizontal，而 text-align 将成为简写形式，如果只传递一个值，它将应用于两者？text-align: center 与 text-align: center center 相同吗？这将是一个问题。因为如果您使用 text-align: left，它会尝试将“left”应用于 text-align-vertical 吗？

这个想法很好，但我不知道该如何执行。

Luca

# 2019 年 1 月 18 日

我认为，如果来自许多人多次请求相同的东西，并且从 2013 年开始……也许 W3 应该问自己“我们是否会满足开发者的需求？”并重新考虑一些观点……
我个人非常希望拥有父选择器和容器查询……最重要的是

Gibran Malheiros

永久链接到评论# 2019 年 1 月 22 日

一些提案面临着巨大的挑战，例如容器查询，这样的功能很容易触发无限循环的重绘，如果两个元素以触发另一个元素更改的方式对更改做出反应，例如父元素和子元素或两个兄弟元素。

然后是父选择器，我找不到官方的提案，但大多数文章都建议使用 < 或 :parent 语法。引入这样的东西并不简单，想象一下：a < img 选择具有图像子元素的锚点，但是有人这样写：a < img + span 或 a < img > span，这可能会让人抓狂，这甚至违背了 CSS 的“级联”部分。

吃你的幽灵

# 2019 年 1 月 18 日

父选择器在我的列表中排名非常高，类似于

.my-child-element:parent(.my-parent-element) {
    // Style the parent
}

Ana Tudor

# 2019 年 1 月 18 日

**无需使用 background-position 或 background-size 即可动画化渐变**。我们在 IE10+ 和 Edge 中拥有这个功能超过五年，但似乎没有人注意到，现在它要被完全放弃了。

哦，好吧，这就像 Chrome 现在没有更强大的功能——动画化 CSS 变量的能力，这意味着我们可以对渐变的不同组件进行不同的动画化。

例如，让我们考虑以下渐变

linear-gradient(var(--ang), var(--col-0) var(--pos-0), var(--col-1))

在这里，我们可以对每个 CSS 变量使用不同的动画（不同的关键帧集、不同的持续时间、不同的时序函数、不同的延迟），而动画化渐变本身（就像今天在 Edge 中可能做到的那样）意味着以相同的方式动画化所有内容。

当然，它仍然隐藏在一个标志（来自 chrome://flags 的**实验性 Web 平台功能**）后面，根据我被告知我的 Houdini 演示无法正常工作的情况来看，这个标志显然很难找到。对于想要了解更多的人，我在这里写了一篇文章。

**clip-path: path()**。它已经在 Firefox 中实现。静悄悄地，没有说任何话。它需要在 about:config 中将 layout.css.clip-path-path.enabled 设置为 true 才能正常工作。

我个人的真实想法？一般般。原因如下：path() 中的值是一个字符串值，与 SVG 路径的 d 属性的值一样，只接受无单位的值。这些值在 CSS 中是如何转换为的呢？像素！因此，用于此路径的坐标始终是相对于裁剪元素左上角的像素坐标。以下是一个测试。需要在 Firefox 中打开，并将上述标志设置为 true。

想要以这种方式实现任何响应式设计吗？抱歉，不行。目前更好的选择是使用子 SVG 并从 CSS 修改它的 d。只在 Chrome 中有效，并且不反映最新的规范更改，但至少它是响应式的！基本示例和更有趣的内容。

**有用的数学函数，如 floor()、abs()、pow()、三角函数**。我个人经常遇到这种需求。我最先想到的一些用例

**取模**。我可能有一堆类似的项目，假设它们在圆周上定位（想想类似这样的东西）。这是通过在每个项目上设置一个索引自定义属性 --i 以及另一个表示其父级上项目总数的自定义属性 --n 来实现的，然后将项目的 transform 设置为 rotate(calc(var(--i)*1turn/var(--n))) translate($r)。现在，假设我想让每隔一个项目变为黑色。目前，我可以使用类似 :nth-child(odd) { background: black } 的方法来实现，但是，如果可以使用取模，我可以只设置一次 background（!!!），使用 background: hsl(348, 83%, calc((var(--i)%2)*47%))。演示。
**abs()**。从在圆周上分布的项目示例开始，假设我想让它们的 opacity 在圆周的前半部分线性增加，然后在后半部分线性减少。使用 abs()，我们可以使用 opacity: calc(1 - abs(2*(var(--i) - .5*var(--n))/var(--n)))，但是现在我们必须更改一半元素的符号，这意味着必须在选择器中硬编码元素数量，例如 :nth-of-type(-n + 6)。
**pow()**。假设我想进行二次旋转。或者，假设我想让项目的 height 以三次方的形式增加。
**三角函数**。我主要的用例是同步旋转角度和缩放因子或平移距离，以便在动画化多个元素时，角落/边缘始终匹配。在此演示中，我需要同步亮黄色正方形的旋转角度和橙色正方形的后期倾斜缩放因子。这是通过在 JS 中进行三角运算，然后将值设置为 transform 中使用的自定义属性来实现的。我还可以尝试使用不同的时序函数来模拟旋转角度和缩放因子或平移距离，就像我在此演示中做到的那样，但这只是在硬编码每个情况下的 cubic-bezier()。

Claudio Jesiaj

# 2019 年 1 月 19 日

我认为“级联”样式表在“级联”概念方面存在一个大问题。
例如

div {.styel1.};
div p {.styel2.};
div p .someclass {.styel3.};
div p .someclass:hover {.styel4.};

为什么不在“级联”上写？类似于这样

 div [
      {.styel1.}
      p [
          {.styel2.}
          .someclass [
               {.styel3.}
               :hover {.styel4.}
          ]
       ]
 ]

优点
* 您可以在一个地方真正看到级联。
* 它易于更改和调试
* 它更紧凑，减小了文件大小

Gibran Malheiros

永久链接到评论# 2019 年 1 月 22 日

使用 SASS 等预处理器已经可以实现，但如果原生 CSS 可以实现就更好了。

Shalanah Dawson

# 2019 年 1 月 21 日

引领网络发展，引领网络发展！！！:)

line-height 已经够糟糕了，真的太糟糕了。

行高将允许垂直节奏（如果您想要的话），更重要的是，能够更无缝地匹配打印到网页或网页到打印（或从打印到网页到打印的整个范围）。

我努力寻找一种在网络上创建行高的方法，但它不应该那么难。（https://github.com/shalanah/baseline）。

此外，还要感谢跨浏览器文本具有始终一致的空白换行符。

Gibran Malheiros

# 2019 年 1 月 22 日

“前一个兄弟选择器”是否与“相邻兄弟组合器”相反？
如果是的话，我把所有的硬币都投到这个上了！

Philip

# 2019 年 1 月 22 日

CSS 混合模式（如正片叠底、色相和叠加）成为主流并得到支持，将使设计师在探索视觉界限方面变得更加轻松。

Thibaut Allender

# 2019 年 1 月 22 日

纵横比可能也会出现。至少有一个草案
https://drafts.csswg.org/css-sizing-4/#ratios

lamka02sk

# 2019 年 1 月 27 日

我希望有一些方法可以检查元素是否处于粘性位置。例如 :sticky 选择器。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。