Résumé de certaines utilisations de propriétés avancées cachées dans CSS2

contre-incrément

Avez-vous souvent souhaité pouvoir avoir une liste ordonnée ou tous les titres d'un article numérotés automatiquement ? Malheureusement, il n'existe pas encore de prise en charge des propriétés CSS3. Mais dans CSS 2.1, le contre-incrément apporte une solution. Cela signifie qu'il existe depuis plusieurs années et qu'il est pris en charge dans IE8.

Avec le pseudo-élément :before et l'attribut content, le contre-incrément peut ajouter des numéros automatiques à toutes les balises HTML. Même les encodages imbriqués sont pris en charge.

Exemple

Pour coder les titres, réinitialisez la calculatrice :

   body {counter-reset: thecounter}

Le style suivant attribue à chaque titre 4a249f0d628e2318394fd9b75b4636b1 Le numéro après celui-ci est automatiquement incrémenté de 1 (c'est la valeur par défaut et peut être omis), où le compteur est le nom de la calculatrice :

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

Exemple

Pour un Nest, le code encodé list, réinitialisez le compteur, puis désactivez l'encodage automatique pour c34106e0b4e09414b63b2ea253ff83d6 car il n'est pas imbriqué :

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

Ensuite, définissez chaque 25edfb22a4f469ecb59f1190150159c6 sur numérotation automatique , le délimiteur est un point ( .), suivi d'un espace

li:before {
counter-increment: section;
content: counters(section,".")"";
}

Code HTML :

<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>

Support des navigateurs : CSS 2.1., tous les navigateurs modernes, IE 7+.

citations

Vous avez du mal parce que votre CMS ne sait pas comment convertir correctement les symboles de citation ? Alors commencez à utiliser l’attribut quotes. De cette façon, vous pouvez personnaliser n'importe quel symbole. Vous pouvez ensuite utiliser les pseudo-éléments :before et :after pour spécifier des guillemets pour n'importe quel élément souhaité. Malheureusement, les navigateurs Webkit ne prennent pas en charge cet attribut - après les tests, Chrome 11 a commencé à prendre en charge cet attribut (les versions précédentes n'ont pas testé).

Exemple

Les deux premiers symboles déterminent les guillemets pour le contenu de la citation de premier niveau, les deux derniers symboles sont utilisés pour la citation de deuxième niveau, et ainsi de suite :

q {
quotes: '«' '»' "‹" "›";
}

Les deux lignes suivantes sont utilisées pour spécifier les guillemets des éléments sélectionnés :

q:before {content: open-quote}
q:after {content: close-quote}

C'est une très 1244aa79a84dea840d8e55c52dc97869belle citation9c3e8ae475e7f023c5ba43842c1b434e /p>Il paraîtra violet :
«C'est une très ‹belle› citation.»

Prise en charge des navigateurs : CSS 2.1., en plus de WebKit, IE 7 et IE6 Tous les navigateurs modernes. Mais Chrome le prend en charge. . .

Question : Pour ajouter directement des symboles, le document CSS doit-il être défini sur UTF-8 ? C'est une question très embrouillée. Malheureusement, je ne peux pas donner de réponse claire. D'après mon expérience, il n'est pas nécessaire de définir un jeu de caractères spécifique, et le jeu de caractères utf-8 peut alors être erroné car il affiche les mauvais caractères (tels que "»"). Utilisez plutôt le jeu de caractères iso-8859-1 et tout sera normal.

Le W3C le décrit ainsi : "Étant donné que les guillemets définis par 'guillemets' dans l'exemple précédent sont idéalement positionnés sur le clavier de l'ordinateur, les caractères de haute qualité nécessitent un jeu de caractères différent de 10646

Propriétés CSS3 dont vous avez peut-être entendu parler mais dont vous ne vous souvenez pas

Vers la fin, passons en revue certaines propriétés CSS3 qui sont moins populaires et moins requises que border-radius et box-shadow.

text-overflow

Peut-être rencontrez-vous souvent ce problème : un conteneur est trop petit pour le texte qu'il contient, et vous devez ensuite utiliser javascript pour tronquer la chaîne et ajouter "..." symbole pour éviter le débordement de texte.

Oubliez ça ! En utilisant CSS3 et text-overflow: ellipsis, vous pouvez forcer le texte à se terminer par "..." s'il est plus long que la largeur de son conteneur. La seule exigence est de définir overflow:hidden. Malheureusement, Firefox ne prend pas en charge cet attribut, mais il semble qu'il le sera dans une version récente.

Exemple

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

Support du navigateur : CSS 3, la dernière version de tous les navigateurs, à l'exception de Firefox, IE le prend en charge à partir d'IE6, et il est dit que Firefox fournira également un support pour 6.0—— Je l'espère.

retour à la ligne

Lorsque le texte est dans un conteneur étroit, une partie de celui-ci peut être trop longue pour être renvoyée correctement. Les liens, par exemple, posent souvent des problèmes. Si vous ne souhaitez pas masquer le texte de débordement avec overflow: Hidden, vous pouvez définir Word-wrap sur break-word, ce qui permet à la chaîne de revenir à la ligne lorsqu'elle atteint la limite de largeur du conteneur.

Exemple

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

Support des navigateurs : CSS 3, tous les navigateurs modernes.

redimensionner

Si vous utilisez Firefox ou Chrome, alors vous avez dû remarquer qu'il y a une petite poignée dans le coin inférieur droit de la zone de texte par défaut, qui vous permet de les redimensionner . Ce comportement standard est implémenté par la propriété CSS3 resize: Both.

Mais cela ne se limite pas à la zone de texte. Il peut être utilisé pour tous les éléments HTML. Les valeurs horizontales et verticales contrôlent si le réglage est horizontal ou vertical.

Veuillez noter : pour l'élément display:block, si overflow:visible est défini, l'attribut resize sera invalide (la description originale de celui-ci est inconnue - par Shenfei).

Prise en charge des navigateurs : CSS3, autres navigateurs les plus récents sauf Opera et IE.

pièce jointe d'arrière-plan

当你为一个设置了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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!