Diagnóstico de estilos e entrega

Confirmar o recurso que chegou

Um link rel="stylesheet" liga o documento a um recurso de estilos. HTTP 200 indica uma resposta bem-sucedida nesse nível, mas a rota pode ter devolvido uma página HTML de fallback em vez de CSS. Compara Content-Type, conteúdo da resposta e URL final.

O tipo esperado para CSS é text/css. O atributo type no link não converte bytes HTML em CSS nem corrige a resposta do servidor. Só depois de confirmar a entrega faz sentido procurar a declaração na folha recebida.

A base de um caminho relativo

Numa folha externa, um url relativo é normalmente resolvido contra o URL da própria folha, não contra o da página. No exemplo, ../img/card.svg sobe de css para assets. Mover a folha para /releases/r2/css muda a referência para /releases/r2/img/card.svg, mesmo mantendo o texto do CSS.

Os exercícios usam URLs diretos, sem custom properties ou redirecionamentos, para tornar esta relação inequívoca. Corrige o caminho ou a publicação do recurso; alterar width não corrige um pedido para outro destino.

Interpretar a recuperação do parser

Um valor inválido numa declaração isolada pode ser descartado sem inutilizar as restantes. Porém, faltar um ponto e vírgula entre color: red e background-color: blue junta texto numa declaração inválida até ao próximo separador. Padding colocado depois desse separador ainda pode ser interpretado.

Uma quebra de linha não substitui o ponto e vírgula. Localiza a fronteira concreta do erro antes de concluir que a folha inteira falhou ou que o browser aplicou uma cor predefinida.

Seletores e condições de aplicação

Uma classe inexistente no documento pode ser um erro lógico sem ser sintaxe inválida. Uma pseudo-classe desconhecida numa lista normal separada por vírgulas pode invalidar a regra completa. Listas tolerantes em :is e :where têm comportamento diferente.

Se o parser aceitar a regra, verifica a correspondência ao elemento e as condições de media antes de comparar precedência. Um recurso carregado não prova que cada regra é relevante, e uma regra relevante pode ainda perder na cascata.

Imports e shorthand alteram contratos

O import do exemplo é válido depois da declaração de ordem das layers. Inserir uma regra de estilo antes do import torna-o tardio e ignorado; um bloco @layer também não é a exceção da declaração de ordem. Noutro ponto, background: white repõe as subpropriedades não fornecidas, ao contrário de background-color: white.

Uma imagem pode desaparecer sem falhar qualquer download. Identifica a sintaxe exata e os efeitos sobre o conjunto de propriedades, em vez de rever apenas o último valor de cor.

Uma política pode bloquear antes da cascata

Se a consola regista um bloqueio style-src para uma origem nova, o problema não é resolvido por maior especificidade. Primeiro confirma se o URL corresponde ao recurso pretendido e se a política deve permitir essa origem. Pode ser necessário corrigir a referência, servir a folha numa origem autorizada ou alterar deliberadamente a política com o âmbito necessário.

Desligar toda a CSP para recuperar o aspeto mistura a correção visual com uma alteração ampla das condições de carregamento.

Reconciliar uma versão publicada

Uma cache pode conservar legitimamente bytes antigos se o URL foi declarado imutável e a resposta ainda é fresca. Publicar novos bytes no mesmo URL não garante que todos os clientes os obtenham imediatamente. Usa identidades de versão ou hash coerentes e atualiza os documentos que as referenciam.

No caso da aula, a evidência é o HTML ainda pedir v1 e a cache fornecer v1. Um novo ficheiro v2 isolado não fecha a correção enquanto o percurso usado pelo cliente continuar a referenciar o anterior.

Armadilhas comuns

Confundir HTTP 200 com CSS aplicado; acrescentar !important a um recurso bloqueado; resolver URLs relativos à página em vez da folha; mover imports para depois de regras; ignorar resets de shorthand; substituir bytes num URL immutable sem atualizar referências.