Validation CSS 3

Bonjour,

Je vous contacte car j'ai une question.

En passant mon code CSS dans le validateur jigsaw.w3.org, 270 erreurs sont remontées.

La majorité des erreurs est : Erreur lors de l'analyse grammaticale.

Pourriez-vous me dire, par exemple, pourquoi ce bout de code n'est pa valide ?
Les erreurs sont :
- Erreur lors de l'analyse grammaticale. var(--mdc-ripple-fg-translate-start, 0)) scale(1);
- Erreur lors de l'analyse grammaticale. var(--mdc-ripple-fg-translate-start, 0)) scale(1);
- Erreur lors de l'analyse grammaticale. var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
- Erreur lors de l'analyse grammaticale. var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

@keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
            transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }

  to {
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
            transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}

Merci de votre aide
Modifié par MickFR (15 Feb 2019 - 10:15)

Bonjour,

translate(var(--mdc-ripple-fg-translate-start), 0)
au lieu de
translate(var(--mdc-ripple-fg-translate-start, 0))
?

Amicalement,

Bonjour,

Merci de ta réponse

J'ai essayé avec ta proposition.
L'erreur est toujours remontée.

Erreur lors de l'analyse grammaticale. var(--mdc-ripple-fg-translate-start), 0) scale(1)

@keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-start), 0) scale(1);
            transform: translate(var(--mdc-ripple-fg-translate-start), 0) scale(1);
  }

  to {
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end), 0) scale(var(--mdc-ripple-fg-scale), 1);
            transform: translate(var(--mdc-ripple-fg-translate-end), 0) scale(var(--mdc-ripple-fg-scale), 1);
  }
}

Modifié par MickFR (18 Feb 2019 - 13:47)

Bonjour,

Elles sont définies quelque part, tes variables ?

Amicalement,

Les variables sont définies plus bas dans le fichier CSS.

.mdc-text-field__outline {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 1px);
  height: calc(100% - 2px);
  -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  overflow: hidden;
}

Bonjour,

Il est probable que l'outil de validation que tu utilises ne sache pas traiter les variables css.

Amicalement,