スマホを使っている気分になれるかもしれないCSS3つ

こんにちは。Media Do Advent Calendar 2019 14日目担当の@hrk02です。
今回はフロントエンド初心者の私が、「CSSってこんなことできるのね！」と感動した技術を3つ紹介します。
少なくてすみません・・・・・

(大変申し訳ないことに、超特急で書き上げたメモです....図解や実装例は今後追加していきたいと思います！)

注意書きとなりますが、ブラウザやブラウザバージョンによっては動作しないものももちろんあります。
基本的にはGoogleChromeやSafariで動くものを紹介しております。

スクロール後にピタッと止まる

スクロールスナップ(scroll-snap)というらしいですね！
調べて初めて知りました。

scroll-snap-type でどの方向にスライドするか、scroll-snap-alignでどこでピタっと止めるかを指定します。
この技術があれば、よくあるランキングなどの横スライドもいい感じにできますね！

.container {
  scroll-snap-type: x;
}

.area {
  scroll-snap-align: start;
}

スムーズにスクロール(慣性スクロール)

よくあるはみ出ているバーなどを横にスクロールさせる際に、指でスーッと移動させることができます(語彙力)
これはあとでイメージ図を挿入する必要がありそうですね・・・・

.area {
  -webkit-overflow-scrolling: touch;
}

長い文章(複数行)を3点リーダーで省略

よくある3点リーダーで省略する実装です。
すごーく昔にやったときは面倒だった記憶があったのですが、今はこんなに便利なのかと驚きました。

もはやスマホ関係ないやんって感じですが、結構思い出に残っているので、メモとして残します。

-webkit-line-clamp で、何行まで表示したいか指定します。

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

この-webkit-line-clampは-webkit-box-orientがverticalの場合のみに適用されます。
ただ、私はAngularでこれを使おうとして結構つまりました。
しっかりと-webkit-box-orient: vertical;をつけているのに、なぜか -webkit-box-orient が効かないのです・・・・

どうして・・・・(´；д；｀)
と泣いていたところ、こんな記事をみつけました。

https://github.com/angular/angular-cli/issues/14393
https://qiita.com/watanabejunya/items/40b6c915639be5fa943f

WAO!!!!!!!びっくり!!!!
Autoprefixerのせいなのね・・・・！！！

Autoprefixer
必要なベンダプレフィックスを自動で付けてくれる便利なツール

ということで、下記のように書くことで解決。

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* autoprefixer: ignore next */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

おわりに

普段フロントエンド開発を行っている方からすると当たり前なことでも、初心者の私にとっては新鮮な出会いばかりです.....
他の人にとっては当たり前でありふれた内容でも、自分の言葉でちゃんと説明できるようにQiita記事などでアウトプットする習慣をつけたいですね。
現場からは、以上です。