JavaScriptを回避する6つの強力なCSS機能

最近、CSSとJavaScriptの間で多くの比較が行われ、特定の問題を解決するためのこれらのテクノロジーの適用について議論されています。JavaScriptを残したまま、多くの問題を簡単に解決できる優れた新しいCSS機能が登場するにつれて、論争はさらに熱くなります。







CSSとJavaScriptは連携して機能し、それぞれに独自の長所がありますが、インターフェイスのルックアンドフィールを制御するためにCSSを使用すればするほど、フォールトトレラントで信頼性の高いWebアプリケーションになると思います。ポイントは以下の通りです。

• CSSは、その性質上、障害に強いテクノロジーです。これは、CSSパーサーが理解できないプロパティに遭遇すると、それを単に無視して先に進むことを意味します。言い換えると、CSSを使用して、プログラマーはスタイルを適用し、それらが機能することを期待します。
• JavaScriptはフォールトトレラントテクノロジーではありません。JSコードの単一の構文エラーは、アプリケーション全体を破壊する可能性があります。つまり、JSを使用してサイトのスタイルを管理する場合、対応する構造の機能を確認する必要があります。

JSではなくCSSをいつ使用するかという質問に答える際に考慮すべき他の多くの考慮事項があります。



CSSは、対応するJSソリューションよりもはるかに簡単で、作成も簡単な素晴らしいソリューションを設計するための新しい方法を提供します。これは、CSSの機能の多くを指します：遷移、カスタムプロパティ、アニメーション、フィルター、数学。



この投稿では、まだ知らないかもしれないCSSのクールな機能のいくつか（そのうちのいくつかはごく最近のものです）について説明します。つまり、スムーズなスクロール、プロパティposition: sticky、およびその他の可能性について説明します。これらの実装では、以前は独創的なJSコードを何行も記述する必要がありました。

1.スムーズなスクロール

以前は、ページにスムーズなスクロールを装備するには、数行のJSコードが必要でした。そして今、このタスクはCSSによってのみ解決することができます。まあ、それは素晴らしいことではありませんか？これで、CSSプロパティを使用してスムーズなスクロールを利用できますscroll-behavior。



これはそれがどのように見えるかです：

html {
  scroll-behavior: smooth;
}

スムーズスクロールを実装



→ここだCodePen上の例で



これを書いている時点では、このプロパティはscroll-behavior唯一のChromeとFirefoxでサポートされています。Edge、IE、Safari（デスクトップとモバイル）ではまだサポートされていません。このプロパティのサポートの詳細については、「使用できますか」を参照してください。

2.ピン留め要素

要素の固定は、私のお気に入りのCSS機能の1つです。重要なのは、ページをスクロールしても、対応する要素がビューポートから消えないということです。これで、ページ上の要素を修正するためoffsetToにwindow.scrollY、JSに頼る必要はありません。最近では、CSSプロパティを利用できますposition: sticky。

header {
  position: sticky;
  top: 0;
}

ナビゲーションビューポートの上縁上のブロック「休符」とページをスクロールしたとき消えない



→ここでは、プロパティの使用例を示しCodePenプロジェクト、。position: sticky



このプロパティを正しく使用するには、あなたのアカウントに要素に及ぼす影響の特殊性を取る必要があります。適用されると、HTMLページの構造が役割を果たします。ちなみに、これらの機能が考慮されていないのは事実であり、その理由は、このプロパティが機能しない場合があるためです。



次のHTMLコードを見てみましょう。

<main class="container">
  <nav class="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  <div class="main-content">Main Content</div>
  <footer class="footer">Footer</footer>
</main>

メニュー（navこの例のアイテム）は、その親アイテム（この例では）と重なっている領域でのみ修正できmainます。その結果、プロパティを使用する場合position: sticky、要素の2つの主要なクラスを区別できます。

