よく忘れて困ってる CSS(SASS) Tips


##スマートフォン系

######buttonのスタイル
iOS Safariのbuttonスタイルはブラウザデフォルトのスタイルが適応されているので、スタイルを指定したい場合は明示的に外す。


```scss:scss
input[type="button"],input[type="submit"] {
	-webkit-appearance: none;
}
```


#####widthなどで四則演算


```scss:scss
.half {
    width : 49% ;  //IE8以下とAndroid4.3以下には近似値の指定でフォールバック
    width: -webkit-calc(50% - 1px);
    width: calc(50% - 1px);
    border-right: 1px solid;
}
```




##PC系

###文字関連

#####文字滲ませ
```scss:scss
.text_nijimi {
	color: transparent; // カラーを透明にすることで滲み感を出す
	text-shadow: 0 0 10px #777;
}
```

#####文字丸め

1行版

```scss:scss
.text_clamp {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

複数行版 (旧Android標準ブラウザでも利用できるのでスマートフォンには有用)

```scss:sccs
.text_clamp2 {
	display: -webkit-box;
	display: box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; // 2行目で丸める
}
```

#####改行 

```scss:sccs
br {
	&.none {
		display: none;
	}
	// mediaqueriesとかJSとかで環境によって改行位置の変更させる
}

```

#####セレクトボックスのCSS

`````sass:sass
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  font-size: 15px;
  line-height: normal;
  width: 470px;
  line-height: 38px;
  height: 38px;
  padding-left: 10px;
  box-sizing: border-box;
  background: #eaeaea url(/img/common/bg-select.png) no-repeat 100% center;
  outline: 0;
  &::-ms-expand { // dropbox用の擬似セレクタ
    display: none;
  }
  &:-moz-focusring { // フォーカスの当たっている要素のスタイルを変更できる
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}
`````


-------

###レイアウト関連

#####天地揃え 

display:table;を通常版とするなら、こちらはイレギュラー版

````scss:scss
.element_middle {
  position: relative; // ここらへんは適宜変更で
  top: 50%;
  transform: translateY(-50%);
}
````

#####rgba変換

````scss:scss
$color-gold: #c8a158;
.gold {
  background: $color-gold; //fallback
  background: rgba($color, .7); // こちらはよく使う
  background: rgba( red($color-gold), green($color-gold), blue($color-gold), .7); // こんなのもできる
}
````

inputでfocus時にズレがある場合の調整(for IE)

```scss:scss
input {
	vertical-align: bottom;
}
````

beforeがinline系の場合はfont指定ができない！(for IE)

```scss:scss
.change-font {
	font-family: HOGE;
    &:after {
        content: "CHECK";
        //font-family: HOGE; // これだとIEは切り替わらないので.change-fontでfont-familyを指定する。
    }
}
```

-------

###特殊系

#####画像レンダリング
OSX Safariで

画像をimgタグで表示させた際のレンダリングで、
若干描画途中でがびるので指定。

```sass:sass
img {
	// 画像レンダリングクオリティのスタイリング
	// JSなどで画像切り替えなどがある場合にアンチエイリアスの処理落ちで滲んでしまうので使用している。autoより高速に感じるが、環境によっても違うかも…
	image-rendering: optimizeQuality;
}
```

####スクロールバーを細める (Chrome)

参考: http://qiita.com/mizchi/items/ca9362f6b89eba968bac

```sass:sass
.narrow-scrollbar {
    &::-webkit-scrollbar {
        overflow:hidden;
        width:1px;
        background:#fafafa;

        &:horizontal {
            height:1px;
        }
    }

    &::-webkit-scrollbar-button {
           display:none;
    }

    &::-webkit-scrollbar-piece {
            background:#eee;
            &:start {
                    background:#eee;
            }
    }

    &::-webkit-scrollbar-thumb {
            background:#333;
    }

    &::-webkit-scrollbar-corner {
            background:#333;
    }
}
```

####忘れちゃいがちなセレクター

````
:first-line {
}

````