style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。
var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';
el.style.cssText = '-webkit-animation:hoge;';
document.write(el.style.cssText);
GALAXY Sなんとか端末の不具合っぷりは異常だぜ。
“[CSS3] GALAXY S2だけ :root 疑似クラスが効かない件” の続きを読む
ゲージ作ってるとき発見した不具合（？）
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。
CSS Programming Advent Calendar 2012の20日目
2週間ちょっとぶりにTenderfeelがお送りいたします。
さてみなさん。
ここにイラレのライブラリから適当に作ったリボンのデザインがあります。
(デ・∀・) 「このリボンは背景色と線色を変えられるようにしたいんだよね。できれば影も」
デザイナーがこんなこと言ってたらどうやって作りますか？
最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。
Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが１つの原因のようでした。
translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。
iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。
ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…
あー爆発すればいいのにAndroid。
もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。
最近多用するので…。
“ CSS3時代の上下中央に配置するパターン” の続きを読む
CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。
おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。
gradientは背景にグラデーションを設定できるプロパティです。ってさらりと書いてあった記事がTLにあって、
えー確かアレにも使えたはず…と思ってテストしてみるに至ったんだけど、
ジェネレーターでbackgroundの指定しか出来なかったりとかするから以外とそう認識してる人多いのかも？
まあでも色々考慮するとbackgroundくらいしか使い所なさそーな感じなんで、当たらずしも遠からずなんですけど、
gradientはbackgroundに限らず、なんちゃら-imageというプロパティに使えるのを覚えておきたい。
list-style-imageに使った場合はデフォで1emの四角になるらしい。
以外に穴なのがcontentプロパティで、urlで画像指定するのと同じ要領で使えたりする。
contentにgradientぶちこんでどうするのって感じですけどもw
CSSでお絵かきするくらい複雑な何かをするときには使えるんじゃないかなと思います。
他にもあったら教えて( ﾟдﾟ)ﾎｽｨ…
transformsは該当要素に「傾き」を設定できるプロパティというのも含めて、「えーちがうよちがうよ」って反論出来たら中級者ってことだったらすみません。
CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。
@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ
transformを参考にまとめたmixin
//再生時間
$default-animation-duration : 0.5s !default;
//実行までの待ち時間
$default-animation-delay : 0 !default;
//実行回数(number | infinite)
$default-animation-iteration-count: 1 !default;
//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;
//反復の有無(normal | alternate)
$default-animation-direction: normal !default;
//実行前や実行後のスタイル指定(none | forwards | backwards | both)
$default-animation-fill-mode: both !default;
@mixin animation (
$name :false,
$duration :$default-animation-duration,
$delay :$default-animation-delay,
$count :$default-animation-count,
$function :$default-animation-timing-function,
$direction:$default-animation-direction,
$fillMode :$default-animation-fill-mode
){
@if $name {
@include experimental(animation-name, $name);
}
@include experimental(animation-duration, $duration);
@include experimental(animation-delay, $delay);
@include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
@include experimental(animation-timing-function, $function);
@include experimental(animation-direction, $direction); //反復の有無(normal | alternate)
@include experimental(animation-fill-mode, $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
}
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。
500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。
Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！
特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。
この記事はiOS5、Android 3以前について記載したものです
“[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)” の続きを読む
CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、
ソースで見ると意味不明だったりするものが多いんで
それならテーブルをグラフにしちゃえばいいじゃんと思って試してみたのがコレです。
CSSでTableを折れ線グラフに変える – jsdo.it – share JavaScript, HTML5 and CSS
作り方
ベースと線に画像を使えばIEにも対応できるけど割愛。
表向き表示されないtrみたいな要素にも:beforeと:afterが使えます。
tableの要素はdisplay:tableとかになってるのでpositionを使うとおかしなことになるのですが
display:blockにしてしまえばdivと同じになるため、グラフを描くに必要な素材が不足する心配はありません。
この手法だと表とグラフ・グラフの種類を:targetやクラスの付与で切り替えたり出来るんで結構便利そうだと思いました。