Trois conseils CSS que vous devez connaître

La concurrence croissante entre les différents navigateurs signifie que de plus en plus de personnes utilisent désormais des appareils prenant en charge les normes Web les plus récentes et les plus avancées du W3C pour accéder à Internet de manière plus interactive. Cela signifie que nous pouvons enfin profiter de CSS plus puissants et plus flexibles pour créer un code frontal de navigateur plus simple et mieux entretenu. Jetons maintenant un coup d'œil à quelques fonctionnalités CSS intéressantes que vous ne connaissez peut-être pas encore.

Utilisez attr() pour afficher les valeurs d'attribut HTML en CSS

attr() La fonction est apparue dès la norme CSS 2.1, mais ce n'est que devient maintenant généralement populaire. Il fournit un moyen intelligent d'utiliser les attributs des balises HTML en CSS, ce qui, dans de nombreux cas, peut vous aider à enregistrer le processus qui nécessitait auparavant un traitement Javascript.

Pour utiliser cette fonctionnalité, vous devez utiliser trois éléments : un style de pseudo-classe CSS :before ou :after, .content attribut et une expression attr() avec le nom de l'attribut HTML que vous souhaitez utiliser. Par exemple, si vous souhaitez afficher la valeur de l'attribut data-prefix sur le titre

, vous pouvez l'écrire comme ceci :

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

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

Évidemment, cet exemple ne montre pas à quel point il est utile, juste son utilisation de base. Essayons un exemple plus utile. Une excellente application de attr() consiste à afficher des liens vers des pages lorsque l'utilisateur imprime la page. Pour y parvenir, vous pouvez écrire comme ceci :

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

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

Une fois que vous connaîtrez cette technique, vous serez surpris de voir à quel point elle peut être pratique à plusieurs reprises dans votre travail !

Conseils : Dans la nouvelle version du standard CSS3, la fonction attr() a été étendue et peut être utilisée dans diverses balises CSS. En CSS2.1, attr() renvoie toujours une chaîne. En CSS3, attr() peut renvoyer de nombreux types différents.

Utilisez counter() pour ajouter automatiquement des numéros de série à la liste

Une autre fonction déjà prise en charge dans CSS 2.1 est counter() En l'utilisant, vous pouvez facilement ajouter une série. numéros aux titres de page, aux blocs et à divers autres contenus de page consécutifs. Avec lui, vous n'avez pas besoin de vous limiter à utiliser uniquement

pour obtenir cet effet. Vous pouvez utiliser des séquences de numéros personnalisées sur la page de manière plus flexible.

Définition et utilisation du compteur-réinitialisation

L'attribut counter-reset définit la valeur du compteur pour le nombre d'occurrences d'un certain sélecteur. La valeur par défaut est 0.

Grâce à cette propriété, le compteur peut être réglé ou réinitialisé à n'importe quelle valeur, positive ou négative. Si le numéro n’est pas fourni, la valeur par défaut est 0.

Remarque : Si "affichage : aucun" est utilisé, le compteur ne peut pas être réinitialisé. Si vous utilisez « visibilité : masquée » vous pouvez réinitialiser le compteur.

Remarque : Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut counter-reset si !DOCTYPE est spécifié.

Compteur-réinitialisation des valeurs possibles

< /tr>

Valeur

Description

aucun

Par défaut. Le compteur du sélecteur ne peut pas être réinitialisé.

值	描述
none	默认。不能对选择器的计数器进行重置。
id number	id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。
inherit	规定应该从父元素继承 counter-reset 属性的值。

numéro d'identifiant


id Définir le sélecteur, l'identifiant ou la classe pour réinitialiser le compteur .

numéro

body {
    counter-reset: heading;
    }

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

définit la valeur du compteur pour le nombre d'occurrences de ce sélecteur. Peut être positif, nul ou négatif.

inherit

Spécifie que la valeur de l'attribut counter-reset doit être héritée de l'élément parent.



La clé est que c'est vraiment simple :

contenu

dans le pseudo-

:before Attributs de classe ajoutés à counter() :

Si vous souhaitez en savoir plus sur cette méthode de remise à zéro et d'incrémentation du compteur, veuillez vous référer à la page Mozilla

Developer Network sur ce sujet. Il existe un excellent exemple d’utilisation des compteurs imbriqués.
Utiliser calc() pour faire de l'arithmétique

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

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

Enfin, parlons de la fonction

calc()

. Calc est l'abréviation du mot anglais calculate. C'est une nouvelle fonction de CSS3 et est utilisée pour spécifier la longueur des éléments. Cette fonction vous permet d'effectuer des calculs arithmétiques simples, comme le calcul de la longueur et de la largeur d'un élément, sans avoir à écrire du code Javascript non maintenable. Cette fonction prend en charge toutes les opérations arithmétiques de base simples, notamment l'addition, la soustraction, la multiplication et la division.

Lorsqu'il y a "+" et "-" dans l'expression, il doit y avoir des espaces avant et après eux. Par exemple, "widht: calc(12%+5em)" est une erreur d'écrire sans espaces ; expression Lorsqu'il y a "*" et "/", il ne peut y avoir d'espaces avant et après eux, mais il est recommandé de laisser des espaces. La compatibilité du navigateur avec calc() est plutôt bonne. Il est bien pris en charge dans IE9+, FF4.0+, Chrome19+ et Safari6+. Il est également nécessaire d'ajouter l'identifiant de chaque fabricant de navigateur devant, mais malheureusement, la plupart des mobiles. les navigateurs ne le prennent pas encore en charge, et actuellement, seul « Firefox pour Android 14.0 » le prend en charge. Supposons que vous souhaitiez créer un élément de sorte que sa largeur remplisse son élément parent, mais laisse quelques pixels de large pour d'autres utilisations : Bien, n'est-ce pas ? Nous constatons de plus en plus clairement que CSS a mûri au point où il peut remplacer JavaScript dans certaines méthodes, simplifiant grandement le travail des développeurs Web. Vous seriez idiot de ne pas commencer à profiter de ces fonctionnalités.

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!