Before
After
This isn't my eyes playing tricks on me, is it? I'm curious to know if the code block style has actually been changed, and if yes, why?
Before
After
This isn't my eyes playing tricks on me, is it? I'm curious to know if the code block style has actually been changed, and if yes, why?
This fixes an accessibility issue.
Depending on a system setting for scrollbars, the last line of <pre><code>
blocks was blocked by the MacOS scrollbar in all browsers.
This has been reported on meta here, here, here, and here. It impacts a minority of folks for sure, but that still amounts to thousands of users having content blocked because of the way they prefer to view the web.
Since this is a system setting, we couldnât find a reliable way to target only those people who were impacted. To further complicate things, we also discovered this bug was affected by whether or not a USB mouse was plugged in at the time.
So we increased the default padding to 12px
(up from the existing 5px
) for everyone. Initially we didnât love adding extra spacing, but liked it after seeing it in action. The difference isnât that excessive and it gives yâall a little more affordance to copy code blocks.
Although the root issue only impacts the bottom edge of code blocks, weâve applied the same padding to all four sides. While we canât reduce the vertical spacing any more, itâs a good point about the horizontal spacing and Iâve reduced it a bit. Hereâs what that looks like:
This update will be live shortly, if it isnât already.
Since we felt this improved the design AND fixed an OS-level bug allowing everyone to experience the same Stack Overflow, we pulled the trigger. Weâll monitor Mac OS updates to see if this issue is fixed by Apple.
if (browser = Safari) {}
would be a greater evil.
Commented
Mar 15, 2019 at 21:08
Noticed it, it seems a bit excessive to me.
Especially the left-side padding makes it seem like there's an extra empty column in front of each line, which can actually be meaningful in some cases. Also the top and bottom paddings start to take a lot of space in posts that have multiple short code blocks (which isn't all that uncommon in e.g. unix.SE, what with all the command line commands. For example, this one has a few of those, though not single-line ones. Another with a couple single-liners on SO.).
It also makes inline code blocks
look reaally different from
real code blocks.
The new spacing does have the upside that a horizontal scroll bar fits better without covering the text. If you have one that appears as required, that is. However, that has been discussed and adding extra space just for that purpose was status-declined just a while ago in Add some bottom padding to code snippets. With scrollbars set to always visible, the vertical padding really starts to add up.
I can see someone wanting to add some padding there, but can we tone it back down at least a bit?