主页 / user-357546

s427's questions

Martin Hope
s427
Asked: 2025-04-29 00:02:30 +0800 CST
  • 5

使用网格为 Web 应用程序构建布局，我有一个侧边栏，我希望它足够宽以容纳其内容（所以，max-content），但我不希望它变得太大，比如说不超过视口的 20%（所以，20vw）。

我以为我会使用一些简单的东西：

.page {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: min(max-content, 20vw) 1fr;
  grid-template-areas: "side main";
}

但是 Firefox 提示我grid-template-columns值不正确，因此被忽略。如果我直接使用：

  grid-template-columns: max-content 1fr;

然后它就可以工作了，但是我没有想要避免侧边栏过大的安全措施。

CSS 函数中是否不允许使用诸如min-content和 之类的关键字？max-content

还有什么其他方法可以实现我的目标？

css
Martin Hope
s427
Asked: 2024-11-29 19:14:38 +0800 CST
  • 5

我想构建一个轻量级的单页应用程序，人们可以通过file://协议在本地使用（即只需下载项目存档文件，解压并双击index.html），也可以在网络上使用（https://）。

我所有的依赖项都存储在我的项目中（例如在/js文件夹中），包括我使用的第三方库（即 AlpineJs 和 JSZip）。

到目前为止一切顺利，它在两种场景（文件和 https）中都有效。

我还想在元素integrity上使用属性<script>，以便用户可以验证我没有篡改这些库的代码。这给了我类似的东西：

<script
  src="js/jszip.min.js"
  integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script
  src="js/alpinejs.min.js"
  defer
  integrity="sha512-FUaEyIgi9bspXaH6hUadCwBLxKwdH7CW24riiOqA5p8hTNR/RCLv9UpAILKwqs2AN5WtKB52CqbiePBei3qjKg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

但是，当我开始使用这些属性时，当通过 file:// 协议访问应用程序时，浏览器会抛出 CORS 错误并拒绝加载文件：

跨源请求被阻止：同源策略不允许读取 file:///.../js/jszip.min.js 上的远程资源。（原因：CORS 请求不是 http）。[了解更多]

crossorigin我对和属性不太熟悉referrerpolicy。阅读有关它们的文档，我没有找到任何在这方面对我有帮助的东西。我认为它们不是必需的。但是，如果我删除它们，我会收到不同的错误：

“file:///.../js/alpinejs.min.js” 不符合完整性检查条件，因为它既不支持 CORS，也不是同源的。

有没有办法设置它，以便它在https://和上都能工作file://，同时保留integrity属性？

javascript