[js,css] Android4.1 が返す element.style.cssText の値が他と違う件

style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。

var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';

el.style.cssText = '-webkit-animation:hoge;';

document.write(el.style.cssText);


” Android4.1 が返す element.style.cssText の値が他と違う件” の続きを読む

[CSS3] Androidのmask-imageに関する不具合について

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。

“[CSS3] Androidのmask-imageに関する不具合について” の続きを読む

20日目 : CSS Programming Advent Calendar 2012

CSS Programming Advent Calendar 2012の20日目
2週間ちょっとぶりにTenderfeelがお送りいたします。

さてみなさん。
ここにイラレのライブラリから適当に作ったリボンのデザインがあります。

リボンの例

(デ・∀・) 「このリボンは背景色と線色を変えられるようにしたいんだよね。できれば影も」

デザイナーがこんなこと言ってたらどうやって作りますか?

“20日目 : CSS Programming Advent Calendar 2012” の続きを読む

Android 4.* で 画像がぼやける不具合について

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。

Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが1つの原因のようでした。

translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。

iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。

ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…

あー爆発すればいいのにAndroid。

もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。

4日目 : CSS Programming Advent Calendar 2012

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

“4日目 : CSS Programming Advent Calendar 2012” の続きを読む

[CSS3] gradient が使えるところ

gradientは背景にグラデーションを設定できるプロパティです。ってさらりと書いてあった記事がTLにあって、
えー確かアレにも使えたはず…と思ってテストしてみるに至ったんだけど、
ジェネレーターでbackgroundの指定しか出来なかったりとかするから以外とそう認識してる人多いのかも?

まあでも色々考慮するとbackgroundくらいしか使い所なさそーな感じなんで、当たらずしも遠からずなんですけど、
gradientはbackgroundに限らず、なんちゃら-imageというプロパティに使えるのを覚えておきたい。

  • background-image
  • border-image
  • mask-image
  • list-style-image
  • content

list-style-imageに使った場合はデフォで1emの四角になるらしい。
以外に穴なのがcontentプロパティで、urlで画像指定するのと同じ要領で使えたりする。
contentにgradientぶちこんでどうするのって感じですけどもw
CSSでお絵かきするくらい複雑な何かをするときには使えるんじゃないかなと思います。
他にもあったら教えて( ゚д゚)ホスィ…

transformsは該当要素に「傾き」を設定できるプロパティというのも含めて、「えーちがうよちがうよ」って反論出来たら中級者ってことだったらすみません。

[Sass] Compass CSS3-animations snipets & mixin

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) 
}

“[Sass] Compass CSS3-animations snipets & mixin” の続きを読む

[css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね!

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

“[css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)” の続きを読む

[CSS3] テーブルで作った表をグラフに変える

CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、
ソースで見ると意味不明だったりするものが多いんで
それならテーブルをグラフにしちゃえばいいじゃんと思って試してみたのがコレです。

CSSでTableを折れ線グラフに変える – jsdo.it – share JavaScript, HTML5 and CSS

作り方

  • tableとその中身をdisplay:blockにする
  • theadの要素でx軸とy軸のベースを作る
  • trで各ポイントの基準になるx軸とy軸の線を描く
    • tr→x軸の線
    • tr:before→y軸の線
    • tr:after→y軸の数値
  • thをx軸に配置
  • tdでグラフの線を描く
    • td→線
    • :befor, :after→線両端の○

ベースと線に画像を使えばIEにも対応できるけど割愛。

表向き表示されないtrみたいな要素にも:beforeと:afterが使えます。
tableの要素はdisplay:tableとかになってるのでpositionを使うとおかしなことになるのですが
display:blockにしてしまえばdivと同じになるため、グラフを描くに必要な素材が不足する心配はありません。
この手法だと表とグラフ・グラフの種類を:targetやクラスの付与で切り替えたり出来るんで結構便利そうだと思いました。