IE8から使えるCSSまとめ

みんな大嫌いIE8!

意外と便利なCSSが使えます！

## box-sizing:border-box

block要素のwidthやheightの値にpaddingやborderの値を含むようになる。

```css
/**
 * 通常
 * 横幅 width + border + padding = 322 px 
 */
.box1 {
 width : 300px;
 border : 1px solid #ccc;
 padding : 10px;
}

/**
 * box-sizing : border-box指定
 * 横幅 width = 300 px 
 */
.box2 {
 box-sizing : border-box;
 width : 300px;
 border : 1px solid #ccc;
 padding : 10px;
}
```

[サンプル](https://jsfiddle.net/8845musign/r7f00j7z/)

最近のreset.cssなどではすべての要素に対して一括でborder-boxを指定しているものも見られます。

## :first-child

これはIE7から使えますが・・・

親要素の1番目の直下要素となる場合に限り対象となる擬似クラス。
下の例では.wrapper直下の一番最初の.boxが対象となる

```html
<div class="wrapper">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>
```

```css
.box {
    background-color: blue;
}

.wrapper .box:first-child {
    background-color: red;
}
```

[サンプル](https://jsfiddle.net/8845musign/ejzxLxbg/)

マークアップをこのようにすると一番上のboxにはfirst-childが効かなくなるので注意

```html
<div class="wrapper">
    <div class="hige">hige</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>

```

[サンプル](https://jsfiddle.net/8845musign/wsskoj4z/2/)

__残念ながらlast-childはie8へは対応していません__

## 前方一致セレクタ

指定した文字から始まる属性をもった要素すべてが対象となるセレクタ

```css
[class=^"bg-blue"] {
  background-color: blue;
}
```
たとえばこのようなセレクタは.bg-blue-boxや.bg-blue-lineなどが対象となる。

[サンプル](https://jsfiddle.net/8845musign/ajhcjds5/2/)

もちろんclass属性以外にも対応している。

```css
[id=^"wrapper"] {
  margin: 0 auto;
  width: 70%;
}
```
これは#wrapper-mainや#wrapper-navにマッチする。

[サンプル](https://jsfiddle.net/8845musign/v2kbwskv/11/)

## 後方一致セレクタ

前方一致の真逆、指定した文字列で終わる属性をもった要素へマッチ。

```css
[class=$"bg-blue"] {
  background-color: blue;
}
```

これは.box-bg-blueや.body-bg-blueなどにマッチする。
BEMっぽい

[サンプル](https://jsfiddle.net/8845musign/ukkupnnd/)

## 一般兄弟セレクタ

ある要素以降にある要素すべてにマッチするセレクタ

```css
h2 ~ p {
  background-color : blue;
}
```
これはh2以降のpタグすべての背景を青にするCSS。

```html
<article>
    <h1>大見出し</h1>
    <p>段落1</p>
    <section>
        <h2>中見出し</h2>
        <p>段落2</p> <!-- blue -->
        <p>段落3</p> <!-- blue -->
    </section>
</article>
```

「段落2」「段落3」の背景が青くなる

[サンプル](https://jsfiddle.net/8845musign/6mbvxg5e/)

## DataURI

画像をCSSにBASE64形式で埋め込むできる。ファイルのリクエスト数を減らし、高速化をはかるために使ったりするらしい。

```html
<div class="icon"></div>
```

```css
.icon {
  width: 400px;
  height: 400px;
  background-image: url(data:image/png;base64,iVBORw0KGg...以下延々と文字が続く)
}
```

[サンプル](https://jsfiddle.net/8845musign/wgbnx59a/6/)

ただし、多用は禁物

* CSSのサイズが顕著に増える
* 結果CSSの読み込みが遅れる
* CSSが読み込まれなければページのレンダリングが行われない

## Generated Content (before/after)

いわゆるbefore要素、after要素のこと。指定されたCSSの前後にコンテンツを挟むことができる。

下の例ではニコニコの後に顔文字が自動的に付与されます。

```css
.smile {
  font-size: 20px;
}

.smile:after {
  content: "(^o^)";
  margin-right: 10px;
}
```

```html
<span class="smile">ニコニコ</span>
```

[サンプル](https://jsfiddle.net/8845musign/fo74ynhw/10/)

contentに指定できるのは

* 文字列
* 画像など(uri)
* 番号　(olタグのような)
* クオーテーション
* Attr

などがあります。

詳しくはW3Cなどの定義をみると良いと思います。意外と複雑なことができるそうです。

### Attr

Attr(Attribute)とは何か、例えば``aタグ``に置ける``src``を``content``として扱うことができます。乱用するとアクセシビリティが下がりそうですが。

```css
.sense:after {
  content: attr(data-sense);
}
```

```html
appleの<span class="sense" data-sense="りんご">意味<span>は
```

```
appleの意味はりんご
```

[サンプル](https://jsfiddle.net/8845musign/fo74ynhw/11/)

``りんご``は``data-sense``属性の値にもかかわらず画面に表示されます。

## display: table, display: table-cell

``table``や``td``以外の要素をテーブル/セルと同じように扱えるプロパティ。使い道としては

* 垂直中央
* floatを使わない横並び配置
* 均等配置

などが実現できます。

### 垂直中央

```html
<div class="verticalCenter">
    中央
</div>
```

```css
.verticalCenter {
    display: table-cell;
    vertical-align : middle;
    
    width: 200px;
    height: 200px;
    background-color: #673AB7;
    color: #FFF;
    text-align: center;
}
```

``table-cell``の効果で中央の文字が垂直中央で配置されます。

[サンプル](https://jsfiddle.net/8845musign/rtn8ntkg/)

### 横並びかつ均等配置

``table``及び、``table-cell``を併用します。

```css
.menu {
    display: table;
    
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.menu__item {
    display: table-cell;
    width: 33.33333%;
    
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
}
```

```html
<nav>
    <ul class="menu">
        <li class="menu__item">メニュー1</li>
        <li class="menu__item">メニュー2</li>
        <li class="menu__item">メニュー3</li>
    </ul>
</nav>
```

[サンプル](https://jsfiddle.net/8845musign/onopL45o/)

リキッドレイアウトなどで同じような均等レイアウトを``float``で行うと、ピクセルの端数計算などが面倒。tableならよしなに表示してくれます。

## これIE8対応している？で迷ったら

[Can I use?](http://caniuse.com/) 便利！

* SublimeText用プラグイン  
[sublime-text-caniuse](https://github.com/Azd325/sublime-text-caniuse)