CSSだけでできるあんなことこんなこと


以下は[Ananya Neogi](https://dev.to/ananyaneogi)による記事、[CSS can do that?](https://dev.to/ananyaneogi/css-can-do-that-18g7)の日本語訳です。

# CSS can do that?

CSSだけでこんなことができる、驚くべきリスト！

注意：これらのプロパティのいくつかは、一部のブラウザで動作しません。
その場合は、`@supports`を使って代替スタイルを追加することができます。
全ての例を表示するにはChromeを使ってください。

イタリック体は訳者(私だ)による補足とかです。


## 1. box-decoration-break

このCSSプロパティは、複数の行、列、あるいはページに分割された要素のレンダリング方法を指定します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="GeRoRO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS: box-decoration-break">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/GeRoRO/">
  CSS: box-decoration-break</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 2. attr()

選択された要素の値を`attr()`で取得できます。
このメソッドは、アクセシビリティの目的において本当に役立ちます。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="gEpeda" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="attr() in CSS">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/gEpeda/">
  attr() in CSS</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## 3. backface-visibility

要素を裏返したときに、背面を表示するかしないかを設定します。
フリップボードを裏返すときの動作をイメージしてください。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="Ezmyeb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Card Flip On Hover">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/Ezmyeb/">
  CSS Card Flip On Hover</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 4. conic-gradient

グラデーションは素晴らしいものです。
あなたは`linear-gradient`でグラデーション背景を作れることに慣れているかもしれません。
しかし、`conic-gradient`を使ってCSSだけで円グラフを作成できることはご存じでしょうか？

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="mYmrMJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pie Chart With Pure CSS">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/mYmrMJ/">
  Pie Chart With Pure CSS</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


`conic-gradients`をより理解するためには、[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient)を参照してください。


## 5. filter

CSSフィルタが実装された今、もうPhotoshopのフィルタを使う必要はありません。
フィルタ機能は、入力された画像の見た目に変更を適用します。
これには`blur`、`brightness`、`contrast`、`grayscale`、`hue-rotate`、`opacity`、`invert`、`sepia`、`saturate`、`drop-shadow`など、多様なエフェクトがあります。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="ananyaneogi" data-slug-hash="YbVpyG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Filters">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/YbVpyG/">
  CSS Filters</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`drop-shadow`フィルタは非常に素晴らしいです。
入力画像に影を付けることができます。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="ananyaneogi" data-slug-hash="PvmbeR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Drop Shadow">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/PvmbeR/">
  CSS Drop Shadow</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## 6. mix-blend-mode

このCSSプロパティは、子要素のコンテンツが要素の背景、もしくは親要素とどのように合成されるかを指定します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="rgwNLx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Blend Modes">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/rgwNLx/">
  CSS Blend Modes</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

驚くべきことに、`mix-blend-mode`と`filter`を、画像やテキストと組み合わせて使うことが可能です。
詳しくは[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)で学んでください。


## 7. first-letter

本や雑誌を見るときに好きなもののひとつが、美しい[ドロップキャップ](https://css-tricks.com/almanac/properties/i/initial-letter/#article-header-id-1)です。
`first-letter`疑似要素を使うことで再現可能です。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="ananyaneogi" data-slug-hash="oRWBBE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Drop-Cap">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/oRWBBE/">
  CSS Drop-Cap</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 8. shape-outside

このCSSプロパティは、単純な長方形のボックスではなく、複雑なオブジェクトに隣接するコンテンツの折り返しをカスタマイズする方法を提供します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="ananyaneogi" data-slug-hash="ZNKepv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Shape-Outside">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/ZNKepv/">
  CSS Shape-Outside</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CodePenを別タブで開き、ウィンドウの幅を変更してみてください。
テキストが画像の縁を囲むようになっています。

*↑の例は正直わかりにくいので、↓とかを見るといいかもしれない。*

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="wakamsha" data-slug-hash="myJBPN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Shapes demo#1">
  <span>See the Pen <a href="https://codepen.io/wakamsha/pen/myJBPN/">
  CSS Shapes demo#1</a> by wakamsha (<a href="https://codepen.io/wakamsha">@wakamsha</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 9. writing-mode

このCSSプロパティは、テキストを水平にするか垂直にするかを指定することができます。
以下の値を設定することができます。
・horizontal-tb：テキストは左から右へ、上から下へ表示されます。
・vertical-lr：テキストは左から右へ、上から下へ表示されます。
・vertical-rl：テキストは右から左へ、上から下へ表示されます。
[次の例](https://ananyaneogi.github.io/css-experiments/quote.html)を見てください。

*説明が間違ってるっぽい？*
*`horizontal-tb`は普通の横書き、`vertical-lr`は縦書きで左から右、`vertical-rl`は縦書きで右から左。*

## 10. Adding gradient to text

`-webkit-background-clip: text`と`-webkit-text-fill-color: transparent`を組み合わせることで、テキストグラデーションを実現することができます。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="pmPPpY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Gradient Text with CSS ">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/pmPPpY/">
  Gradient Text with CSS </a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 11. Smooth scroll snap

`scroll-snap-type`プロパティで、スクロールのスナップ地点を設定することができます。

この例では、垂直方向スクロールを`mandatory`に指定しています。
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)では水平方向や、`proximity`など他の使用法も解説されています。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="ananyaneogi" data-slug-hash="mYmodx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Scroll Snap with CSS">
  <span>See the Pen <a href="https://codepen.io/ananyaneogi/pen/mYmodx/">
  Scroll Snap with CSS</a> by Ananya Neogi (<a href="https://codepen.io/ananyaneogi">@ananyaneogi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

以上は、CSSができることのほんの一部にすぎません。
可能性は無限大！


# コメント欄

「ありがとうアナニャ！JavaScriptなしで`scroll-snap-type`ができるとは思ってなかったよ。」
「`box-decoration-break`初めて知った。これはクール！」
「ドロップシャドウやフィルタをPhotoshop使わずにできるのって超便利！」
「`filter`は重いから使いすぎ注意な。」「そこまで[重いってほどでもない](https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters/#article-header-id-3)よ」「サンキューうな！」
「AndroidのChromeで`mix-blend-mode`が動かなかったでござる。」「CSSは未対応プロパティでもエラーを出さないので、フォールバックスタイルを書くといいよ。」
「接頭辞を付ければ、全ての例はSafariでも動くよ。`conic-gradient`と`scroll-snap`以外はFirefoxでも動くよ。」
「[CSSだけでモーダル](https://codepen.io/Smakosh/pen/bYVVbL)とか、[CSSだけでバリデーション](https://codepen.io/Smakosh/pen/owMzgw)とか。」「これはすごい！」


# 感想

[conic-gradient](https://caniuse.com/#search=conic-gradient)は、いまだChromeとSafariしか対応していません。
このようなブラウザシェアの低いCSSプロパティは、`@supports`を使って代替表示を設定しましょう。
`@supports`はシェア1割を占めているIEに[対応してない](https://caniuse.com/#search=%40supports)んだけど、まあIEに人権なんてないからいいよね。

`mix-blend-mode`はすごすぎてわけがわからないです。
レンダリング処理が重いので、かつては[描画にかかる時間差を使ったサイドチャネル攻撃](https://qiita.com/rana_kualu/items/a458cfbdf01be6a3a60d)もあったくらいです。
こんなところまでCSSが面倒を見るべきことなのかという気がしないでもない。

それにしても[CSSの仕様書](https://www.w3.org/Style/CSS/current-work)が恐ろしく見づらいのはどうにかならんのだろうか。
何がわからんって、何時何処がどのように更新されたのかが全くわからん。
[GutHub](https://github.com/w3c/csswg-drafts/issues)追うとか辛くてやってられんし。
Changelogくれ。