Basecoat 1.0.0 is the first stable release of Basecoat as a Tailwind CSS, vanilla HTML, CSS, and JavaScript implementation of shadcn/ui's visual language for non-React stacks. This is a large release. It reshapes the package, public component APIs, style system, JavaScript lifecycle, docs, and template story around a stable 1.0 foundation. What is Basecoat? Basecoat brings the shadcn/ui look and c

Published: May 19, 2026 The web has long since moved on from the static, document-driven medium that it started as. Modern, rich web apps are used by everyone for many reasons, from communicating, purchasing, consuming rich content, to managing our complex lives. HTML, despite all its advances, is still delivered in-order in a top-to-bottom fashion with little regard for when content is ready or w

上記の例では、 <img> 要素の使い方を示しています。 src 属性は、埋め込みたい画像へのパスを保持します。srcset 属性が利用できる場合、src 属性は必須ではありません。ただし、src 属性または srcset 属性の少なくとも一方は指定しなければなりません。 alt 属性は、この画像のテキストによる代替情報を保持します。これは必須であり、アクセシビリティに非常に役立つものです。スクリーンリーダーは、この属性値をユーザーに読み上げるので、画像の意味が分かります。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。 他にも、様々な目的で指定できる属性がたくさんあります。 セキュリティとプライバシーのためのリファラー/CORS 制御。 crossorigin および referrerpolicy を参照してく

公開日: 2026 年 1 月 13 日 Chrome 144 以降では、新しい <geolocation> HTML 要素を使用できます。この要素は、サイトがユーザーの位置情報をリクエストする方法の大きな変化を表しています。スクリプトでトリガーされる権限プロンプトから、宣言的でユーザー アクション指向のエクスペリエンスに移行します。これにより、権限の状態とエラーの処理に必要なボイラープレート コードが削減され、ユーザーの意図をより強く示すシグナルが提供されるため、ブラウザの介入（サイレント ブロックなど）を回避できます。 このリリースは、広範な実環境でのテストと、ウェブ標準コミュニティとの厳格な議論の結果です。この要素の有用性を理解するには、その開発の経緯と、その設計を推進したデータを検証することが重要です。 汎用 <permission> から特定の <geolocation> <ge

Introduction Modern web performance issues often come from delayed rendering rather than network speed. Client-side hydration and heavy JavaScript pipelines can prevent browsers from showing content as early as they could. Several solutions already exist, like SSR or SSG to mitigate this. They help a lot, but in practice, SSG pages need to be rebuilt when content changes, and SSR alone cannot make

10th December 2025 I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to provide useful functionality. I have built over 150 of these in the past two years, almost all of them written by LLMs. This article presents a collection of useful patterns I’ve discovered along the way. First, som

This page lists Firefox's experimental and partially-implemented features, including evolving or proposed web platform standards. Each entry below includes information about the builds in which a feature is included (Nightly, Beta, Developer Edition, or Release), whether it is activated by default or not, and the name of the preference you can use to activate or configure the feature. The descript

こんにちは、フロントエンドエンジニアの mehm8128 です。 今回は新しく検討されている ARIA Notify API について紹介します。 ARIA Notify とは ARIA Notify とは、既存の ARIA ライブリージョンにおける問題点を基に検討されている、新しい API です。document.ariaNotify() のように命令的に呼び出すことで、スクリーンリーダーや点字ディスプレイなどの支援技術に情報を伝えることができます。 ただし、既存のライブリージョンを完全に置き換えるものではありません。本来の目的で利用されているライブリージョンはそのままで良く、意図しない用いられ方をしてしまっている部分で、より正確に支援技術に情報を通知するための API となっています。 現在は仕様の議論段階で、最低限の機能が入った API が Edge では 136 以降の Origi

この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ

In 2023, after the State of JS and State of CSS surveys had already been going on for a few years, we realized something was missing: what about the technology that brings it all together? After all, HTML now goes beyond tags and attributes, encompassing APIs for dynamic updates, rich embeds, performance hints, templating & components, and more. The first State of HTML, led by web superstar Lea Ve

Resilient Import Maps - Better Theme Development and BeyondImport maps are great for both performance and developer experience, but their original limitations made them hard to use, especially at Shopify’s scale. We stepped up and pushed changes across the HTML spec, Chromium and WebKit to fix these issues at the web platform level. Now, developers can interleave JavaScript modules and multiple im

Published 13 May, 2025 under Announcements ESLint can now lint HTML using the html-eslint language plugin Bringing HTML linting to ESLint’s new language-agnostic system. In 2024, ESLint announced its plan to become a language-agnostic linter that is capable of linting languages other than JavaScript. Since then, we’ve seen official support added for JSON and Markdown, and most recently, CSS. Today

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element currently requires: The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. and The srcset attribute may also be present, and is a srcset attribute. In other words, a va

Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured

ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか type="email" などの type 属性に指定した型に値が入力されているか :user-valid は検証の

データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