知っておくべき 3 つの CSS ヒント

知っておくべき 3 つの CSS ヒント

さまざまなブラウザー間の熾烈な競争により、より包括的な方法で最新かつ最先端の W3C Web 標準をサポートするデバイスを使用し始めている人が増えています。インターネット。これは、より強力で柔軟な CSS を活用して、よりクリーンで保守性の高いブラウザー フロントエンド コードを作成できることを意味します。ここで、まだ知らないかもしれないいくつかのエキサイティングな CSS 機能を見てみましょう。

CSS で HTML 属性値を表示するには、attr() を使用します

attr() 関数は、CSS 2.1 標準の頃に登場しましたが、一般的に普及し始めたのは最近です。これは、CSS で HTML タグの属性を使用する賢い方法を提供し、多くの場合、以前は JavaScript 処理が必要だったプロセスを節約するのに役立ちます。

この機能を使用するには、:before または :after CSS 疑似クラス スタイル、.content 属性、および使用する HTML 属性の名前を含む attr() 式の 3 つの要素を使用する必要があります。たとえば、

タイトルに data-PRefix 属性の値を表示したい場合は、次のように記述できます。

h3:before { content: attr(data-prefix) } < ;h3 data-prefix="カスタム プレフィックス">これは見出しです

明らかに、この例ではそれがどれほど役立つかを示しているわけではなく、その基本的な使用法を示しているだけです。もっと便利な例を試してみましょう。attr() の優れた応用例は、ユーザーがページを印刷するときにページへのリンクを表示することです。これを実現するには、次のように記述します。

@media print { a:after { content: " (link to " attr(href) ") } }

一度このテクニックを知ってしまえば、仕事に何度も役立つ便利さに驚かれることでしょう。

ヒント: CSS3 標準の新しいバージョンでは、attr() 関数が拡張され、さまざまな CSS タグで使用できるようになりました。

counter() を使用してリストにシリアル番号を自動的に追加します

CSS 2.1 ですでにサポートされているもう 1 つの関数は counter() です。これを使用すると、ページのタイトル、ブロック、その他の連続した要素にシリアル番号を簡単に追加できます。ページコンテンツに番号を付けます。これを使用すると、この効果を実現するために

の使用に限定される必要がなく、ページ上でカスタムの数値シーケンスをより柔軟に使用できます。

重要なのは、非常に単純であるということです。:before 疑似クラスの content 属性に counter() を追加します。 "Heading # " counter(Heading) "."; }


このカウンターのゼロ化と増加方法について詳しく知りたい場合は、このトピックに関する Mozilla Developer Network ページを参照してください。ネストされたカウンターの使用方法の優れた例があります。

calc()を使って算術演算を行う

最後に、calc()関数についてお話しましょう。この関数を使用すると、保守不可能な Javascript コードを作成することなく、要素の長さと幅の計算などの単純な算術計算を実行できます。この関数は、加算、減算、乗算、除算を含むすべての単純な基本算術演算をサポートします。

たとえば、幅が親要素の全幅を占める要素を作成したいが、他の用途のためにいくつかのピクセルの幅を残しておきたいとします。相対; } .child { 位置: 絶対; 左: 100px; 背景色: #ff8; 綺麗ですね。より詳細な概要については、W3C CSS calc 仕様を参照してください。

CSS がいくつかのメソッドで JavaScript を置き換えることができるところまで成熟し、Web 開発者の作業を大幅に簡素化していることがますます明らかになってきています。これらの機能を活用しないのは愚かです。

上記は、知っておくべき 3 つの CSS スキルです。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。