12 faits CSS peu connus (la suite)

Cet article dévoile douze faits CSS moins connus, parfaits pour les débutants et les développeurs expérimentés. Alors que certains peuvent être familiers, d'autres offrent des informations surprenantes sur les capacités CSS.

œuvres d'art par SitePoint / Natalia Balska.

Faits saillants de la clé:

• border-radius Syntaxe de barre oblique: Créer des coins arrondis asymétriques en utilisant une barre oblique pour définir séparément les rayons horizontaux et verticaux.
• font-weight Mots-clés relatifs: Utiliser bolder et lighter pour ajuster dynamiquement le poids de la police par rapport aux valeurs héréditaires.
• outline-offset Propriété: Offset visuellement des contours sans modifications de mise en page (support limité IE).
• table-layout Propriété: Optimiser la vitesse de rendu de table avec une disposition fixed indépendante de la teneur en cellule.
• vertical-align Comportement: Comprendre son comportement distinct pour les cellules de table par rapport aux autres éléments.
• ::first-letter pseudo-élément: Tirez parti de ses capacités pour les effets typographiques avancés sur les éléments au niveau du bloc.

Plongeons les détails:

1. border-radius Syntaxe de barre oblique: La propriété border-radius accepte une barre oblique pour spécifier des rayons horizontaux et verticaux séparés, permettant des coins arrondis non symétriques. Voir la démo interactive MDN pour une compréhension visuelle:

2. font-weight Mots-clés relatifs: bolder et lighter Les mots clés ajustent le poids de la police par rapport à la valeur héritée, offrant un contrôle typographique plus dynamique, en particulier avec des polices ayant plusieurs poids.

3. outline-offset Propriété: Cette propriété compense le contour de l'élément, améliorant l'attrait visuel sans affecter la mise en page. Notez le manque de support Internet Explorer.

4. table-layout Propriété: L'utilisation de table-layout: fixed accélère considérablement le rendu de la table en rendant la disposition indépendante de la teneur en cellule.

5. vertical-align dans les tableaux: vertical-align affecte l'alignement du contenu dans les cellules de table , contrairement à son comportement sur d'autres éléments.

6. ::first-letter pseudo-élément: Ce pseudo-élément style systématiquement la première lettre d'éléments au niveau des blocs à travers les principaux navigateurs, permettant des effets typographiques sophistiqués.

7. des caractères non valides en tant que délimiteurs de classe: Bien que techniquement invalides, certains caractères (comme "/") peuvent être utilisés comme délimiteurs dans des listes de classe HTML pour une amélioration de la lisibilité; Cependant, ils ne peuvent pas être directement utilisés comme noms de classe dans CSS.

8. Itérations de l'animation fractionnée: La propriété animation-iteration-count accepte les valeurs fractionnaires, permettant aux animations d'arrêter l'itération médiane. Remarque les variations de compatibilité du navigateur peuvent exister.

9. CONFLITIONS DE SORTANT ANIMÉRIELLES: Évitez d'utiliser des noms d'animation qui entrent en conflit avec l'animation des mots clés raccourcis (par exemple, reverse, alternate).

10. Sélection des plages d'éléments: Sélecteurs de chaîne :nth-child pour sélectionner efficacement les plages d'éléments. La compatibilité du navigateur doit être prise en compte.

11. pseudo-éléments sur les éléments vides: Bien qu'il ne soit pas applicable à tous les éléments vides, les pseudo-éléments peuvent être appliqués à certains, tels que <hr>.

12. Valeurs d'attribut insensibles à cas: Les sélecteurs d'attribut sont sensibles à la casse pour certains attributs (comme class) mais pas d'autres (comme type).

Cette exploration élargie des fonctionnalités CSS souvent négligées permet aux développeurs d'écrire du code plus efficace et expressif. Faites-nous savoir vos astuces CSS obscures préférées dans les commentaires!

Questions fréquemment posées (FAQ) sur CSS: (Cette section est omise par la brièveté, car elle n'est pas liée au sujet principal et élargit considérablement la durée de réponse. Il peut être ajouté séparément si nécessaire.)

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!