[css]縦書きと -webkitの正体。

どうも。WEBデザイナーを目指しているバリバリ初心者のしばこです。

現在ポートフォリオサイト作成で試行錯誤しているのですが、よくかっこいいサイトでみる、縦書きをマネしてみました。
（ミーハーなのです。）

コードはこちら。

nav li{
	font-family: 'Poiret One', cursive;
	          writing-mode: vertical-rl;
	float:left;
	color:black;
	text-decoration: none;
}

どやぁ。と自分で自信満々だったのですが　

IEで表示した途端

あれ。

いろいろ調べた結果見つけたサイトがこちら。

[CSS] -webkit-ってなに？

ブラウザによってcss実装する際に対応するコードが違うんですね・・・

詳しくは上記サイトに詳しく載っているのですが、紹介されていた
「-webkit」
をみて、「こいつだ！！！！」となりました。
よくいろんなサイトのコードを見て勉強してて、なんだこいつ。と思ってたのですが、なるほど、各ブラウザに対応させるためのコードだったんですね。
ウェブキット　とか言っちゃうからなんかすごいプログラミングなのかと思いましたとさ。

最終的なコーディングはこちら。

nav li{
	font-family: 'Poiret One', cursive;
	-webkit-writing-mode: vertical-rl;
	      -ms-writing-mode: tb-rl;
	          writing-mode: vertical-rl;
	float:left;
	color:black;
	text-decoration: none;
}

-ms-：IE対応
-webkit- : safari,crome 対応

とのことで、3種類書いたら無事に縦書き表示できましたとさ。
新たな発見。

ばりばり初心者でごめんなさい。

忘備録として、数か月後にはこんなことも知らなかったのか、と笑える時が来るように、引き続きがんばります、ってことです。