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.

un commentaire
  1. Rob L dit :

    (Hmmm is this form submitting properly? It doesn’t clear the form!)

    Feedback about b64.io :

    Very handy site for converting images to Base64!

    However it says « image already optimized » even if it is not. Check out what tinypng.com does to images. My finished Base64 is about 1/3 the size if I first put the image through TinyPNG.

Laisser une réponse