Skip to main content

Andy Adams

Technical Writer, WordPress Aficionado, Patron of Performance

Almanac

text-decoration-skip-ink

text-decoration-skip-ink is a property that controls the behavior of underline and overline (but not line-through) when the line passes through part of a character/glyph. This gives you fine-tuned control over how underlines or overlines interact with the characters that extend above the top or hang below the bottom of a line.

Previously this was handled via the text-decoration-skip: ink; property/value combination, but after discussions about how to handle the problem of cascading styles unintentionally overwriting lower-priority styles (due to … Read article

Almanac

stroke-linejoin

stroke-linejoin is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. stroke-linejoin can be used to sharpen or soften the joints on connecting lines in an SVG.

stroke-linejoin is also an SVG attribute which can be overwritten using CSS.

stroke-linejoin: miter;
A miter joint

stroke-linejoin is just one of several properties affecting the rendering of two paths meeting. The final visual effect will depend on stroke-linejoin as well as values … Read article

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

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