[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない

前文

JavaScriptで書けるアプリケーションは、いずれはJavaScriptで書かれるようになる。-- アトウッドの法則

何でもかんでもJavaScriptにすればいいのですが、なぜかCSSの方が効率的に動作するので、筆者は「CSSで実装できるのなら、わざわざJavaScriptにする必要はない」と考えています。

どちらの言語も用途が異なる ブラウザーのバージョンアップ機能やプロパティの追加により、CSSはこれまでJavaScriptに頼っていた機能を扱える強力な言語となりつつあるのです。

スクロールを滑らかにする

かつては、JavaScriptの window.scrollY を実行し、スムーズなスクロールが必要な場合は、タイマーにアニメーションを追加する必要があります。しかし scroll-behavior 属性を使用すると、1 行の CSS コードでサイトのスムーズなスクロールを処理することができます。ブラウザのサポート率は約75％で、互換性はまだかなり良好です。

html {
  scroll-behavior: smooth;
}

フルコード[1]の場合

スクロールキャプチャ

スライドショーや画像ギャラリーも、フロントエンドで使用頻度の高い機能です。前世代のCSSでは機能が限られていたため、この機能はJavaScriptに頼らざるを得ませんでした。今は、数行のコードでこの機能を実装することが可能です。ある意味、Flexboxや CSS Grid を設定するコンテナ要素が必要です。 scrolln-snap-type を設定した複数の要素と scroll-snap-align はその子要素に対して、以下のように設定します。

<main class="parent">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
</main>

.parent {
  scroll-snap-type: x mandatory;
}

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

フルコード[2]の場合

CSSアニメーション

かつて、ほとんどの開発者がJavaScript（またはjQuery）を使って、ブラウザ上の要素にアニメーションをつけていた時代がありました。これをフェードさせたり、あれを展開させたりするのは簡単なことだったのです。インタラクティブなプロジェクトがより複雑になり、モバイルデバイスが急増するにつれ、パフォーマンスがますます重要になりました。フラッシュは放棄され、才能あるアニメーション開発者がHTML5を使って、過去に不可能だった効果を実現しました。複雑なアニメーションシーケンスを開発し、最高のパフォーマンスを得るために、彼らはより優れたツールを必要としていました。JavaScript（またはjQuery）にはそれができなかったのです。ブラウザが成熟するにつれて、ブラウザは解決策を提供するようになりました。最も広く受け入れられているのは、CSS アニメーションを使用することです。

フルコード[3]の場合

フォームバリデーション

html5では、form要素にrequired, email, telなどの属性が充実しています。同様に、:valid と :invalid を使用して、html5 のフォーム属性に対する検証を行うことができます。

• required擬似クラスは、required属性を持つフォーム要素を指定します。
• valid擬似クラスは、正しい必須マッチを通過したフォーム要素を指定します。
• 無効な擬似クラスは、指定された要件に一致しないフォーム要素を指定します。

CSSのコンテンツ属性attrを利用した情報取得

擬似要素の後を思い浮かべたと思いますが、どうやってテキストを取得するのか、JavaScriptは使えませんね。

CSSの擬似要素は非常に強力なもので、いろいろなことに使えます。通常は何らかの効果を出すために、content:" "はほとんど空白になりますが、実は内部にattrを記述して情報を取得することができるんです!

<div data-msg="Here is the content to get the content">  
hover
</div>

div{
width:100px;
border:1px solid red;  
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}

マウスホバーで表示

ナビゲーション用のメニューなど、マウスホバーが非常によく使われるシーン。

メニューのような非表示のものをホバー対象の子要素や隣接要素として使用する場合のみ、一般的にcssで制御しやすく、例えば、上のメニューは、ナビゲーション：の隣接要素として使用されます。

<! --menu for adjacent li-->
<li class="user">user</li>
<li class="menu">
    <ul>
       <li>Account Settings</li>
       <li>Logout</li>
    </ul>
</li>

の通常状態では、メニューは非表示になっています。

.menu{
  display: none;
}

そして、ナビゲーションホバーが表示されたとき。

/*Use the adjacent selector and hover*/
.user:hover + .menu{
  display: list-item;
}

ここでは隣接セレクタを使用しているため、前述のように隣接要素と書かれていることに注意してください。menuの位置はabsoluteで指定できます。

また、メニュー自体はホバーリング時に表示されるべきで、そうでなければマウスがナビゲーションから離れるとメニューは消えます。

.menu:hover{
    display: list-item;
}

ここで小さな問題があります。つまり、メニューとナビゲーションは隣り合っている必要があり、そうでない場合は真ん中に隙間ができて、上に追加したメニューホバーは機能しませんが、実際には、美学の観点から、2つは少し離れていることです。これは実は良い解決策で、メニューの上に透明な領域、以下の青い四角を描けば良いのです。

これは、before/after擬似クラスを absoute positioning で使用することにより実現できます。

ul.menu:before{
    content: "";
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    height: 20px;
    /*background-color: rgba(0,0,0,0.2);*/
}

私はCSSのホバーとリスニングの両方を記述する場合は、マウスを使用して、表示と非表示を制御するために、通常のセットによると、ディスプレイ：ブロックスタイルがマウスイベントの内部にホバリングすると、CSSの設定を上書きされます何が起こるか、二重効果を持っていることになります。つまり、限り、一度ホバーとして、インラインスタイルがアウトラインよりも高い優先順位を持っているので、CSSコードは、動作しません。しかし、実際には、事故がある、つまり、携帯電話のiPhoneで、タッチは、CSSのホバーをトリガされ、このトリガは、タッチ開始イベントの前に、このイベントで表示または非表示の現在の状態を決定する高確率され、CSSホバーが役割を果たしたため、表示のための判断、およびそれを非表示にしています。言い換えれば、ポイントは1回では出てこない、2回ポイントします。だから、両方を同時に書かないほうがいい。2つ目のシナリオは、子要素を使ったもので、もっと簡単です。hoverの対象とhiddenの対象を同じ親コンテナの子として扱い、hoverはその親コンテナの上に書くことで、上記のようにhidden要素の上にhoverを書く必要はありません: ということです。

.marker-container .detail-info{
    display: none
}

.marker-container:hover .detail-info{
   display: block
}

最後に

実はCSSで実装できる機能はまだまだたくさんあるので、興味があればJavaScriptに頼らないCSSの機能をもっと見ていってください。

CSSで実現できることはこれで終わりですので、JavaScriptに煩わされないようにしましょう。CSSのスムーズスクロールに関連するコンテンツは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。