Код. Плейсхолдер для [contenteditable]


::: разработка, фронтенд, css
[contenteditable]

Я уже сильно привык к атрибуту placeholder, и немного грустил зная что <pre contenteditable></pre> не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами.

[contenteditable]:empty:before {
  display: block;
  color: #999;
  content: attr(placeholder);
}

Пример

На случай если вы не видите примера выше — ссылка на JS Fiddle.

Будьте осторожны с contenteditable, его поведение разнится в браузерах. В сафари если удалить весь текст в поле все равно остается <br> и :empty не срабатывает.