UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
htmz - a low power tool for html
=>htmz> a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. [GitHub] plain🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JS bundles to l
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
SCRIPT 要素の変遷から触れる Web の進化 - Repro Tech Blog
はじめに こんにちは。Repro で Booster の開発をしている杉浦と申します。 最近は JavaScript の盛り上がりが凄いですね。今ではブラウザ内にとどまらず、サーバサイドでも活用される様になりました。 これには、言語仕様が整理されたり機能が強化されたり、非常に大きな発展があったという点が大きいです。 実は、言語としての JavaScript だけではなく、最近 HTML との境界インタフェースとしての JavaScript の仕様も最近かなり明確化されてきています。 自分も HTML5 の最初のあたりまでは把握していたのですが、Booster の開発に携わる中で久しぶりに確認したところ、随分と仕様が進化し複雑になっていました。 今回はそんな HTML 規格の変化部分の紹介と、過去からの HTML と JavaScript の流れを振り返る簡単なまとめです。 HTML 仕様と
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素 2023.10.07 `<selectlist>` 要素は、デザインをカスタマイズできなかった従来の `<select>` 要素の問題を解決するために Open UI グループにより提案されている要素です。`<selectlist>` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。 <selectlist> 要素は 2023 年 10 月 7 日現在 Chrome Canary の Experimental Web Platform features flag を有効にした場合のみ使用できる実験的な機能です。この記事の内容は将来変更されるおそれがあります。 <selectlist> 要素とは <selectlist> 要素は Open UI グループにより提案され
ポップオーバー API で JavaScript を使わずにポップアップを表示する
ポップオーバー API で JavaScript を使わずにポップアップを表示する 2023.06.11 Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。 Chrome 114 から追加された ポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示できます。ただポップアップとして表示・非表示を切り替えられるだけでなく、以下のような複雑な要素もデフォルトでサポートしています。 ポップアップの外側をクリックするとポップアップが閉じる Escape キーを押すとポップアップが閉じる 最も大きな z-index の上に表示される（top layer） ポップアップが非表示になったとき、ポップアップ内にフォーカスがある場合前にフォーカスしていた要素にフォーカスが戻る
HTMLの起源 « フュージョニア インターン ブログ
こんにちは。 事務実習のKです。 HTMLの起源についてお話しする際に、まずその前身であるSGMLについてお話します。 SGML（Standard Generalized Markup Language）とは、日本語に訳すと「標準汎用記述言語」であり、文章のデータベース化を目的として考案されました。1980年代、コンピュータやワープロを用いて文章をデータベース化する動きが盛んになったことが背景にあります。しかし、当時のコンピュータやワープロに搭載されたOSや文章には互換性がないため、ある環境で作成した文章を他の環境で利用することができませんでした。そこで、マークアップ情報を本来の文章とともに埋め込むことで、文章の論理構造を定義するようにしました。これにより複雑な構造を持つ文章でも、簡単な文章を作成できるテキストエディタがあれば十分です。またSGMLに対応するソフトウェアであれば、OSや機種
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
Everything you didn’t know you need to know about buttons
Let’s start by making one thing clear — you should not use a div for a clickable element (at least in 99% of cases). But why? Simply put, a div != a button. A div is simply a generic container, and is missing a number of qualities that a properly clickable element should have, such as: Divs are not focusable, for instance, your tab key will not focus a div as it will for any other button on your d
ヤフーショッピングのフロントエンドを支える共通配信技術
本記事は2022年11月に開催した「Tech-Verse 2022」で発表したセッションを要約したものです。アーカイブ動画を文末に掲載しています。質疑応答の様子も収録されていますのでぜひご覧ください。 ヤフーショッピングのフロントエンドを支える共通配信技術について、「共通UI配信サービス誕生までの経緯」と「共通UI配信サービスを支える技術」の2部構成で紹介します。 共通UI配信サービス誕生までの経緯 ヤフーショッピングには、トップ、検索、商品詳細、カート、レビュー、問い合わせ、製品、キャンペーン、ランキング、注文履歴などさまざまな画面があり、それに合わせてさまざまな開発チームが存在しています。 各チームでアプリケーションは独立していて、それぞれリンクで接続されています。共通UIのHTMLもアプリケーションが異なれば、それぞれに記述されます。同じアプリケーション内で共通UIを実装するのは簡単
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
How to Favicon in 2024: Six files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Author: Andrey Sitnik, Author of PostCSS and Autoprefixer, Principal Frontend EngineerTopics: Frontend, CSSPrefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack. It's time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Frontend de
The Future (and the Past) of the Web is Server Side Rendering
The Future (and the Past) of the Web is Server Side Rendering When servers were in Swiss basements, all they had to serve was static HTML. Maybe, if you were lucky, you got an image. Now, a webpage can be a full-blown app, pulling in data from multiple sources, doing on the fly manipulations, and allowing an end-user full interactivity. This has greatly improved the utility of the web, but at the
ブログをAstro に移行しました - As a Futurist...
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bypassing DOMPurify with good old XML
Improving readability with React Wrap Balancer – Vercel
MathML Core Explainer