Олежжжжжжжж

Aptana Studio

2010-01-06T17:44:50Z

Я думал это Эклипс с уже встроенным плагином Аптана. Оказалось что вот ну нихера не так, т.к убрали кучу лишнего (из критически важного Ant, на всё остальное на самом деле похер), а как поставить я таки не нашёл =( Эх, а я только думал что почти всё настроил на Маке...

Лапшун

2010-01-06T17:31:06Z

Вряд ли этот отзыв опубликуют на сайте, поэтому пишу в ЖЖ.

Где-то месяца полтора назад мы в ДжетСтайле открыли с лёгкой руки Алекса лапшу от Лапшуна (http://lapshun.ru). Всем эта лапша очень понравилась, получалось достаточно дёшево и сытно. Видимо сервис начал расти, и, как следствие, у них стало падать качество товара, потому что вчера мы этой самой лапшой отравились. При том я ещё когда нам привезли обратил внимание на несколько перемен: доставка осуществляется гораздо дольше чем раньше (если раньше в течение полутора часов означало что через час максимум полтора ты будешь есть свою лапшу, то теперь в течение двух часов (!!!) означает через два и более), в моей любимой лапше с креветками и кальмарами собственно креветок и кальмаров стало гораздо меньше, а яичного омлета гораздо больше, ну и при этом от лапши воняло рыбой ну просто таки максимально сильно насколько это может быть...

В общем, не сервис а сплошное разочарование =( А ведь начиналось всё даже очень неплохо!

Итоги года

2009-12-29T19:18:06Z

Подведу итоги года сейчас, потому что завтра выйду в инет на работе, а потом забуду про то что это такое дня на 2-3.

Я считаю, что этот год стал переломным в моей жизни, именно в этот год я создал фундамент своего будущего. Я нашёл достойную работу, получил высшее образование (пока бакалавр), и, самое главное, получил представление о своём будущем, о том чем хочу заниматься и чего вообще хочу.

Одним из наивысших своих достижений я считаю продолжение подтверждения делом, а не словами, моего отношения к алкоголю. Каюсь, я выпил один раз, и этот раз лишний раз дал понять, что алкоголь это плохо. Я выпил немного, а вот плохо потом мне было много...

Ещё в этом году была приятная поездка в Москву и матч Лиги Чемпионов вживую, мечты сбываются, если захотеть!

В общем-то писать особо больше нечего, приятных мелочей и других вещей было предостаточно...

Ну а в будущем году меня ждёт увлекательное продолжение работы в новой должности, свадьба и, наверное, переезд от родителей... Поживём увидим.

Спасибо Катюшику за то что была рядом, спасибо маме за крики и наставления, спасибо Алексею Кулакову за шанс и спасибо всем, кто был со мной.

Мой первый

2009-12-24T21:54:35Z

Как говорится беда не приходит одна, недели две назад у меня треснула крышка на монике (та к которой моник привинчен), и буквально за неделю трещина полностью разошлась и разломила крышку на две части возле крепления. Фактически крышка с монитором и поворотный механизм теперь отдельно вообще живут отдельными жизнями. Это означает, что чтобы повернуть монитор к себе, или просто закрыть крышку моника, нужно прилагать ацкие усилия (и при этом ещё стараться всё это дело не сломать), т.к нужно исхитряться поворачивать уголок и крышку одновременно. Ноут я всё равно хотел менять, правда ближе к февралю... ну, блин, не судьба...

В общем, знакомьтесь: мой новый рабочий станок:

P.S. Не жалею, очарован и безумно доволен!

А на следующий день

2009-12-16T15:24:24Z

Я вчера ночью писал, что у нас в офисе всё плохо и нет отопления... Так вот, это были цветочки, потому что днём отключили ещё и электричество. Работать стало в принципе невозможно. В ближайшие дни JetStyle переезжает в другой офис, т.к в этом, даже если и включат тепло, и электричество, то трубы наверняка прорвёт, морозы то были ого-го.

Самое, сука, обидное, что я только сегодня вспомнил, что у меня там Монстерка и завтра она, наверное, уже дохлая будет =( Похер на всё остальное, а цветочку жалка! =(

Ахтунг! Как работать?

2009-12-14T20:36:22Z

У нас в Джете уже неделю нет отопления. А нет его, потому что Управляющая компания сп**дила все деньги и съ**алась, а нас отключили за «долги». До сегодня нас грели обогреватели, заботливо купленные Кулаковым. Но вот сегодня мы пришли в офис, после его почти двухсуточного непрогрева, а в нём ужасно холодно. Мы еле-еле разогрели две комнаты (все кто знают нашу планировку поймут, что это нелегко сделать, т.к у нас нет дверей), закрыв все остальные проходы пупырчатыми полиэтиленками (теперь зато на меня никто не будет из-за них рычать =)))) и это при том, что половина народа свалила домой. А завтра будет ещё страшнее, т.к ночью обещают -30 и так ближайшую неделю-две...

Я не хочу работать дома, тут очень много отвлекающих факторов, поэтому, собственно, сабж: как работать?!

Немного о фрилансе

2009-12-14T18:58:36Z

Я не претендую на донесение единственно верной правды, я лишь хочу рассказать как с фрилансом сложилось у меня.

Я трижды честно пытался фрилансить, и все три раза завершились полными провалами: один раз я отказывался продолжать работать; один раз я заебался, потому что очень честный; один раз меня кинули.

Я не хочу подробно описывать каждый из случаев, я просто хочу читающим эту статью рассказать несколько рецептов:
1. Всегда требуйте предоплату в размере 50%, не начинайте работу на доверии, что заплатят потом или что деньги уже отправлены (здесь я позволю всё-таки перейти на личности — вот эти друзья меня кинули, хотя их работу я сделал максимально быстро, пожертвовав даже немного своей основной работой).
2. Никогда, нет НИКОГДА не пытайтесь заводить дружеские отношения с вашим заказчиком, иначе некоторые нужные грани стираются.
3. Всегда обозначайте сумму работы и её объёмы, избегайте фраз типа: «Ну в общем вот пара макетов, потом ещё пару дошлю, но они похожи, за всё n рублей» и вообще избегайте доделок после начала работы. «Ещё» не должно быть только со стороны заказчика: ещё макеты = ещё деньги!
4. Оговаривайте браузеры под которые вы верстаете, на это уйдёт 2 минуты (а скопировать отсюда «IE6-8, FF3.5, Opera 10, Google Chrome 3» ещё быстрее). Вёрстка под остальные версии браузеров избыточна и каждый браузер = дополнительные деньги. Иначе заебётесь верстать под Сафари 3, только потому что заказчик, гад, под Маком.
5. Оговаривайте время, в которое вы работаете (это актуально если у вас есть постоянная работа), иначе срочный проект и срочные баги могут застигнуть вас в 1 час ночи или в разгар рабочего дня.

Самое главное, если у вас есть устраивающая вас основная работа, то лучше не фрилансьте (в этом отношении мне совсем недавно стала понятна позиция Студии Лебедева в этом вопросе). Потерять то, что вы имеете гораздо легче, чем приобрести, разрываясь между двух огней. Работайте на текущей работе лучше и интенсивнее и желаемое повышение не заставит себя ждать, если ваш работодатель не идиот, а иначе нужно делать выводы.

Opacity и AlphaImageLoader в IE

2009-12-14T04:21:42Z

Очень долго пререкаясь с заказчиком по поводу opacity и AlphaImageLoader'а (я полгода назад пытался эту проблему решить и не смог, потом, придя в ДжетСтайл, мне все сказали, что тоже пытались и не решили, и посему я был уверен что она не решаема!) методом наглядной демонстрации и статьи Чикуёнка (http://chikuyonok.ru/2009/02/ie-filters/) я изменил своё мнение и даже было обрадовался открывающимся возможностям, но не тут то было.

Есть ещё одно замечание к вышеописанному методу Сергея: нужно сменить нативную поддержку IE7 и IE8 полупрозрачных png на фильтры, иначе, решившись в 6-ке, баг появится в более старших версиях!

Списки и поясняющий текст

2009-12-12T07:28:36Z

Очень часто на сайтах бывает примерно такой текст:

Сегодня у нас скидки на следующие товары:

Холодильник
Пылесос
Стиральная машина

Лично я, каждый раз встречая это, задаюсь вопросом: «Как более семантично заверстать такое?». Т.е как связать пояснительный текст к списку со списком. Раньше я либо забивал, либо обёртывал это каким-нибудь div'ом. А сегодня, подумав, решил что для таких целей, также как и для «Адрес: ул. Крестинского 53Б», как никак лучше подойдёт dl+ (<dl><dt></dt><dd></dd></dl>). Т.е теперь код такой
<dl> <dt>Сегодня у нас скидки на следующие товары:</dt> <dd> <ul> <li>Холодильник</li> <li>Пылесос</li> <li>Стиральная машина</li> </ul> </dd> </dl>

День ролевых игр

2009-12-05T18:40:33Z

Отыграли в Джете партию в BSG, 5 часов резались, правда в конце все уже немного устали, ну и я подгадил пару раз так, пока не вскрылся что сайлон, что просто выиграть шансы были достаточно смутные. В смысле у людей... а в итоге мы победили =)

Вечером опробовали с Катюшиком пиратский манчкин на чистом англише, ничего так =) Я, как честный джентельмен.... Ну ладно, она меня сделала =)

