CSS でできることの素晴らしい例をいくつか共有します_エクスペリエンス交換

私が「あなたが知らない JavaScript と CSS を操作する 5 つの方法」という記事を書いたとき、人々は JavaScript についてどう思いましたか?とCSS? 重なってびっくり。今日は、JavaScript や画像を使わずに CSS でできることを 7 つ紹介します。

CSS@ サポート

優れたフロントエンド開発者はすべて、一部のブラウザでは利用できない機能を使用するときに機能テストを実施する必要があります。機能テストは常に JavaScript で行われており、多くの人が機能テストを行うために、多くの十分にテストされたケースから作られた優れたユーティリティである Modernizr を使用しています。新しい API: @supports が開発者向けに登場し、CSS を使用して機能テストを行うことができます。 @supports がどのように機能するかを示す簡単な例をいくつか示します。

コードをコピー コードは次のとおりです。

/* 基本的な使用法 */
@supports (prop:value) {
/* その他のスタイル */
}

/* 実際の使用法 */
@supports (display: flex) {
div { display: flex; }
}

/* プレフィックスもテストします */
@supports (表示: -webkit-flex) または
(表示: -moz-flex) または
(表示: flex) {

セクション {
表示: -webkit-flex;
表示: -moz-flex;
表示: flex;
フロート: なし;
}
}

この新しい @supports 機能には、対応する JavaScript バージョンもありますが、有効期限が切れています。すぐに使用できることを楽しみにしています。

CSS フィルター

画像の色調を変更するサービスを作成すれば、それを Facebook に数十億ドルで販売できます。確かに、それは簡単なことですが、画像フィルターを作成することは科学ではありません。 Mozilla での最初の週に私が書いた小さなプログラム (賞を受賞しました、えっと、言ってるだけです) では、JS ベースの数学を使用して Canvas を使用して画像フィルターを作成していましたが、今では CSS Filtered を使用して画像を作成できるようになりました。

コードをコピー コードは次のとおりです。

/* 単純なフィルター */
.myElement {
-webkit-filter: Blur(2px);
}

/* 高度なフィルター */
.myElement {
-webkit-filter: Blur(2px) greyscale (.5) opacity(0.8) hue-rotate(120deg);
}

画像の見た目を変えるだけのフィルターですので、画像の保存や書き出し時には使用しませんが、写真を美しくしたり、ポスターを加工したい場合には大変便利です。

ポインタ イベントとレンガ クリック

CSS ポインター イベント プロパティは、要素を効果的に無効にする方法を提供します。このため、リンクをクリックしても JavaScript 経由でクリック イベントはトリガーされません:

コードをコピー コードは次のとおりです:

/* クリックまたはアクティブ化しても何も実行しません。 */.disabled { pointer-events: none; }/* pointer-events: none アプリケーションのため、これは_発生しません_ */

document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

上の例では、CSS の pointer-events 値により、クリック イベントは発生しません。これは大きな利点であることがわかりました。一部の要素が無効になっていることを確認するために、クラス名や属性をどこでもチェックする必要がありません。

メニューの折りたたみと展開

CSS を使用すると、トランジション効果やアニメーションを作成できますが、多くの場合、一部のものを変更したり、アニメーションを制御したりするために JavaScript ライブラリが必要になります。非常に人気のあるアニメーションは、メニューの折りたたみと展開のエフェクトですが、CSS だけで実現できることを多くの人が知りません。

コードをコピー コードは次のとおりです。

/* 開いた状態のスライダー */
.slider {
overflow-y: hidden;
max-height: 500px; /* おおよその最大高さ */

遷移プロパティ: すべて;
遷移期間: .5 秒;
遷移タイミング関数: cubic-bezier(0, 1, 0.5, 1);
}

/* 「closed」クラスで閉じます */
.slider.closed {
max-height: 0;
}

Max-height を賢く使用すると、目的の効果に応じて要素を折りたたんだり展開したりすることができます。

CSS カウンター

Web 上で「カウンター」という用語を聞くと、それが何を意味するのか笑ってしまいますが、CSS カウンターは私たちをさらに笑わせてくれるもう 1 つの要素です。 CSS カウンターを使用すると、開発者は :before と :after: を使用して、指定された要素のカウンターを増分できます。

コードをコピー コードは次のとおりです。

/* カウンタを初期化します */
ol.slides {
counter-reset: slideNum;
}

/* カウンタをインクリメントします */
ol.slides > li {
counter-increment: slideNum;
}

/* カウンター値を表示します */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

P>

スライドショーの効果やフォームコンテンツなどのリストで CSS カウンターが使用されているのをよく見かけます。

Unicode CSS スタイル名

CSS のベスト プラクティスに関するドキュメントは数多くありますが、それらはすべて CSS スタイルの名前の付け方から始まります。スタイルに名前を付けるために Unicode シンボルを使用するように記載されているドキュメントは決してありません。

コードをコピー コードは次のとおりです:

.ಠ_ಠ {
border: 1 ピクセルの無地 # f00;
背景: ピンク;
}

.❤ {
背景: ライトグリーン;
境界線: 1 ピクセルの実線グリーン;
}

これらの記号は使用しないでください。できなければ！

CSS サークル

CSS トライアングルは技術的な仕事であり、CSS サークルにも同じことが当てはまります。 CSS の border-radius を悪用すると、完全な円を作成できます。

コードをコピー コードは次のとおりです。

circle {
border-radius : 50% ;
width: 200px;
height: 200px;
/* 幅と高さは同じであれば何でも構いません */
}

円にグラデーションを追加したり、CSS アニメーションを使用して円を動かすこともできます。 CSS はこれらの図形に対してさらに統合された API を提供する予定ですが、現時点ではこの方法で円を作成できます。

以上、CSS でできる驚くべき 7 つのことを紹介しました。その中には非常に役立つものもあれば、仕事では必要のないものもあります。あなたが定期的に使用している素晴らしい CSS メソッドが仕事で不足している場合は、教えてください。