Amazon.co.jp: インクルーシブHTML+CSS & JavaScript: 多様なユーザーニーズに応えるフロントエンドデザインパターン: Heydon Pickering (著), 太田良典 (翻訳), 伊原力也 (翻訳), 株式会社Bスプラウト (翻訳): Digital Ebook Purchas
『インクルーシブ HTML + CSS & JavaScript』をレビューしました - 水底の血
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの
HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document
href="javascript:void(0)" にまつわる2年遅かった話 - n2s アーカイブス
<a href="javascript:void(0)">click</a> という書き方が未だに使われているのが気になる <span onclock="">click</span>を代わりに使うべきだろという意見に納得 「span使ったらTabでフォーカスしないから良くない」って意見があったなぁ このデメリットを解消できないかと試してみたら、tabindex属性をspanに適用したらTabでフォーカスするのを発見 あれ？HTML4.0じゃspanに使えないよな、とぐぐってみたら tabindex とフォーカス: Days on the Moonで知りたかったこととか全部書かれていた＿|￣|○ il||li tabindex 属性は HTML 4 ではリンク関連要素やフォームコントロール要素にしか存在しないが、HTML 5 とも呼ばれる Web Applications 1.0 の草案では
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
script要素のdefer属性の実装 - Thousand Years
<!--HTMLでは--><script defer></script> <!--XHTMLでは--><script defer="defer"></script> script要素にはdefer属性があって、これはdocument.write系がないことを条件にscriptの中身を後で評価することによってページのレンダリングを妨げないようにするものと説明されている。ただdeferが利用されているサイトってなかなか見たこと無いうえに本当にレンダリングを妨げないか興味があったので調べた。 実装されているブラウザ 調べた範囲ではIE(SafariとKon〜は調べてない)のみ。あとIEはscript要素にdefer属性をつけるとinnerHTMLに代入したscriptが実行されるという仕様がある。 // 以下は動かないので駄目 hoge.innerHTML = "hoge<script>aler
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
SURGAVIP 🌟 Broadcasting Empire Bongkar Pola Gacor Terkini
Dalam dunia hiburan digital, SURGAVIP kembali menjadi sorotan setelah Broadcasting Empire merilis ulasan eksklusif mengenai pola permainan dari salah satu provider terfavorit, yaitu Pragmatic. Penelusuran kali ini berfokus pada peluang kejutan jackpot maxwin yang sedang ramai diperbincangkan komunitas game online. Broadcasting Empire menyoroti bagaimana konsistensi kemenangan dalam game pragmatis
script要素、asyncとdeferの効果
ChromeやSafariのエンジンであるWebKitの開発版にHTML5のscript要素での策定が進められているasyncとdefer属性の実装が追加された。Running scripts in WebKit - Surfin’ Safariにその旨が記載されているとともに、asyncやdeferを指定した場合にどういった動作が実施されるのかと、デモンストレーションの結果が紹介されている。asyncとdeferの効果を知るサンプルとして参考になる。 ブラウザが次のような外部のJavaScriptファイルを指定したscript要素に到達すると、そこでパース処理を一旦停止し、指定されているJavaScriptファイルのダウンロードを実行する。ダウンロードが完了したらパース処理を実施し、ふたたびHTMLのパースを再開する。ダウンロードしている間はHTMLのパースやほかのスクリプトの実行、レイ
IE8以下は`value`属性がない`option`要素の値をJavaScriptの`value`プロパティで取得できない
IE8以下はvalue属性がないoption要素の値をJavaScriptのvalueプロパティで取得できない HTMLでselect要素を使った選択肢を記述する場合、出力される文字列と送信される値が同一の場合、option要素のvalue属性が省略できます。HTML4.01仕様書には次のように書かれています。 When rendering a menu choice, user agents should use the value of the label attribute of the OPTION element as the choice. If this attribute is not specified, user agents should use the contents of the OPTION element. Forms in HTML documents す
onpasteはペースト直前に実行される
JavaScriptで右クリックからペーストを選択した時に、それをトリガーにして何かを実行したいとする。たとえば、textareaに文字列を入力すると、入力結果をプレビュー欄に表示させる、というような場合。 ctrl+Vならonkeyupでいい。だけどマウスの右クリックでペーストすると、それではダメだ。キーボードは叩いていないんだからイベントが発生しない。 onmouseupでいけるだろうと思ったが、うまくいかない。少なくともFirefoxでは反応しなかった。 どのボタンでクリックされたか判別する【JavaScript】 – Programming Magicという記事を拝見したところ、Firefoxではマウスの右クリックは拾えないようだ。 ならば、ということでonpasteというイベントを使ってみた。実はこのイベントを使ったのは初めてなんだけど、ペーストした追加部分がプレビューに含まれて
type=”file”のクリア - Mars Diary
question:1193930047 より <script type="text/javascript"> function sample(oId){ var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } </script> <span id="XYZ"><input type="file" name="file" size="10"></span> <input type="button" value="←" onclick="sample('XYZ')">一見、無意味な書き戻しをしているようだが、 <input type="file"> の場合、valueへのアクセスが禁じられているのでvalue=""と同じ効果が得られる。 DOMで削除した後、生成するというのも
<input type="image">タグと<img>タグの違い IT技術Labo - HouseTect
<input type="image">タグと<img>タグのどちらを採用するかは、 結果的にやりたいことに依存します。 ・tabindex属性について 始めに言うと以下のHTMLは文法エラーになる。 IEとかでは怒られることはないが、誤動作する原因に繋がるので注意が必要である。 まず、<img>タグには「tabindex」属性が存在しない。 その代わり「<input type="image">」には「tabindex」属性が存在します。 ここら辺でも使い方が分かれますね。 たとえば、ImageButtonとして使いたい場合は、きっちり「tabindex」属性を指定するケースが多々あるとおもうので、 その場合は、「<input type="image">」を使いましょう。 ・onclickイベントについて <img>タグでonclickイベントを使う場合、Enterを押下又は、マウスでクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create an Inline Text Editor With the contentEditable Attribute | Envato Tuts+
iOS で、要素をタッチしてもクリックイベントが発生しない問題への対処 - Qiita
Google推奨「JSON-LD」で構造化マークアップ - Qiita
Does jQuery internally convert HTML5 data attribute keys to lowercase?
Why is my .data() function returning [ instead of the first value of my array?
GitHub - nrkn/h5on: HTML5 Object Notation
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される - Qiita
