search

FAC10 / week3-PAMF

A movie guessing game based on The Movie DB and Giphy.
2 stars 1 forks source link

Find another solution for ::-webkit-input-placeholder? #73

Open RhodesPeter opened 7 years ago

RhodesPeter commented 7 years ago

When I looked into ::-webkit-input-placeholder to see what it does, I found this:

screen shot 2017-03-10 at 10 29 51

Is there another way that you can achieve the same effect which is compatible across browsers?

oliverjam commented 7 years ago

It looks like the browser support for styling placeholders in general isn't too bad (http://caniuse.com/#search=%3A%3Aplaceholder), but you need to include more prefixes than just the webkit one.

If you add :-ms-input-placeholder and ::-ms-input-placeholder you'll also support IE and Edge.

pbywater commented 7 years ago

Thanks guys - I'd added the others but they seem not to work when you reference them but separating them with commas so I'd removed and forgotten to add again. Will do now!

oliverjam commented 7 years ago

Yeah you can't comma separate browser prefixed properties because of the way CSS is parsed — if a browser hits a declaration it doesn't understand (e.g. Chrome trying to read -ms-) it will just stop reading that block of code entirely