41554 blogs · [ { "id": "01a0da4d-5156-71b3-8672-15806d2b0d99", "title": "Interop 2027 and beyond", "url": "https://olliewilliams.xyz/blog/interop-and-beyond/", "published_at": "2026-09-25T00:00:00+00:00" }, { "id": "01a08cd0-a405-7200-9d36-dab9efb29cfe", "title": "Speculation Rules API", "url": "https://olliewilliams.xyz/blog/speculation-rules/", "published_at": "2026-09-10T00:00:00+00:00" }, { "id": "01a087b8-2dff-71d0-a9a4-0494363c90ca", "title": "accent-color and AccentColor", "url": "https://olliewilliams.xyz/blog/accentcolor-and-accent-color/", "published_at": "2026-09-08T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034c99ec231", "title": "Link parameters for SVG", "url": "https://olliewilliams.xyz/blog/link-parameters/", "published_at": "2026-09-08T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034c9fceac3", "title": "Highlighting a range of text inside an input or textarea", "url": "https://olliewilliams.xyz/blog/opaquerange/", "published_at": "2026-08-19T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034ca876271", "title": "Do we still need build tools?", "url": "https://olliewilliams.xyz/blog/no-build/", "published_at": "2026-07-03T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034cb55d226", "title": "Dark mode with web standards", "url": "https://olliewilliams.xyz/blog/dark-mode/", "published_at": "2026-06-12T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034cc08e7de", "title": "Streaming HTML", "url": "https://olliewilliams.xyz/blog/streaming-html/", "published_at": "2026-06-05T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034ccc6a0fe", "title": "Text imports", "url": "https://olliewilliams.xyz/blog/text-imports/", "published_at": "2026-06-03T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034cd23f943", "title": "Single color image", "url": "https://olliewilliams.xyz/blog/image-function/", "published_at": "2026-06-02T00:00:00+00:00" }, { "id": "01a087b8-2e00-7004-8980-e034cde26d62", "title": "runScripts", "url": "https://olliewilliams.xyz/blog/runscripts/", "published_at": "2026-06-01T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d542791fd", "title": "Rethinking SVG icons", "url": "https://olliewilliams.xyz/blog/rethinking-svg/", "published_at": "2025-12-28T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d548ce740", "title": "The showPicker() method is still unusable", "url": "https://olliewilliams.xyz/blog/showpicker-is-still-unusable/", "published_at": "2025-12-25T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d54a6905c", "title": "Initiating navigations with the Navigation API", "url": "https://olliewilliams.xyz/blog/initiating-navigations-with-the-navigation-api/", "published_at": "2025-12-18T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d54aadb18", "title": "The navigate event", "url": "https://olliewilliams.xyz/blog/the-navigate-event/", "published_at": "2025-12-18T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d54e86735", "title": "Preventing same-document and cross-document navigation", "url": "https://olliewilliams.xyz/blog/preventing-navigation/", "published_at": "2025-12-12T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d552ffae5", "title": "Focus Management with the Navigation API", "url": "https://olliewilliams.xyz/blog/managing-focus-with-the-navigation-api/", "published_at": "2025-12-11T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d55369eff", "title": "Inheriting sibling-index() for staggered animation", "url": "https://olliewilliams.xyz/blog/inheriting-sibling-index/", "published_at": "2025-12-04T00:00:00+00:00" }, { "id": "01a087b8-2e02-7067-9a73-4b1d560232e9", "title": "A complete guide to the HTML number input", "url": "https://olliewilliams.xyz/blog/guide-to-html-number-input/", "published_at": "2025-11-14T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0372e6ff", "title": "Is in a good idea?", "url": "https://olliewilliams.xyz/blog/style-in-body/", "published_at": "2025-11-05T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0386adb7", "title": "setHTML(), Trusted Types and the Sanitizer API", "url": "https://olliewilliams.xyz/blog/sanitizer/", "published_at": "2025-10-29T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a03fdd357", "title": "Frontend complexity and the HTML renaissance", "url": "https://olliewilliams.xyz/blog/html-renaissance/", "published_at": "2025-09-19T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a04de2893", "title": "Is CSS-in-JS still a thing?", "url": "https://olliewilliams.xyz/blog/css-in-js-still-a-thing/", "published_at": "2025-03-28T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a05a01e70", "title": "Dark mode for SVG", "url": "https://olliewilliams.xyz/blog/dark-mode-svg/", "published_at": "2025-03-26T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0610452e", "title": "text-align-last", "url": "https://olliewilliams.xyz/blog/text-align-last/", "published_at": "2025-03-17T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0657e93d", "title": "A better non-modal dialog with the Popover API", "url": "https://olliewilliams.xyz/blog/a-better-dialog/", "published_at": "2025-03-16T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0691d21a", "title": "Popover vs Dialog", "url": "https://olliewilliams.xyz/blog/popover-vs-dialog/", "published_at": "2025-03-13T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0736382b", "title": "Styling the HTML details and summary elements", "url": "https://olliewilliams.xyz/blog/styling-details-summary/", "published_at": "2025-03-05T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a07e05625", "title": "The HTML command and commandfor attributes", "url": "https://olliewilliams.xyz/blog/command-and-commandfor/", "published_at": "2025-02-28T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a08d9859d", "title": "The false promise of design tokens", "url": "https://olliewilliams.xyz/blog/false-promise-design-tokens/", "published_at": "2025-02-16T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a094ded74", "title": "Gradient borders in CSS", "url": "https://olliewilliams.xyz/blog/gradient-borders/", "published_at": "2025-02-14T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0a20972e", "title": "How to gif (2025 edition)", "url": "https://olliewilliams.xyz/blog/how-to-gif-2025/", "published_at": "2025-02-04T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0ab9132f", "title": "Combining currentcolor with relative color syntax", "url": "https://olliewilliams.xyz/blog/currentcolor-with-relative-color-syntax/", "published_at": "2025-02-02T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0b296749", "title": "CSS :open pseudo-class", "url": "https://olliewilliams.xyz/blog/open-pseudo-class/", "published_at": "2025-01-29T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0b502cad", "title": "Which Apple devices support hardware-accelerated AV1 video decoding?", "url": "https://olliewilliams.xyz/blog/apple-devices-av1-decoding/", "published_at": "2025-01-26T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0c3785b6", "title": "Focus styles and programmatic focus", "url": "https://olliewilliams.xyz/blog/programmatic-focus-styles/", "published_at": "2025-01-26T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0d13ec7d", "title": "Building a tooltip with the popover API", "url": "https://olliewilliams.xyz/blog/building-a-tooltip-with-the-popover-api/", "published_at": "2025-01-23T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0d6e32a2", "title": "Do JavaScript frameworks still need portals?", "url": "https://olliewilliams.xyz/blog/portal/", "published_at": "2025-01-20T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0e1b30a7", "title": "Popovers and anchor positioning", "url": "https://olliewilliams.xyz/blog/implicit-anchors/", "published_at": "2025-01-16T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0eeb9a03", "title": "What's new with dialog", "url": "https://olliewilliams.xyz/blog/new-with-dialog/", "published_at": "2025-01-15T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0fb61354", "title": "Formatting dates and times in JavaScript with Temporal and the Internationalization API", "url": "https://olliewilliams.xyz/blog/formatting-dates-and-times/", "published_at": "2025-01-02T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0fbd97a2", "title": "Get a Unix timestamp with the Temporal API", "url": "https://olliewilliams.xyz/blog/unix-timestamp-temporal/", "published_at": "2025-01-02T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a0ffe3244", "title": "Date pickers and the Temporal API", "url": "https://olliewilliams.xyz/blog/date-pickers-and-temporal/", "published_at": "2025-01-01T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a10687fca", "title": "Temporal: a modern JavaScript API for date and time", "url": "https://olliewilliams.xyz/blog/temporal/", "published_at": "2024-12-23T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a10ace43e", "title": "Cookie Store API", "url": "https://olliewilliams.xyz/blog/cookiestore-api/", "published_at": "2024-12-16T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a10bcf55a", "title": "CSS @import is cool, actually", "url": "https://olliewilliams.xyz/blog/css-import/", "published_at": "2024-12-14T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a112dee73", "title": "A more powerful CSS attr() function", "url": "https://olliewilliams.xyz/blog/attr-function/", "published_at": "2024-12-01T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a121aff15", "title": "The best approach to SVG icons", "url": "https://olliewilliams.xyz/blog/svg-icons/", "published_at": "2024-11-30T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a129f2965", "title": "Are icon fonts a bad practice?", "url": "https://olliewilliams.xyz/blog/icon-fonts/", "published_at": "2024-11-29T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a132158ab", "title": "Centering things: a solved problem?", "url": "https://olliewilliams.xyz/blog/centering-things/", "published_at": "2024-11-09T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a13aa4104", "title": "The stretch keyword: a better alternative to width: 100% in CSS?", "url": "https://olliewilliams.xyz/blog/stretch/", "published_at": "2024-10-30T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a14a057f4", "title": "Color fonts", "url": "https://olliewilliams.xyz/blog/colorfonts/", "published_at": "2024-10-17T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a14ad4855", "title": "New alternatives to innerHTML", "url": "https://olliewilliams.xyz/blog/innerhtml-alternatives/", "published_at": "2024-05-08T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a14c37c2d", "title": "Parsing declarative shadow DOM", "url": "https://olliewilliams.xyz/blog/parsing-shadow-dom/", "published_at": "2024-05-06T00:00:00+00:00" }, { "id": "01a087b8-2e03-73e1-9082-b30a15c0716e", "title": "Render-blocking on purpose", "url": "https://olliewilliams.xyz/blog/render-blocking-on-purpose/", "published_at": "2024-05-02T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae79b20464", "title": "The slow death of CSS vendor prefixes", "url": "https://olliewilliams.xyz/blog/prefix/", "published_at": "2024-04-22T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7a477c4f", "title": "Custom pseudo-classes for web components with the CustomStateSet API", "url": "https://olliewilliams.xyz/blog/custom-pseudo-classes/", "published_at": "2024-04-02T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7aa5d02c", "title": "Get the content of the users clipboard with JavaScript", "url": "https://olliewilliams.xyz/blog/clipboard/", "published_at": "2024-03-21T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7b46bfd7", "title": "Sharing styles between shadow DOM", "url": "https://olliewilliams.xyz/blog/sharing-styles-between-shadow-dom/", "published_at": "2024-03-21T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7c4001be", "title": "Creating and importing styles with constructable stylesheets and CSS module scripts", "url": "https://olliewilliams.xyz/blog/constructable/", "published_at": "2024-03-18T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7c93bd25", "title": "AVIF Everywhere", "url": "https://olliewilliams.xyz/blog/avif-everywhere/", "published_at": "2024-01-09T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7d34a0a1", "title": "Easy vertical alignment without flexbox", "url": "https://olliewilliams.xyz/blog/vertical-alignment/", "published_at": "2023-12-23T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7e1af323", "title": "The AV1 video codec gains broader support", "url": "https://olliewilliams.xyz/blog/av1/", "published_at": "2023-10-31T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7edd45e0", "title": "The View Transitions API, the Navigation API and the SPA vs MPA debate", "url": "https://olliewilliams.xyz/blog/the-spa-vs-mpa-debate/", "published_at": "2023-09-03T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7f0d69bf", "title": "User-adaptive interfaces with AccentColor", "url": "https://olliewilliams.xyz/blog/accentcolor/", "published_at": "2023-08-08T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7f15c609", "title": "Declarative Shadow DOM", "url": "https://olliewilliams.xyz/blog/declarative-shadow-dom/", "published_at": "2023-07-30T00:00:00+00:00" }, { "id": "01a087b8-2e04-7139-9551-02ae7fdb6800", "title": "Converting between iterables and web streams", "url": "https://olliewilliams.xyz/blog/converting-between-iterables-and-web-streams/", "published_at": "2023-07-27T00:00:00+00:00" }, { "id": "01a087b8-2e05-7314-b5b1-5d496c0099d5", "title": "Import JSON, CSS and more with import attributes", "url": "https://olliewilliams.xyz/blog/import-attributes/", "published_at": "2023-07-27T00:00:00+00:00" }, { "id": "01a087b8-2e06-72f2-9711-4bc550eb426a", "title": "Change array by copy", "url": "https://olliewilliams.xyz/blog/change-array-by-copy/", "published_at": "2023-07-20T00:00:00+00:00" }, { "id": "01a087b8-2e06-72f2-9711-4bc5518bf861", "title": "Grouping array items with groupBy()", "url": "https://olliewilliams.xyz/blog/grouping-array-items-with-groupby/", "published_at": "2023-07-20T00:00:00+00:00" }, { "id": "01a087b8-2e0b-722b-b693-5ca1acde0403", "title": "Using emoji on the web", "url": "https://olliewilliams.xyz/blog/using-emoji-on-the-web/", "published_at": "2023-07-16T00:00:00+00:00" }, { "id": "01a087b8-2e0b-722b-b693-5ca1ad105237", "title": "The new @font-face syntax", "url": "https://olliewilliams.xyz/blog/new-font-face-syntax/", "published_at": "2023-07-07T00:00:00+00:00" }, { "id": "01a087b8-2e0b-722b-b693-5ca1ad51dfaa", "title": "System font deep dive", "url": "https://olliewilliams.xyz/blog/system-font-deep-dive/", "published_at": "2023-07-01T00:00:00+00:00" }, { "id": "01a087b8-2e0b-722b-b693-5ca1ae29eb67", "title": "color-mix and relative color", "url": "https://olliewilliams.xyz/blog/color-mix-and-relative-color/", "published_at": "2023-06-24T00:00:00+00:00" }, { "id": "01a087b8-2e0c-7157-b204-09557c1ae450", "title": "Modern component-driven HTML email", "url": "https://olliewilliams.xyz/blog/modern-component-driven-email/", "published_at": "2023-06-18T00:00:00+00:00" }, { "id": "01a087b8-2e0c-7157-b204-09557c94cca2", "title": "Standardising design tokens", "url": "https://olliewilliams.xyz/blog/design-tokens/", "published_at": "2023-06-16T00:00:00+00:00" }, { "id": "01a087b8-2e0c-7157-b204-09557ceca881", "title": "A guide to CSS shapes and offset-path", "url": "https://olliewilliams.xyz/blog/offset-path/", "published_at": "2023-06-11T00:00:00+00:00" }, { "id": "01a087b8-2e0c-7157-b204-09557d7fd4b7", "title": "image-set() for CSS background images", "url": "https://olliewilliams.xyz/blog/image-set/", "published_at": "2023-06-06T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303b52d1b7", "title": "Styling scrollbars", "url": "https://olliewilliams.xyz/blog/styling-scrollbars/", "published_at": "2023-06-06T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303b6ab6c0", "title": "An introduction to @scope in CSS", "url": "https://olliewilliams.xyz/blog/scope-in-css/", "published_at": "2023-06-02T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303c2b0162", "title": "Changing inline styles with JavaScript", "url": "https://olliewilliams.xyz/blog/changing-inline-styles-with-javascript/", "published_at": "2023-05-24T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303c348770", "title": "Register custom properties in CSS, get and update them with JavaScript", "url": "https://olliewilliams.xyz/blog/custom-properties/", "published_at": "2023-05-24T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303c45c96e", "title": "Using linear() for better animation", "url": "https://olliewilliams.xyz/blog/linear/", "published_at": "2023-05-19T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303cc2d1ae", "title": "__dirname & __filename equivalent in Bun", "url": "https://olliewilliams.xyz/blog/import-meta-bun/", "published_at": "2023-04-02T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303d665725", "title": "Modern HTML email (tables no longer required)", "url": "https://olliewilliams.xyz/blog/modern-html-email/", "published_at": "2023-04-02T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303de3dc73", "title": "The clear-site-data header", "url": "https://olliewilliams.xyz/blog/clear-site-data-header/", "published_at": "2023-03-27T00:00:00+00:00" }, { "id": "01a087b8-2e13-728d-a458-00303e802aad", "title": "The submitter parameter for FormData", "url": "https://olliewilliams.xyz/blog/submitter-parameter-for-formdata/", "published_at": "2023-03-25T00:00:00+00:00" } ] posts Claim your blog
Back to olliewilliams.xyz
Blog · corpus.blog/blogs/olliewilliams.xyz/posts

olliewilliams.xyz

olliewilliams.xyz

2026

2025

2024

2023