Yes, this should be fixed. CSS leaking into the console isn't the only issue; there are a lot of potential problems that can be caused by the fact that the console isn't isolated from the rest of the snippet.
For example, here is an additional test case taken from Oriol's answer to the original post on SE meta announcing the introduction of the console feature (modified slightly to better illustrate the problem):
// Demonstration that `length` on the jQuery instance will be 0
// if there are no matching elements. There are no `div` elements
// in this snippet.
$(function() {
console.log("Number of div elements:", $("div").length);
});
<p>No div elements here!</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Yes, you can work around these issues as the snippet author once you realize what the problem is, but you really shouldn't have to; the console should not be able to interfere with the behavior of snippets.
To address some of the points made in a few of the other answers to this question:
But isn't using a generic selector like div
in your snippet a bad idea anyway?
No, using simplified code like the example above is a perfectly acceptable way to illustrate a concept like the behavior of a method or CSS property.
Yes, using it in production where you have other divs on the page you don't want to count would be incorrect, but "counting divs" isn't the point of the answer; illustrating the usage of the length property is. There are numerous other situations where simplified examples like this are appropriate.
But I like being able to style the console to make it work better/look nicer in my snippets!
Using code in your snippet to modify the behavior of the console is a neat hack, but it's still just that: a hack. It'd be far better for Stack Overflow to incorporate those improvements into the console itself so that all answers can benefit from them. (For example, rather than you using CSS to increase the display size of the console, Stack Overflow should just make the console resizable.)
Additionally, including code like that in your answers which has no relevance to the question whatsoever is noise at best, and at worst can be confusing to readers who don't understand what that extra code is meant to be doing. (E.g. "Why is he styling .as-console-wrapper
? I don't see that in the snippet code.")
div
s anyway? I mean, this is kind of exactly why you would want to follow that as a best practice, I think...:)