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

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

f14ac1ed49320467a07eb9d677cc1d99.png

序文

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

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

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

スムーズなスクロール

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

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

翻訳元

スクリーンレコーディング 2021-07-18 10.14.21.gif

完全なコード[1]

ローリングキャプチャ

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

<メインクラス="親">
  <セクションクラス="child"></セクション>
  <セクションクラス="child"></セクション>
  <セクションクラス="child"></セクション>
</メイン>
。親 {
  scroll-snap-type: x 必須;
}

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

b5b4329a3132b26b57f27e1b2766a5d5.gif

スクリーンレコーディング 2021-07-17 10.23.04.gif

完全なコード[2]

CSSアニメーション

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

96274e0645dc7cc4329335e88a0e549d.gif

スクリーンレコーディング 2021-07-17 10.38.14 PM.gif

完全なコード[3]

フォーム検証

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

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

cd851ec356eb587a94c3ca4c48479e7f.gif

スクリーン録画 2021-07-18 9.15.50 am.gif

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 緑一色;
} 

3775b3c0b658a2f37ef5c6f88cc28a4d.gif

スクリーン録画 2021-07-18 9.42.38 am.gif

マウスホバー時に表示

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

5bfdbe13738e3afacdf0a5ce8e1cd623.png

画像.png

一般的に、メニューなどの非表示のものは、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 をよろしくお願いいたします。

<<:  Linux環境にDocker環境をインストールする(落とし穴なし)

>>:  Vuexの特性と機能の詳細な説明

推薦する

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

JenkinsのLinuxインストール手順と各種問題解決(ページアクセス初期化パスワード)

1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...

vue3を使用してAppleシステムのサイドメッセージプロンプト効果を模倣する

目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

MySQL ベースのシーケンス実装方法

チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析

セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...

JSにおける4つのデータ型判定方法

目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

JS ES6 非同期ソリューション

目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...