やまろぐはてな

yamanokuの技術メモとか戯言。真面目に見たり見なかったりしてください

StylusでOldIEの記述やりたい話

stylus便利なのでもうピュアなcssを書きたくないのですが、かねてから気になってた問題と解決法を記載。

Old IE 問題

Old IEっていうよりかはfilterの記述法についてです。

通常の書き方だとこう書きたくなります。

filter: progid:DXImageTransform.Microsoft.DropShadow(color=#ffffff,offx=1,offy=1)

しかしエラーを吐く。

expected "indent", got "outdent"

どうすんだよとのことなので調べました。

解決法

Selectors — Stylusの最下部でこういう記載。

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

上にならって書き直してみる。

filter: unquote("progid:DXImageTransform.Microsoft.DropShadow(color=#ffffff,offx=1,offy=1)")

うまくいきます。unquoteで括れば良いとのことです。なるほど。

新たなる問題

gulpfile.jsで単にstylus使うだけの設定ならいいんですが、gulp-pleeeaseを設定しているとこんなことが起きます。

f:id:cardboarder:20160121173038p:plain

何故。。。

今考えられる解決策

というわけでこのpleeease問題ですがパッと考えたところで以下の解決策です。

  • pleeease使うのをやめる
  • pleeeaseでfilter設定とかOld IE設定とかなんとかでゴリ押す(未確認)
  • stylusを捨てる
  • IE対応させようとしたクライアントを殴り説得しに行く

出来る限り平和的解決を望んでいますが、どなたか良い方法があれば教えて下さい。

こちらからは以上です。