blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

Que sont les variables CSS ? Comment les utiliser ?

CSS Variables

Lorsque vous écrivez du code CSS pour votre site, vous pouvez utiliser les propriétés custom CSS (Variables) pour en accélérer le développement. Vous utiliserez ces variables pour définir des propriétés  (taille, couleur) qui peuvent être appliquées à divers éléments.

Cela vous donne plus de contrôle sur votre code et le design de votre site. En changeant la valeur d'une variable, celle ci prendra le pas sur la valeur de cette propriété partout ou elle est invoquée.

Cet article vous explique comment utiliser les variables CSS et inclut des exemples pratiques.

Alors commençons !

Déclarer une variable

Les variables peuvent avoir une dimension globale ou locale. Pour définir une variable globalement, il faut utiliser le sélecteur :root.

:root {
--base-font-size: 1.1rem;
}

Le sélecteur :root correspond à la racine du document, qui dans notre exemple est <html>

Pour déclarer une propriété custom CSS (variable), le code commence avec deux tirets (--), les variables sont différentes suivant la casse utilisée par exemple : 

--base-font-size et --Base-Font-Size

sont deux variables différentes.

Pour définir une variable locale, utilisez le sélecteur de l'élément pour lequel vous souhaitez utiliser votre variable.

 #first-container {
    --background: #ccc;
}

Une fois que vous avez défini votre variable, il est maintenant nécessaire de l'invoquer.

La fonction var()

La fonction var() est utilisée pour insérer la valeur de la variable CSS. La fonction se remplace par la valeur de la variable. 

Le code HTML

  • Copier et coller le code ci-dessous dans votre éditeur de texte 
  • Sauvegarder ce fichier en index.html
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>CSS Variables</title>
</head>
<body>
<div class="wrapper">
<div class="container-1">
<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p>
<button type="button">Click here!</button>
</div>
<div class="container-2">
<p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p>
<button type="button">Click here!</button>
</div>
<div class="container-3">
<p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p>
<button type="button">Click here!</button>
</div>
</div>
</body>
</html>

 Variables CSS rendu

Le code CSS

  • Créez un fichier style.css  dans le même répertoire qu' index.html
  • Copiez le code suivant et sauvegardez votre fichier  
/* Global styles */
.wrapper, div {
padding: 1rem;
}
div {
margin: 1rem auto;
}
/* DEFINITION OF VARIABLES */
:root {
/* Color palette */
--primary: #007bff;
--success: #28a745;
--warning: #ffc107;
--white: #f9f9f9;
--light-grey: #d8d8d8;
/* Borders */
/* It is possible to use an already declared variable within the definition of another variable */
--border-primary: 1px solid var(--primary);
--border-success: 1px solid var(--success);
--border-warning: 1px solid var(--warning);
}
/* VARIABLES */
/* Wrapper */
.wrapper {
background-color: var(--light-grey);
}
/* First Container */
.container-1 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-primary);
color: var(--primary);
background-color: var(--white);
}
.container-2 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-success);
color: var(--success);
background-color: var(--white);
}
.container-3 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-warning);
color: var(--warning);
background-color: var(--white);
}
.container-1 button {
background-color: var(--primary);
color: var(--white);
}
.container-2 button {
background-color: var(--success);
color: var(--white);
}
.container-3 button {
background-color: var(--warning);
color: var(--white);
}
button { border-radius: 5px;
}

variables css

 Il faut noter que :

  1. Créer une palette de couleur est une chose  facile
  2. Il est possible d'utiliser une variable dans la définition d'une autre variable, telles que celles  qui définissent  la couleur et les bordures 
  3. les variables sont héritées, la propriété color de l'élément  .container-* modifie ses enfants directs. dans notre cas l'élément <p>

Pour prendre le pas sur une variable, il faut la définir à l'intérieur de son container, pour la rendre plus spécifique.

  • Editez le code CSS : 
 button {
border-radius: 5px;
/* Overriding a global variable */
--primary: #021b35;
}

variables css

Variables & Media Queries

Les variables peuvent être héritées et modifiées dans les requêtes CSS media queries 

  •  Ajoutez ce code aux variables :
:root {
/* Color palette */
--primary: #007bff;
--success: #28a745;
--warning: #ffc107;
--white: #f9f9f9;
--light-grey: #d8d8d8;
 
/* Borders */
/* It is possible to use an already declared variable within the definition of another variable */
--border-primary: 1px solid var(--primary);
--border-success: 1px solid var(--success);
--border-warning: 1px solid var(--warning);
/* Width of the wrapper 1000px / 90% on smaller devices */
--wrapper-width: 1000px;
}

Nous avons défini les bases pour l'élément wrapper . Nous pouvons maintenant appliquer ces variables à la propriété de largeur de .wrapper

  •  Ajoutez ce code à la fin de votre fichier CSS :
.wrapper {
width: var(--wrapper-width); margin: 0 auto;
}

css variables 003

Pour définir une "media query" destinée aux écrans de moins de 1100px de large, écrivez le code CSS suivant :

