画像置換のあれへの補足
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
「text-indent: -9999px;」の代替となる画像置換テクニック
[CSS]画像置換「-9999px」のパフォーマ... / 画像置換のあれ - {u:b} / 画像置換のあれへの補足 – terkel.jp他...全3件 「text-indent: 100% ＋ white-space: nowrap」を使う。パフォーマンス改善にもなるとのことだが、最近のハードウェアだとパフォーマンス上の利点は見つからなかったとのこと。 [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
CSS Image Replacement Museum
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replac
Replacing the -9999px hack (new image replacement)
IN THE BEGINNING was FIR, AKA Fahrner Image Replacement (note that one of the following links returns a 404): The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
