keyframesアニメーションをメディアクエリの中に書くとIEで動かない

keyramesアニメーションを@media ....の中に書くと、IEではそのkeyframesアニメーションが動かない。

keyframesアニメーションはmediaクエリの外に書かないといけない。
ちょっと引っかかってしまった。
日本語の情報が見つからなかったのでメモっとこう

[compasscss] cssスプライトのファイル名をシンプルにした場合のキャッシュ対策

compassのcssスプライト作成時にファイル名につく乱数を削除して、シンプルな名前にすることができる。

参考：[compass] cssスプライト画像のファイル名をシンプルにする

これだとファイルがキャッシュされて、ファイルを変更しても古い画像が表示されてしまう可能性がある。

その場合は下記のコードをconfig.rbに追加。

「**.css?Owoiu93k2djhr」という風にファイル名の後ろに乱数をつけてキャッシュを読み込まないように対策できる。

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
     rand = rand(100000000)
     str = '.png?' + rand.to_s
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, str)
    end
  end
end
# ----------------------------------------

Android 2.x~で拡大縮小も可能なままposition: fixedを使う方法

結論
cssのkeyframeアニメーションを使うとposition:fixedが有効になる

ちょっとはまってしまったのでメモ
スマートフォン向けのサイトで、facebookみたいに横から出てくるメニューを作った。
Androidf 2.x~はそのままではoverflow: scrollもposition:fixedも効かないので、スクロールしたらメニューもそのまま一緒にスクロールされるようにした…はずだった。

が、ある時からメニューがfixedになってしまて、スクロールしても動くのは横にずれていったメインのコンテンツ部分のみ。
メニューは定位置のまま。それだとウィンドウの外に出てしまったメニューを見ることができない。

viewportにuser-scalable=noと入れるとposition: fixedが効くようになるという話だったが、そんな指定はしていない。

原因を探してみると、どうやらkeyframesアニメーションを使うと、position: fixedが効くようになるらしい。
拡大縮小もできるようにしたままfixedを使うようにしたい人には使える方法なのかも。

ログイン時にブラウザが覚えているID,パスワードを入力させない方法

ブラウザはログインが必要なサイトで、ID,パスワードを覚えていてくれて、使う際にはすごいありがたいんだけど、どうしても自動で入力をさせずに、手動で入力させたいって場合があった。

具体的にはあまり書けないが、Web上だけで完結するのではなく、Webと連動して対面でサービスを行うキャンペーン時に、ID,パスワードが必要になるため、どうしても対面前に一度、手入力して自分のパスワードを思い出しておいてほしい、という状況。

最初に考えたのはinputのnameを変えるという方法。
これは機能しなかった。nameを変えてもなぜかブラウザが覚えているID,パスワードが入力されてしまう。

次に考えたのは、Javascriptでinputのvalueを空にする方法
windowのload時にvalueを空にする処理をしたが、ブラウザが自動入力するのはその後のタイミングらしく、一旦空にした後に、valueがはいってしまった。

次に考えたのが、setIntervalとかで、定期的にinputの値を空にする方法。
IDのinputにフォーカスされたタイミングでsetIntervalを解除する。
これは一応うまく動作していたが、iPhoneやAndroid、IEなどブラウザによってはinputのフォーカスイベントがうまく動作しない可能性もあるのでは…と考え、そうなってしまったら、どれだけ手動で入力しても定期的に値を空にされてはたまらんと思いやめた。

最終的にとった方法は
name="id"のinputなどの他にname="id-2"、name="password-2"などのinputを作り、それを見えないように設置するという方法。
これをやると似た名前のどちらかにしか値が入らなくなった。
ただ、先に（または後に）記述されている方のinputに…とかではなく、ブラウザによってはidは先に書かれたinputに、パスワードは後に書かれたinputに…となってしまっていた。
複数のブラウザで試行錯誤して順番を変え、正しいinputには値が入らない順番を探した。
どういった法則があるのかはわからずじまい。

