これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
HTML要素からHTTP/2優先度を指定する Priority Hints が動いた - ASnoKaze blog
HTTP/2にはクライアントからHTTPリクエストの優先度を指定することができる。サーバはその優先度に基づいてHTTPレスポンスを返す(無視しても良い)。 一般的にはブラウザ自身が判断し、ページのレンダリングを早くするためにCSSなどは優先度を高く、画像は優先度を低く設定している。 一方で、Webサイトを作る側としては、最初に表示される領域(Above the fold)の画像を優先度高くしてほしいと行ったこともあるだろう。 そこで、HTMLからリクエストの優先度を指示できる「Priority Hints」という仕様の標準化が進められている。 例 すでに、Chrome Canary (71)で動作するようなので試す。 importanceに"high"や"low"を指定する <img src="img/1.png" importance="high"> <img src="img/2.pn
ChromeのConsoleでWebサイトのHTMLソースコードを空行なしでコピーする方法
HTMLソースを空行なしでコピー ほとんどのブラウザではWebサイトのソースコードはWebサイト内を右クリックして「ページのソースを表示」などでHTMLソースコードを表示することができる。 表示されたソースコードをすべて選択してコピーすればHTMLソースコードをすべてコピーすることができるが、一連の手順は若干面倒である。 Webサイトによってはサーバーサイドのテンプレートエンジンを使用している場合は空行が多くなり、ソースの可読性が悪くなるため空行を削除してコピーしたいことがある。 ConsoleからHTMLソースをコピー ChromeのデベロッパーツールのConsoleを使用すれば簡単にすばやく空行なしのソースコードを取得することができる。 やり方は簡単だ。 以下のスクリプトをConsoleで実行するだけでクリップボードに空行なしのHTMLソースをコピーできる。 ChromeのConsol
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
