それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
On popover accessibility: what the browser does and doesn’t do
One of the premises of the new popover attribute is that it comes with general accessibility considerations “built in”. What does “built in accessibility” actually mean for browsers that support popover? See also: Scott's post Popping preconceived popover ponderings and Hidde's talk on popovers, and other posts about popover semantics, positioning popovers and the difference with dialogs and other
フォームのアクセシビリティを考える
maxLength 属性はエラーメッセージを表示するのではなく単に指定された文字数以上、入力できなくなるという挙動であることに注意してください。ユーザーにとっては突然キーボードの入力が受けつけされなくなってしまったように感じるかもしれません。 HTML 標準の制約検証を利用するメリットとして、スクリーンリーダー等の支援技術を利用しているユーザーに対しての対応も実現できるという点があげられます。サブミットボタンをクリックした場合には、入力に違反している項目にフォーカスが移動し、エラーメッセージが読み上げられます。そのため、スクリーンリーダーを利用していたとしてもどの入力フォームに問題があるかを即座に理解できます。 また、例えば required 属性を使用している場合は「必須」と読み上げられる、フォームに違反している項目は「無効なデータ」と読み上げられるなど、フォームに関する適切な情報が提供
"react-strict-dom", why it's so great?
Introduction Last week Meta open-sourced a new library called react-strict-dom, its goal is to improve and standardize the way of writing React components for Web and Native. In this article, I'd like to go through the historical background of building a universal codebase that shares components between Web and Native, and how react-strict-dom changes the way we can do it. Historical background As
MDN Curriculum
The MDN Curriculum provides a structured summary of the essential skills and practices for being a successful front-end developer. The Learn web development Core modules are based on this structure, as well as partner courses such as the Scrimba Frontend developer career path Last updated: October 2025 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end deve
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
Feature proposal: `blocking="render"` attribute on <link>, <script> and <style> · Issue #7131 · whatwg/html
(Edit: The syntax is changed into blocking="render" for extensibility. ) (Please refer to the full proposal for formal details and more discussion) Explainer All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout
なぜ 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 Description:
The JavaScript Handbook
The Valley of Code All rights reserved © 2026 A Flavio Copes project, yes all the 1,664 lessons have been handwritten in over 8 years with passion and sweat, it's not AI slop. Claude Code estimated 5,000 hours of work to write them, that's 2.5 years 24/7. Welcome to The Valley of Code. Your journey in Software Development starts here. We start with Web Development, but you can also learn other pro
Lightweight Javascript Framework Review (For Django Developers)
Lightweight Javascript Framework Review (For Django Developers) The Full-Stack Django Series: How to Combine Frontend and Backend Lightweight Javascript Framework Review How to add Typescript to Django Django Favicon Guide How to Develop Responsive HTML Email in Django Django Form Validation Guide Introduction Many developers are confused when they try to find a Lightweight Javascript Framework fo
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに ※2025/09/15...当時は公式サイトがありましたが、サイトがクローズされたようでした。 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイム
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Platform Status
content-type-research/XSS.md at master · BlackFan/content-type-research
GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
Intent to ship: Popover Attribute
The AHA Stack
Amazon.co.jp: フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本: 池田泰延, 西原翼, 松本ゆき: Digital Ebook Purchas
GitHub - Momciloo/fun-with-sockets
When will chrome portals trail be restarted · Issue #288 · WICG/portals
https://bugs.chromium.org/p/chromium/issues/detail?id=1498140