LoginSignup
3
3

More than 5 years have passed since last update.

styled-components で IE 対応 Grid Layout をする

Last updated at Posted at 2018-12-25

autoprefixer 便利

autoprefixer っていう vendor prefix を自動で付けてくれるものがあって、gulp や webpack 経由で使えるっぽいのですが、これを使えば勝手に prefix を付けて IE も対応してくれるらしいです。
(参照:https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc

でも styled-components で使いたいんじゃ

styled-components の内部でいつも vendor prefix を付けてくれている CSS プリプロセッサの stylis.js が Grid Layout 未対応らしい。
(参照:https://github.com/styled-components/styled-components/issues/1184

でも最近 stylis.js も Grid Layout 対応したい旨の議論がまた出始めたのでそろそろ対応してくれるかもしれない。
(参照:https://github.com/thysultan/stylis.js/issues/119

👉 でも今やりたいんだわ!!!

解決策: vendor prefix を素手で書く

https://autoprefixer.github.io/ から autoprefixer がどんな感じで css を parse してくれるのかっていう demo が使える。
今回僕が Grid Layout したいとこは一部分だけだったので、対象の CSS をこの demo parser に食わせて、吐かれた CSS を素手でコピペしました。

👉 できた!!!!!

※ ただし vendor prefix の style とそうでないやつの書く順番を間違えると動かなかったので注意。そういうものなんですかね

追記: autoprefixer 使えるのかもしれん?

autoprefixer を通す方法の中によく見たら CSS-in-JS っていうのがあった。
astroturf っていう loader を使えば styled-components 内の CSS も autoprefixer に parse してもらえるのかもしれない。
けど、styled-components が使ってる stylis.js と競合してしまわないかは心配なところ。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3