[B! HTML] igrepのブックマーク

空世界〜HTMLの永遠仕様探訪記、或いは、文字なきsrcにまつわる寥々たる考察について〜

問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con

igrep 2024/07/12

リンク

【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita

はじめにみなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabledをつけて押せないようにしていませんか？この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled属性をつけると、ユーザーがボタンを操作することを防ぎます。そのため、キーボード︵Tabキー等︶で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時ボタンの存在が認知できないため、支援技術︵スクリーンリーダ等︶で操作しているユーザーにとって、﹁送信ボタンどこだろう？﹂と思ってしまったり、﹁なんで送信ボタンが出てこないんだろう？﹂と思ってしまい、操作を完了させることができなくなります。 aria-disabl

igrep 2024/06/26

リンク

GitHub - g-plane/markup_fmt: Configurable HTML/Vue/Svelte/Astro/Jinja/Twig/Nunjucks/Vento formatter, with dprint integration which behaves as dprint-plugin-html, dprint-plugin-vue, dprint-plugin-svelte and dprint-plugin-astro but all in one.

igrep 2024/05/14

html

リンク

ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり

ウェブページ上には﹁クレジットカード番号﹂﹁郵便番号﹂﹁電話番号﹂といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Techno logy in government https://techno logy.blog.gov.uk/2020/02/24/why-the-gov-uk-desig

igrep 2024/04/27

リンク

imgタグのalt属性について

alt属性について調べる機会があり、自分なりにまとめてみました。間違い・ご指摘などあればご教示いただければと思います。 alt属性に結局何入れればいいのか問題 alt属性は入れるべきというのは聞いたことあるけど、実際どのように入れればいいのかわからないという方は多いと思います。明確な決まりがなく、適切ではない文言を入れたとしても目に見えてエラーが出るわけでもないため、曖昧な理解になりがちだと思います。 W3C WAIというWEBのアクセシビリティに関してのガイドラインの作成などをしている組織が﹁画像チュートリアル﹂というものを公開しています。﹁画像チュートリアル﹂ではalt属性の指定の仕方、具体的な事例や考え方が記載されています。このガイドを基準にしてalt属性を決めると、無駄に悩むことが減り、なぜこのような指定にしているかという根拠や参照元としての説得力もあるので、非常に有用だと思いま

igrep 2024/04/27

リンク

リンクの入れ子は subgrid が最適解かもしれない

はじめにリンクの入れ子とは何かというと、以下のようなデザインです。カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ

igrep 2024/03/28

html
css

リンク

RFC の URL はどのドメインで貼るのが良いか | blog.jxck.io

Intro IETF の RFC は、いくつかの場所で同じものが公開されている。どの URL が最適なのか、という話。結論は www.rfc-editor.org だ。 RFC Hosting Site例えば RFC 9110 - HTTP Semantics で言うと、以下の4つがある。 https://tools.ietf.org/html/rfc9110 https://datatracker.ietf.org/doc/html/rfc9110 https://www.rfc-editor.org/rfc/rfc9110.html https://httpwg.org/specs/rfc9110.html まずは、これらの違いを簡単に解説する。 tools.ietf.org IETF がホストする RFC は、 tools.ietf.org だった。 RFC 2616: H

igrep 2024/03/28

rfc
html

リンク

Vivliostyleに特化したMarkdown - VFMの使い方 | gihyo.jp

本記事ではVivliostyle用のMarkdownとして開発されている、VFM︵Vivliostyle Flavored Markdown︶について解説します。 MarkdownとGFM⁠、VFMの関係構造化された文書を記述するためのマークアップ言語としてHTML/XMLがあります。これらは優れた表現力を持つ反面、記法として手動で書くには煩雑です。この課題を解決するための簡潔なマークアップ言語として、Markdownが登場しました。以下はHTMLとMarkdownで同じ文書を記述した比較例です。 HTML <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> Markdown # Title The quick brown fox jumps over the lazy dog. MarkdownはHTM

igrep 2024/03/27

リンク

Snake...in pure HTML⁉️ [no JS, no CSS, no images!!] 😱

igrep 2024/03/13

これはHTMLだけというよりサーバーサイドのアプリとしてスネークゲームを作ったって感じだなぁ

html

リンク

HTMLのデフォルト機能だけでパーシャルHTMLを埋め込む

最近発表されたこちらに衝撃を受けました。 htmzは、iframeを利用してhtmlの一部を書き換えるアイデアです︵本記事ではhtmzの詳細な解説はしません︶。リポジトリはこちら。かなり古いブラウザ環境でも動きそうなミニマルなスニペットで、個人的に非常に好みです。なぜいままで現れなかったのでしょう…。感動したので自分でいろいろ試していたところ、パーシャルHTMLの埋め込みを思いついたので記事にしました。やりたいこと以下のhtmlファイルがあるとしましょう。管理の単純化や再利用性の向上のために、ページ要素を分割しているイメージです。

igrep 2024/02/28

html

リンク

プログラミング言語 HTML 入門