cssでdisplay:noneにしてしまうとブラウザがそのinputを無視してしまうようで、height: 0; width:0; position: absolute; top: 0; right: 0;などとして、見た目上は見つからないようにして対応した。

iPhoneでiframeがはみ出してしまう

twitterのウィジェットを使っているサイトをiPhoneで見ると、twitterのiframeが画面の外まで伸びてしまっていた。

cssではmax-width: 100%;と指定している。
Androidでは問題なく表示されていたが、iPhoneではどうもうまく動かないらしい。

いろいろcssを変更してみた感じだと、width,max-widthの値を％で指定するとうまく効いてくれないみたい。
px指定だとちゃんと変更された。

親要素の問題かもしれない。
ちょっと調べてみよう。

[compass]rgbaが使えない古いブラウザ向けにも対応できるcompassのプラグイン

バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。

参考：https://github.com/aaronrussell/compass-rgbapng

■インストールが必要
gem install compass-rgbapng

■config.rbに下記を追加
require "rgbapng"

■cssファイルに下記を追加
@import "rgbapng";

■変数の設定
$rgbapng_path: 'my_pngs';　//自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ

■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);

これが
@include rgba-background(rgba(0,0,0,0.75));

こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);


IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。

PC版safariでcssアニメーションするとちらつく

Macのsafariでcssアニメーションさせると、そのアニメーションする要素とは別の部分がちらつくという症状がでた。
iPhoneではなくPC。
具体的な原因ははっきりわからなかったんだけど、transfrom:rotateをアニメーションさせているのをやめたらちらつきは解消された。

チラツキが起きるのはアニメーションの始まる瞬間と終わる瞬間。
アニメーションの途中は問題なし。
検索しても同じような症状の人は見つからず…

--追記
原因はまだ良くわかってないんですが、対処法は見つかった。簡単。
-webkit-backface-visibility: hidden; ↑これを追加するだけ。場合によっては、子要素にも適応させないとだめかも。
参考：CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid（英語）
-- ココマデ

以下、勝手な推測…
rotateをアニメーションさせようとするとアクセラレータが効いてGPUを使うようになる。
アニメーション終わるとGPUの使用も終了。
CPUとGPUの切り替えの瞬間にちらつく。

同じ動きをしているのにページによってチラツキが起きないページもあったので、ちらついていたのは画面全体ではなく、何かしら条件が揃った要素のみっぽい。

結果的にrotateやめたら、そっちの方が好きな動きだったんで結果オーライ

--add
他にもskewをcssアニメーションしたらちらついたとか…いろいろ。
ずっとChromeでしか確認しないまま作業進めて、そろそろ大詰めってころからsafariでの確認を開始したのが仇になった。
チラツキの原因を探るのに手間がかかってしまう。
cssアニメーションさせるならsafariメインで確認したほうが良さそう。

[Android] 欧文フォントを指定したら、日本語が表示されなくなっていた。

cssでfont-familyを指定したら、日本語部分が表示されないAndroid端末があった。

cssの記述はこう↓↓
font-family: nunito, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

nunitoってのはgoogle web fontで使える丸っこいゴシック体
http://www.google.com/fonts/specimen/Nunito

もちろん欧文フォントなんで、そのフォントには日本語は入っていない。

けど、その場合はフォントの指定を1つずつ下がっていって、対応したフォントで表示される…と思ってたんだが…

うーむ、調べてみよう。

lessでcssアニメーションを簡単に書く方法

lessを使ってる時にキーフレームアニメーションを簡単に書く方法がないか調べていたら教えてくれているページがあったのでメモ
 参考：LESS CSS でキーフレームアニメーションを楽に書く

// 今回作ったのは、ピコピコ動くアニメーション
// まずはmix-inでアニメーションを指定
.pikopiko() {
 @_r: 10deg;
 from { .rotate(0); }
 5% { .rotate(@_r); }
 10% { .rotate(@_r * -1); }
 15% { .rotate(@_r); }
 20% { .rotate(@_r * -1); }
 23% { .rotate(0deg); }
 to { .rotate(0deg); }
}