Элементы уличной магии

2009-12-03T18:39:34Z

Порой в макетах встречается нереальная уличная магия, понять которую мне не по силам, вот пара примеров:



var myVar = (thatVar % 2 == 0 ? "2px" : "2px");

У вас есть похожие примеры?

И снова о PNG

2009-11-30T20:15:29Z

Я три раза перерабатывал своё решение для фикса PNG и на этом не успокоился, в выложенное третье решение закралась ошибка, которая помогла мне понять как это работает и почему удалось обойтись без z.gif (однопиксельного прозрачного gif'а).

Дело в том, что у фильтра AlphaImageLoader есть атрибут sizingMethod и у этого атрибута, как я раньше думал, есть два возможных значения: crop и scale. Работа каждого из них мне была понятна, сrop работает как backgroundImage в точке 0 0, а scale растягивает картинку до размеров контейнера. Оказалось что есть ещё и третье значение атрибута sizingMethod — это image (которое используется по умолчанию). image работает как crop, если размеров контейнера хватает чтобы вместить картинку, а вот если контейнер меньше, тот тут начинается волшебство: картинка всё равно покажется полностью, а контейнер не будет при этом растянут. Именно поэтому сработал мой метод с шириной и высотой в 1 пиксель и пустым src, я просто забыл указать в фильтре sizingMethod и применился image.

Конечно же я исправил свою оплошность (после 3-го раза у меня не работал scale) и в этот раз я не буду сюда копировать код, а просто дам вам ссылку на одну из последних версий.

К сожалению полностью побороть проблему !important так и не получилось, потому что если есть селектор:

#my_id {background-image: url('my-image.png') !important;

то моим:

* html .g-png-fixed {background-image: none !important;}

этот селектор не переопределить из-за того что специфичность первого селектора выше.

Мы с Русланом родили такой метод решения этой проблемы: нужно определить элемент которому не удаётся переопределить бэкграунд (сделать это очень просто: нужно задать background-image и посмотреть тут же изменился ли?), если такое есть, то мы бежим вверх по дереву и у всех элементов с id запоминаем id, а у которых нет — создаём id и запоминаем. Потом в html'е создаём css-правило (делать это я научился во-второй раз) составленное из всех id'шников запомненных нами и получаем самое длинное правило, которое в 99% нас спасёт (а 1% это сверхэкзотический !important внутри атрибута style элемента). Реализация этого решения будет в следующий раз =)

