css2 の隠れた高度なプロパティの使用法の概要

カウンターインクリメント

順序付きリストや、記事のすべてのタイトルに自動的に番号が付けられたらいいのにと思ったことはありませんか?残念ながら、CSS3 プロパティはまだサポートされていません。しかし、CSS 2.1 では、カウンターインクリメントが解決策を提供します。これは、数年前から存在し、IE8 でサポートされていることを意味します。

:before 疑似要素と content 属性を使用すると、カウンターインクリメントによりすべての HTML タグに自動番号を追加できます。ネストされたエンコーディングもサポートされます。

例

タイトルをコード化するには、まず電卓をリセットします:

   body {counter-reset: thecounter}

次のスタイルでは、各 4a249f0d628e2318394fd9b75b4636b1 タイトルに「セクション」という接頭辞が付き、その後の番号が自動的に 1 ずつ増加します(これがデフォルトです)省略可能)、thecounter は計算機の名前です:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

例

ネストされたエンコードされたリストの場合、ネストされていないため、カウンターをリセットし、c34106e0b4e09414b63b2ea253ff83d6 の自動エンコードをオフにします:

ol {
counter-reset: section;
list-style-type: none;
}

次に、各 41860b5477c91f8f4de097744347e6c91244aa79a84dea840d8e55c52dc97869これはとても良い1244aa79a84dea840d8e55c52dc978699c3e8ae475e7f023c5ba43842c1b434eの引用です。9c3e8ae475e7f023c5ba43842c1b434e94b3e26ee717c64999d7867364b1b4a3紫色に見えます:
«これ»

ブラウザのサポート: CSS 2.1、WebKit、IE 7、IE6 を除くすべての最新ブラウザ。しかし、クロムはそれをサポートしています。 。 。

質問: シンボルを直接追加するには、CSS ドキュメントを UTF-8 に設定する必要がありますか?これは非常に複雑な質問です。残念ながら、明確な答えは出せません。私の経験では、特定の文字セットを設定する必要はありませんが、utf-8 文字セットでは間違った文字 (「»」など) が表示されるため、間違っている可能性があります。代わりに、iso-8859-1 文字セットを使用すると、すべてが正常になります。

W3C はこれを次のように説明しています: 「前の例で 'quotes' で定義された引用符はコンピューターのキーボード上に都合よく配置されているため、高品質の文字には別の 10646 文字セットが必要です

聞いたことがあるかもしれません。」しかし覚えていませんでした。生きている CSS3 プロパティ

最後に向けて、border-radius や box-shadow ほど普及しておらず、広く必要とされていないいくつかの CSS3 プロパティをもう一度見てみましょう。

テキスト オーバーフロー

おそらく、この問題がよく発生します。コンテナーが内部のテキストに対して小さすぎるため、テキスト オーバーフローを避けるために、JavaScript を使用して文字列を切り詰め、「...」記号を追加する必要があります。

忘れてください！ CSS3 と text-overflow: ellipsis を使用すると、テキストがコンテナの幅より長い場合、テキストを強制的に「...」で終わらせることができます。唯一の要件は、overflow:hidden を設定することです。残念ながら、Firefox はこの属性をサポートしていませんが、最近のバージョンではサポートされるようです。

例

div {
width: 100px;
text-overflow: ellipsis;
}

ブラウザのサポート: CSS 3、Firefox を除くすべてのブラウザの最新バージョン、IE は IE6 からサポートし、Firefox も 6.0 までサポートを提供すると言われています - 私はそう願っています。

ワードラップ

テキストが狭いコンテナ内にある場合、テキストの一部が長すぎて正しく折り返せない可能性があります。たとえば、リンクはしばしば問題を引き起こします。 overflow: hidden でオーバーフロー テキストを非表示にしたくない場合は、word-wrap を Break-word に設定すると、コンテナの幅制限に達したときに文字列を折り返すことができます。

例

div {
width: 50px;
word-wrap: break-word;
}

ブラウザのサポート: CSS 3、すべての最新ブラウザ。

サイズ変更

Firefox または Chrome を使用している場合は、デフォルトでテキスト ボックスの右下隅にサイズを変更できる小さなハンドルがあることに気づいたはずです。この標準の動作は、CSS3 プロパティのsize: Both によって実装されます。

しかし、それはテキストエリアに限定されません。すべての HTML 要素に使用できます。水平値と垂直値は、調整が水平か垂直かを制御します。

注意: display:block 要素については、overflow:visible が設定されている場合、resize 属性は無効になります (これについての元の説明は不明です - Shenfei による)。

ブラウザのサポート: CSS3、Opera と IE を除くその他の最新ブラウザ。

背景添付

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

transform: rotateX/transform: rotateY

如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

div:hover {
transform: rotateY(180deg);
}

小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

以上がcss2 の隠れた高度なプロパティの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。