Vincent De Oliveira Retour accueil

IE10 supprime les préfixes de plusieurs propriétés CSS3

Blog

Lecture : 4min

Ca y est! Microsoft l'a fait. Lors du lancement de Windows 8 Release Preview, et donc de IE10 version 6, ils ont annoncés avoir retiré les préfixes vendeurs -ms- des propriétés CSS3 des modules actuellement en CR (Candidate Recommandation) ou de ceux qui le seront cette année 2012. C'est donc d'après eux le cas pour les Transitions, Animations, Transformations et Dégradés CSS. Ils ont également ôté le préfixe de la propriété font-feature-settings.

Ce choix n'est pas surprenant pour les dégradés (dont le module est déjà en CR) ou pour les Transitions dont le module est relativement stable. En revanche, il l'est plus pour les Animations et les Transformations, car ces deux fonctionnalités déjà présentes sous une autre forme dans la norme SVG font doublon, et des brouillons de spécifications tentant de réunir et d'uniformiser le tout sont encore en cours de travail.

Les Transitions

IE10 respecte entièrement la spécification définie par le W3C, et notamment:

  • les valeurs négatives pour transition-delay
  • les valeurs supérieures à 1 pour cubic-bezier() qui permet de passer par des valeurs hors bornes (pour par exemple réaliser des effets de rebond)

Les propriétés dont le préfixe a été enlevé: transition, transition-property, transition-duration, transition-timing-function, transition-delay

Les Dégradés

Non seulement les préfixes sont supprimés, mais les fonctions linear-gradient et radial-gradient respectent la nouvelle notation avec les mots-clés to et at:

  • Un dégradé linéaire vers le coin bas/droit: linear-gradient( to bottom right, red, green)
  • Un dégradé linéaire dont le centre est le coin haut/gauche, vers le coin le plus éloigné:  radial-gradient( farthest-side at top left, red, green)

Les fonctions dont le préfixe a été enlevé: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient

Les Animations

Comme pour les transitions, les Animations CSS sont supportées intégralement, telles que définies dans la spécification. Notons en plus:

  • les mots-clés reverse et alternate-reverse de la propriété animation-direction sont ajoutés

Les propriétés dont le préfixe a été enlevé: animation, animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-delay, animation-fill-mode et @keyframes

Les Transformations

Tout n'est pas si rose. Bien que les préfixes soient otés, un problème persiste:

  • la déclaration transform-style: preserve-3d n'est toujours pas reconnue. Les éléments inclus dans d'autres ne subiront pas de transformations 3D.

Les propriétés dont le préfixe a été enlevé: transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility

Flexible Box Layout

La nouvelle version d'IE respecte la dernière spécification (sauf le très récent changement display: flexbox en display: flex), mais de manière préfixée.

Les nouvelles propriétés pour tester Flexbox dans IE sont donc display: -ms-flexbox, -ms-flex, -ms-flex-flow, -ms-flex-order, -ms-flex-pack, -ms-flex-align, -ms-flex-line-pack

C'est le second navigateur (après Chrome) a l'implémenter.

Viewport

IE10 version 6 supporte également la nouvelle @-règle pour définir le viewport en CSS (en lieu et place de la balise meta). Cette @-règle fait partie du CSS Device Adaptation.

La @-règle en question est @viewport, à utiliser de manière préfixée @-ms-viewport.

C'est le second navigateur (après Opéra) a l'implémenter.

Gestion des polices

La propriété font-feature-settings est donc utilisable sans préfixe. Les propriétés font-variant-* ne le sont toujours pas. Testez cette propriété en ligne.

Si vous avez aimé cet article, pensez à Flattr !

Imbrication de boites avec display: table Conseil pour les dégradés linéaires en CSS