9

Fui responder uma pergunta recentemente e utilizei um exemplo bem simples, apenas aplicando uma regra CSS ao primeiro <div> do snippet. Porém, notei que essa regra é aplicada também à que exibe as mensagens do console.log():

Rode o snippet abaixo, notará que o que deveria exibir algo como:

console no stack snippet

Note como ficou ao clicar em "Executar":

setInterval(() => {
    console.log('Mensagem do console.');
}, 1000);
div { height: 60px; width: 160px; background: red }
<div></div>

Esse elemento não deveria ter uma regra específica para impedir esse tipo de comportamento?


English Version

Title: CSS affecting Stack Snippet's console

I was answering a question recently, and used a pretty simple example, applying only a CSS rule to the snippet's first <div>. However, I noticed that that same rule is also applied to the <div> that shows console.log()'s messages:

Execute the snippet below, and note that it should show something like:

console in stack snippet

Notice how it went when you hit "Execute:"

setInterval(() => {
    console.log('Mensagem do console.');
}, 1000);
div { height: 60px; width: 160px; background: red }
<div></div>

Shouldn't this element have a specific rule to prevent this type of begavior?

3
  • Não tira não, vou customizar o console de todas minhas perguntas e respostas sobre JavaScript :D
    – Syzoth Mod
    Commented 5/12/2017 às 17:46
  • 1
    Renan eu editei porque acho que o exemplo inicial esta um pouco dificil de compreender, o setInterval creio que fica mais evidente e o print serve de comparativo, mas se achar necessidade reverta.
    – Syzoth Mod
    Commented 5/12/2017 às 17:52
  • cross-post do problema meta.stackexchange.com/a/279561/198279 (apesar de no comentário estar afirmado que corrigiram, a sua postagem mostra que não), vamos aguardar (cc @JNat)
    – Syzoth Mod
    Commented 5/12/2017 às 18:00

1 Resposta 1

3

Obrigado por reportares isto. Isto está a acontecer porque a consola do Stack Snippets não é uma consola "real" (como a do browser). É um hack útil que usa um div para se conter a si próprio.

Neste caso, a tua regra CSS para cada div acaba por visar também a consola. Podes resolver isto de duas maneiras:

  1. Tornar a regra CSS mais específica (talvez como um nome de classe).
  2. Desactivar a consola para este snippet se não precisares dela (há uma checkbox no editor!).

Diz-me se isto ajudar!


Thank-you for reporting this. This is happening because the Stack Snippets Console is not a "real" console (like in the browser). It is a helpful hack that uses a div to contain itself.

In this case, your CSS rule for every div results in targeting the console also. You can solve it in 2 different ways:

  1. Make the CSS rule more specific (perhaps with a class name).
  2. Disable the console for this snippet if you don't need it (there's a checkbox in the editor!)

Let me know if that helps!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .