What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It’s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with
background-size: cover and
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.
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
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 using multicol.
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).
I recently wrote about the disappearance of 0to255 and what to replace it with and today I found another very versatile tool for color: calcolor.