Skip to main content

Andy Adams

Technical Writer, WordPress Aficionado, Patron of Performance

Almanac

scroll-snap-stop

scroll-snap-stop is part of the CSS Scroll Snap Module. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-snap-stop is an optional property for a scroll-snapping element within a scroll-snapping container. For more … Read article

Almanac

scrollbar-width

scrollbar-width is a property that controls the width or "thickness" of a scrollbar. scrollbar-width is part of the CSS Working Group’s Scrollbars Module Level 1 draft, which is still a work in progress. The consensus at the time of writing this article is that scrollbar-width is likely to be included in future versions of CSS, but there is debate whether a variable <length></length> argument will be allowed, or if the options will be limited to preset values (more on … Read article

Almanac

scroll-snap-align

scroll-snap-align is part of the CSS Scroll Snap Module. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-snap-align is a required property for a scroll-snapping element within a scroll-snapping container. For more … Read article

Almanac

scroll-margin

scroll-margin is part of the CSS Scroll Snap Module. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-margin is an optional property for a scroll-snapping element within a scroll-snapping container. For … Read article

Almanac

scroll-padding

scroll-padding is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

scroll-padding is an optional property for any scroll-snapping container. Scroll-snapping containers are defined whenever … Read article

Almanac

scroll-snap-type

The scroll-snap-type property is part of the CSS Scroll Snap Module. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of it like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.

This is useful if you want to stop the browser at specific points on … Read article

Almanac

:focus-visible

The :focus-visible pseudo-class (also known as the "Focus-Indicated" pseudo-class) is a native CSS way to style elements that:

  1. Are in focus
  2. Need a visible indicator to show focus (more on this later)

:focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus.… Read article

Almanac

touch-action

The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions.

#element {
  touch-action: pan-right pinch-zoom;
}

The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch … Read article

Article

Swapping a WordPress core meta box to speed up editing

The CSS-Tricks front end is usually pretty darn fast, because most pages are cached (and don't need to be dynamically generated when requested). However, up until recently, the CSS-Tricks WordPress admin didn't have the same luck.

In particular, the post editing screen was slow. Painfully slow. Saving a draft took several seconds, which is enough to break your flow in the middle of writing an article.

Working on a tip from Pete Sorensen, who posted a performance question on the … Read article

icon-link icon-logo-star icon-search icon-star