What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.
How: You can use media queries.
can i use
scroll-margin-top
What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:
You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top in Firefox and Chrome-based browsers…
Pretty lists!
What: Firefox 68+ and Safari 11.1+ support the pseudo-element ::marker yay! Chrome doesn’t yet, and neither do Edge or IE11. It will allow for:
li::marker {
color: #ff3399;
content: "-";
}Not just on list-items either, but also on elements with a display: list-item.
CSS-Tricks has more about this: Finally, it Will Be Easy to Change the Color of List Bullets.
Photo by Max Rovensky 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
@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.