Une introduction aux propriétés personnalisées CSS

Sep 16, 2025

Comment

[dix] [dix] [dix]

[dix]

L'une des meilleures fonctionnalités des processeurs CSS est des variables. Avoir la possibilité de déclarer une fois et de réutiliser la variable sur votre projet ne doit être facultatif dans aucun système.

[dix]

5 fonctionnalités chaudes nouvelles CSS et comment les utiliser

En utilisant un préprocesseur comme Toupet (En savoir plus dans notre article sur ce qui est Sass? ) vous donne au moins une étape de construction supplémentaire, ce qui peut être une douleur si vous voulez simplement construire une chose rapide (à construire très vite, essayez un Générateur de site Web ). Le CSS a parcouru un long chemin depuis les jours sombres des hacks de table, alors regardons l'un des aspects les plus utiles: Propriétés personnalisées.

Pour plus d'outils qui vous faciliteront la vie, voir ces hébergement Web service et stockage en ligne options. Ou lire et nous commencerons par un exemple simple.

: root {
      --Color-rouge: # FC4752;
    }
    
    .Site-navigation {
      Couleur de fond: var (- couleur rouge);
    }
    
    .Site-piedher {
      Couleur: var (- rouge-rouge);
    }

Le :racine Le sélecteur pseudo cible l'élément parent de plus haut niveau dans le DOM, donnant à tous les éléments l'accès à --La couleur rouge . Oui, la définition de variables CSS devrait commencer par - et vous pouvez y accéder n'importe où avec var () . Bien, partout qui est cascade sous notre :racine sélecteur.

color-red image — Avec var (), vous pouvez également définir une valeur de replie, qui sera utilisée si la variable donnée est inaccessible ou inexistante.

Avec var () Vous pouvez également définir une valeur de secours, qui sera utilisée si la variable donnée est inaccessible ou inexistante pour la classe.

[dix]

. Site-navigation {
      arrière-plan-couleur: var (- rouge-rouge, rouge);
    }

Les valeurs sont héritées du DOM, ce qui signifie que vous pouvez les rendre plus spécifiques.

[dix]

: root {
      --La couleur rouge;
    }
       
    .Site-navigation {
      --la couleur verte;
      
      Couleur arrière-plan: var (- couleur);
    }
        
    .Site-piedher {
      Couleur: var (- couleur);
    }

Chaque var (- couleur) est rouge, sauf chaque var (- couleur) sous Site-navigation . En règle générale, ce n'est pas une pratique idéale pour écraser une valeur déjà définie, mais il existe des cas dans lesquels une valeur Scopée reste la solution la plus adéquate.

Ce sont les bases mais vous pouvez faire beaucoup plus. Un exemple utile pour site Web adaptatif change de mise en page basée sur la taille de la fenêtre.

: root {
      --Color-rouge: # FC4752;
      --flex-mise en page: ligne;
    }
    
    @media (max-largeur: 640px) {
      :racine {
        --Flex-mise en page: colonne;
      }
    }
    
    .Site-navigation {
      Affichage: flex;
      Flex-direction: var (- flex-layout, rangée);
      
      arrière-plan-couleur: var (- rouge-rouge, rouge);
    }
    
    .Site-piedher {
      Couleur: var (- rouge-rouge);
    }

Sous 640px, la requête multimédia déclenche, modifiant la direction flexible sur la colonne sur la classe de navigation du site, ce qui rend son contenu vertical (colonne) au lieu de l'horizontale par défaut (rangée). Dans cet exemple, en raison de la variable par défaut donnée à la navigation sur site, vous n'avez même pas besoin de l'initiale. :racine Définition de --flex-mise en page; Au lieu de cela, cela va réellement aller directement à la ligne.

amedia written in a green bubble — Sous 640px, la requête multimédia déclenche, modifiant la direction flexible sur la colonne et rendant le contenu vertical au lieu de horizontale

C'est cool mais ce n'est pas encore amusant et jeux encore. Par exemple, étant donné que la requête médiatique n'est pas un élément, la valeur d'arrêt ne peut pas provenir d'une propriété personnalisée. Bien que le groupe de travail CSS ait un brouillon d'utilisation env () Pour les questions, la mise en œuvre du vendeur et le soutien approprié sont probablement des années à l'écart de la situation actuelle.

