fabernovel loader

CSS Tips : les variables d'environnement

FRONT
QUALITÉ
fabernovel loader
Depuis 2015, les variables CSS (aka custom properties) sont officiellement reconnues en tant que recommandation W3C. Les variables nous permettent de créer des références utilisées à plusieurs reprises dans notre CSS. Elles sont scopées à un élément, et sont initialisées de la même façon qu'une règle key: value.

Les variables CSS Depuis 2015

Les variables CSS (aka custom properties) sont officiellement reconnues en tant que recommandation W3C. Les variables nous permettent de créer des références utilisées à plusieurs reprises dans notre CSS. Elles sont scopées à un élément, et sont initialisées de la même façon qu’une règle key: value. myElement { –my-color: red; } Puis pour accéder à cette variable :

myElement {
    background-color: var(--my-color);
}
 Bien que ces variables simplifient notre code sur différents aspects, elles comportent néanmoins quelques limitations. Étant donné que les règles CSS sont 

scopées à un élément spécifique, les variables sont uniquement accessibles par un élément spécifique. Pour rendre ces variables accessibles à tout le CSS, il faut déclarer la variable sur l’élément root. :root { –my-color: red; }

myElement {
    background-color: var(--my-color);
}

myOtherElement {
    color: var(--my-color);
}
 Même déclarée sur l'élément 

root, la variable n’est par contre pas accessible en dehors des déclarations CSS. Sur une règle @media par exemple, cela ne fonctionne pas. :root { –breakpoint-lg: 1080px; }

@media (max-width: var(--breakpoint-lg)) {
    /* Nope !*/
}

Les variables d’environnement tendent à résoudre cette contrainte.

Voici les principaux points différenciants :

  • Les variables d’environnement ont une unique déclaration globale, et sont constantes.
  • Les variables d’environnement peuvent être utilisées en tant que n’importe quelle valeur, propriété ou règle (exemple : media queries)
  • Les variables d’environnement peuvent être définies via le CSS et le user-agent

Déclaration via le user-agent

Les navigateurs sont maintenant en mesure de définir leurs propres variables d’environnement via le user-agent. Pour le moment, les seules qui existent sont les variables définissant la safe area. enter image description here La safe area consiste en 4 valeurs (safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left) définissant une zone sur l’écran dans laquelle du contenu peut y être affiché. Ceci est devenu nécessaire depuis la sortie de l’iPhone X (et d’autres ayant suivis la tendance) et les fameux notchs. Ces valeurs n’entrent pas encore officiellement comme spécification W3C, mais sont néanmoins supportées par les navigateurs qui en ont besoin, tel quel iOS Safari sur l’iPhone X. Les spécifications indiquent que nous, développeurs, pourront à terme créer des variables d’environnement, mais ceci n’est pas encore défini.

Utilisation des variables d’environnement

On accède à une variable d’environnement via l’annotationenv(). Elle accepte 2 valeurs : le nom de la variable, et une valeur de fallback utilisée dans le cas où la variable d’environnement souhaitée n’existe pas. env(‘VARIABLE_NAME’, FALLBACK_VALUE); Exemple d’utilisation des variables d’environnement de

safe area : body { padding-top: env(safe-area-inset-top, 12px); padding-right: env(safe-area-inset-right, 12px); padding-bottom: env(safe-area-inset-bottom, 12px); padding-left: env(safe-area-inset-left, 12px); } Les spécifications des variables d’environnements sont toujours en draft, ce qui signifie que ce futur standard va encore évoluer. En attendant un support plus conséquent des variables d’environnement, une bonne façon d’utiliser cette fonctionnalité est d’utiliser des fallbacks en cascade

. body { 
      /* No variables */ 
      padding-top: 12px;

      /* iOS Safari 11.2, Safari 11 */
      padding-top: constant(safe-area-inset-top, 12px); 

      /* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */
      padding-top: env(safe-area-inset-top, 12px); 
    }

Ce sujet vous intéresse et vous souhaitez en discuter avec nous ?

Contactez-nous
à lire
FRONT
MOBILE
QUALITÉ
iOS : Traquer une phase de layout

Sur iOS, la position des vues d’un écran est exprimée de façon dynamique à l’aide du système de contraintes d’AutoLayout. L'intérêt est qu’une hiérarchie de vues peut s’adapter à t ...

BACK
FRONT
MÉTHODOLOGIE
Pourquoi vous avez intérêt à utiliser le TDD pour créer votre application

Bien tester pour mieux coder requiert d’être rigoureux et méthodique. Reste à savoir quelle méthodologie de test utiliser. Et vous pourriez vous demander si il faut plutôt écrire l ...