今年もあと3週間弱で終わりますね。
ということで、今年お世話になったCSSをざっとまとめてみたいと思います。

(最近同一ページ内で h1 タグは1つとかそうじゃないとか盛り上がってますが、この記事では何個も h1 使いますのであしからず)

間隔の空いたボーダー

これには本当にお世話になりました。
普通に border: 1px dotted #000; みたいに実装すると、間隔は調整できないので、 background-image のグラデーションの機能を使ってボーダーを実装しよう、というやつです。
以下の例では「線幅1px、ドットの大きさ1px、間隔2px、横向きの破線」を実装しています。

注意点は、 background-image なので1つの要素に複数指定できない点です。

DEMO

.hoge {
  background-image: linear-gradient(to right, #ccc, #ccc 1px, transparent 1px, transparent 2px);
  background-size: 3px 1px;
  background-position: top;
  background-repeat: repeat-x;
}

@keyframes

CSSでアニメーションをするとき、この @keyframes にアニメーションの動きを設定しておいて、アニメーションを使う箇所で呼び出す、というやつです。
簡単なアニメーションはCSSで実装することが多いので、とても重宝しています。

CSSアニメーションの欠点は書き方があまり直感的でないところでしょうか…
下のサンプルを見てもらえればわかると思いますが、CSS見ただけではどんなアニメーションになるかイメージしにくいですよね。

サンプルは Stylus というCSSプリプロセッサで書いています。Stylusはいいぞ。

DEMO

$easeOut = cubic-bezier(0.165, 0.840, 0.440, 1.000);

@keyframes beat {
  0% { transform: scale(0.8) }
  14% { transform: scale(1.1) }
  96% { transform: scale(1) }
  100% { transform: scale(0.8) }
}

.hige {
  animation: beat 0.8s infinite $easeOut;
}

カーソルに画像を設定

みなさんもカーソルに画像を設定したいと思ったことありますよね。
少なくとも僕はありました。

JavaScriptでごにょごにょすることもできるのですが、CSSを使って実装することもできます。
使用できる画像の拡張子は .cur, .png, gif の3種類です。
困ったことに、IEでは .cur しか使えませんが、ChromeやSafariだと .cur が表示されないことがあります。
cursor プロパティには複数の設定をすることができるので、.cur.png を設定して、どちらもダメなら auto でカーソルがいい感じになるように設定するのが良いでしょう。

.hoge {
  cursor: url(../img/hoge.cur) 35 35, url(../img/hoge.png) 35 35, auto;
}

Flexbox

これはもう言わずもがなですね。
いろんな人がいいぞって言ってますし、実際とても良いです。(ブラウザごとにいろいろバグがあるのはつらいですが…)
詳しくは私の記事を御覧ください。

Flexboxレイアウトまとめ

Web制作界隈ではまだまだ floatdisplay: table; などが使われることが多いですが(対応ブラウザやチームのスキルセットなどの関係で…)、 Flexbox もじわじわと増えてきている印象です。
僕はfloatdisplay: table;が嫌いなので、2017年はバリバリFlexbox使っていきたいと思います。

僕は下の設定をよく使います。鉄板ですね。

.hoge {
  justify-content: center;
  align-items: center;
}

calc

CSSプリプロセッサを使用していれば計算式使ますが、CSSしか使えないときでも計算式が使えるのでとてもいい感じです。
特にレスポンシブデザインに対応するときなどによく使います。

以前は対応ブラウザの関係で使わないこともあったのですが、最近はIE8やAndroid4.3以下を切れるようになってきたので、使用頻度高くなっていますね。

https://developer.mozilla.org/ja/docs/Web/CSS/calc

translate3d

最近、アニメーションをCSSで実装することが多いのですが、そのときにこいつをよく使います。
これは要素を立体的に動かすときに使うCSSですが、2次元的なアニメーションも実装できます。

こいつを使うメリットは、CPUではなくGPUを使ってアニメーションを処理できる、というところです。
GPUでアニメーションを処理できれば、CPUの使用率が下がるので、結果的に全体の処理速度が向上します。
CSSハック的な感じですが…

アニメーションを高速化する will-chage プロパティもあり、できればこちらを使いたいのですが、ブラウザ対応が十分でないので、まだまだ実用的ではない感じがしますね…

https://developer.mozilla.org/ja/docs/Web/CSS/will-change

DEMO

.hoge {
  transform: translate3d(0, 0, 0);
  &.js-move {
    transform: translate3d(500px, 80px, 0);
  }
}

box-sizing

box-sizing: border-box;を指定すると、borderpaddingwidthや heightに含めて計算してくれます。
widthが100%で左右にpaddingが16pxある、みたいな実装をするときに、その計算をよしなにやってくれる感じですね。
最初は慣れませんでしたが、今となってはこの設定なしでは生きていけないくらい便利です。

これを使うことでmarginをpaddingを明確に使い分けることもできるようになります。
(コンテンツの中身は幅や高さに影響のないpaddingで、外側はmargin、みたいな)

DEMO

counter-increment

これ皆さん知ってましたか…?
お恥ずかしながら、僕は最近知りました。

主にliに指定するプロパティで、リスト要素の順番を変数に保存してくれます。
これを使うと、リストのマーカーを任意の書式に変えることができます。

DEMO

li {
  list-style: none;
  counter-increment: num;
  &:before {
    content: "(" counter(num) ") ";
  }
}

まとめ

いかがでしたでしょうか?
振り返ってみると、よく使うCSSの機能って少ないんだなと思いました。
またCSSって意外と勉強する機会が少ないので、実装されているのを見て「こんなプロパティあったんだ!」みたいなことが結構ありますよね。
来年もいろんなサイトみて勉強していきたいです。

この投稿は フロントエンドエンジニア Advent Calendar 201617日目の記事です。