• ドッキング可能な要素：これは、我々はプロパティを適用する先の要素であるposition: sticky（nav我々の場合には）。この要素は、指定された位置に到達するまで親要素内を移動します。たとえば、-にすることができますtop: 0px。
• ドッキング可能な要素コンテナ：これは、ドッキング可能な要素を含むHTML要素です。これは、ドッキングされたアイテムが移動できる領域です。この「コンテナ」は、ドッキング可能なアイテムが存在できる境界を定義します。

この機能を使用すると、サイトの使いやすさが大幅に向上します。これは、ユーザーが頻繁にページをスクロールする必要があるプロジェクトに特に当てはまります。



この機能は、ほぼ100％のブラウザサポートを備えています。

3.テキストのトリミング

CSSには、2つのすばらしいプロパティがtext-overflowありline-clampます。と。これにより、テキストをトリミングし、単語を慎重に処理すると同時に、JavaScriptやその他の複雑な方法を使用してこのような問題を解決する必要がなくなります。どちらのプロパティも新しいものではありませんが、非常に便利です。





テキストをトリミング



→ここにはありますCodePen上の例



のプロパティの詳細ましょう話text-overflowやline-clamp。

▍テキストオーバーフロープロパティ

このプロパティは、テキストが1行に収まらない場合にテキストを切り捨てる必要がある場合に、テキストを表示する方法を制御します。このような状況の例は、上の図のカードのヘッダーに示されています。ここでは、構文を使用できtext-overflow: ellipsisます…。これにより、トリミングされたテキストの最後にUnicode文字（）が追加されます。



プロパティtext-overflow: ellipsisがその仕事をするためには、同じプロパティwhite-space: nowrapとを使用する必要がありoverflow: hiddenます。

.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

この機能は、最近のすべてのブラウザーでほぼ完全にサポートされています。

▍ラインクランプ特性

このプロパティは、1行ではなく、複数行のテキストを処理する必要がある場合に役立ちます（このようなテキストの例は、上の図のカードの内容です）。これはCSSオーバーフローモジュールレベル3標準の一部であり、現在は「作業ドラフト」のステータスになっていますが、このプロパティは、プレフィックスが付いていても、約95％のブラウザですでにサポートされています-webkit-。使用する前に、表示される文字数を制御する機能がないことを考慮することが重要です。しかし、とにかくそれは信じられないほど便利です。



これを使用するには、display: -webkit-boxandプロパティを使用して古いflexbox実装を使用する必要があります-webkit-box-orient: vertical。これはそれがどのように見えるかです：

.card-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

4.カスタムCSSプロパティ：CSS変数

JavaScriptの世界では、CSSプリプロセッサ（Sass、Less、Stylusなど）は非常に便利で人気のあるテクノロジーです。プリプロセッサはCSSの機能を拡張し、変数や関数などを使用できるようにします。しかし、最近のWeb設計者は、カスタムCSSプロパティまたはCSS変数と呼ばれる強力な標準CSS機能にアクセスできます。



CSS変数は、アプリの一貫性を維持し、DRYの実装に役立ちます。これらは、アプリケーションテーマの開発と保守を容易にします。これらの機能は、プリプロセッサが成功する主な理由の1つです。これについて詳しくは、こちらをご覧ください。



標準のCSS機能を使用すると、変数を作成するためのプリプロセッサが不要になります。変数は、私たちが愛する他の標準的なCSS機能と同様に、カスケード方式で機能します。



CSS変数の作成は非常に簡単です。つまり、変数を宣言するに--は、名前の前に2つのダッシュ（）を付けるだけで十分です。その後、変数の値が必要な場合、関数が呼び出されvar()、以前に作成された変数が引数として渡されます。ご覧のとおり、すべてが非常に単純です。

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

CSS変数はJavaScriptから操作できます。





CSS-変数の使い方



→ここをされるJS-コードのCSS-変数や管理の使用方法を示しCodePen、上の例では、

5.ダークテーマのサポートを提供する

Appleが昨年macOSにダークテーマを導入して以来、またCSSがメディアクエリを使用してこのテーマの使用を検出する機能を提供して以来、多くの大規模なWebプロジェクト（TwitterやGoogleマップなど）がそのようなテーマを取得しています。 （ここで暗いテーマをサポートするプロジェクトのリスト）が。



