为什么container-type: inline-size正常渲染跨度但折叠按钮：
<span style="container-type: inline-size; outline: 1px solid blue;">
This is a span
</span>
<button style="container-type: inline-size;">
This is a button
</button>我有一个通过 JavaScript 更改图标的页面。这在 Chrome 和 Firefox 上工作得很好，但在 Safari 上却不起作用。我什至添加了该<link rel="apple-touch-icon" href="favicon-1.png">部分并通过 JavaScript 对其进行了更改，但这也不起作用。
页面如下所示：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
<link rel="icon" type="image/png" href="favicon-1.png">
<link rel="apple-touch-icon" href="favicon-1.png">
<style>
</style>
</head>
<body></body>
<script>
setTimeout(() => {
var favicon = document.querySelector('link[rel="icon"]');
var appleTouchIcon = document.querySelector('link[rel="apple-touch-icon"]');
favicon.setAttribute('type', 'image/png');
favicon.setAttribute('href', 'favicon-2.png');
appleTouchIcon.setAttribute('href', 'favicon-2.png');
}, 4000);
</script>
</body>
</html>
有人能发现我在这里做错了什么吗？
使用容器查询时。我无法在容器查询本身中设置容器查询设置的元素的样式。就像下面这样。
.container {
width: 250px;
height: 250px;
background-color: hotpink;
container-type: inline-size;
}
@container (max-width: 768px) {
/* This selector doesn't work here */
.container {
background-color: red;
}
}<div class="container"></div>有谁知道为什么不能这样做？
他所有人，
有没有一种有效的方法来编写 oklch 颜色函数的后备？假设我有以下 css：
color: oklch(95%, 0.2, 0);
是否有构建工具或其他方式来创建后备，以便 css 看起来像这样：
color: #ffb0e9;
color: oklch(95%, 0.2, 0);