@media screen and (max-width: 1100px) {
.wrapper {
--wrapper-width: 90%;
}

variable css et media query

css variables - media query 2

La nouvelle définition de cette variable à l'intérieure de la media query prend le pas sur sa valeur initiale. Notez aussi que cette variable est disponible dans le DOM, elle peut donc être retrouvée et modifiée avec JS. Ce qui n'est pas possible avec des variables CSS preprocessors.

En résumé

Les variables sont utiles pour organiser et gérer des plus  simples à de très larges fichiez de propriétés CSS. Elles réduisent les répétitions et par conséquents les risques d'erreurs. Les variables CSS sont dynamiques et peuvent être modifiées lors de l'exécution. Il est aussi facile de modifier des templates, un site ou une application dynamiquement avec des variables CSS. Elles permettent d'assigner des valeurs à une propriété CSS avec un nom personnalisé. Les variables suivent les règles communes de cascades du CSS, il est ainsi possible de définir la même propriété à des niveaux spécifiques différents.

J'espère que vous avez aimé ce tutoriel.  

Cet article est une traduction libre de : What are CSS Variables and How to Use Them de Jorge Montoya pour OSTraining.

Commentaires (0)

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

Ils nous ont fait confiance

Universités & organismes de recherche

L' INSERM - unité U999, Université Paris Sud - Centre Chirurgical Marie Lannelongue

The Center for Groundwater Studies - Australie

L 'ENSAE : École Nationale de la statistique et de l'administration

La Maison des Sciences de l'Homme Paris Nord , UMS de l'université Paris 8, de l'université Paris 13 et du CNRS

L' Institut Supérieur de Développement - ISD Flaubert

Monpellier RIO imaging (MRI), plate - Forme Technologique (PFT), labellisée IBiSA.

CNRS - INEE  Le Laboratoire d'Excellence Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux (LabEx DRIIHM)

Organismes publics

Ministère de la défense : État Major de la 3ème Brigade Mécanisée

La mairie de la ville de Marly le Roi

La mairie de la ville de Breuillet

La mairie de la ville de Thuir

L' Agence Locale de l'Energie de la métropole marseillaise

L' Institut de Formation en Masso-kinésithérapie de Montpellier - Centre Hospitalier Universitaire de Bellevue

Le Centre de Gestion de la fonction Publique Territoriale des Alpes de Haute Provence

La Capitelle - couveuse d'entreprises du Gard

Le Centre Social Intercommunal de Saint Quentin de la Poterie

Le collège & lycée Saint Charles

Le lycée Philippe Lamour

Le centre François Baclesse: Centre de Lutte Contre le Cancer (CLCC)

L' Etablissement Régional de Formations des Professions Paramédicale du Groupement d'Intérêt Public des Etablissement de Santé d'Avignon et du pays de Vaucluse

Entreprises

Astrium une filiale EADS No 1 européen et No 3 mondial de l'industrie spatiale

Messer France

Photonlines

Shânti Gestion

App-Line

Vincent et Mireille

Axiom Information

Galerie Art City

Le Château de Boisson

LM Control

Vagabonde International

Photonlines Energy

la Pisciculture la Croisière

FHSolution

NaturEditions

Etudions à l'étranger

E.P.A.

Microeconomix

Alatak

Jade Black Design

Une bague une destinée

Schmulb

Espace revêtements

Partenaire de réussite

Stylitek

Fun-Kart

The Crew Coach

Sanitval

Ateliers d'écriture de Virginie Lou

cam4you

SDB+

Armelle Bongrain - architecte d'intérieur

ECIM

Riveria Expat Consultants

Florence Thorez - Diététicienne Nutritionniste

Le Séchoir

Le Moulin de Bouydou

L' Espace de Formation Clinique et Psychanalytique

Cours de musique à Montpellier

Leads Planet

Agerix

Etudions à l'étranger

Biopreserv

Aloes RED

InfoTour

EverNew

Synalabs

Bureau d'Etudes Arlaud

Stage de musique été

Fermetures Neuvillaises

Linguapolis

Weblligence

ASD Protect

Véronique Crépaux

Françoise Léon

Inovtolerie

BlueSafe

Viasocial

Repco Marine

King Jouet

Dr Abbas

ER3M

Cryo'net

Vectoring Talents

Desir d'écrire

Dr Girardin

Installation yperreault

Viaortho

Viadentiste

Alice Sweet Home

Cannes property services

La méthode Silva

Les outils du mieux être

Pinceaux et Camaïeux

Viacoach

ASH Conciergerie

MC Coaching Pro

Argos communication 

Cpsforma

Hervé Graille - Architecte 

Adrien Baguet - Architecte

ONG / Associations

UNESCO: International Music Council

L' Association de Recherche en Soins Infirmiers

L' Union Internationale Contre la Tuberculose et les maladies respiratoires

Le Centre National des Risques Industriels

L' Institut International des Hautes Études en Psychanalyse

SurdiFrance : Association nationale de malentendants

La fondation Internationale de l'Hôpital Albert ScMhweitzer à Lambaréné

La Maison des Professions Libérales Ile de France

Le Conseil National de l' Enseignement Agricole Privé

La ligue Dauphiné Savoie de tennis

Le Conseil Permanent Régional des Associations d’Environnement

Le Syndicat des Podologues d'Île de France

La compagnie aux grands pieds

L'Espace de l'Ouest Lyonnais

Les Courants d'Airs

Nîmes Volley Ball

Le Club photo de Saint-Laurent-du-Var 

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites