within - Usando tags<style> no<body> com outro HTML




title attribute html (8)

<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

Como um navegador deve renderizar o 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 renderização?

Ou é renderizado usando informações de estilo na ordem que ele vê?



Como outros já disseram, isso não é válido, pois as tags de estilo pertencem à cabeça.

No entanto, a maioria dos navegadores não aplica realmente essa validação. Em vez disso, depois que o documento é carregado, os estilos são mesclados e aplicados. Nesse caso, o segundo conjunto de estilos sempre substituirá o primeiro, porque foram as últimas definições encontradas.


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 tag textarea , que é processada pelo editor como uma tag div grande. E às vezes, pode ser uma versão antiga desses editores.

Eu suponho que:

  1. esses usuários que não sã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 de CSS nas stylesheets de stylesheets do sistema. Na verdade, seria impraticável para os administradores (ou webdevs), considerando o número de pedidos nesse sentido que eles teriam.
  2. este sistema é legado e ainda não suporta versões mais recentes do HTML.

Em alguns casos, sem regras de style 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 página html , suponho que estas soluções:

1ª opção: pergunte ao seu sysadm

Peça ao seu sistema adm por incluir algumas regras de CSS nas stylesheets de stylesheets do sistema. Esta será uma solução CSS externa ou interna . Como já foi dito, talvez não seja possível.

2ª opção: <link> em <body>

Use uma folha de estilo externa na tag body , ou seja, use a tag de link dentro da área que você tem acesso (que será, no site, dentro da tag body e não na tag head ). Algumas fontes dizem que está tudo bem, mas "não é uma boa prática", como o MDN :

Um elemento <link> pode ocorrer no elemento <head> ou <body> , dependendo de ter um tipo de link que seja body-ok . Por exemplo, o tipo de link da stylesheet é body-ok e, portanto, <link rel="stylesheet"> é permitido no corpo. No entanto, isso não é uma boa prática a seguir; faz mais sentido separar seus elementos <link> do conteúdo do seu corpo, colocando-os no <head> .

Alguns outros, restrinja-o à seção <head> , como w3schools :

Nota: Esse elemento vai apenas na seção head, mas pode aparecer quantas vezes quiser.

Testando

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 então um arquivo CSS, no mesmo diretório, chamado bar.css :

.test1 { 
    color: green;
};

Bem, isso só parece possível se você tiver como fazer o upload de um arquivo CSS em algum lugar no sistema da instituição. Talvez esse seja o caso.

3ª opção: <style> em <body>

Use a folha de estilo da internet na tag body , ou seja, use a tag style dentro da área que você tem acesso (que será, no site, dentro da tag body e não na tag head ). Isto é o que as respostas de Charles Salvia e Sz são aqui. Escolhendo esta opção, considere suas preocupações.

4ª, 5ª e 6ª opções: formas JS

Alerta Estes estão relacionados com a modificação do elemento <head> da página. Talvez isso não seja permitido pelos administradores do sistema da instituição. Por isso, é recomendável pedir permissão primeiro.

Ok, supondo permissão concedida, a estratégia é acessar o <head> . Como? Métodos JavaScript.

4ª opção: novo <link> em <head>

Esta é outra versão da segunda opção. Use uma folha de estilos externa na tag <head> , ou seja, o uso do elemento <link> fora da área que você tem acesso (que estará no site, não dentro da tag body e sim dentro da tag head ). Esta solução está em conformidade com as recomendações das escolas MDN e W3 , citadas acima, sobre a solução da 2ª opção. Um novo objeto Link será criado.

Para resolver o assunto através de JS, há muitas maneiras, mas nas seguintes linhas de código eu demonstro um simples.

Testando

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 tag de script :

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ó será possível se você tiver como fazer o upload de um arquivo CSS em algum lugar no sistema da instituição.

5ª opção: novo <style> na <head>

Use a nova folha de estilos interna na tag <head> , ou seja, o uso de um novo elemento <style> fora da área que você tem acesso (que estará no site, não dentro da tag body e sim dentro da tag head ). Um novo objeto Style será criado.

Isso é resolvido por meio do JS. Uma maneira simples é demonstrada a seguir.

Testando

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 tag de script :

var newStyle = document.createElement("style");
newStyle.innerHTML = 
    "h1.test1 {"+
        "color: green;"+
    "}";
document.getElementsByTagName("head")[0].appendChild(newStyle);

6ª opção: usando um <style> existente em <head>

Use uma folha de estilo interna existente na tag <head> , ou seja, o uso de um elemento <style> fora da área que você tem acesso (que estará no site, não dentro da tag body e sim dentro da tag head ), se algum existe. Um novo objeto Style será criado ou um objeto CSSStyleSheet será usado (no código da solução adotada aqui).

Isto é, em algum ponto de vista, arriscado. Primeiro , porque pode não existir algum objeto <style> . Dependendo da maneira como você implementa essa solução, você pode obter retorno undefined (o sistema pode usar uma folha de estilo externa ). 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. Então, peça permissão para fazer isso (como em outras soluções JS) .

Supondo, novamente, permissão foi concedida:

Você precisará considerar algumas restrições do método disponíveis para isso: insertRule() . A solução proposta usa o cenário padrão e uma operação na primeira stylesheet , se houver alguma.

Testando

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 tag de script :

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 é usando o objeto CSSStyleDeclaration (docs 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 inline

Use CSS inline . 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 pode ser muito difícil.

Porém, 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 única solução disponível para você.

Testando

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 a pergunta feita por Gagan

Como um navegador deve renderizar o css que não é contíguo?

  1. É suposto gerar alguma estrutura de dados usando todos os estilos css em uma página e usá-la para renderização?
  2. Ou é renderizado usando informações de estilo na ordem que ele vê?

(citação adaptada)

Para uma resposta mais precisa, sugiro ao Google estes artigos:

  • Como os navegadores funcionam: nos bastidores de navegadores modernos
  • Construção, Layout e Pintura da Render-tree
  • O que significa "renderizar" uma página da web?
  • Como funciona a renderização do navegador - nos bastidores
  • Renderização - HTML Standard
  • 10 renderização - HTML5

Eu acho que isso vai variar de navegador para navegador: as regras de exibição global provavelmente serão atualizadas conforme o navegador segue o código.

Você pode ver essas alterações nas regras de exibição global, às vezes, quando uma folha de estilos externa é carregada com um atraso. Algo parecido pode acontecer aqui, mas em uma sucessão tão curta que ele não é renderizado.

Não é um HTML válido, então eu diria que é uma coisa fútil pensar nisso. Tags <style> pertencem à seção head da página.


No seu exemplo, um navegador não "supõe" fazer nada. O HTML é inválido. A recuperação de erro é acionada ou o analisador faz isso como ela é.

Em uma instância válida, várias folhas de estilo são apenas tratadas como aparecendo uma após a outra, a cascade é calculada como normal.


Porque isso é HTML não é válido não tem qualquer efeito sobre o resultado ... apenas significa que o HTML adere ao padrão (apenas para fins organizacionais). Para ser válido, poderia ter sido escrito assim:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

Meu palpite é que o navegador aplica o último estilo que aparece.



Yay, STYLE é finalmente válido no BODY , a partir do HTML5.2! (E o scoped se foi também.)

Das especificações ( aprecie a última linha! ):

4.2.6. O elemento de estilo

...

Contextos nos quais este elemento pode ser usado:

Onde o conteúdo de metadados é esperado.

Em um elemento noscript que é filho de um elemento head.

No corpo, onde o conteúdo de fluxo é esperado.





css