CSS @media img [данные] не работает?

Question

Я работает этот IMG код для различного разрешения экрана

<img src="http://subtlepatterns.com/patterns/grey_wash_wall.png" 
data-src-400px="http://subtlepatterns.com/patterns/dark_wood.png" 
alt=""> 

@media (min-width: 400px) { 
    img[data-src-400px] { 
     content: attr(data-src-10px, url); 
    } 
} 

http://codepen.io/anon/pen/qEqbbQ

но он дает ошибку в моем хром, это говорит «недопустимое значение свойства». Скриншот:

Что происходит и почему он не работал?

Answer 1

1. content применим только к псевдоэлементам. SPEC

«:: до» и «после» :: псевдо-элементы используются для вставки контента непосредственно перед и сразу же после того, как содержание элемента (или другого псевдо-элемента). Пропозиция «content» используется для указания содержимого для вставки.

2. Просто напомните (что может быть неактуально). <img> не может иметь :before/:after псевдоэлементы (он вообще не может иметь декантированных элементов).