3

Just want to add css prefix like ::-moz-placeholder and ::-webkit-input-placeholder

So I will do multiple selector in LESS :

::-moz-placeholder, ::-webkit-input-placeholder {
 color:red;
}

It doesn't work ? Why?

Demo : http://jsfiddle.net/pfg3Q/

But Its work when i do normally like :

::-moz-placeholder {
 color:red;
}
::-webkit-input-placeholder {
 color:red;
}

Demo: http://jsfiddle.net/pfg3Q/1/

What I did wrong ? Wonder this is about LESS or not?

Ref: Prefix came from http://davidwalsh.name/html5-placeholder-css

l2aelba
  • 18,585
  • 20
  • 90
  • 131

1 Answers1

7

Someone found the related issue already on SO: Should I use single or double colon notation for pseudo-element css

Basically, if any selector in your comma separated list is not recognized by your browser, it skips the whole rule and goes on to the next.

// Chrome
::-moz-placeholder // <-- I don't know this one, skipping!

// Firefox
::-moz-placeholder, ::webkit-input-placeholder // <-- I don't know this one, skipping!

But if you seperate them in single statements, it won't skip the one it knows.

So, as a rule of thumb: if you have vendor-prefixes, always split them up into seperate rules.

Community
  • 1
  • 1
Justus Romijn
  • 13,863
  • 4
  • 47
  • 59
  • This is ! . Back to basic.... thanks so much :D – l2aelba Apr 28 '14 at 10:18
  • How is that other question related to this one? That one talks about single/double colon notation for pseudo-elements, while this one talks about prefixes. – BoltClock Apr 28 '14 at 12:23
  • @BoltClock The question itself is indeed not related, but the accepted answer explains why the comma-separation can have some nasty side effects. I've updated my link to jump to the answer immediately. – Justus Romijn Apr 28 '14 at 12:41