Une mixin pour de bien jolis placeholders

Maintenant que les vieux Internet Explorer (<10) ont quasiment disparu de la surface du globe, on peut utiliser les placeholders sans la moindre ligne de JS. Et pour styler ça, rien de tel qu’une mixin SCSS.

Avant tout, quelques explications sur les préfixes à utiliser :

  • -ms- pour Internet Explorer 11 et Edge
  • Il semblerait que Edge supporte aussi le préfixe webkit
  • -webkit- pour Chrome < 57, Safari < 10.1 et Opera < 44

 

Source: Can I Use

 

Quelques détails importants :

  • la syntaxe pour Internet Explorer est légèrement différente (:-ms- et pas ::-ms-)
  • Firefox applique une légère opacité sur le placeholder
  • chaque déclaration doit être séparée

 

Démo :

See the Pen placeholder Sass mixin by Benjamin PONGY (@redpik) on CodePen.

Laisser une réponse