//作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定
//現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい
@keyframes pikopiko { .pikopiko(); }
@-webkit-keyframes pikopiko { .pikopiko(); }

// アニメーションを簡単に指定するmix-inも作成
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
 -o-animation: @name @duration @delay @ease;
 animation: @name @duration @delay @ease;
}

.animation-count(@count) {
 animation-iteration-count: @count;
 -webkit-animation-iteration-count: @count;
 -moz-animation-iteration-count: @count;
 -o-animation-iteration-count: @count;
 -ms-animation-iteration-count: @count;
}

//アニメーションを設定する
.element {
 .animation(pikopiko, 4s);
 .animation-count(infinite);
}

すげー記述量減った！ ありがたし。 自分1人で作業するならcompassを使うんだけど、黒い画面が苦手な人もいる場合はguiのあるlessで作業してる。

compass使ってたらsingle-transitionでエラーになった

Undefined mixin single-transitionとかなんとか、そんなエラー。
結論だけかくと、バージョンアップしたら治った。

調べてたら、「2つ同時にcompass watchしてたせいだったっぽいよ」って言ってた人もいたので、そういう場合もあるのかも。

スマートフォンで背景を全画面に適応する

最近は背景を全画面に敷いたサイトが増えた気がする。
スマートフォン版のサイトでも、同じように背景画像を全画面に設定シたい場合がある。
そんな時はcssでbackground-sizeを指定する。
background-size: ***

指定は縦横、それぞれpxや%で指定できる以外に、containt, coverという値もある。
containは範囲内に縦横収まるように、拡大縮小する。
coverは範囲を全部覆う様に拡大縮小する

もちろん、スマートフォン以外にも使えるけど、対応するブラウザがまだ限定されてるので、今のとこスマートフォン向けにしか使えないかなという感じ

参考：背景画像のサイズを指定する

Google HTML/CSS Style Guideの俺にとって使えそうな箇所

■プロトコルは省略
http:とかhttps:とかは省略する
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(//www.google.com/images/example);
}

■必要に応じてコメントを書く

■TODOは大文字 + コロン
<!-- TODO: remove optional tags -->

■type属性はいらない
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="/js/js.js"></script>

■URL属性はクォーテーションを使わない
url(//www.google.com/css/go.css);


■並び順はアルファベット順にする
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

■CSSのグループごとにセクション名をコメントに書く
/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}


参考：Google HTML/CSS Style Guide

[JavaScript] ブラウザの「-webkit-」などのベンダープレフィックスを取得する

JavaScriptでスタイルを指定する際に、「-webkit-」などのベンダープレフィックスをつけないといけないことがあるんだけど、主要ブラウザそれぞれに対応したスタイルを設定するのも馬鹿らしいので、JavaScriptで自動でつけたい。iScrollで使われていたコード。

//↓こんなのは面倒なので…
elem.style.WebkitTransaction = 'all 100ms linear';
elem.style.MozTransaction = 'all 100ms linear';
elem.style.OTransaction = 'all 100ms linear';

//自動でプレフィックスを取得する
var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';

//↓こういうふうに使う
elem.style[vendor + 'Transaction'] = 'all 100ms linear';

アニメーションが終わるタイミングで起きるイベント「transitionEnd」はfirefoxだけプレフィックスつかないので注意。なんでそんなことすんの…

chrome, safari -> webkitTransitionEnd
oper -> otransitionEnd
firefox -> transitionend(※全部小文字)

参考：
iScroll
CSS transitions

SASSで主要なブラウザのプリフィックスをつけるmixin

SASSで主要なブラウザ用にプリフィックスを付けるmixinを作ったのでメモ。

$prefixes: -webkit- -moz- -ms- -o- '';
@mixin vendorCss($key, $val){
 @each $prefix in $prefixes{
  #{$prefix}#{$key}: $val;
 }
}

div {
 @include vendorCss(transition, all 200ms ease-in-out);
}

↓こうなる
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;

