display:noneとか

CSSも書けないより書けた方がいいなってことで、久しぶりに勉強してみた。

　display:noneとvisibility:hiddenの違い

• display:noneは要素は取得されず、完全にその場にないものとして扱われる。

• visibility:hiddenは要素はあるけど、見えない状態として扱われる。

　word-break:break-allとword-wrap:break-word

• word-break:break-allは改行ポイントを無視して単語の途中でも折り返すので、改行ポイントを無視して単語の途中でも折り返すので、 文章が非常に読みづらくなります。
• word-wrap:break-word;は改行ポイントを見極めて折り返しをしてくれますので、word-wrap:break-word;は改行ポイントを見極めて折り返しをしてくれますので、 読みづらくなることはありません。　　　

あと意外と知らなくていつも<img src〜で画像は読みこんでいたのですが、css側に

background-image: url("hoge.png");

みたいな感じでも画像読めるんですね。

CSS高速化のポイント

• @importで別のCSSを読み込むのではなく、ひとつのファイルにまとめて書く。
• div#hogeのような書き方をしない。
• minifyする。