CSS関数ガイド

CSS機能ガイド：スタイルを制御する強力なツール

他のプログラミング言語と同様に、CSSには関数もあります。これらの関数は、値の位置に挿入するか、場合によっては別の値宣言で使用できます。一部のCSS機能により、他の機能をネストすることもできます！

もっと

プログラミングでは、関数とは、特定のタスクを実行する名前の名前のコードです。たとえば、JavaScriptの関数はsayWoof()と呼ばれます。

関数sayswoof（）{
 console.log（ "woof！"）;
}

目的の動作を定義した後、この関数を使用できます。この例では、WebサイトまたはWebアプリケーションのJavaScriptでsayWoof()を入力すると、「Woof！」を印刷します。ブラウザのコンソールに。

関数は、数値またはテキストフラグメントのスロットであるパラメーターを使用することもできます。これは、関数のロジックに入力してそれらを変更できます。 JavaScriptでは、次のように機能します。

関数countDogs（額）{
 console.log（ "dogs！"）; "）;
}

ここには、 countDogs()という関数があり、これにはamountと呼ばれるパラメーターがあります。数値がamountに対して提供されると、その数を取り、事前に指定された文に追加します。これにより、私たちが数えた犬の数を伝える文章を作成することができます。

 countDogs（3）; // 3匹の犬がいます！
CountDogs（276）; // 276匹の犬がいます！
countDogs（ "Many"）; //多くの犬がいます！

一部のプログラミング言語には、新しいプロジェクトごとにホイールを再発明するのを避けるために、組み込みの機能が付属しています。一般に、これらの機能は、言語の主な利点と機能を使いやすくするように設計されています。

たとえば、ライブラリ。ライブラリは、柔軟なビデオ要素を作成するために、fitvids.jsなどの開発をスピードアップおよび簡素化するために設計された慎重に選択された機能のコレクションで構成されるコードのコレクションです。

### CSS関数の基本

他のプログラミング言語とは異なり、CSSで独自の機能を作成することはできません。このロジックは、強力な条件付きスタイルルールを作成できるCSSセレクター向けに予約されています。

他のプログラミング言語とは異なり、他のプログラミング言語での関数の出力は通常、後続のロジックに暗黙的に影響します。CSS関数の出力は本質的に視覚的です。この出力は、コンテンツのレイアウトとプレゼンテーションを制御するために使用されます。例えば：

 .has-orange-glow {
  フィルター：ドロップシャドウ（0.25rem 0 0.75rem＃ef9035）;
}

CSS filter関数drop-shadow()は、提供するパラメーターを使用して、適用されるものにオレンジ色の外側グロー効果を作成します。

次のデモでは、CSS-Tricksロゴに.has-orange-glowクラスのアプリケーションを切り替えるtoggleOrangeGlowと呼ばれるJavaScript関数があります。 CSS遷移でこれを使用すると、クールなグロー効果を作成できます。

いくつかのCSS関数に精通しているかもしれませんが、言語には驚くほど広範なリストがあります！

Web上の他のテクノロジーと同様に、CSS関数が異なると、ブラウザのサポートのレベルが異なります。調査とテストを行って、すべての人に体験が機能することを確認し、 @supportsのようなものを使用して高品質の代替体験を提供してください。

一般的に使用されるCSS関数

url()

 .el {
  背景：url（/images/image.jpg）;
}

url()を使用します

url()使用すると、他のリソースにリンクしてロードできます。これには、画像、フォント、さらには他のスタイルシートが含まれます。パフォーマンス上の理由から、各宣言は追加のHTTP要求であるため、 url()を介してロードするものを制限することが最善です。

#### attr()

 /*<div data-example="foo"> */
div {
  コンテンツ：attr（data-example）;
}<p><details><summary> <code>attr()</code>を使用する</summary><p>この機能により、HTMLを入力し、プロパティのコンテンツを取得し、CSS <code>content</code>プロパティに提供できます。通常、スタイルシートで使用される<code>attr()</code>が表示されます。これは、リンクテキストの後にリンクのURLを表示するために使用されます。この関数のもう1つの適切なアプリケーションは、ロードに失敗した場合、画像の代替説明を表示するために使用することです。</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  幅：calc（100VW -80px）;
}

calc()を使用します

実験に時間がかかる必要がある関数がある場合、それはcalc()です。 calc()に関する完全なガイドがあります。

この関数は、2つのパラメーターを使用し、提供する演算子（、 - 、 *、 /）に基づいて結果を計算します。これらのパラメーターがユニットの有無にかかわらず数値であることを条件にします。

SASSのようなCSSプレセッサとは異なり、 calc()ユニットを混合できます。つまり、6remを100％から減算するなどを行うことができます。 calc()も動的に更新されるため、100％が幅を表す場合、その幅が変化すると機能します。 calc() 、CSSカスタムプロパティをパラメーターとして受け入れることもできます。これにより、信じられないほどの柔軟性が得られます。

#### lang()

 P：ラング（en）{
  引用： "\ 201c" "\ 201d" "\ 2018" "\ 2019" "\ 201c" "\ 201d" "\ 2018" "\ 2019";
}

lang()を使用します

HTMLにlang属性を含めることは非常に重要なことです。 HTMLに表示されると、 lang()関数を使用してプロパティ値の外観を見つけ、スタイルを条件付きで適用できます。

このセレクターの一般的な使用は、国際化などに非常に役立つ言語固有の引用を設定することです。

スマートデザイナーと開発者は、スタイル翻訳バージョンを備えたWebサイトのフックとして使用することもできます。このバージョンでは、文化的および/または言語的な考慮事項は、ネガティブスペースのようなものに対する異なる認識を意味します。

＃＃＃＃ :not()

 H3：not（：first-child）{
  マージントップ：0;
}

not()を使用します

この擬似クラスセレクターは、あなたが指定していないものをすべて選択します。たとえば、 body:not(img)を使用して、画像ではないものを見つけることができます。この例は非常に強力ですが、 :not()の範囲をより集中化されたセレクター（BEMのブロッククラスなど）に制限すると、多くの汎用性が得られます。

現在、 :not() 1つのセレクターのみをパラメーターとしてサポートしていますが、複数のコンマ区切りパラメーターのサポートが開発されています（例div:not(.this, .that) ）！

関数の詳細については、元のテキストを参照してください。スペースの制限により、元のテキストの残りの多数のCSS関数はここで省略されています。完全な情報については、元のテキストを参照してください。