C'est bon. Nous allons coller à ce que nous avons maintenant. Un cas d'utilisation plus avancé pour une propriété personnalisée change de thèmes. Vous pouvez définir un thème de base, construire votre site Web autour de lui et simplement le changer, le navigateur faisant la levée. Et ce n'est même pas si lourd.

Essentiellement, pensez-y à être le long des lignes de la nuit de la nuit de Twitter, mais sans que vous chantiez le CSS (je vous vois).

 & lt; Main & GT;
      & lt; NAV CLASS = "SITE-NAVIGATION" & GT;
        & lt; div et gt; j'aime les interwebs & lt; / div et gt;
      & lt; / NAV & GT;
      & lt; div class = "Site-Feather" & GT;
        & lt; étiquette pour = "Color-Picker" & GT; Change Couleur & LT; / Label & GT;
        & lt; type d'entrée = "couleur" id = "Color-Picker" & GT;
      & lt; / div et gt;
      & lt; style & gt;
        :racine {
          --Color: # FC4752;
        }
        
        Corps {Marge: 0; rembourrage: 0; }
        
        principale {
          Affichage: flex;
          Flex-direction: colonne;
          Contenu justifiante: espace entre;
          Hauteur: 100vh;
        }
        
        . Site-navigation,
        .Site-piedher {
          Rembourrage: 12px;
        }
        
        .Site-navigation {
          arrière-plan-couleur: var (- couleur, rouge);
        }
        
        .Site-piedher {
          Couleur: var (- couleur);
        }
      & lt; / style & gt;
      & lt; script & gt;
        Var ColorPicker = Document.QuerySelector ("# Color-Picker");
        colorPicker.addeventlistener ("changement", fonction () {
          document.documentablement.style.seproperty ("- couleur", cela.value);
      })
      & lt; / script & gt;
& lt; / Main & GT;

La valeur cueillie de la couleur d'entrée remplace le document --Couleur valeur, faire le changement sans attelage. Vous pouvez jouer avec des modes de mélange, des couleurs de canal alpha ou des PNGS - des possibilités infinies et du plaisir.

white text saying - - dark on a dark background — Vous pouvez créer votre site Web autour d'un thème de base et simplement le changer, le navigateur faisant le levage lourd

Maintenant, avec votre CSS futurs en place, qui ne dépend pas d'un développeur tiers et n'utilise que des propriétés personnalisées, il y a une bonne chance que vous soyez couvert et prêt à commencer la production.

Mais si vous voulez autre chose que des variables dans votre code, disons des modules CSS? À ce jour, pour les fonctionnalités de CSS existantes telles que des modules ou la nidification, vous ne pouviez plus épargner l'étape de construction supplémentaire, mais vous pouvez la mettre en œuvre avec la bonne promesse de ne pas avoir à réécrire le code lorsque les fournisseurs rattrapent les spécifications.

Au lieu de refactoriser votre CSS chaque fois que vous souhaitez améliorer votre sortie, vous devez écrire votre code dans une spécification alignée de cette façon en premier lieu. C'est la principale différence entre les pré et post-processeurs. Un pré-processeur écrit en fait le CSS pour vous (fondamentalement, à partir d'un fichier texte), tandis qu'un post-processeur aligne votre CSS déjà valide pour plus de support de navigateur, ce dernier vous donnant plus de flexibilité dans le processus.

L'utilisation de la méthode native bat toujours la solution de contournement et la bonne position possible des technologies futures est la meilleure position que vous puissiez être dans l'apprentissage de CSS.

Cet article a été publié à l'origine dans le numéro 306 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Abonnez-vous à Net ici .

Articles Liés:

5 conseils pour CSS Super-Fast
Comprendre la propriété d'affichage CSS
Astuces CSS pour révolutionner vos mises en page Web

[dix] [dix]

[dix]

Une introduction aux propriétés personnalisées CSS

Comment - Most Popular Articles

Comment kitbash sur le go avec ShapR3D

Créer un effet texte 3D animé

Apprenez à animer pour les enfants

Comment faire vos propres babillards en toile

Comment peindre des réflexions convaincantes

Créer une douche de météore dans 3Ds max

Comment se déplacer entre Daz Studio et Cinema 4D

Comment concevoir une promotion pour une marque imaginaire

Catégories