Главная Статьи Блог Twitter

<WebDev type=“blog” src=“Anarion.info” />

IE6 live

По информации сайта http://www.ie6countdown.com/ популярность IE6 на конец 2011 года составляет 7.7%
Не надо преуменьшать значимость 7.7% населения. К тому же это только статистика. 7.7% это всё-таки достаточно серьезный шанс, что к вам «такие» придут.
Популярность IE6

IE9 font-face

Фишка IE9 по сравнению с предыдущими IE заключается в том, что ему уже не нужны шрифты в формате EOT. Он успешно справляется с TTF. Единственное, что обязательно надо следить, чтобы шрифт был webfont, а не стандартной версии, которую вы выдернули из папки Fonts.
Для конвертации лучше использовать FontSquirrel, если, конечно, шрифт не защищен лицензией.

Evernote vs GoogleNotebook

Пользовался GoogleNotebook многие годы, скопилось уже много полезной информации в записях. Был сильно удивлен, когда сообщили о прекращении разработки этого сервиса. Вещь то замечательная..
Но в последнее время из-за некорректной работы сервиса потерял как минимум 2 большие и информативные записи..
Поискав аналоги, нашел самого авторитетного – Evernote.
Читать далее …

Table webkit bug

Рассмотрим пример кода:
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="height:50px;">
<thead>
<tr>
<td>123</td>
<td>4564</td>
<td>dfgdfg</td>
</tr>
</thead>
</table>

Т.е. есть некая таблица, состоящая из одной строки заголовка. И на таблицу прописана высота.
Проблема: webkit-браузеры ( Safari и Google Chrome ) некорректно отрисовывают таблицу. Читать далее …

Letter-spacing

Дробное значение свойства letter-spacing понимает только FF ( например, letter-spacing:-0.4px; ).
Проверено на: FF 3.6, Google Chrome 14, Opera 9.64, IE 7-8.

Background {under} border

Всегда думал, что фон ( background ) распространяется на объект до его границ ( border ), включая контентную часть и внутренний отступ ( padding ). А оказалось, что он продолжается и под border’ом…
Так что, не получится сделать фоновую заливку и сделать полупрозрачный border ( rgba ).

Photoshop file size fail

Сегодня столкнулся с проблемой, что Adobe Photoshop CS5 в окне настроек сохранения «Save for Web» (CTRL+ALT+SHIFT+S) показывается один вес будущего файла, а он сохраняется в другой.
Т.е. я по опыту знаю, что однопиксельная картинка (1х1) в формате GIF весит 43 байта, а Photoshop стал сохранять как 1093 байта.
Сравнивал настройки сохранения с коллегой, но ничего не нашел.
Выход нашелся. Над набором используемых в файле цветов (поле 16х16 квадратиков) есть настройка Metadata. Если выставить еще в None, но размер файлов становится нормальным.
Правда, горит постоянно warning около кнопки сохранения, но это терпимо уже.

CSS3: overflow-x | overflow-y

Честно говоря, всегда думал, что свойства overflow-x и overflow-y ( аналогичны свойству overflow но только для одного направления: горизонтальный или вертикальный ) являются неофициальными, тестовыми.
А оказывается, что они мало того, что входят в CSS3, так еще и поддерживаются всеми браузерами нормально.

См:
http://htmlbook.ru/css/overflow-x
http://htmlbook.ru/css/overflow-y

IE9 font-size

InternetExplorer 9 корректно воспринимает дробные значения font-size. Это одновременно и приятно и пугает.
Свойство font-size:12.8px; буквально воспринял IE9, остальные округлили до 13px, а IE6-7 округлили до 12px (но для них то просто можно хаком задать 13px).

Вирусы/трояны и распечатка

Иногда забавно сходить что-то распечатать в точки распечатки для населения :)
Частенько можно наловить в таких местах вирусиков и троянов.
Сегодня сходил (тонер у нас закончился), принес вкусняшку ;)
Все папки на флэшке были сделаны скрытыми (конечно же, скрытые файлы у меня показываются), а вместо них созданы одноименные ссылки на новую скрытую папку RECYCLED. Содержание ссылки: %windir%\system32\cmd.exe /c «start %cd%RECYCLER\bcd8f464.exe &&%windir%\explorer.exe %cd%_work
Т.е. он запускает через командную строку на исполнение троян, но и открывает нужную папку, не спалив подставу :)

Честно порадовала находчивость вирусо-писателя. Ато обычно создают папку RECYCLED и через autorun.bat надеются запустить :) Хоть что-то новое.

