Address form analysis
Extending the autocomplete attribute This is an effort to analyze the structures of address forms in a somewhat machine readable way. This work is based on the following assumptions: The autocomplete spec was written with the intent to find a lowest common denominator that should work for all countries. An analysis of real-world web-forms indicates that those forms cannot be properly annotated wit
Favicon Generator for perfect icons on all browsers
Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this? Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its de
Can I email…
Apple Mail macOS iOS Gmail Desktop Webmail iOS Android Mobile Webmail Outlook Windows Windows Mail macOS Outlook.com iOS Android Yahoo! Mail Desktop Webmail iOS Android AOL Desktop Webmail iOS Android Samsung Email Android Mozilla Thunderbird macOS Windows ProtonMail Desktop Webmail iOS Android Fastmail Desktop Webmail HEY Desktop Webmail Orange Desktop Webmail iOS Android LaPoste.net Desktop Webm
Website Themes and Color Schemes
Getting into the mode Before we begin, I'd like to preface this article with the following resources that were helpful guides on my theming quest. They explain a lot of the intricacies of setting up dark mode and I recommend reading them before my own. A Complete Guide to Dark Mode on the Web Quick and Easy Dark Mode with CSS Custom Properties Create a user controlled dark or light mode Read those
Building a loading bar component | Articles | web.dev
Building a loading bar component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color adaptive and accessible loading bar with the <progress> element. In this post I want to share thinking on how to build a color adaptive and accessible loading bar with the <progress> element. Try the demo and view the source! Light
A look at the dialog element's super powers
A long time ago in 2014, the dialog element landed in Chromium 37. The idea behind the HTML element was to make it easier to build modals, dialogs and popups. The specification defines the element as follows: The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window. We have 2022 now and almost made it to use
HTML5 設計原則「HTML Design Principles」の翻訳「HTML 設計原則」
この文書「HTML 設計原則」は、W3C の HTML ワーキンググループ による「HTML Design Principles (W3C Working Draft 26 November 2007)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-04-16 公開日: 2007-11-27
SVG ファビコンのファイル名を `favicon.ico` にして `<link rel="icon">` を省略する
ファビコンを /favicon.ico のファイルパスでルートディレクトリに置くとブラウザが勝手に読みに行ってくれますが、 PNG や SVG などのファイル形式の場合は HTML 内に <link rel="icon"> を指定する必要がある……と思い込んでいました。すなわち ICO フォーマットでファイルパスが /favicon.ico の場合は を省略することはできません。もし省略するとブラウザは /favicon.ico を読みに行ってしまい（そのファイルが存在するか否かに関わらず）、 SVG 画像は無視されます。 ところが先日、 Implement favicon.svg fallback · Issue #6957 · whatwg/html を読んでいてハッとさせられました。長くない Issue なのでぜひ原文を読んでいただければと思いますが、一応要約すると 現在の HTML
`<meta charset="UTF-8">` を書く必要性があるケースとデメリット
HTML 文書内に <meta charset="UTF-8"> を書いていますか? 書いているとしたら、その必要性を問われた時に理由を説明できますか? 実は私も勘違いしていた部分があり[1]、改めてまとめてみました。 <meta> による文字エンコーディング指定の歴史 Content-Type ヘッダーと <meta> の関係性と優先度 <meta> が必要なケース <meta> で文字エンコーディングを指定するデメリット <meta> による文字エンコーディング指定の歴史 § まず基本的なおさらいをします。<meta charset="UTF-8"> は HTML5 で登場した新しい記法で、 HTML4 以前は <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> などという長くて覚えにくい書き方をしてい
autofocusがグローバル属性になったのでなんか書く | きるこの日記帳
2019 年 8 月末、HTML LS で、autofocus 属性がグローバル属性となった。 ブラウザの対応が進めば、全ての要素で autofocus を使用できる。 autofocus属性とは autofocus 属性は、ページの読み込み時に自動的にフォーカスする要素を指定するもの。 これまで autofocus は、button, input など、フォーカス可能な要素でしか使用できなかった。 一方で、全ての要素は、tabindex または contenteditable 属性を追加することでフォーカスが可能である。 したがって、autofocus は全ての HTML 要素で使用できるべき、という内容の Issue が 4 月に上がってた。 Move autofocus content attribute to HTMLElement · Issue #4563 · whatwg/h
URL Standard
Participate: GitHub whatwg/url (new issue, open issues) Chat on Matrix Commits: GitHub whatwg/url/commits Snapshot as of this commit @urlstandard Tests: web-platform-tests url/ (ongoing work) Translations (non-normative): 日本語 Abstract The URL Standard defines URLs, domains, IP addresses, the application/x-www-form-urlencoded format, and their API. Goals The URL standard takes the following approac
HTML Standard
7.4 Navigation and session history7.4.1 Session history7.4.1.1 Session history entries7.4.1.2 Document state7.4.1.3 Centralized modifications of session history7.4.1.4 Low-level operations on session history7.4.2 Navigation7.4.2.1 Supporting concepts7.4.2.2 Beginning navigation7.4.2.3 Ending navigation7.4.2.3.1 The usual cross-document navigation case7.4.2.3.2 The javascript: URL special case7.4.2
Creating an Accessible Range Slider with CSS | a11y with Lindsey
Note: this blog is an archive and not actively maintained. Some information may be out of date. If you'd like to see what I am working on or work with me in a consulting capacity, visit my website lindseykopacz.com. April 29, 2020I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS s
Element.focus vs aria-activedescendant | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/element-focus-vs-aria-activedescendant. We hope to fix this soon!). When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Validator.nu
文字実体参照一覧
Transform
HTMLのカレンダー | Advent Calendar 2021 - Qiita
Inclusive Components
The form element
