Discussion :

[Invité]

Mon code css se présente comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    html {
      height: 100%;
      font-size: 1em;
      --main-column: 60em;
      -webkit-text-size-adjust: 100%;
    }
 
...
 
    @media screen and (max-width: var(--main-column)) {
      .classe_ko {
        display: none;
      }
    }
 
    @media screen and (max-width: 60em) {
      .classe_ok {
        display: none;
      }
    }

J'envisageait d'utiliser une variable pour ne pas avoir à modifier une taille à plusieurs endroits de la page.
Seulement, je n'arrive pas à utiliser cette variable avec le media screen ...
Les éléments classe_ko seront toujours affiché contrairement aux classe_ok

Est-ce une idée à oublier ?

[psychadelic]

mis à part le fait que les variables css ne sont pas encore implémentée sur tous les navigateurs,
tu utilise utiles une mauvaise syntaxe dans ton code:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:root {
  --main-column: 60em;    
}
 
html {
  height: 100%;
  font-size: 1em;
    -webkit-text-size-adjust: 100%;
}
 
/* --------  css non valable : on ne peut pas utiliser les varibles css dans un média Query 
@media screen and (max-width: var(--main-column)) {
  .classe_ko {
    display: none;
  }
}
-------- */
 
 media screen and (max-width: 60em) {
  .classe_ok {
    display: none;
  }
}

on ne peut pas utiliser des variables css dans les media Queries:

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

==> https://www.w3.org/TR/css-variables-1/#using-variables

[Invité]

Merci pour ces informations. Je débute avec l'utilisation des variables donc j'ai encore du mal. Le tout est de prendre les bonnes pratiques
Donc je vais oublier les variables pour les media queries mais les garder pour le reste (en les initialisant via le root)