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

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

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

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

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

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

h3:before {
    content: attr(data-prefix) " ";
    }

    <h3 data-prefix="Custom prefix">This is a heading</h3>

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

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

    <a href="example.com">Visit our home page</a>

このテクニックを一度知れば、それが仕事に何度ももたらす便利さに驚かれるでしょう!

ヒント: CSS3 標準の新しいバージョンでは、attr() 関数が拡張され、さまざまな CSS タグで使用できるようになりました。 CSS2.1 では、attr() は常に文字列を返します。 CSS3 では、attr() はさまざまな型を返すことができます。

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

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

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

counter-resetの定義と使用法

counter-reset属性は、特定のセレクターの出現回数のカウンターの値を設定します。デフォルトは 0 です。

このプロパティを使用すると、カウンターを正または負の任意の値に設定またはリセットできます。数値が指定されていない場合は、デフォルトの 0 が使用されます。

注意:「表示:なし」を使用した場合、カウンターはリセットできません。 「visibility: hidden」を使用するとカウンターをリセットできます。

注: Internet Explorer 8 (以降) は、!DOCTYPE が指定されている場合、counter-reset 属性をサポートします。

カウンタリセット可能な値

値	説明
なし	デフォルト。セレクタカウンタはリセットできません。
id番号	id カウンターをリセットするためのセレクター、ID、またはクラスを定義します。 numberは、このセレクターの出現回数のカウンターの値を設定できます。正、ゼロ、または負の値を指定できます。
inherit	は、counter-reset 属性の値が親要素から継承される必要があることを指定します。


重要なのは、それが非常に簡単であるということです: :before 疑似クラスの content 属性に counter() を追加します:

body {
    counter-reset: heading;
    }

    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) "."; 
    }

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

算術演算を行うには calc() を使用します

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

式に「+」と「-」がある場合、その前後にスペースが必要です。たとえば、「widht: calc(12%+5em)」をスペースなしで記述するのは間違いです。式中の「*」と「/」の前後にはスペースがなくてもかまいませんが、スペースを残すことを推奨します。ブラウザの calc() との互換性は、IE9 以降、FF4.0 以降、Chrome 19 以降、および Safari6 以降でよくサポートされていますが、残念ながら、ほとんどのモバイルではブラウザのメーカーの識別子を追加する必要があります。ブラウザはまだサポートしておらず、現在「Firefox for android 14.0」のみがサポートしています。

幅が親要素の全幅を占める要素を作成したいとしますが、他の用途のためにいくつかのピクセルの幅を残しておきたいとします。

.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }

    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

美しいですね。

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

以上が知っておくべき 3 つの CSS ヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。