Yahoo email links

У Yahoo.Mail есть одна интересная особенность. Когда в html письма вставлена ссылка вида <a href="#"> или <a href="">, то она заменяет на <a rel="nofollow">. Хотя если вместо решетки (#) задать нормальный адрес, то href ссылки не вырезается.

strong { font-weight: bolder; }

Однако. Оказывается, дефолтное свойство у <strong> не bold, а bolder
Всем, конечно, это одинаково. Но IE9 действует по спецификации и усиляет css свойство font-weight:bold; своим свойством. В итоге текст внутри <strong> становится еще более жирным, находясь внутри блока со свойством font-weight:bold;

Input-text cursor in IE

В IE не отображается курсор ввода у <input type="text" />  в крайнем правом положении (текста больше, чем вмещает input) при padding-right:0;

Translator load error – ICERegions.htm ( Adobe Dreamweaver CS4 )

Недавно столкнулся с багом Adobe Dreamweaver.
При открытии файла выдает ошибку, что-то типа «Translator load error» с упоминанием ICERegions.htm
При попытке сохранить измененный файл тоже сильно ругается и не сохраняет.

Решение:
1) Закрываем Dreamweaver CS4
2) Если у вас WinXP, то идем по пути: C:\Documents and Settings\ [UserName] \Application Data\Adobe\Dreamweaver CS4\ [Language] \Configuration
3) Переименовываем или удаляем ([digits] – это длинный набор символов): WinFileCache-[digits].dat
4) Запускаем Dreamweaver CS4

Титаник 2 (США, 2010)

Совершенно ничего хорошего не ожидал, когда увидел название. Ибо даже идея «продолжения» Титаника смешна. Но хотелось увидеть, чего же они такого придумали.
Фильм не обманул ожиданий – собрание несуразностей и дешевой реализации.
Ужасное качество океана/льда/корабля я еще мог бы скинуть на то, что это, возможно, была не финальная версия записи.. Но ужаснейшую игру актеров, нелепые ситуации, нестыковки сюжета, резкую смену времени суток.. Это всё просто нечем оправдать.
Фильм ужасен и недостоин быть просмотренным, если вы только не желаете устроить себе курс блевото-терапии.

О фильме можно почитать здесь: http://www.kinopoisk.ru/

Colgroup, width, IE

Обычно при задании ширины колонок таблицы с помощью <colgroup> указывается width только на конкретные солонки, а остальные забирают себе оставшееся:
<colgroup>
    <col width="20%" />
    <col />
    <col width="20%" />
</colgroup>

Т.е. 3-я колонка займет 60%.
Но при использовании в таблице colspan, который затрагивает эту колонку, в IE(6-7) возникает недопонимание и получается не то, что надо.
Выход – явное задание width.

Замечу, что width задавать лучше именно в процентах. Так ширина задается именно от края до края, без заморочек с padding на ячейке, которые возникают при попытке задавать width в пикселях.

vertical-align

Ситуация: расположение картинки к тексту.
По сути, есть 2 аналога: vertical-align:bottom; и vertical-align:text-bottom;
Но, первый не работает в IE6-7 и Opera(9-10), а второй не работает в Safari..

Google Search Preview

Google добавил новую фишку в поиск для пользователей GoogleChrome.
Теперь можно увидеть скриншот страницы по каждому результату поиска.
Активируется просто кликом по тексту описания результата (выключается аналогично).
GoogleChrome Search Preview Page

PHP, include, UTF-8

При использовании include файла с кодировкой UTF-8 может возникать одна очень неприятная вещь – непонятные пустые строки, которых быть не должно. Это не css-отступы и в Source code вы не увидите ничего, кроме пустых строк, которые вроде бы должны просто пропускаться браузером.
На самом деле UTF-8 вставляет подпись, которая некорректно обрабатывается.
На этом скрине показано, как должны быть выставлены настройки (пример из Adobe DreamWeaver). Unicode Signature должна быть отключена:

utf-8 encoding

Простой Notepad не дает подробных настроек изменения кодировки, потому придется использовать более серьезные программы (Notepad++, к примеру).

Из-за этих излишних символов в начале страницы может отказаться работать <DOCTYPE> и, как результат, в некоторых браузерах страница просто развалится.

Статья, которая помогла: здесь (решение «ручками» с помощью cmd.exe)

Word-spacing, <img>, Chrome

Свойство word-spacing некорректно работает с <img> в Google Chrome.
Единственный выход, который нашел – заменить на letter-spacing.

Страница 1 из 212