ダークテーマは、Webページを装飾するための単なる方法ではありません。それは本当に何人かの人々がインターネットをサーフィンするのを助けることができます。



ここにいくつかの引用があります。



そして、客観的な理由で、ダークモードを必要とする人々がいます。彼らはこのモードを障害者のためのツールの1つとして使用しています。たとえば、私たちは視力の弱い人について話している。



Thomas Steiner、カスタマーソリューションエンジニア、Google、ドイツ。



モリーはアッシャー症候群です。このため、彼女は何も聞こえず、片方の目の視野は5度に制限されています。 （…）ダークモードでページを表示することは彼女の力の範囲内になります。このモードは、他の人にも役立つ可能性があり、頭痛のある人や、照明が不十分な部屋のコンピューターの前に座らなければならない人のために、インターネットを使用する可能性を広げます。何かを開発するときに、一部の特別なユーザーだけに焦点を当てる場合、それは彼らだけでなく役立つでしょう。



チャールズレイノルズ、デザイナー、英国政府。



また、製材料Thomas Steinerから、ダークモードの使用がエネルギーの節約にどのように役立つかを学ぶことができます。「（…）ご存知のように、AMOLEDディスプレイでダークモードを使用すると、多くのエネルギーを節約できます。YouTubeなどの人気のあるGoogleアプリを対象としたAndroidの調査では、場合によっては最大60％のエネルギー節約が示されています。」



ユーザーがダークテーマを有効にしているかどうかを通知する新しいCSS機能は、メディア機能prefers-color-schemeです。すでにChrome、Firefox、Safari、Operaと互換性があります。



CSS変数と組み合わせると、Web開発者は、訪問者が動的な明暗モードを簡単に利用できるようにすることが非常に簡単になります。

:root {
  --color: #222;
  --background: #eee;
  --text: 'default';
}

body {
  color: var(--color);
  background: var(--background);
}

body:after {
  content: var(--text);
  display: block;
  text-align: center;
  font-size: 3rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #222;
    --background: #eee;
    --text: 'light';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --background: #222;
    --text: 'dark';
  }
}

デバイスで使用されているテーマの自動検出



→このCodePenプロジェクトでは、ページデザインは、視聴者が使用しているテーマによって異なります。

6.指令 サポート

長い間、Web開発者は、特定のCSS機能が現在のブラウザでサポートされているかどうかを確認するために、サードパーティのソリューション（Modernizr JSツールなど）に頼らざるを得ませんでした。たとえば、要素プロパティを構成する-webkit-line-clampことで、プロパティがブラウザでサポートされているかどうかを確認でき、サポートされていない場合は、フォールバックを使用できます。



ディレクティブがCSS@supportsに表示された後、CSSコードから直接ブラウザーの機能を確認できるようになりました。



ディレクティブは@supportsメディアクエリと非常によく似ています。これは、条件文を使用して構築され、様々な組み合わせの表現をサポートしAND、ORそしてNOT：

@supports (-webkit-line-clamp: 2) {
    .el {
        ...
    }
}

これは、ブラウザがプロパティをサポートしているかどうかを確認します-webkit-line-clamp。その場合、つまり、条件がtrueであることが判明した場合、ディレクティブ内で宣言されたスタイルが適用され@supportsます。最新のブラウザはすべて



この機能をサポートしています。

結果

この投稿では、CSSの便利な機能のいくつかを取り上げました。JSを使用せずに、CSSのみを使用して何かを実行できる場合は、そうしてください。



フロントエンドの現代の世界は急速に変化しており、私たちは常にビジネスをより速く、より良くするのに役立つ新しい機会を自由に利用できます。CSSを試して新しいことを学ぶことは、非常にやりがいがあるだけでなく、非常に興味深いことでもあります。今日学んだ新しいことを試してみることをお勧めします。



以前はJavaScriptのみを使用して解決したのと同じ問題を解決できる最近のCSS機能を知っていますか？