27257 sujets

CSS et mise en forme, CSS3

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 Smiley smile
Modifié par MickFR (15 Feb 2019 - 10:15)
Modérateur
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 Smiley smile

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);
  }
}


upload/1550494018-59717-capturedaeacran2019-02-18aa13.png
Modifié par MickFR (18 Feb 2019 - 13:47)
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;
}
Modérateur
Bonjour,

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

Amicalement,