https://web-craft.net/ One interface element at a time, with the caveat that breaks it. en Tue, 18 Aug 2026 00:00:00 +0000 https://web-craft.net/elements/analog-clock-wound-by-one-line-of-javascript/ https://web-craft.net/elements/analog-clock-wound-by-one-line-of-javascript/ motion Tue, 18 Aug 2026 00:00:00 +0000 CSS cannot ask what time it is. The clock is three infinite rotations, and a negative animation-delay winds it: minus four hours starts an animation four hours in, instantly. The only JavaScript writes seconds-since-midnight into a custom property — and that is the whole script. The dial itself is laid out by cos() and sin(), not twelve hand-tuned offsets. https://web-craft.net/elements/logo-that-never-hits-the-corner/ https://web-craft.net/elements/logo-that-never-hits-the-corner/ motion Tue, 18 Aug 2026 00:00:00 +0000 Two animations cannot share a property. Put the horizontal and the vertical drift on one element and the second translate wins outright instead of the two combining — which is why this needs one element per axis. And 100% in a translate is the element’s own size, so the travel is 100cqw - 100%: the box, less the logo. https://web-craft.net/elements/resize-keeps-writing-after-max-width-stops-it/ https://web-craft.net/elements/resize-keeps-writing-after-max-width-stops-it/ layout Mon, 17 Aug 2026 00:00:00 +0000 Dragging writes an inline width and does not stop at max-width. The box paints clamped, but a fit-content parent measures the stored value instead, so anything centred in that parent drifts off the box it belongs to. https://web-craft.net/elements/gradient-border-that-keeps-its-corners/ https://web-craft.net/elements/gradient-border-that-keeps-its-corners/ surface Mon, 17 Aug 2026 00:00:00 +0000 border-image ignores border-radius outright — square corners, every time, and no amount of radius fixes it. So the border is not a border here: it is padding over a gradient background. https://web-craft.net/elements/spotlight-that-follows-the-cursor/ https://web-craft.net/elements/spotlight-that-follows-the-cursor/ hover Mon, 17 Aug 2026 00:00:00 +0000 Gate it behind @media (hover: hover) and (pointer: fine). On a touchscreen :hover latches after a tap, so the light switches on and stays on with nothing hovering it. https://web-craft.net/elements/progress-bar-tied-to-scroll-with-no-javascript/ https://web-craft.net/elements/progress-bar-tied-to-scroll-with-no-javascript/ motion Sun, 16 Aug 2026 00:00:00 +0000 An animation whose timeline is unsupported does not simply switch off — it still applies its fill state. Ship this unguarded and browsers without scroll timelines show a permanently full progress bar. https://web-craft.net/elements/table-header-that-stays-put/ https://web-craft.net/elements/table-header-that-stays-put/ table Sun, 16 Aug 2026 00:00:00 +0000 Any ancestor carrying overflow: hidden switches sticky off silently — no warning, no error, the header just scrolls away. That ancestor is usually a card wrapper somebody added months later. https://web-craft.net/elements/cut-a-paragraph-to-three-lines/ https://web-craft.net/elements/cut-a-paragraph-to-three-lines/ text Sat, 15 Aug 2026 00:00:00 +0000 All four declarations are load-bearing. Bottom padding is the trap: the clipped line stays visible inside the padding box, so pad the parent, never the clamped element. https://web-craft.net/elements/textarea-that-grows-as-you-type/ https://web-craft.net/elements/textarea-that-grows-as-you-type/ form Sat, 15 Aug 2026 00:00:00 +0000 Give it a max-height, or a pasted wall of text pushes the submit button off screen — worse than the scrollbar you were removing. lh units keep the bounds in lines, not guessed pixels. https://web-craft.net/elements/accordion-with-no-javascript/ https://web-craft.net/elements/accordion-with-no-javascript/ disclosure Fri, 14 Aug 2026 00:00:00 +0000 Hiding the marker takes two declarations, not one. Miss either and one browser keeps a triangle you never designed for. https://web-craft.net/elements/focus-ring-for-keyboards-only/ https://web-craft.net/elements/focus-ring-for-keyboards-only/ a11y Fri, 14 Aug 2026 00:00:00 +0000 :focus { outline: none } is the most common accessibility bug on the web, and it looks like a tidy-up. It takes the ring from keyboard users, the only people who needed it. https://web-craft.net/elements/wide-table-that-keeps-its-first-column/ https://web-craft.net/elements/wide-table-that-keeps-its-first-column/ table Thu, 13 Aug 2026 00:00:00 +0000 The corner cell is sticky in two directions at once, so it has to outrank both the header row and the pinned column. Give it the highest z-index of the three or the scrolling cells paint straight over it. https://web-craft.net/elements/shadows-that-show-there-is-more-to-scroll/ https://web-craft.net/elements/shadows-that-show-there-is-more-to-scroll/ scroll Thu, 13 Aug 2026 00:00:00 +0000 The two cover gradients have to match the container background exactly. Put this on a transparent or patterned surface and the covers read as grey smears sitting on top of your design. https://web-craft.net/elements/segmented-control-with-a-sliding-indicator/ https://web-craft.net/elements/segmented-control-with-a-sliding-indicator/ control Wed, 12 Aug 2026 00:00:00 +0000 Never size the indicator in pixels. Hardcode a width and a shift and the pill lines up until someone renames an option — then it sits half over the next label, with no error to tell you. Equal columns and a shift of 100% of itself need no measuring. https://web-craft.net/elements/skeleton-that-does-not-lie-about-the-layout/ https://web-craft.net/elements/skeleton-that-does-not-lie-about-the-layout/ loading Wed, 12 Aug 2026 00:00:00 +0000 A skeleton whose blocks are not the size of the real content is worse than a spinner: the page visibly rearranges the moment data lands. Match the line heights and widths you will actually render. https://web-craft.net/elements/menu-button-that-turns-into-a-close-button/ https://web-craft.net/elements/menu-button-that-turns-into-a-close-button/ menu Tue, 11 Aug 2026 00:00:00 +0000 It is a button with aria-expanded, not a checkbox. A checkbox announces itself as a checkbox, and a menu toggle that reads as "checkbox, not checked" is worse than no label at all. https://web-craft.net/elements/switch-that-is-still-a-checkbox/ https://web-craft.net/elements/switch-that-is-still-a-checkbox/ form Tue, 11 Aug 2026 00:00:00 +0000 Style the input itself rather than hiding it behind a div. appearance: none strips the paint and keeps everything else — focus, the space key, the label association, the announced role. https://web-craft.net/elements/marquee-that-never-jumps/ https://web-craft.net/elements/marquee-that-never-jumps/ motion Mon, 10 Aug 2026 00:00:00 +0000 The track holds the list twice and travels exactly -50%. Any other distance, or a single copy, and the loop visibly snaps back at the seam. https://web-craft.net/elements/frosted-glass-over-anything/ https://web-craft.net/elements/frosted-glass-over-anything/ surface Mon, 10 Aug 2026 00:00:00 +0000 The element needs its own translucent background. Fully opaque and there is nothing to see through; fully transparent and most engines skip the filter entirely. Somewhere near 40% is where it reads as glass. https://web-craft.net/elements/type-painted-with-a-gradient/ https://web-craft.net/elements/type-painted-with-a-gradient/ type Sun, 09 Aug 2026 00:00:00 +0000 color: transparent is doing the work, so if the background fails to paint for any reason the text is invisible rather than merely unstyled. Never put a whole paragraph in it, only display type you can afford to lose. https://web-craft.net/elements/range-slider-you-can-actually-style/ https://web-craft.net/elements/range-slider-you-can-actually-style/ form Sun, 09 Aug 2026 00:00:00 +0000 The WebKit and Gecko thumb selectors cannot share a rule. One unknown pseudo-element invalidates the entire selector list, so a combined rule silently styles nothing anywhere. Write them out separately, every time. https://web-craft.net/elements/card-that-tips-towards-the-cursor/ https://web-craft.net/elements/card-that-tips-towards-the-cursor/ hover Sat, 08 Aug 2026 00:00:00 +0000 The perspective belongs on the parent, not on the card. Put it on the transformed element and every card gets its own vanishing point, so a row of them tilts in visibly different directions. https://web-craft.net/elements/gradient-angle-that-actually-animates/ https://web-craft.net/elements/gradient-angle-that-actually-animates/ motion Sat, 08 Aug 2026 00:00:00 +0000 Custom properties are strings until you register them. Animate an unregistered --angle and it jumps from start to end with nothing in between — no error, no warning, just a hard cut at 50%. https://web-craft.net/elements/card-that-reads-its-own-container-not-the-window/ https://web-craft.net/elements/card-that-reads-its-own-container-not-the-window/ layout Fri, 07 Aug 2026 00:00:00 +0000 An element cannot query itself. The container-type goes on a wrapper and the query targets its children, so every queried component needs one box more than you expected. https://web-craft.net/elements/type-that-scales-with-its-container/ https://web-craft.net/elements/type-that-scales-with-its-container/ layout Fri, 07 Aug 2026 00:00:00 +0000 A cqi unit resolves against the nearest ancestor that declared a container, not the nearest ancestor you had in mind. Nest two containers and the inner one silently wins. https://web-craft.net/elements/boxes-that-keep-their-proportions/ https://web-craft.net/elements/boxes-that-keep-their-proportions/ layout Fri, 07 Aug 2026 00:00:00 +0000 An explicit height beats aspect-ratio every time. The one that catches people is implicit: a flex or grid parent stretches its children by default, and that stretch is a height. https://web-craft.net/elements/heading-that-breaks-where-a-typesetter-would/ https://web-craft.net/elements/heading-that-breaks-where-a-typesetter-would/ type Thu, 06 Aug 2026 00:00:00 +0000 Browsers stop balancing past roughly six lines and quietly do nothing beyond that. It is a headline tool: put it on body copy and you pay for the layout pass and get no result. https://web-craft.net/elements/paragraphs-with-no-orphan-last-line/ https://web-craft.net/elements/paragraphs-with-no-orphan-last-line/ type Thu, 06 Aug 2026 00:00:00 +0000 This is the one for body copy, and balance is not. Swapping them is the common mistake: pretty only fixes the last lines, balance evens out every line but gives up on long text. https://web-craft.net/elements/hyphenation-in-a-narrow-column/ https://web-craft.net/elements/hyphenation-in-a-narrow-column/ type Thu, 06 Aug 2026 00:00:00 +0000 It does nothing without a lang attribute on the element or an ancestor. The browser needs to know which dictionary to hyphenate with, and silently declines rather than guessing. https://web-craft.net/elements/error-state-that-waits-its-turn/ https://web-craft.net/elements/error-state-that-waits-its-turn/ form Wed, 05 Aug 2026 00:00:00 +0000 :invalid matches from the moment the page loads, so an empty required field is red before anyone has typed a character. :user-invalid waits until the field has been interacted with. https://web-craft.net/elements/native-controls-in-your-palette/ https://web-craft.net/elements/native-controls-in-your-palette/ form Wed, 05 Aug 2026 00:00:00 +0000 One property, one colour, no second opinion — the tick, the thumb and the fill are all derived from it. Need the check mark a different colour from the box and you are back to rebuilding the control. https://web-craft.net/elements/label-that-floats-out-of-the-way/ https://web-craft.net/elements/label-that-floats-out-of-the-way/ form Wed, 05 Aug 2026 00:00:00 +0000 The trick needs a real placeholder attribute — even a single space — because the selector matches the placeholder being shown, not the value being empty. Drop the attribute and the label never moves. https://web-craft.net/elements/carousel-the-browser-drives/ https://web-craft.net/elements/carousel-the-browser-drives/ scroll Tue, 04 Aug 2026 00:00:00 +0000 scroll-snap-type goes on the scroller and scroll-snap-align on every child. Set only the first and nothing snaps, with no indication that half the recipe is missing. https://web-craft.net/elements/scrolling-that-stops-at-the-edge/ https://web-craft.net/elements/scrolling-that-stops-at-the-edge/ scroll Tue, 04 Aug 2026 00:00:00 +0000 This is the real fix for the page scrolling behind an open modal. Locking body with overflow: hidden throws away the reading position and jumps the layout by the scrollbar width. https://web-craft.net/elements/anchor-links-that-clear-a-sticky-header/ https://web-craft.net/elements/anchor-links-that-clear-a-sticky-header/ scroll Tue, 04 Aug 2026 00:00:00 +0000 Jump to an anchor under a sticky header and the heading lands behind it. The offset belongs to the scroll container as scroll-padding-top, or to the target as scroll-margin-top, never to both. https://web-craft.net/elements/wrapper-that-knows-its-input-is-wrong/ https://web-craft.net/elements/wrapper-that-knows-its-input-is-wrong/ state Mon, 03 Aug 2026 00:00:00 +0000 Specificity is taken from the heaviest selector inside the brackets, not from :has() itself. Put an id in there and the whole rule inherits an id-level weight you did not intend to spend. https://web-craft.net/elements/hovering-one-row-quiets-the-others/ https://web-craft.net/elements/hovering-one-row-quiets-the-others/ hover Mon, 03 Aug 2026 00:00:00 +0000 This re-evaluates on every pointer move across the list. On a few dozen rows it is free; on a table of several hundred it is a visible frame cost, and the fix is to move the rule to the row rather than the list. https://web-craft.net/elements/layout-that-changes-when-the-list-gets-long/ https://web-craft.net/elements/layout-that-changes-when-the-list-gets-long/ layout Mon, 03 Aug 2026 00:00:00 +0000 A quantity query counts children, so it re-runs whenever the list changes. Keep the threshold to one breakpoint: chaining several counts makes the layout jump twice while items are still loading in. https://web-craft.net/elements/modal-that-traps-focus-for-you/ https://web-craft.net/elements/modal-that-traps-focus-for-you/ dialog Sun, 02 Aug 2026 00:00:00 +0000 show() and showModal() are different elements in practice. Only the modal one gets ::backdrop, makes the rest of the page inert, traps focus and closes on Escape. Call the wrong one and you have a floating box with none of it. https://web-craft.net/elements/popover-with-no-javascript-at-all/ https://web-craft.net/elements/popover-with-no-javascript-at-all/ dialog Sun, 02 Aug 2026 00:00:00 +0000 It lives in the top layer, so z-index on it or on anything around it is meaningless. Stacking is decided by the order things were promoted, and that trips up anyone debugging it the usual way. https://web-craft.net/elements/section-the-page-cannot-reach/ https://web-craft.net/elements/section-the-page-cannot-reach/ a11y Sun, 02 Aug 2026 00:00:00 +0000 inert removes the subtree from focus order and from the accessibility tree, which pointer-events: none and disabled do not. Do not add it around an open modal: showModal() already inerts the rest of the page, and doing both can strand focus. https://web-craft.net/elements/animating-something-in-from-display-none/ https://web-craft.net/elements/animating-something-in-from-display-none/ motion Sat, 01 Aug 2026 00:00:00 +0000 There is nothing to transition from when an element appears: it had no previous style. @starting-style supplies that first frame. Without it the element simply snaps into place and the transition never runs. https://web-craft.net/elements/exit-animation-which-is-the-hard-half/ https://web-craft.net/elements/exit-animation-which-is-the-hard-half/ motion Sat, 01 Aug 2026 00:00:00 +0000 display is a discrete property: it flips at the halfway point, so the element vanishes mid-fade. allow-discrete makes the browser hold display: none back until the rest of the transition has finished. https://web-craft.net/elements/reordering-a-list-without-it-jumping/ https://web-craft.net/elements/reordering-a-list-without-it-jumping/ motion Sat, 01 Aug 2026 00:00:00 +0000 Every element you want animated needs a view-transition-name, and each one has to be unique at the moment of the transition. Two matching names and the transition is skipped outright, with an error only in the console.