A nice old (2016) video of a talk by Heydon Pickering about writing less code. It’s smart, funny, and I agree.
css
Fake centered fixed width
What: Say the background of your website is white and you want, for example, a different color header, full width, with content inside the header that’s contained at a lesser width, and centered. Common enough scenario and usually created with one HTML-element (div, section, …) at full width and with a colored background and one HTML-element (div, article, …) with a fixed width and centered, holding the content.
Styling placeholder text
Not something new I learned, more something I keep forgetting over and over.
::placeholder to change how placeholders look. You’d think I’d remember something so obvious…
If it’s not working, this post over at CSS-Tricks may have some more information on why.
(Actually, what that post taught me, is that there is a difference between pseudo elements and pseudo classes!)
Photo by Vivek Sharma on Unsplash
Hooray for text-decoration: underline!
For years the first thing I would do on a new project is add a { text-decoration: none; } in some form or other to the styling of any website. However I was going to make links look, I was not leaving that offensive-looking text-decoration:underline; in place.
But text-decoration is growing up and browser support for the new options is improving, including, for example, the increased support in the recent release of Firefox 70.
My favorite feature is that underline can skip glyphs now, if you want! Followed almost immediately by my second favorite feature: text-underline-offset: <length>; There are more options than just <length>, read more on text-underline-offset here at MDN web docs. Between these two text-decoration: underline; can actually look classy.
Unfortunately, support for text-underline-offset is even less: Firefox and Safari at the moment. Glyph skipping specifically is supported much better with text-decoration-skip-ink in Firefox, Chrome and Opera. And most browsers now support a shorthand version of text-decoration which can also set color. Lovely!
Read more about all of it at MDN web docs.
Photo by Photos by Lanty on Unsplash
:last-of-type but only if it meets other conditions as well
.gallery-item:nth-of-type(3n+2):last-of-type
I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags and use display: flex instead.
Quotation style on the q-tag
What: Changing the standard straight quotation marks that the q-tag applies to whatever you want:
q {
quotes: "“" "”";
} Where: From the always useful Frontend Focus newsletter.
Photo by Kelly Sikkema on Unsplash
Transition on hover
What: If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back instead of being removed abruptly.
Photo by Hello I’m Nik 🇬🇧 on Unsplash
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…
Make an Accordion with HTML
What: Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn’t work, all the content is still visible, which also improves accessibility.
Spacing in CSS pseudo-element content
A bit of an abstract title but I’m basically taking about:
h4::after {
content: "";
}
If you have just text in the content property, you can adjust spacing with the letter-spacing and/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing I wanted between the icons pulled the letters of the word too far apart. You can’t use html in the content property of a pseudo-element like ::before or :: after, so is out.
What: I found my solution on Stack Overflow, see link below, where someone had given a pretty list of the different spaces in CSS as a solution to a similar problem.