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

スマートフォン系

buttonのスタイル

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

scss

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

widthなどで四則演算

scss

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

PC系

文字関連

文字滲ませ

scss

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

文字丸め

1行版

scss

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

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

sccs

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

改行

sccs

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

セレクトボックスのCSS

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

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

rgba変換

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

input {
    vertical-align: bottom;
}

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

scss

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

---

特殊系

画像レンダリング

OSX Safariで

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

sass

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

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

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

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 {
}