Joshua's Docs - CSS Code Snippets

Smooth Scroll with CSS Only

/** Smooth Scroll - CSS Only! */
html {
	scroll-behavior: smooth;
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;

Scroll Jump / Hash Jump Offset

If you need to offset content after a scroll jump / hash jump (e.g. user just clicked on href="#faq" to jump to FAQ section, and you have a fixed or sticky nav that is going to overlap), that used to be a task often accomplished by JavaScript, but can now be done entirely with CSS.

The easiest solution is just:

html {
	/** Or, scroll-padding-top, depending on need */
	scroll-margin-top: var(--fixed-nav-height);

However, you could optionally target the jumped-to element specifically, with the :target pseudo-selector. Or combine them:

html, :target {
	scroll-margin-top: var(--fixed-nav-height);

References: CSS-Tricks, Web Platform News

Older solutions for this problem usually belong in one of these categories:

  • Use JavaScript to listen for jump and adjust offset after it happens
  • Apply a positive padding with a negative margin, to the element that gets scrolled to
    • Example: padding-top: 60px; margin-top: -60px
  • Apply specific offsetting via :target{}

Common Breakpoints

A lot of frameworks share (roughly) the same set of breakpoints. These will probably change as displays get larger and have higher-resolution, but for now, this is a decent starting point. You'll notice that max-width is not used to cap the higher end of the range; this is because you often want a class to kick in at a minimum width, but stick unless overridden by another (for example, using something like class="xs4 sm2" for columns).

/* Extra Small (xs) */
/* < 600px */

/* Small (sm) */
@media (min-width: 600px) {

/* Medium (md) */
@media (min-width: 960px) {

/* Large (lg) */
@media (min-width: 1280px) {

/* Extra Large (xl) */
@media (min-width: 1920px) {


Lists: Change Spacing Between Bullet and Text

One way is to use the ::before pseudo-element to create an element that lives in the space between the bullet and text, and then use a positive margin to increase the spacing, or negative to decrease. For example:

	<li>List item</li>

ul li::before {
	content: '';
	/** Very little space between bullet and text! */
	margin-left: -8px;

Many more solutions are discussed on this and this StackOverflow.

Markdown Source Last Updated:
Thu Dec 30 2021 22:54:30 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sun Jan 24 2021 22:15:43 GMT+0000 (Coordinated Universal Time)
© 2024 Joshua Tzucker, Built with Gatsby