良い時間です。 css 3の関数の外観の傾向と、これをプロジェクトで使用する方法と、場合によっては使用する必要がある方法について説明します。
あなたの時間を無駄にしないために、私があなたに伝えたいプロパティについて説明します。
- カウンター機能
- 計算関数
- attr関数
- トグル機能
- 測定単位-rem
- 測定単位-vw
- 測定単位-vh
CSS 3の関数
最初の機能の1つであるメディアクエリを受け取ったとき、 多くの開発者が大喜びしました。これにより、さまざまな外部要因に応じて特定のスタイルを受け入れることができました。 実際、css 2.1の標準化された機能への素晴らしい追加でした。
そのような機会の出現のおかげで、世界はより明るくなり、レスポンシブWebデザインやアダプティブWebデザインなどのすべての可能なガジェットと概念でブラウジングすると、サイトははるかに便利になりました（実際、2番目は1番目のサブセットです）。
W3cはそこで止まりませんでした。最近では、バージョン21以降のfirefoxとバージョン28以降のchromeおよび最新の（12.1）オペラでのみサポートされているsupport やCSS Feature Queriesなどの機能について耳にしました。
これらは私たちの星であり、注目を集めており、誰もがそれらを愛しています。 それらを使用すると、すべてが非常に明確で明白になります。 次に、重要性の低い関数を見てみましょう。
カウンター
これはcssのインクリメント関数で、ちなみにバージョン2.1から存在していました。 彼女は何をしているのですか？ 彼女は次のことを行います。
カウンター機能を使用すると、名前を指定してカウンターを開始し、増分してリセットできます。 カウンターの内容は、 afterおよびbeforeの擬似要素を通じて表示できます。 一般的に、自分のリストを模倣することは、私にとっては、この機能には何の利点もありませんでした。
Calc
calc関数を使用すると、プロパティに計算可能な値を設定できます。たとえば、次のとおりです。
.column { width: calc( 10px + 2px ); }
それはほとんど意味がありませんよね！ しかし、異なる型の値を計算できると言ったらどうでしょうか？
.responsiveColumn { width: calc( 100% / 3 - 20px ); float: left; margin: 0 10px; }
結果は何ですか？ リンクをたどって見ることができます
サポートについて：
- インターネットエクスプローラー9+
- Mozilla Firefox 19以降
- Google Chrome 24+
- Safari 6以降
- Opera はサポートしていません
個人的には、この要素が本当に好きです。たとえば、要素を中央に配置する必要があるときに、コードを少し減らすことができるからです。
.box { position: absolute; width: 400px; left: calc( 50% - 200px ); }
トグル
トグル機能を使用すると、親要素のスタイルに応じて特定のスタイルを受け入れることができます。
.parent { font-style: italic; } .child { font-style: toggle( italic, normal ); }
その結果、次のロジックが得られました。親プロパティfont-styleの値が斜体の場合、子要素にnormalを適用し、親の値が斜体と異なる場合、子要素は斜体になります。
この方法のサポートに関する情報は見つかりませんでしたが、テスト結果から、まだ誰もサポートしていないという考えに至りました。 まあ、私は動揺していない、私はカスケードをまったく使用していないので、私はそのような機会を必要とせず、一般的にそれらは狭いプロファイルです。
attr
多くの人がattr関数に慣れていると思います。
<div class="new" data-price="99."></div>
.new { /* some styles */ } .new::after { content: attr(data-price); }
この関数を使用すると、 afterおよびbeforeの擬似要素を介して属性の値を表示できます。 ちなみに、関数はcss 2.1からも存在していましたが、バージョン3で更新されました。この属性により、次のような記述が可能になります。
<stock> <wood length="12"/> <wood length="5"/> <metal length="19"/> <wood length="4"/> </stock>
stock > * { display: block; width: attr(length em); /* default 0 */ height: 1em; border: solid thin; margin: 0.5em; }
現在、この改善に対するサポートはどこにもありません。
残念ながら、この資料は勧告候補の状態にあり、上記のパンが近い将来機能するかどうかはまだわかりません。 ドキュメントには次の行もあります。
次の機能はリスクがあり、CR期間中に削除される可能性があります： 'calc（）'、 'toggle（）'、 'attr（）'。
そのため、これらすべての魅力が見えないかもしれません。
まとめ
個人的には、関数がcssに表示されるという事実が気に入っています。関数を使用すると、以前はjavascriptで行ったことを実行できます。これは素晴らしいことだと思います。 これは私が機能について最終的に行った場所です。
レム、vw、vh
レム
remの値はemに似ていますが、通常のemのように親ではなく、常にhtmlの値を見るという違いがあります。 したがって、名前はルートem => remです。
remは、9および10インターネットエクスプローラーを含む最新のブラウザーをすべてサポートします。 バージョン8をサポートしている場合、つまり残念ながらremを使用することはできません。
vwおよびvh
これらの理解できない一見略語の背後には、非常に明確で有用なユニットがあります。
1単位のvhまたはvwは、ユーザーのビューポートの幅または高さの1％に相当します。 したがって、100whはブラウザウィンドウの幅の100％に等しくなります。これは、許容幅の値を設定するときに、親の幅からではなく、％では実行できないビューポートから開始するため、場合によっては便利です。
サポート：
- インターネットエクスプローラー9+
- Mozilla Firefox 19以降
- Google Chrome 24+
- Safari 6以降
- Opera はサポートしていません
ご清聴ありがとうございました。これが私たちの時々困難なビジネスに役立つことを願っています。