Início / user-357546

s427's questions

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

Ao criar um layout para um aplicativo web usando grade, tenho uma barra lateral que quero que seja tão larga quanto necessário para acomodar seu conteúdo (portanto, max-content), MAS não quero que ela fique muito grande, digamos, não mais do que 20% da janela de visualização (portanto, 20vw).

Pensei em usar algo tão simples como:

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

Mas o Firefox me informa que grid-template-columnstem um valor incorreto e, portanto, é ignorado. Se eu simplesmente usar:

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

Então funciona, mas não tenho a salvaguarda necessária para evitar uma barra lateral muito grande.

Palavras-chave como min-contente max-contentnão são permitidas em funções CSS?

Qual seria outra maneira de atingir meu objetivo aqui?

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

Quero criar um aplicativo leve de página única que as pessoas possam usar localmente pelo file://protocolo (ou seja, simplesmente baixando o arquivo compactado do projeto, descompactando-o e clicando duas vezes em index.html), bem como na web ( https://).

Todas as minhas dependências são armazenadas no meu projeto (por exemplo, em uma /jspasta), incluindo as bibliotecas de terceiros que uso (ou seja, AlpineJs e JSZip).

Até agora tudo bem, funciona em ambos os cenários (arquivo e https).

Também quero usar o integrityatributo nos <script>elementos, para que os usuários possam verificar que não modifiquei o código dessas bibliotecas. Isso me dá algo como:

<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>

Entretanto, assim que começo a usar esses atributos, o navegador gera um erro CORS e se recusa a carregar os arquivos, ao acessar o aplicativo pelo protocolo file:// :

Solicitação de origem cruzada bloqueada: a política de mesma origem não permite a leitura do recurso remoto em file:///.../js/jszip.min.js. (Motivo: solicitação CORS, não http). [Saiba mais]

Não estou totalmente familiarizado com os atributos crossoriginand referrerpolicy. Lendo o documento sobre eles, não encontrei nada que me ajudasse nesse sentido. Não acho que sejam necessários. No entanto, se eu removê-los, recebo um erro diferente:

“file:///.../js/alpinejs.min.js” não é elegível para verificações de integridade, pois não é compatível com CORS nem é da mesma origem.

Existe uma maneira de configurá-lo para que funcione tanto em over https://quanto file://em , mantendo o integrityatributo?

javascript