はじめに以前 uhyo さんにより﹁HTML はプログラミング言語である﹂と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名なB

igrep 2024/01/20

面白いなぁ。頑張ればWasmに変換もできそう

リンク

HTML Form で Enter キーによるサブミットを防止する方法、JavaScript で POST する方法 - Qiita

はじめにこの記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。こんにちは。debiru です。ネタが尽きたのでアドベントカレンダーが空いてしまっています。今日は適当に思いついた HTMLForm 周りの挙動についてお話したいと思います。 input[type="text"] で Enter キーを押すとサブミットされるのを防止する <form action="https://params.lavoscore.org/" method="post"> <ul> <li><input type="text" name="name" value="Alice"></li> <li><button type="submit">submit</button></li> </ul> </form> (function() { 'use strict'

igrep 2023/12/22

リンク

<br> と <br /> はどう違う？ - ポリグロット・マークアップの幻想、他 HTMLのお話 5 選 - Qiita

<br> と <br /> はどう違う？ - ポリグロット・マークアップの幻想、他 HTMLのお話5選HTML CSS HTML5はじめにこの記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。こんにちは。debiru です。XHTML のXは ExtensibleのExの音を表しているので eXtensibleと表記すべきではない委員会から来ました。さて、今日も今日とてネタが見当たらないので HTML のお話をいくつか紹介してみます。 HTML のお話5選思いついた HTML のお話を5個くらい書いてみます。 1. a 要素と button 要素を使い分けようユーザーがクリックして操作するものを div や span でマークアップしてはいけません。と言われて久しいものですが、マークアップしてはいけない理由は分かる

igrep 2023/12/16

html

リンク

なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io

Intro 10 年ほど前に同じことを調べたことがある。なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatena blog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。この問題についてあらためて記す。仕様策定の経緯表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio

igrep 2023/11/28

以前調べた https://github.com/whatwg/html/issues/3577 とは違う議論みたいね。まあ突き詰めれば "複雑だけど完璧で誰も使わない仕様が、俗にいう技術的な負債として Web に残っていた可能性..." の話につながるんでしょうけど

リンク

GitHub - google/tsec

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

igrep 2023/11/21

リンク

JavaScript なしでインタラクションを追加する Invokers

JavaScript なしでインタラクションを追加する Invokers 2023.10.22 Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定したidを持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。 invoketarget、interesttarget 属性は 2023 年10月22日現在実装されていません。 <button> 要素に　invoketarget 属性を指定することにより、JavaScript を削減し、より宣言的な方法で UIにインタラクションを追加できます。下記の例では invoketarget 属性に <dialog> のidを指定することで、<button> 要素をクリックし

igrep 2023/11/19

html
UI

リンク

dl/dt/ddのスクリーンリーダーの読み上げをなんとかする

この記事で取り上げる手法は実験的です。何か問題があった際に、すぐに修正・改善できる立場にないのであれば採用するべきではありません。期待と異なる読み上げスクリーンリーダーを使ったことがある開発者ならご存知のとおり、dl要素、dt要素、dd要素の構造はスクリーンリーダーの読み上げにおいては期待と異なる挙動をします。おそらくは歴史的な経緯からそうなっているのだと思いますが、この挙動を理由にdl要素、dt要素、dd要素を使わないという選択をする開発者もいるようです。現行のスクリーンリーダーの読み上げは概ね以下のような挙動をします。HTMLコメントの部分が読み上げられる内容とします。 <dl> <dt>りんご</dt>  <dd>バラ科の落葉高木</dd>  <dt>みかん</dt> <!-- リスト 3

igrep 2023/09/04

リンク

HTML forms do not support the PUT, PATCH and DELETE methods · Issue #3577 · whatwg/html

igrep 2023/08/10

なんで<form>のmethod属性はgetやpost（あとdialog）しか使えないか。cross originなrequestに対して制限を加える必要があるけど、それが実装上意外と難しいらしい

html

リンク

ボタンには常にtype="button"をつけよう

結論ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンはすべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。そしてデフォルトのtype属性の値はsubmitです。つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。起こった問題予想外の挙動をするパターン1以下は郵便番号と住所を入力するシンプルなフォームです。郵便

igrep 2023/08/09

リンク

Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io

Intro Chrome で Compression Dictionary Transport の Experiment が行われている。 Intent to Experiment: Compression dictionary transport with Shared Brotli https://groups.google.com/a/chromium.org/g/blink-dev/c/NgH-BeYO72E この提案の仕様および本サイトへの適用について解説する。 brotli の Dictionary 圧縮方式は、基本的に「同じ値が出てきたら、それらをまとめて小さく表現する」という方式が中心となる。 # 繰り返しを数値で表現する場合 from: aaaabbbbb to: a4b5 この方式は、対象としたデータの中で、如何に効率よく「同じ値」を見つけるかが肝となる。例えば以下の例

igrep 2023/07/30

最適化の選択肢が良くも悪くも増えたなぁ

リンク

はてなブックマーク

タグ

関連タグで絞り込む (103)

HTMLに関するigrepのブックマーク (152)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス