In this example, we’re going to hide the
<label> tag if the browser has placeholder support, otherwise display it normally1. We’ll do this by adding a class to the
<html> tag if the browser supports the placeholder attribute2. Then we can write CSS that only applies when that class exists.
<html> element depending on support:
What we’re doing with this code is creating an
true when the browser supports the placeholder attribute4.
In this case we’re only hiding labels that have the class hide-label and are inside a tag – in this case
<html> – with the class placeholder5.
Once all the code is in place, you should see these results depending on your browser:
Test this out on your own. Create an empty
imgtag and see if it supports
If we wanted to, we could also create styles that only apply when the no-placeholder class is present. ↩