サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
スクロールできる表
表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。 Demo: Scrollable Table 表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。 table { display: blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
