CSS でできることを知らなかった 7 つのこと

信じられないかもしれませんが、CSS がさらに多くの機能を追加しているのと同じように、CSS と JavaScript は重複し始めています。私が「あなたが知らないかもしれない CSS と JavaScript が相互に影響を与える 5 つの方法」を書いたとき、人々は JavaScript と CSS がどれほど重複しているかに驚きました。今日は、JavaScript や画像を使わずに CSS でできることを 7 つ紹介します。

CSS@supports

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

/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    section {
      display: -webkit-flex;
      display: -moz-flex;
    display: flex;
    float: none;
    }
}

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

CSSフィルター

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

/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

このタイプのフィルターは、画像の元の見た目を変更するだけで、画像を保存したりエクスポートしたりするときには使用されませんが、写真を美しくしたり、ポスターを加工したりする必要がある場合に非常に役立ちます。

ポインター イベントとブリッキング クリック

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

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

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

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

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

/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}

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

CSS Counter

インターネット上で「カウンター」という言葉を聞くと、それが何を意味するのかクスッと笑ってしまうことがよくありますが、CSS カウンターは私たちをさらにクスッとさせるもう 1 つのものです。 CSS カウンターを使用すると、開発者は :before と :after を使用して指定された要素のカウンターを増分できます:

/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

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

Unicode CSS スタイル名

CSS のベスト プラクティスに関するドキュメントは数多くありますが、それらはすべて CSS スタイルに名前を付ける方法から始まります。 Unicode 記号

.

ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}

を使用してスタイルに名前を付けるように記載されているドキュメントは決してありません。これらの記号は使用しないでください。できなければ！

CSSサークル

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

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they're equal */
}

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