[iPhone] 縦向きでも横向きでも画像を画面いっぱいに表示したい

画像を画面いっぱいに表示する方法
cssで指定する

img {
  width: 100%;
  height: auto;
}

SCSSを使ってみた

なんとなく知ってたんだけど、ちょっとめんどくさそうだなーと敬遠していたんですが、中村勇吾さんの会社の採用情報の「好ましいスキル」に「Sass, LESSなどのCSS拡張言語の利用経験」というのを見つけたのがきっかけで触ってみる気になりました。

具体的には「CSS HappyLife」というサイトが詳しく紹介してくれてます。

【Sassを覚えよう！】もくじ的なのと参考リンク：CSS HappyLife



軽く触ってみた感じ…とても便利です。
めんどくさがって敬遠していた過去の自分を叱りつけてやりたい。
LESSってやつも気になります。
CakePHPだとphpでコンパイルしてくれるプラグインがあるらしいので、Cakeの時はLESSも使ってみようかなと思ってます


How to use LESS CSS in CakePHP application(英語)

オンマウス時に出す枠をSVGでなめらかに表示＆アニメーション

SONYのヘッドフォンのサイト見ていて、オンマウス時のアニメーションがなめらかで綺麗だったので、どうやってるのか調べてみた

見たサイト↓
http://discover.store.sony.com//piiq/

水色の枠はSVGで表示している。
FLASHなんかでは良くみる表現。

ボーダーをつけたdivをオンマウス時に縮小することで、枠を表示させてもいいんじゃないのと思ったけど、firefox7ではアニメーションがコマ落ちしてガタガタだった。

で、やりかた。
線の幅をアニメーションで変更してる。
線の幅は、線の中心から両方に広がっていくので、10pxの幅の線を出したい場合は、倍の20pxに設定すると、中心から外側と内側にそれぞれ10pxの線がでる。
外枠はoverflow:hiddenにしとかないと、外側の線まで出てしまうので注意。

HTML

JavaScript(jQueryを使ってます)

$(".item").hover(function(){
 $(this).find(".border").css("opacity", 1).animate({
  "stroke-width": "10px"
 });
},
function(){
 $(this).find(".border").animate({
  "stroke-width": "0px"
 }, {
  complete: function(){
   //アニメーションが終わったら非表示
   $(this).css("opacity ", 0);
  }
 });
});

SVGがつけるかどうかをJavaScriptで判定するなら→「SVGが使えるか判定する」(Raphael使ったほうがいいと思うけど…)

参考サイト：
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html



-- add 2012/12/16
Raphael.jsを使ってやってみました
オンマウス時になめからなアニメーションで枠線を表示させる
--

[JavaScript] チェックボックスでチェックが入っている要素を取得する

css3で使えるようになった:checkedを使うと、チェックが入っている要素が簡単に取得できる。

docment.querySelectorAll("input:checked");

でチェックが入ったinput要素のリストが取れる。

cssでも指定できる
input:checked{
  color: red;
}

[iPhone] CSSアニメーションがちらつく場合

iPhoneでCSSアニメーションを使う場合、画面がちらついてしまう時がある。

俺の場合は、位置を移動させるtranslateXを-webkit-transitionでアニメーションさせようとした時に起きた。

Androidでは起きない症状。
translateXの指定をtranslate3dに変更することでちらつきはなくなった。

-webkit-transform: translateX(100px);

↓↓↓ 変更 ↓↓↓

-webkit-transform: translate3d(100px, 0px, 0px);

参考
スマートフォン制作のツボ最新を聞いてきた－CSS Nite,LP13

[iPhone] アニメーションは CSSでやるべし

iPhoneのアニメーションをJavaScriptでアニメーションすると非常にもっさりとして、コマ落ち気味の乙な動きになってしまうので、CSS3の-webkit-transitionを使用しようしようしよう。

イージングの種類が少ないのが残念だけど、動きの滑らかさはJavaScripとは比べ物にならない

参考
CSS3 変形処理を行う transform プロパティ