便利なCSS関数5選（共有）

CSS には多くの関数が含まれており、以前は JavaScript が必要だった多くのことを実行できます。毎年新しい機能が追加されるため、開発が容易になり、JavaScript への依存が軽減されます。 CSS 関数は CSS が持つ最も強力な機能の 1 つであり、この記事では私が便利だと思ういくつかの機能について説明します。

(学習ビデオ共有: css ビデオ チュートリアル)

attr()

attr 関数は、選択された情報を取得するために使用されます。要素の属性値。 プロパティ名、タイプ、およびデフォルト値の3つのパラメータを受け入れます。

文法:

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

例:

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

css

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

効果:

ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd

calc()

この関数を使用すると、正確な値を指定する代わりに CSS 値を計算できます。値 。通常、要素のサイズまたは位置を計算するために使用されます。加算、減算、乗算、除算をサポートします。

注意すべき重要な点 は、 演算子と - 演算子はスペースで区切る必要があるということです。そうしないと、正しく機能しません。 # 演算子と / 演算子にはこの制限はありませんが、一貫性の理由からスペースを追加することをお勧めします。

また、優れているのは、CSS ユニットを混合できることです。たとえば、パーセンテージとピクセルを減算できます。

calc を使用して要素を中央に配置した例を構築できます:

<p class="calc">Centered with calc</p>

css

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

効果:

#ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd

var()

この関数を通じて、次のことができます。カスタム プロパティの値は、別の CSS プロパティの値として使用されます。簡単に言うと、色を定義できます。たとえば、それをカスタム プロパティ (CSS 変数) に入れ、

var 関数を呼び出してそのプロパティ値を再利用できます。

この機能は CSS 変数と組み合わせることで、保守性を向上させ、重複を減らします。使用例の 1 つは、Web サイトのテーマの作成です。

この関数は、カスタム プロパティと、問題が発生した場合に使用されるデフォルト値の 2 つのパラメーターを受け入れます。

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

効果:

ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd

counter()

個人的には、この方法を使ったことはありませんが、面白そうです。この関数は、指定されたカウンターの現在値を返します。

counter-reset および counter-increment と組み合わせて使用​​する必要があります。

これを使用して、順序付きリストなどの他の要素を計算できます。

<div>
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd

circle()

この関数は、適用される要素をマスクする円形領域を作成します。半径と位置を指定できます。丸い形状を作成するために画像とともによく使用されます。この関数は、

clip-path プロパティ値です。

また、円に加えて、楕円形や多角形も作成できることにも注目してください。

<img  alt="便利なCSS関数5選（共有）" >

css

img.circle {
  clip-path: circle(30%);
}

ソースコード: https://codepen.io/protic_milos/pen/GRpYJKd

概要

これまで何度も述べてきたように、多くの場合、開発者は CSS の可能性を無視しており、そのため Web サイトのシンプルさが失われています。毎年、必要なデザイン機能を CSS に頼ることができます。それは素晴らしいことです。JavaScript はデザインではなく他のことに焦点を当てるべきです。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上が便利なCSS関数5選（共有）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。