Background positioning

What:

How to position a background image relative to the bottom or right side of the screen

How:

.bgimg {
    background-image: url('img.jpeg');
    background-position: right 10% bottom 76px;
}

The 10% is relative to the right of the screen, the 76px is relative to the bottom.

Read more

CSS Columns Across Browsers

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.

Read more

Jittery Scrolling

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 background-attachment: fixed.

Read more

Media Queries for Input Devices

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.

Read more

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…

Read more

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.

Read more

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).

Read more

Writing less.

A nice old (2016) video of a talk by Heydon Pickering about writing less code. It’s smart, funny, and I agree.

Read more

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.

Read more