CSSでできるならJavaScriptは使わない

序文

JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述されることになります。 ——アトウッドの法則

ある程度まではすべて JavaScript でも可能ですが、CSS の方が JavaScript よりも動作効率が高いため、CSS で実現できるのであれば JavaScript で悩む必要はないと筆者は考えています。

両方の言語には異なる用途があります。ブラウザの機能やプロパティが増えるにつれて、CSS は、これまで JavaScript に依存して実装していた機能を処理できる強力な言語になりつつあります。

スムーズなスクロール

これを実現するために、JavaScript のwindow.scrollY実装に頼らなければならなかった時代がありました。また、スムーズなスクロールが必要な場合は、タイマーに頼ってアニメーションを追加する必要がありました。 scroll-behaviorプロパティを追加することで、たった 1 行の CSS で Web サイトのスムーズなスクロールを処理できるようになりました。ブラウザのサポートは約 75% なので、互換性はかなり良好です。

html{
  スクロール動作: スムーズ;
} 

完全なコード[1]

ローリングキャプチャ

スライドショーや画像ギャラリーもフロントエンドで頻繁に使用される機能です。以前の世代の CSS では機能が制限されていたため、これらの機能を実現するには JavaScript に頼る必要があります。今では、この機能はわずか数行のコードで実現できます。ある意味scrolln-snap-type設定したコンテナ要素と、 scroll-snap-align設定した複数の子要素が必要であるという点で、Flexbox やCSS Gridと同様に機能します。次に例を示します。

<メインクラス="親">
  <セクションクラス="child"></セクション>
  <セクションクラス="child"></セクション>
  <セクションクラス="child"></セクション>
</メイン>

。親 {
  scroll-snap-type: x 必須;
}

。子供 {
  スクロールスナップ位置合わせ: 開始;
} 

完全なコード[2]

CSSアニメーション

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

完全なコード[3]

フォーム検証

HTML5 はフォーム要素を充実させ、required、email、tel などのフォーム要素属性を提供します。同様に、:valid と :invalid を使用して HTML5 フォーム属性を検証できます。

• :required 疑似クラスは、必須属性を持つフォーム要素を指定します。
• :valid疑似クラスは、フォーム要素が必須の条件に一致するかどうかを指定します。
• :invalid 疑似クラスは、指定された要件に一致しないフォーム要素を指定します。

CSS のコンテンツ属性 attr を使用してデータを取得する

誰もが疑似要素を思い浮かべると思いますが、テキストはどうやって取得するのでしょうか？JavaScript は使用できません。

CSS 疑似要素は非常に強力です。さまざまな目的に使用できます。通常、何らかの効果を生み出すために、content:" " は空白のままにされることがほとんどですが、実際には、そこに attr を記述して情報を取得できます。

<div data-msg="コンテンツを取得するためのコンテンツはこちら">  
ホバー
</div>

div{
幅:100ピクセル;
border:1px 赤一色;  
位置:相対;
}
div:hover:after{
コンテンツ:attr(データメッセージ);
位置:絶対;
フォントサイズ: 12px;
幅:200%;
行の高さ:30px;
テキスト配置:中央;
左:0;
上:25px;
border:1px 緑一色;
} 

マウスホバー時に表示

マウスのホバーは、ナビゲーション メニューなどでは非常に一般的です。

一般的に、メニューなどの非表示のものは、CSS 制御を容易にするために、ホバー ターゲットの子要素または隣接要素として配置する必要があります。たとえば、上記のメニューはナビゲーションの隣接要素として配置されています。

<!--メニューは隣接しています-->
<li class="user">ユーザー</li>
<li class="メニュー">
    <ul>
       <li>アカウント設定</li>
       <li>ログアウト</li>
    </ul>
</li>

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

。メニュー{
  表示: なし;
}

ナビゲーションにマウスを移動すると、次の内容が表示されます。

/*隣接セレクターとホバーの使用*/
.user:hover + .menu{
  表示: リスト項目;
}

ここでは隣接セレクターが使用されていることに注意してください。そのため、上記のように隣接要素として記述されています。メニューの位置を絶対的に配置できます。

同時に、メニュー自体もホバーしたときに表示される必要があります。そうしないと、マウスがナビゲーションから離れるとすぐにメニューが消えてしまいます。

.menu:hover{
    表示: リスト項目;
}

ここで小さな問題が発生します。つまり、メニューとナビゲーションは隣り合っていなければなりません。そうでないと、中央に隙間があると、上に追加されたメニューホバーが機能しません。ただし、実際の状況では、美観の観点から、両者の間には一定の距離が必要です。これは実際には簡単に解決できます。下の青い四角のように、メニューに透明な領域を描くだけです。

これは、絶対位置指定の before/after 疑似クラスを使用して実現できます。

ul.menu:before{
    コンテンツ： "";
    位置: 絶対;
    左: 0;
    上: -20px;
    幅: 100%;
    高さ: 20px;
    /*背景色: rgba(0,0,0,0.2);*/
}

CSS hover を記述してマウス イベントをリッスンし、マウスを使用して表示と非表示を制御すると、二重の効果で何が起こりますか? 通常のルーチンに従って、マウス イベントでホバーするときに display: block スタイルを追加すると、CSS 設定が上書きされます。つまり、一度マウスをホバーすると、インライン スタイルの優先度が外部リンクの優先度よりも高くなるため、CSS コードは役に立たなくなります。しかし、実際の状況では、予期しないことが起こる可能性があります。つまり、モバイル iPhone では、タッチによって CSS ホバーがトリガーされ、このトリガーは touchstart イベントに先行する可能性が高くなります。このイベントでは、現在の状態が表示されているか非表示になっているかが判断されます。CSS ホバーが役割を果たしているため、表示されていると判断され、その後非表示になります。つまり、一度クリックしても機能しない場合は、2 回クリックする必要があります。したがって、両方を同時に書かない方がよいでしょう。子要素を使用する 2 番目のシナリオは、より単純です。ホバー ターゲットと非表示オブジェクトを同じ親コンテナーの子要素として扱い、この親コンテナーにホバーを記述します。上記のように、非表示要素にホバーを記述する必要はありません。

.マーカーコンテナ .詳細情報{
    表示: なし
}

.マーカーコンテナ:hover .詳細情報{
   表示: ブロック
}

やっと

ここで紹介した関数は、よく使われる関数の一部にすぎません。実際には、CSS で実装できる関数は数多くあります。興味のある学生は、JavaScript に依存しない CSS 関数をさらに学習することができます。

CSS が使えるなら JavaScript を気にする必要はないというこの記事はこれで終わりです。CSS スムーズスクロールに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。