Por que o atributo 'Title' 'título' faz com que os navegadores ignorem meus estilos?
Pergunta
O seguinte documento HTML (juntamente com o CSS) falha em renderizar os estilos em b.css
.
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="A" href="a.css" />
<link rel="stylesheet" media="screen" type="text/css" title="B" href="b.css" />
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
/* a.css */
div#A { color: blue; }
/* b.css */
div#B { color: red; }
Tornando os títulos iguais (por exemplo, ambos <link ... title="A">
Corrige, mas não vejo o motivo, por que deveria. O que o título está fazendo, aqui, isso faz isso errado?
Solução
A especificação HTML 4.0 afirma que existem três tipos de folhas de estilo: persistente, preferido e alternativo.
- Uma folha de estilo é "persistente" se estiver ligada a
rel="stylesheet"
e não temtitle
atributo. Todas as folhas de estilo persistentes são usadas ao renderizar. - Uma folha de estilo é "preferida" se estiver vinculada a
rel="stylesheet"
e tem umtitle
atributo; folhas de estilo preferidas com o mesmotitle
estão agrupados, mas não deve haver mais de um grupo. Parece que os navegadores escolherão apenas uma folha de estilo preferida para renderizar, pois deve haver apenas uma. - Finalmente, uma folha de estilo é "alternativa" se estiver vinculada a
rel="alternate stylesheet"
e tem umtitle
. Essas folhas de estilo devem permitir que o usuário escolha folhas de estilo, elas são agrupadas portitle
e apareça no seletor da folha de estilo do navegador, se tiver um (View >> estilo de página no Firefox). Cada grupo (por título) é mutuamente exclusivo.
Colocando title
Atributos em suas folhas de estilo, você está involuntariamente transformando -as em folhas de estilo preferidas, em vez da folha de estilo persistente esperada. É também por isso que eles funcionam quando todos têm o mesmo título.
Outras dicas
Seguindo a resposta de Neil Williams:
Os autores podem especificar um número de Mutualmente exclusivo As folhas de estilo chamadas folhas de estilo alternativas .... agentes de usuários devem permitir que os usuários selecionem entre folhas de estilo alternativas.
(enfase adicionada)
Também:
Para tornar uma folha de estilo preferida, defina o atributo REL para "STILELES SHEET" e nomeie a folha de estilo com o atributo de título.
Isto é de http://www.w3.org/tr/rec-html40/present/styles.html#h-14.3.1
Há algum tempo, já estou ciente de que os atributos do título nas tags CSS desencadeiam problemas e impedem que alguns estilos CSS sejam aplicados na página da web. Hoje eu investi algumas horas para descobrir o que realmente acontece e é isso que temos.
Se você tiver várias tags na página e uma delas tem um atributo de título, as tags que virão depois de terá um atributo de título com o mesmo valor ou nenhum atributo de título, caso contrário, os estilos neste último arquivos CSS, a vontade não ser aplicado na página.
A questão pode ser facilmente reproduzida em várias versões do Firefox, Opera e Safari. O único navegador, que não exibe o comportamento inesperado é o Internet Explorer.
Realmente estranho oo
Levei cerca de 3 horas para chegar ao final, pois eu estava adicionando uma nova folha de estilo. Eu pensei que tinha alguns conflitos entre as regras atuais do CSS e as que eu estava adicionando. Depois de ficar sem opções sãs, tentei remover a tag de título do link. Eu não pensei muito nisso, pensei que eram alguns metadados inúteis. Bem, aconteceu que era isso que estava impedindo que o CSS fosse analisado. Acontece que o obsoleto Comitê dos Padrões CSS do Brainfart criou isso. Eles não poderiam simplesmente ter adicionado um novo atributo que é mais claro, para a funcionalidade preferida e de outros enfeites (seja qual for, que deve fazer) em vez de confiar na presença ou ausência do atributo de título? Perdi todo esse tempo que deveria ser investido em fazer algo produtivo. Durante minha pesquisa, prometi a mim mesmo que tomaria medidas depois de encontrar a origem desse problema. Agora, resta para decidir sobre as medidas.