By Steven Martin 「blinkタグ」とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、「なぜblinkタグを開発したのか？」というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの１人であり、現在のポピュラーなブラウザの先駆けとなったテキスト
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
最近IE8でCanvasを使ったクライアントコードを動かす仕事をしました。有用かもしれない情報があるのでメモっておきます。あくまでメモなので正確さは期待しないでください。 前提Rails上のCoffeeScriptコードjQuery 1.9.1画像を表示して、リサイズしたり、座標を取得したりするMVCフレームワーク、Canvasのラッパーは特に使っていないBackbone.jsのViewを真似た構成になっているなるべく副作用の無い関数に切り出して、node.js(mochaとか)でユニットテストを書いてる。とはいってもカバレッジ20%くらいおよそ550LOC(テスト抜き)わかったことIE8ではCanvasは動かない。ライブラリで動かすようにすることはできる。Canvasを動かすためのライブラリはExplorerCanvas、uupaa-excanvas、その後継？のVMLCanvasなどが
透過PNGをIE6/7/8にエラーなく反映させたい時、みなさんどのように対処されていますか？ 今回、つまずきがちなその問題に立ち向かうべく、私なりに色々と調べてみました。 有用と思しき記事に出会うたび、リンク切れだったり、ちょっと難しかったりしたので、 簡単にわかりやすく、次に自分が対応するときのことも考えて記事に残したいと思います。 今回はMach3.laBlogさんのページを参考に実際のサンプルを作っていくことにいたしました。 【参考サイト】 IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog 透過PNGをIE6で使用する際に有名なのは「DD_belatedPNG」ですが、 IE6向けのライブラリのため、IE8ではエラーが出てしまいます。 IE6/7/8全てに透過PNGを対応させるため、Mach3.laBlogさんの記事を元に、 「DD_belatedPN
読み込みが完了するまで待機し、完了後のコールバック関数を設定できるようになります。 例えば、IEのためだけに書かれたコードを「if IE」タグを使うのではなく動的に変更する事が出来るようになります。 以下のようなコードで動作するようです。 yepnope([ { load: 'js/jquery.js', wait: true }, { test: Modernizr.geolocation, nope: ['googleapi.js', 'needs-googleapi.js'], wait: true, callback: function(){ alert('JS was loaded!'); } } ]); このコードはjQueryの読み込み完了後に、googleapi.jsとneeds-googleapi.jsを読み込み、 全ての読み込みが完了したらアラートを表示するサンプルです
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。 例：cachebusted.css?version=1452318 yepnope({ load
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
