кто что думает вот по какому поводу:
CSS:
.iconsetA {background:no-repeat url(data:image/png;base64,iVBOR... ...)}
.iconsetB {background:no-repeat url(data:image/png;base64,iVBOR... ...)}
.icon1 {background:0 0;width:20px; height:20px}
.icon2 {background:-20px 0;width:20px;height:20px}
.icon3 {background:-40px 0;width:20px;height:20px}
HTML
<div class="iconsetA icon1" />
<div class="iconsetA icon2" />
в каком виде лучше это прописАть, чтобы было как можно меньше глюков во всех браузерах?
и чтобы можно было динамически, скажем сделать
$('.iconsetA').addClass('iconsetB').removeClass('iconsetA');
и при этом ничего не «поплыло»?
пока что я знаю, что IE 6,7 — вообще не поймут конструкцию, а IE 8 — не будет воспринимать data: размером больше 32767 байт. и всю целиком длину строки тоже. но это обходится "\\\\"
плюс к этому почти все браузеры не хотят понимать «короткое написАние» <div />
вроде все понимают «0» вместо «0px»
вроде все понимают «url(data)» вместо «url('data')»
у кого какие грабли с этим были — не стесняйтесь, пишите. даже если грабли были «просто от невнимательности».
у кого с какими DOCTYPE работало, с какими — нет?
стОит ли прописывать в основном классе всего по максимуму, а в «уточняющих» — только background-position-x? ну и так далее.