css3 文字旋转-改变 CSS 编写方式的 5 个新功能

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

p { font-size: 18px }

如果我们想添加更多样式怎么办？ 嗯，CSS是向上级联的，所以我们只需要在它后面添加一些样式即可。

p {
  font-size: 18px
}
p {
  font-weight: bold;
  font-size: 20px;
  color: red;
}

到目前为止css3 文字旋转，它只是基本的 CSS，没有什么革命性的。 另外，如果我们想要设置字体粗细和颜色的样式css3 文字旋转，但保留字体大小怎么办？ 显而易见的解决方案是删除 font-size:20px 行，但有一种新方法，使用“图层”：

p {
  font-size: 18px;
}
@layer type {
  p {
    font-weight: bold;
    font-size: 20px;
    color: red;
  }
}

此 CSS 的结果将以斜体、红色和 18 像素的字体大小显示段落。 再读一遍。虽然第二个 p 选择器更具体（由于其位置较深），但由于它位于“type”层内部，因此 20 px 字体大小不会覆盖 18 px 字体大小

你也可以这样想，@layer里面的所有东西都写在样式表的底部，像这样：

/*How it's written*/
p {
  font-size: 18px;
}
@layer type {
  p {
    font-weight: bold;
    font-size: 20px;
    color: red;
  }
}
/*How it's rendered*/
p {
  font-weight: bold;
  font-size: 20px;
  color: red;
}
p {
  font-size: 18px;
}

我们还可以这样组织视口的渲染顺序：

@layer template, unique;
p { font-size: 18px; }
@layer unique {
  p {
    font-size: 12px;
  }
}
@layer template {
  p {
    font-size: 20px;
  }
}

这是因为模板位于样式表底部的唯一元素之前。

p {
  font-size: 12px;
}
p {
  font-size: 20px;
}
p {
  font-size: 18px; 
}

还可以在样式表中导出特定视口，就像导出 JS 模块或 Python 库一样：

@import "style.css" layer(template);

4.再见变形

我记得当变形刚出现时，它们非常棒。 您可以缩放元素、旋转它们、扭曲它们，甚至将它们制作成 3D 形状。

然而他们总是有一个问题。 假设你有这样的 CSS：

div {
   transform: translate(-50%, -50%) rotate(10deg)
}

稍后你想添加悬停缩放效果，你必须再次编辑它：

div:where(:hover, :focus) { 
   transform: translate(-50%, -50%) rotate(10deg) scale(1.1)
}

这个编码真是让人头疼

值得庆幸的是，今天我们有了新的选择。 我们可以完全放弃变换，但不用它们来设计我们的元素。

div {
   translate: -50%, -50%;
   rotate: 10deg;
}
div:where(:hover, :focus) {
   scale: 1.1;
}

来自用户代理的代码

CSS 自定义属性允许我们在代码中保存样式并在以后重用它们，如下所示：

:root {
  --color: red;
}
p { var(--color); }
img { border: 2px solid var(--red); }

然而，虽然这是由我们程序员定义的，但用户代理还定义了其他样式。 我们可以通过 env() 风格访问它们。 目前，只有八种此类样式可用：

/*the safe-area-inset-* styles */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
/*the titlebar-are-* styles */
env(titlebar-area-x)
env(titlebar-area-y)
env(titlebar-area-width)
env(titlebar-area-height)

前四个定义浏览器窗口的底部、右侧、底部和侧面的填充。 这在非圆形屏幕上非常方便，例如智能手表或一些屏幕弯曲到边缘的手机。 您可以直接使用这样的 safe-area-inset-*，但它们的值为 0 像素。

titlebar-area-* 样式仅适用于渐进式 Web 应用程序，但仅在使用 window-controls-overlaydisplay_override 值时可用。 它们可用于防止 PWA 覆盖最小化、最大化和关闭按钮。

好吧，我想不出任何其他反例，其中用户代理可以与样式表通信以确定显示方法。 是的，您可以使用 @media(prefers-color-scheme:dark) 来检测深色模式，或者您可以强制复印机复印带有背景图像的内容。

@media print {
  * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
  }
}

但这些与实际从用户代理获取值并将其倒入样式表不同。 虽然当前的应用程序受到限制，但我可以想象未来的应用程序可能会获取默认的操作系统字体或通过类似的方式获取浏览器的缩放级别。

body { font-size: calc(100% * env(browser-zoom-level)); }

目前我们在这方面遇到了困难，这对开发人员来说是一个两难的境地。

虽然 env() 的用例并不多，但它确实有可能改变我们编写 CSS 的方式，这是我们应该意识到的。

您认为哪些新功能会改变我们编写 CSS 的方式？ 让我们在评论中知道！