What: When using CSS columns, the content doesn’t always line up at the top of each new column. The more columns you have, the more likely you are to run into this problem, especially if you’re using column-fill: balance. And the problem seems to happen in Chrome-based browsers, in Safari and in browsers on iOS.
browser support
Always Include Widows and Orphans
What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re creating a multi-column layout.
Yes, I Still Print Webpages
It’s been years since I had to make a print version of a webpage and support for page-break-before and page-break-after in Chrome seems to have improved in the mean time–even if I’m really supposed to switch to break-after (support for that seems to be lacking in Chrome, Edge, Safari and Internet Explorer).
I knew floats could cripple page breaks but I wasn’t using any floats so I wasn’t sure why it wasn’t working…
@supports makes me happy
Alright, obviously I won’t be changing all the photos on my website whenever I change my color scheme, so giving the photos a little color in CSS would be so much nicer. And in the night I thought: just use ::before and ::after with blend modes, then you won’t need to add any HTML (so no child theme needed) and you can make the photos look however you want with CSS.