タグ

ブックマーク / webtech-walker.com (3)

  • Firefox5でCSSの@keyframesにクオートがあると動かない件について - Webtech Walker

    Firefox5でCSSAnimationsが実装されましたが、ちょっとWebkit系と違うところがあるみたいです。 どう違うかというと、@keyframesのアニメーション名にクオートを付けるとWebkit系は動くけどFirefox5は動かないみたい。 DEMO つまりこういうこと。(説明簡略化のためベンダプレフィックスは除いてます) /* Webkitは動くけどFirefoxは動かない */ @keyframas 'hoge' { /* ... */ } /* WebkitでもFirefoxでも動く */ @keyframas hoge { /* ... */ } で、仕様はどうなってるか見てみると CSS Animations Module Level 3 keyframes-rule: ‘@keyframes’ IDENT ‘{’ keyframes-blocks ‘}’; って

    Firefox5でCSSの@keyframesにクオートがあると動かない件について - Webtech Walker
    turusuke_0
    turusuke_0 2011/09/24
    Safaliのドキュメントでは『""』が付いてる
  • history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker

    history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません(普通に遷移する)。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function

    history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker
  • font-sizeのパーセント表記一覧 - Webtech Walker

    font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基サイズが12px~16pxのときに10px~26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで

    font-sizeのパーセント表記一覧 - Webtech Walker
  • 1