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.
css-tricks
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…
Auto Sizing Font-sizes
What: Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).
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
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