Opera 10 и баг с картинками

2009-11-29T19:29:49Z

Недавно обнаружил баг, который попил мне кровушки и ещё раз подтвердил, что ИЕ6 не самый ёбнутый браузер в мире, т.к под него хотя бы все баги известны и есть возможность писать хаки не повреждая другим.

Итак, имеется страница, на ней есть картинки, скроллишь вниз страницы, нажимаешь F5 и часть картинок, которые при скролле вышли из области видимости, пропадает. На поиск причины ушёл час: оказалось что Опере очень не нравятся картинки в inline блоках. Подчеркну, что касается это всех картинок, т.е и вставленных с помощью тега img и правилом background-image! Лечится, как уже можно догадаться, заданием тем же блокам display: inline-block и танцами с бубном хаком для ИЕ6 (для него пишем display: inline).

Но всё-таки один вопрос: а какого вообще хрена? Не даёт мне понять почему этот баг возникает? И кстати, это уже не первый баг Оперы 10-й. Есть мнение (моё) что ребята из Opera Software глядят не в ту сторону, вместо поддержки CSS3 селекторов, прикольных режимов Turbo, и новых охуенных дизайнов лучше бы движок свой отладили, а то от версии к версии баги множатся и не ровен час весь мир верстальщиков будет ругать уже не ИЕ6, а Оперу 10 или какая там будет?

