Eu acho que isso pode ser uma questão sobre contextos limitados, por exemplo, editores WYIWYG em um sistema web usado por usuários não programadores , que limita as possibilidades de seguir os padrões. Às vezes (como o TinyMCE), é uma biblioteca que coloca seu conteúdo / código dentro de uma textareatag, renderizada pelo editor como uma divtag grande . E, às vezes, pode ser uma versão antiga desses editores.
Suponho que:
- esses usuários não programadores não têm um canal aberto com os administradores do sistema (ou webdevs da instituição), para solicitar a inclusão de algumas regras CSS nas
stylesheets . Na verdade, seria impraticável para os administradores (ou webdevs), considerando o número de solicitações nesse sentido que elas teriam.
- esse sistema é legado e ainda não suporta versões mais recentes de HTML.
Em alguns casos, sem styleregras de uso , pode ser uma experiência de design muito ruim. Então, sim, esses usuários precisam de personalização. Ok, mas quais seriam as soluções nesse cenário? Considerando as diferentes maneiras de inserir CSS em uma htmlpágina, suponho que estas soluções:
1ª opção: pergunte ao seu sysadm
Peça ao administrador do sistema para incluir algumas regras CSS no sistema stylesheets. Essa será uma solução CSS externa ou interna . Como já foi dito, pode não ser possível.
2ª opção: <link>ativada<body>
Use uma folha de estilo externa na bodytag, ou seja, o uso da linktag dentro da área que você tem acesso (que será, no site, dentro da bodytag e não na headtag). Algumas fontes dizem que está tudo bem, mas "não é uma boa prática", como o MDN :
Um <link>elemento pode ocorrer no elemento <head>ou <body>, dependendo se ele possui um tipo de link que está correto para o corpo . Por exemplo, o stylesheettipo de link é body-ok e, portanto, <link rel="stylesheet">é permitido no corpo. No entanto, essa não é uma boa prática a seguir; faz mais sentido separar seus <link>elementos do conteúdo do corpo, colocando-os no <head>.
Alguns outros o restringem à <head>seção, como w3schools :
Nota: Este elemento vai apenas na seção principal, mas pode aparecer várias vezes.
Teste
Eu testei aqui (ambiente de desktop, em um navegador) e funciona para mim. Crie um arquivo foo.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
E, em seguida, um arquivo CSS, no mesmo diretório, chamado bar.css:
.test1 {
color: green;
};
Bem, isso só parece possível se você tiver como fazer upload de um arquivo CSS em algum lugar do sistema da instituição. Talvez este fosse o caso.
3ª opção: <style>ativada<body>
Use a folha de estilo da Internet na bodyetiqueta, ou seja, o uso da styleetiqueta dentro da área a que você tem acesso (que será, no site, dentro da bodytag e não na headtag). É disso que trata as respostas de Charles Salvia e Sz aqui. Escolhendo esta opção, considere suas preocupações.
4ª, 5ª e 6ª opções: maneiras JS
Alerta Esses estão relacionados à modificação do <head>elemento da página. Talvez isso não seja permitido pelos administradores de sistema da instituição. Portanto, é recomendável pedir permissão a eles primeiro.
Ok, supondo a permissão concedida, a estratégia é acessar o <head> . Quão? Métodos JavaScript.
4ª opção: novo <link>em<head>
Esta é outra versão da 2ª opção. Use uma folha de estilo externa na <head>tag, ou seja, uso do <link>elemento fora da área que você tem acesso (que será, no site, não dentro da bodytag e sim dentro da headtag). Esta solução está em conformidade com as recomendações da MDN e da w3schools , conforme citado acima, na segunda opção de solução. Um novo Linkobjeto será criado.
Para resolver o problema por meio do JS, existem várias maneiras, mas nas seguintes linhas de código eu demonstro uma simples.
Teste
Eu testei aqui (ambiente de desktop, em um navegador) e funciona para mim. Crie um arquivo f.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Dentro da scripttag:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
E então, no arquivo CSS, no mesmo diretório, chamado bar.css(como na segunda opção):
.test1 {
color: green;
};
Como eu já disse: isso só parece possível se você tiver como fazer upload de um arquivo CSS em algum lugar do sistema da instituição.
5ª opção: novo <style>em<head>
Use uma nova folha de estilo interna na <head>tag, ou seja, use um novo <style>elemento fora da área que você tem acesso (que será, no site, não dentro da bodytag e sim dentro da headtag). Um novo Styleobjeto será criado.
Isso é resolvido através do JS. Uma maneira simples é demonstrada a seguir.
Teste
Eu testei aqui (ambiente de desktop, em um navegador) e funciona para mim. Crie um arquivo foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Dentro da scripttag:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6ª opção: usar um já existente <style>em<head>
Use uma folha de estilo interna existente na <head>tag, ou seja, uso de um <style>elemento fora da área que você tem acesso (que será, no site, não dentro da bodytag e sim dentro da headtag), se houver algum. Um novo Styleobjeto será criado ou um CSSStyleSheetobjeto será usado (no código da solução adotada aqui).
Isso é arriscado em algum ponto de vista.
Primeiro , porque talvez não exista algum <style> objeto. Dependendo da maneira como você implementa esta solução, você pode obter undefinedretorno (o sistema pode usar folhas de estilo externas ).
Segundo , porque você estará editando o trabalho do autor do design do sistema (problemas de autoria).
Terceiro , porque pode não ser permitido nas políticas de segurança de TI da sua instituição. Portanto, peça permissão para fazer isso (como em outras soluções JS) .
Supondo, novamente, a permissão foi concedida:
Você terá de considerar algumas restrições do método disponível para desta forma: insertRule(). A solução proposta usa o cenário padrão e uma operação no primeirostylesheet , se houver algum.
Teste
Eu testei aqui (ambiente de desktop, em um navegador) e funciona para mim. Crie um arquivo foo_bar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Dentro da scripttag:
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
Outra abordagem para esta solução é usar CSSStyleDeclarationobjeto (documentos em w3schools e MDN ). Mas pode não ser interessante, considerando o risco de substituir as regras existentes no CSS do sistema.
7ª opção: CSS embutido
Use CSS embutido . Isso resolve o problema, embora, dependendo do tamanho da página (em linhas de código), a manutenção (pelo próprio autor ou outra pessoa designada) do código possa ser muito difícil.
Mas, dependendo do contexto de sua função na instituição ou de suas políticas de segurança do sistema da web, essa pode ser a solução disponível exclusiva para você.
Teste
Crie um arquivo _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Respondendo estritamente à pergunta de Gagan
Como um navegador deve renderizar css que não é contíguo?
- É suposto gerar alguma estrutura de dados usando todos os estilos css em uma página e usá-la para renderizar?
- Ou ele renderiza usando informações de estilo na ordem em que vê?
(citação adaptada)
Para uma resposta mais precisa, sugiro ao Google os seguintes artigos:
- Como os navegadores funcionam: nos bastidores dos navegadores modernos
- Construção, layout e pintura da árvore de renderização
- O que significa "renderizar" uma página da Web?
- Como a renderização do navegador funciona - nos bastidores
- Renderização - Padrão HTML
- 10 Renderização - HTML5