クロスブラウザに対応したオートコンプリート付き入力フォーム - Qiita
※都道府県と市区は試していません ※住所は並び順も影響します iOSのSafariで起きた不思議な出来事と仕様 ・autocomplete属性に無効な値（"nope"など）を指定しても無視された ・建物名・部屋番号のautocomplete属性に"address-line2"を指定してもaddress-line1が入った ・住所のname属性をhome_address1とhome_address2から、address1とaddress2にすると建物名・部屋番号が空欄になった ・URLの項目のname属性をweb_site_addressにするとstreetaddressが自動入力された Chromeで起きた不思議な出来事と仕様 ・電話番号の項目のnameにnumberを含めると先頭の0や国番号が消える（数値形式になるのかも） ・氏名の項目のnameにcontactを含めると先頭の文字が消え
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
アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報
リリース: Firefox 79 カテゴリー: DOM, HTML, プライバシー & セキュリティ 概要Firefox 79 以降、target="_blank" を伴った <a> や <area> 要素は、現行の HTML 仕様 に従い、rel 属性が設定されていない限り暗黙的に rel="noopener" を適用します。noopener リンクタイプは新たに開かれたウィンドウ内の window.opener を null とすることで、この DOM プロパティが信頼できない第三者のサイトによって悪用されるのを防ぎます。必要な場合は、rel="opener" を明示的に設定することで挙動を反転させられます。 Apple は 2019 年 3 月公開の Safari 12.1 で最初にこの変更を行いました。Firefox では、Firefox 65 以降の Nightly と早期 Be
IEの持つ互換性機能の全て - DOCTYPEスイッチ/X-UA-Compatible/互換表示 - ふろしき Blog
IEはかつて、独自の機能実装により安定かつ高度な機能を持ったプラットフォームを実現しました。特に、IE6のポテンシャルの高さは、Web技術発展へ大きく貢献しています。 しかし同時に、他のブラウザとは異なる独立した挙動をしたり、バージョンごとに機能面に開きがあるなど、相互運用性の面に大きな課題を作ってしまいました。多くの企業は、IEの特定のバージョンへ強く依存した既存資産と、IEのアップグレード方法に頭を悩ませているでしょう。 Microsoftはこの問題に対応するため、IEは過去のバージョン向けに開発されたWebコンテンツを動作させるための仕組みを持っています。これを「ドキュメントモード」といいます。 本記事では、IEの持つドキュメントモードを利用した互換性の考え方について解説します。IEのアップグレード時に、移行方法の指針、手段の発見に活用して頂ければ幸いです。 ★ 目次 DOCTYPE
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
iframe sandbox は万能ではない - 葉っぱ日記
HTML5で導入されたiframe要素のsandbox属性は、そのiframe内のコンテンツに対しJavaScriptの実行を始め様々な制約を課すことでセキュリティの向上に役立つ機能である。例えば、以下のように指定されたiframeでは、iframe内からformのsubmitなどはできるが、iframe内でのJavaScriptの実行やtarget=_blankなどによってウィンドウを開くことなどは禁止される。 <iframe sandbox="allow-forms" src="..."></iframe> sandbox属性に明示的に allow-scripts という値を指定しない限りはiframe内では直接的にはJavaScriptは実行できないが、かといってiframe内から間接的にJavaScriptを必ずしも実行させることが不可能かというとそうでもない。 sandbox属性
HTML［iframe要素］コンテンツにセキュリティ上の制限をかける - TAG index
sandbox属性の値（キーワード）は、大文字と小文字は区別されません。また、半角スペースで区切って複数のキーワードを指定することができます。 allow-top-navigation と allow-top-navigation-by-user-activation は内容が重複するため、同時に指定することはできません。（同時に指定した場合は allow-top-navigation のみが適用されます） allow-top-navigation または allow-popups を指定している場合は、allow-top-navigation-to-custom-protocols を指定することはできません。（内容が重複するため：allow-top-navigation または allow-popups を指定した場合もカスタムプロトコルを開けるようになるため） 値を持たないsandb
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Standard 今月のアップデート
Basuke's Tech Talk #12 CSSの話 with @kara_d
Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns — Smashing Magazine
RESILIENT WEB DESIGN, a summary
headに<base target="_blank">１行入れるだけで、全リンク�のデフォルトを_blank化できた - Qiita
これ知ってた？ base要素にtarget=
Amazon.co.jp: これからの「標準」を学ぶ マルチデバイス対応サイト構築: エ・ビスコム・テック・ラボ: Digital Ebook Purchas
HTML Standard 日本語訳
「セマンティクスの作り方、これまで、今、そして未来」 - HTML5 Conference 2018 [E3] - - YouTube
わかりやすい「WAI-ARIA 1.0」仕様解説書 | 大藤 幹 | 工学 | Kindleストア | Amazon
<noscript> - HTML: HyperText Markup Language | MDN