Спрайты, background:url(…) and link Подручными средствами - .fb2 в .doc CSS. Браузеры. Игры с клавиатурой...
Trifler Blog
Спрайты, background:url(…) and link
В современном web-дизайне без графики обойтись практически невозможно, можно спорить лишь о том, в каких количествах и насколько оправданно ее наличие или отсутствие в пределах того или иного ресурса.
Многие web-мастера загоняют мелкие графические элементы в один графический файл - так называемый спрайт и далее позиционируют его в нужное место, тем самым, уменьшая количество запросов к серверу, что положительно сказывается на скорости загрузки web-страницы.
Рассмотрим частный случай на конкретном примере.
Имеем 14 картинок каждая, из которых в реальном проекте является кликабельной и ведет по прописанному ей линку в соответствующее место.
Если пойти стандартным путем, то html-код и стили могут выглядеть примерно так:
<div class="zzz">
<a href="#" class="x"></a>
...
<a href="#" class="xn"></a>
</div>
.x {background:url(...) no-repeat YYpx XXpx;}
...
.xn {background:url(...) no-repeat YYpx XXpx;}
Как мы видим, чтобы отпозиционировать часть спрайта в нужное место необходимо указать не только класс ссылке, но и в стилях прописывать этому классу, помимо всего прочего, позицию нужной картинке, к тому же подбор сдвига по горизонтали, дело весьма утомительное.
Но можно обойтись более простым способом.
html-код практически остается без изменений, следует только удалить из тегов «a» ставшие абсолютно не нужными классы.
Стили тогда приобретут следующий вид:
.zzz {
background:url(...) no-repeat YYpx XXpx;
margin:5px auto;width:XXpx;height:XXpx;
}
.zzz a {
margin-left:XXpx;position:relative;
top:XXpx;width:XXpx;height:XXpx;
}
Для смещения ссылки по горизонтали и вертикали достаточно использовать margin-left и отностильное позиционирование, нужные параметры выделены цветом.
Чтобы добиться максимальной точности совпадения кликабельной области ссылки и индивидуальной картинки, временно добавляем в стили для ссылки верхний и нижий border.
При сравнении двух вариантов, второй выглядит более предпочтительным, что и было использовано в очередном апгрейде Lasto Blog для переводчика Google и «Хомячкового рая».
Подручными средствами - .fb2 в .doc
Никогда не приходилось этим заниматься, но все когда-нибудь бывает в первый раз… Возможно предлагаемое всем известно и лишь местный автор как всегда снова открывает свою «Америку».
Речь идет о конвертации файлов с раcширением .fb2 в привычный вордовский документ с возможностью его дальнейшего редактирования не посредственно в Microsoft Office.
Задача на первый взгляд имеет достаточно простое решение, но не любовь к установке нового софта, время, потраченное на его изучение показалось мастеру Горди слишком обременительным.
Задача
Конвертируем .fb2 в .doc
Программное обеспечение
Только то, что изначально входит в состав Windows XP
- Блокнот
- Internet Explorer
- Microsoft Word
Шаг первый
Открываем файл с раcширением .fb2 в блокноте и сохраняем его с расширением .htm (.html)
Шаг второй
Открываем полученный файл в выше упомянутом браузере, все выделяем и копируем.
Шаг третий
Открываем Microsoft Word, производим вставку из буфера обмена скопированного ранее и сохраняем полученное.
Результат
Без установки дополнительного софта обошлись подручными средствами и имеем возможность редактировать содержимое.
*****
Более элегантным и менее затратным решением может быть постое переименование файлов с расширением .fb2 в .htm, тем самым исключая из процесса "Первый шаг".
Далее по уже стандартной схеме - открываем полученные файлы в браузере, выделяем, копируем, потом вставка скопированного в Microsoft Word и, как завершающий этап сохранение документа с разрешением .doc.
*****
Структура документа с расширением .fb2 такова, что IE6+ могут вывести только то, что расположено внутри тега <body>...</body>
Браузеры - FireFox, OPERA, Google Chrome отображают на экране монитора все содержимое документа.
CSS. Браузеры. Игры с клавиатурой...
Два года назад местный автор методом "научного тыка" совершенно случайно наткнулся на грязный css hack для IE8, который до сих пор в исключительных случаях приносит неоценимую пользу.
Напомню:
.XXX {color:#a00\0/;}
Указанный цвет увидит только IE8.
А вот с hack'ом для IE7 забавная история приключилась. Хак известный:
*+html.XXX {color:#a00;}
Был по запарке записан так:
*+*.XXX {color:#a00;}
Понятно, разбор полетов ошибку выявил, но стало интересно...
Тупой перебор доступных с клавиатуры знаков привел к такому:
*+*.XXX {color:#a00;}
*~*.XXX {color:#a00;}
IE6, как и полагается сказал "привет" и все поигнорировал :)
Все остальные браузеры последних версий, включая IE7(8,9), скушали предлагаемое на ура.
Введение дополнительного пробела после второй звездочки приводит их в чувство.
Но важно совершенно другое.
Имеем два абсолютно идентичных блока:
html
<div class="hackcss">
...
</div>
<div class="hackcss">
...
</div>
css к ним
.hackcss {
border:#00a 1px solid;color:#00a;
margin:10px auto;padding:7px;width:400px;
}
*+*.hackcss {border:#a00 1px solid;color:#a00;}
Наблюдаем странную вещь, которой объяснений разумных нет.
Как говориться не верь глазам своим...