Today I wanted to add styling to code blocks, so I found the following css style on the internet and added it to my stylesheets.

article pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

I find it very useful to copy and paste code from the internet to get a working solution.

What am I trying to achieve? And what is the worst that could happen pasting this code? Well I want it to look nice, and ideally the same across browsers. Opening it in Microsoft Edge Beta, Firefox, Chrome, and Safari. All look pretty much identical. Beautiful.

However I do not have every browser installed on my computer and so I can lean on the support of caniuse.com to see if the ‘word-wrap’ property is available across all browsers. I found caniuse when looking for a way to know if browsers could support something or not. There were several times when a severe bug reached production on applications due to older versions of IE, or new Safari dropped support for some file apis in the browser. We needed a way to proactively detect, ‘can I even use this?’ After all we want to ship code that solves a problem, on the platforms that people will be using our application.

Worth taking a look to skim through each of these css properties to make sure I don’t introduce anything that’s really bad.

Reading through each of css attributes I was not familiar with all of them, and so I looked them up on the mozilla docs, and they will be useful to keep in.

• page-break-inside
• word-wrap

Happy styling.