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:
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:
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?
setInterval
creio que fica mais evidente e o print serve de comparativo, mas se achar necessidade reverta.