Песня

2009-11-23T12:02:32Z

Очень задела песня Максима Леонидова «Письмо», давно так ни одна песня ни цепляла, а вот эта прям задела за живое. Послушайте

WebIde

2009-11-20T20:21:51Z

Во-второй раз попытался перелезть на IntelliJIDEA (а точнее WebIde), которую юзают Яндексовские верстаки и второй раз облом. Самое главное требование к IDE вообще у меня очень простое: должна работать большая часть того к чему я привык (Ant, JIRA Connector, Zen Coding).

Ant даже поставился но чего то просит JDK (Eclipse'овский не просил), для JIRA нашёл два плагина: «Jira Browser» и «Atlassian JIRA connector». Первый тупо не работает, т.е делаешь Apply сисема говорит: надо перезагрузиться — и вылетает. Запускаешь заново и всё по старому. Со вторым плагином ещё интереснее: когда пытаешься его включить он просит подключить плагин JUnit, которого в списке нет. Судя по этому проблема не новая, и не решенная до сих пор (очень обидно, кстати)! Вот с Zen Coding'ом всё хорошо, большая часть его уже есть, а наличие Killer Feature Live Templates действительно можно создать много чего.

В общем-то мне ещё очень непривычен интерфейс, но упёртость даёт о себе знать: завтра буду добивать Ant, если поставится то можно будет забить на JIRA connector (теоретически конечно, потому что это будет означать опять тонны писем на почту =(((( и попробовать неделю посидеть под WebIde.

А чего в ней вообще такого, спросите вы? Ну, как минимум в ней есть Refactoring и очень хороший Code Assist (Аптане с её багами до него ещё расти и расти, но Аптана пока всё-таки роднее).

P.S. Вспомнил ещё одну странность, почему то WebIde не удаётся подключиться к репозиторию плагинов из Джетстайловской сетки (хотя вроде бы обращается по 80 порту; дома у меня всё нормально и там и там ВайФай), тоже наводит на определённые мысли.

Нужна помощь

2009-11-19T07:25:31Z

Очень хочу штуку у которой:
1. Большой экран
2. Есть возможность читать PDF
3. Хорошее звучание музыки и есть место (в гигабайтах) под неё

Кроме iPod и субноута не нашёл пока ничего, но первое дорого, а второе уже великовато.

Может кто знает что-нибудь такое?

Яндекс.Маркет выдаёт http://market.yandex.ru/model.xml?modelid=3951684&hid=90560, но насколько я понял пошарившись по форумам и посмотрев на офф.сайте — поддержка PDF там написана из воздуха, но если она там действительно есть/есть возможность её реализовать — это то что нужно.

Лучше если это будет всё-таки плеер, потому что в телефоне есть ещё телефон, а мне это не очень то нужно, меня устроит любой плеер, если к примеру есть возможность его перепрошить.

U-tel внедрил оплату с сайта

2009-11-11T08:54:27Z

Это невероятно, но я только сегодня узнал, что за домашний телефон и сотовый (оператор U-tel) можно заплатить банковской картой прямо с сайта! Это просто мега охуенно и главное никаких сраных комиссий! Также за сотовый можно платить у всех операторов кроме Мотива.

Хитрость склеивания JS файлов в Ant

2009-11-07T17:08:32Z

Сегодня долго не мог сшить файлы для Вадика Гончарова (по-любому таск на меня перешёл, потому что у тебя та же проблема была), пробовал и так и эдак, ну не хотят скрипты работать и всё тут. Думал проблема в YUI, но оказалось всё банально проще: в конце файла нужно обязательно ставить ";", т.к склеивание = банальная конкатенация и две инструкции могут оказаться в одной строке!

WebKit и expression

2009-11-07T12:46:19Z

Да, это не опечатка, внезапно обнаружил, что такая конструкция:


.myclass {behavior:expression((function(){})(this))}

читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах "{" и "}", которые в сумме вызывают какие-то метаморфозы в браузерах, причём если убрать "{", то баг исчезает, а если "}", то остаётся. Естественно, наличие ";" в конце правила, тип селектора (т.е даже если это будет селектор для ИЕ, вроде * html [selector]), тип правила (например предварение правила "//" или "_") ситуации НЕ исправляют!

Особенно знание этого полезно людям, любящим объединять все стили в один файл, не вынося стили для ИЕ в отдельный файл, и использующим star-hack и иже с ним!

Apache Ant: что, как, зачем?

2009-11-07T10:38:31Z

Т.к последнее время я всё чаще применяю вёрстку независимыми блоками, то вполне естественным следствием стало обрастание кучей CSS файликов и необходимостью подключать их все. Для проектов под CMS это, наверное, больше плюс, чем минус, т.к подключаются только нужные файлики (хотя, ещё сомнительно что лучше, на 10 страничках взять 10 css по 10 килобайт или 1 css на весь сайт, размером 100 килобайт), а вот для проектов Майкрософта мои подключения 10-20 css'ок смотрятся достаточно дико. Переходить к 1 файлу мне не хотелось, но для начала я стал создавать поменьше файлов, но это ведь явно не выход. В техногрете лекция про Ant появилась давно, а т.к я юзаю Eclipse то желание потрогать Ant росло с каждым днём, но минутки не было всё.

Ant это тулза для автоматизации задач по сборке ПО (так говорит Википедия)

И внезапно мне написали по поводу одной из последних вёрсток, что у них там что-то не получается собрать картинки с css'ками воедино (а собирали тоже Ant'ом). Оно и понятно, ведь только я, как верстальщик, знаю как между собой взаимодействуют стили и картинки. Ну я и взял и написал по примеру в Техногрете (я не буду здесь писать то же самое, что есть там, зачем дублировать?) свой первый Ant сценарий, который склеивал css'ки и в ту же папку копировал все картинки. И так мне это понравилось... Что я стал изучать дальше.

Вообще, несмотря на то что есть книжки на-английском по Ant'у, у него очень неплохая документация и большей частью я при постановке задачи находил решение именно там (ну и Гугл там в помощь), главное знать что именно хотеть. Например мне нужно было, чтобы в проекте все CSS'ки клеивались в одну, т.е нужно было прошарить все папки, найти внутри все CSS'ки и склеить их в одну. Вот как это написать на Ant'е:


<project name="Build CSS" default="concat-css">

    <target name="concat-css">
        <echo>Concatenating files</echo>
        <concat destfile="build/all.css">
            <fileset dir="./dev" includes="**/*.css"/>
        </concat>
    </target>
</project>

Всё достаточно понятно. Относительно файла с этим сценарием мы сканируем папку dev, находим там все CSS'ки и склеиваем их в файл build/all.css. В html'ке теперь достаточно подключить только этот файл, а не следить за перемещениями, добавлениями новых файлов — этим теперь занимается Ant.

А теперь допустим, что нам надо какие-то файлы подключить сначала, а какие-то в самом конце.


<project name="Build CSS" default="concat-css">

    <target name="concat-css">
        <echo>Concatenating files</echo>
        <concat destfile="build/all.css">
            <filelist dir="./dev">
                <file name="base.css" />
            </filelist>
            <fileset dir="./dev" includes="**/*.css" excludes="base.css"/>
        </concat>
    </target>
</project>

Теперь первым в all.css будет идти содержимое файла base.css (в нём я обычно сбрасываю дефолтные стили и создаю какие-то дефолтные), а затем содержимое всех остальных.

Осталось добавить копирование всех картинок в ту же папку и мы получим готовый сценарий (в качестве бонуса я не стал резать свой сценарий и в нём ещё есть генерация стилей для IE, но эту часть я скоро перепишу уже)


<project name="Build CSS" default="build-lib">

    <property name="base.dir" value="./dev"/>
    <property name="dest.dir" value="./build"/>

    <description>
            Builds all CSS files and copies images
    </description>
    <target name="build-lib" depends="delete-dest-dir, concat-css, concat-css-to-ie, copy-images" description="Builds all CSS files and copies images"></target>

    <target name="delete-dest-dir">
        <delete dir="${dest.dir}" />
    </target>
    
    <target name="concat-css">
        <echo>Concatenating files</echo>
        <concat destfile="${dest.dir}/all.css">
            <filelist dir="${base.dir}">
                <file name="base.css" />
            </filelist>
            <fileset dir="${base.dir}" includes="**/*.css" excludes="base.css, **/*.ie.css" />
        </concat>
    </target>
    
    <target name="concat-css-to-ie">
        <echo>Concatenating files to IE</echo>
        <concat destfile="${dest.dir}/all.ie.css">
            <fileset dir="${base.dir}" includes="**/*.ie.css" />
        </concat>
    </target>
    
    <target name="copy-images">
        <echo>Copying images</echo>
        <copy todir="${dest.dir}">
            <fileset dir="${base.dir}">
                <include name="**/*.gif" />
                <include name="**/*.jpg" />
                <include name="**/*.png" />
            </fileset>
            <mapper type="flatten" />
        </copy>
    </target>
</project>

К сожалению, всё это требует запуска при каждом изменении и иногда может подвесить систему (например minify для JavaScript'а), поэтому нужно выбрать приоритетные задачки и только их поставить в Автоматическую сборку.

В третий раз фиксим png

2009-10-27T09:59:10Z

Полтора месяца назад я показал вам первую реализацию моего решения для фикса png в IE6. Через месяц я дополнил эту реализацию дополнительными функциями, решающими проблему !important, о которой писал.

Но меня всё равно не устраивало моё же решение. Во-первых, вторая реализация увеличила количество кода, и от этого надо было избавляться как-то. Решение было заложено в самой же реализации, я почему-то создавал дополнительные стили для класса, указываемого всем элементам (так я борол невозможность из JavaScript'а переопределить !important правило), хотя нужно было этот стиль написать дальше в файле, а элементам просто присваивать класс.

Во-вторых, меня не устраивала необходимость указывать путь к файлу z.gif и то что это делалось через JavaScript в теге head как-то так: <script>var z_gif = "[path_to_z.gif]/z.gif"</script> (это нужно для img элементов, чтобы вместо непофикшенной картинки была пустота). Для начала я попытался решить эту проблему в лоб и указал путь в expression'е. Но так как вообще этот z.gif указывается для src картинки и путь должен быть относительно открытого html-документа или абсолютным, то идея провалилась из-за невозможность создать абсолютный путь из expression'а. Бросив эти попытки, я стал думать дальше. Следующим шагом я попробовал не указывать src, но тогда вокруг картинки появлялась несуразица (незагруженная картинка отображается в IE6 соответствующим значком). А потом я зачем-то попробовал указать картинке (<img>) ширину и высоту в 1 пиксель и это сработало. Т.е непофикшенная картинка не отображается, но левый верхний пиксель пофикшенной становится темнее (на самом деле до картинки в 1х1 ужимается исходная картинка и мы это видимо). Ну а тут дело уже было за малым: нужно было сделать так, чтобы на месте картинки была пустота, а для этого подошло просто не указывание src и картинка пофикшена без z.gif.

* html .g-png24 {
    behaviour:expression(
        (!this.fixedPNG?
            (function(el){
                var fixSrc = "", sizingMethod = "crop";
                if (el.tagName.toLowerCase() == "img") {
                    fixSrc = el.src;
					
                    el.style.width = 1;
                    el.style.height = 1;
                    el.src = "";
                }
                else {
                    var tmpImg = new Image();
                    tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
                    if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
                        sizingMethod = "scale";
                    }
					
                    fixSrc = el.currentStyle.backgroundImage.split('\"')[1];
                    el.className += " g-png-fixed";
                }
                el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + fixSrc + ")";
                el.fixedPNG = true;
            })(this):'')
        );
    }
	
* html .g-png-fixed {
    background-image: none !important;
}

Теперь нужно всего лишь подключить файл с фиксом (желательно через CC) и указывать нужным элементам класс g-png24 и ВСЁ!

Если вам не нравится моё решение, то можете воспользоваться решением Виталия Харисова, он использует дополнительный элемент для фикса, хотя само решение легче. Также можно воспользоваться iePngFix, говорят что там даже есть поддержка background-repeat, но я в общем-то научился обходиться без него, а универсальность iePngFix говорят (опять же) иногда подводит при большом количестве картинок и часть из них так и остаётся непофикшенными.

Казалось бы...

2009-10-19T11:25:16Z

Казалось бы безобидная конструкция, которая фиксит в ИЕ6 баг с морганием мыши при анимации:


try{
    document.execCommand("BackgroundImageCache", false, true);
} 
catch(e) {}

Так вот, это может стать источником проблем в Opera 10: почему-то именно из-за этого в ней появляется вверху отступ для body где-то в 10 пикселей, который никак не пофиксить. Как оказалось эта конструкция портить работу JS в Опере и она начинает глючит, вывод: нужно как-то определять браузер перед этим, например через jQuery'вский $.browser или вот так:


var m = document.uniqueID
&& document.compatMode
&& !window.XMLHttpRequest
&& document.execCommand;

try{
    if(!!m)
    {
        m("BackgroundImageCache", false, true)
        }
    }
    catch(oh){};

ну и самый оригинальный способ (это писать в CSS):
html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

Ещё раз фиксим png

2009-10-17T10:56:06Z

В прошлый раз я написал expression, который позволяет пофиксить png для IE6 абстрагируясь от того нужно ли нам его растягивать или нет, почему я был заинтересован использовать именно expression я тоже написал. Но на этом эпопея не закончилась, оказалось, что если свойство background-image указано с параметром !important, то и мой expression, и многие другие фиксы бессильны перед этим, т.к !important свойство перекрывает задаваемое background-image: "none".
Сложность решения этой проблемы в том, что из JavaScript'а никак не присвоить ключ !important и никак не достучать до того, использовался ли !important или нет. Это естественно меня не остановило и я стал экспериментировать.
Сначала я пробовал достучаться до currentStyle, вместо style, но вредный IE6 не даёт этого сделать ни в какую. Потом я пробовал создавать рядом второй элемент, копируя в него все стили, кроме backgroundImage, а его задавать, но !important свойство перекрывало и это. Затем я пришёл к тому, что нужно генерить в html-документ тег style, в котором прописывать background-image: none !important для определённого класса, задаваемого всем фиксируемым. Но, создавая доп.элемент до этого, я обнаружил, что для того чтобы поставить его рядом с текущим, нужно ждать дозагрузки родителя (а в момент expression'а его ещё не существует в DOM-дереве). Затем правда я обнаружил, что на момент отрабатывания expression'а уже создан head и можно запихать стили в него.
Вторая проблема была в том, что создавая тег <style> через document.createElement('style'), нельзя потом написать ему .appendChild(document.createTextNode()) и .innerHTML=. Пробившись 2 часа я обнаружил, что писать нужно .styleCheet.cssText =, собственно говоря, после этого всё заработало! Теперь мой expression выглядит так:


* html .g-png24 {
    behaviour:expression(
        (!this.fixedPNG?
            (function(el){
                if (el.tagName.toLowerCase() == "img") {
                    el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.src + ")";
                    el.src = z_gif;
                }
                else {
                    var sizingMethod = "crop";
                    var tmpImg = new Image();
                    tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
                    if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
                        sizingMethod = "scale";
                    }
					
                    el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.currentStyle.backgroundImage.split('\"')[1] + ", sizingMethod='"+sizingMethod+"')";
                    el.className += " g-png-fixed";
					
                    if (!document.getElementById('g-fixed')) {
                        var style = document.createElement('style');
                        var rules = document.createTextNode('.g-png-fixed {background-image: none !important}');
                        style.type = 'text/css';
                        style.id = "g-fixed";
						
                        style.styleSheet.cssText = rules.nodeValue;

                        document.getElementsByTagName('head')[0].appendChild(style);				
                    }
                }
                el.fixedPNG = true;
            })(this):'')
        );
    }

Enjoy...

ps.Интересно, стоит выносить это на Хабру?

Зазубренный текст в IE6 при изменении opacity

2009-10-10T12:01:58Z

Это очень известный и старый баг IE, когда меняешь прозрачность блоку с текстом — текст становится зазубренным. Все решения, что я сегодня успел увидеть за 4 часа сводились к тому, что нужно блоку меняющему прозрачность задать background-color, мол если идёт анимация до 100%, то всё хорошо и будет в итоге. Но мне этот вариант не подходил по той причине, что сам текст лежал на полупрозрачной подложке. Решение всё-таки было найдено (источник), я правда очень долго пытался понять как оно реализуется, ибо описания решения не было, но оно работало, итак:


<div class="opacity">
    <div class="text">Какой-то текст</div>
</div>


.opacity {filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5); zoom: 1; background:url('someimage.png')}
.opacity .text {
*filter:progid:DXImageTransform.Microsoft.Chroma(color=#e2dae5);
*zoom:1;
*background-color:#e2dae5;
}

Для .opacity .text в filter и в background-color пишется цвет, который преобладает(!!!!!) в фоновой картинке. Фильтр Chroma делает цвет в исходной картинке (в данном случае той что указана для .opacity) прозрачным и получается нужный нам эффект. Правда до конца я и сам не понимаю как и почему это работает. Magic!

Вёрстка сайта УБТ для студии «Тагилвеб»

2009-10-08T18:19:46Z

С Тагилвебовцами я пытался сотрудничать ещё весной этого года. Но тогда у нас не сложилось. После 5 дней вёрстки макета (это был сайт РСЦ http://tagilweb.ru/what_is_made/web_sites/57&year=2009) количество усилий потраченных макет было настолько велико, что я в мягких словах отказался от продолжения. Самое бредовое требование было «верстать не в таблицах», тогда я помнится написал ацкий скрипт, который перехерачивал главное меню, которое без таблиц было не возможно сверстать для ИЕ, из div'ов в таблицу =) В итоге кстати следующий верстак заверстал всё в таблицах... профиссианал, блин.

Но мы решили дать друг другу ещё один шанс и на этот раз я даже довёл работу до конца, знакомьтесь: Уральская Большегрузная Техника (http://www.ubtuvz.ru/). На этом сайте вёрстка и скрипты полностью написаны мной (за исключением мелких правок и ацкой бредовой подсказки «Наведитесь чтобы развернуть» и разворачивалки по прохождению мыши (у меня было по клику)). Лучшая часть в этой работе и тяжелее всего дававшейся мне была верхняя часть главной страницы, но в итоге оно того стоило. Главное меню и слайдер сделаны даже слишком хорошо. Разобрать как они сделаны оставляю на ваше усмотрение, дам небольшую подсказку: в меню уголки сделаны без картинок, в слайдере самая большая сложность была сделать экскаватор выходящим из него. А меня даже удостоили чести быть упомянутым на их сайте: http://tagilweb.ru/what_is_made/web_sites/63 =)