前几天，我使用css网格和自定义属性来解决一些问题，而这些问题在一两年前似乎几乎是不可能的。这让我想知道：几年后我可能会写什么css，而今天看来似乎有些牵强。
只是为了好玩，我浏览了一些我最近的css文件，并使用了希望存在的虚构css功能重写了部分内容。然后，我请了一些能干的“云四”工作人员来帮助我说明其中的一些想法。
据我所知，在撰写本文时，这些示例都不是真实的?……它们纯粹是幻想！
容器查询
这是最缺少的css功能，而我继续在每个项目中找到用例。这是一个简单的例子：仅当元素的宽度小于整个视口宽度时，才将其圆角。
.card:media(width < 100vw) {
border-radius: 0.5em;
}
网站建设
保罗·赫伯特的插图内容感知svg
诸如postcss inline svg之类的插件使我对未来充满信心，因为svg不仅是我们演示的内容，而且是我们演示文稿的一流公民。
@svg icon-star {
content: url(/icons/star.svg);
stroke: currentcolor;
stroke-width: 0.125em;
}
.icon-star {
background-image: icon-star;
}
对齐字体中位数
vertical-align: middle将元素与文本的基线对齐，减去其x高度的一半。这使得它不太适合象图标这样的字形大小的元素，它们看起来总是有点太低。理想情况下，我们将具有一个与字体的顶盖高度的中间对齐的属性。
.icon {
vertical-align: text-middle;
}
从文档借用滚动行为
使子元素独立于文档滚动很容易。但是，很容易允许模式和菜单之类的“全屏”元素接管为文档的主要滚动元素。
.menu.is-open {
overflow: document;
}
点击/触摸目标尺寸
使元素足够大以至于我们的手指可能比看起来更具挑战性。如果可以通过css操作交互式区域，这将是很大的事情！
.button {
pointer-box-offset: 0.5rem;
}
danielle romo的插图兄弟姐妹之间的伪元素
像面包屑这样的水平导航模式通常在每个段之间都包含视觉分隔符。尽管有几种方法可以通过css设置这些分隔符的样式（例如，使用伪元素和相邻的同级选择器），但数量惊人的网站仍然在html中使用硬编码竖线或其他文本字符。
也许我们需要的是一种在相邻元素之间注入内容的简单方法，而不是之前或之后？
.breadcrumbs > *::between {
content: ?;
margin: 0 2ch;
}
网站建设
danielle romo的插图轻松样式表单
我们不能只覆盖<select>箭头和类似的细节而不完全消除它们，这感觉有点傻。
select::expand {
content: url(icons/arrow-down.svg);
}
保罗·赫伯特的插图光学余量对齐
东西我总是从我的平面设计天怀念的是能够自动对准引号，大写的“t”字，等稍微过去框缘，使他们看起来更具有视觉平衡。
body {
text-align: optical left;
}
更新：?amelia bellamy-royds有帮助地指出，此属性可能部分解决了hanging-punctuation。它只有在safari支持写这篇文章的，但它看起来像一个可喜的一步！
缓梯度
渐变在浏览器中看起来很粗糙，而无需应用任何缓动！交叉指责，最终使它成为了css规范。
.example {
background-image: linear-gradient(to bottom, cubic-bezier(0.455, 0.03, 0.515, 0.955), #456bd9, #f14ca3);
}
网站建设
arianna chau的插图