Анимированный PNG (APNG)

�?нтересно, такая старая технология, думал, что все ее поддерживают, ан нет! Столкнулся на последнем проекте. Наш верстальщик, поклонник Файрфокса, сделал прелоадер на APNG, а я сижу на Хроме и проверяю в том числе и в нем. Я был сильно расстроен, что загрузчик не крутится.
Может быть и жаль, что поддержка APNG так мала, но сейчас, в «эпоху CSS3+HTML5», когда загрузчик можно сделать вообще без использования изображений, разве может это сильно расстраивать.
Вывод простой: не используйте APNG
�? проверьте свой браузер на поддержку этого фомата :)

Условные комментарии (conditional comments)

Вы используете условные комменарии? Конечно, вы их используете. Чтобы отделить стили для IЕ от других и при этом сохранить валидность своего CSS. Тем самым добавляя лишние http-запросы для все еще  многочисленных несчастных пользователей IЕ. Да еще в некоторой степени затрудняя себе правки стилей, если какое-либо свойство различается и для нормальных браузеров, и для IE7, и для IЕ6. Приходится править три файла, а не один. Можно забыть, запутаться, ну в общем неудобно.

Можно ли этого избежать (этого — это неудобства, лишние http-запросы и т.п.)? Да, и при этом с помощью все тех же условных комментариев! Кажется в начале года встретил на каком-то сайте (честно, не помню) подобный рецепт. Достаточно в вашем HTML с помощью условных комментариев разделить вывод в браузер BODY с различными классами. Вот как-то так:

<!--[if (!IE) | (gt IE 7)]><!-->

    <body>

<!--><![endif]-->

<!--[if IE 7]>

    <body class="ie7">

<![endif]-->

<!--[if IE 6]>

    <body class="ie6">

<![endif]-->

Пример (соответственно приведенному примеру нормальные браузеры покажут красный экран, IЕ7 — зеленый, а IЕ6 — синий ).

Теперь у вас есть возможность, не используя хаки и не плодя лишние файлы, править все стили в одном файле. Достаточно в  стилях перед нуждающимся в корректировке для IЕ7 или IЕ6 свойством  писать соответсвующий класс.

для нормальных браузеров:

.selector {attr: value }

для IЕ7:

.ie7 .selector {attr: new value} - это свойство увидит только IЕ7

ну и соотвественно для IЕ6:

.ie6 .selector {attr: new value} - а это  только IЕ6

Вы скажете, что стили будут сильно много весить. Да, немного потяжелеют, но если у вас правильно все сверстано, то много правок не понадобится. Это раз. Второе, несколько лишних строк все-таки лучше, чем пара лишних запросов к серверу.

P.S. Единственно, что если вам приходится использовать фильтры или expression для IЕ, то валидность CSS сохранить не удастся. Но, по-моему, важнее валидность HTML, чем CSS. Потому как валидность CSS никак не влияет на доступность сайта, а только лишь на его отображение.

TRINET и �?Е6

Не скажу как давно, но уже порядочно как, TRINET исключил из поддерживаемых браузеров IЕ6. Мелочь, а приятно!
P.S. А в очередном заказе (холодным летом 2012-го) и �?Е7 уже не рассматривался, как требуемый. Да и украшательства в виде теней и закруглений были реализованы в полном соответствии с принципами graceful degradation.

СПАСЕМ ПЕТЕРБУРГ

Над Петербургом нависла беда – четырехсотметровый небоскреб, который изуродует всеми любимые виды города. Он будет виден с набережных Невы, от Исаакиевского собора, с Дворцовой площади.

400 метров – это больше, чем три колокольни Петропавловского собора. Заказчики строительства (ОАО «Газпром») пытаются получить разрешение на возведение башни, попирая действующий закон об охране исторических панорам города. Властями города игнорируется официальное предупреждение ЮНЕСКО исключить Петербург из списка всемирного культурного наследия.
С потерей Петербурга мы потеряем не только город, но и историческую память: строительство одного небоскреба откроет дорогу другим высоткам, и через несколько лет город станет неузнаваем.

Горожанам отказали в праве проведения референдума, поэтому защитить красоту великого города можно только всей страной, всем миром.
Оставьте свою подпись на сайте http://bashne.net/

Равномерно расположить картинки по ширине страницы

Бывает, возникает вопрос (по «вине» дизайнеров или заказчиков), что картинки надо расположить по ширине страницы (ну или родительского контейнера) равномерно, то есть первая (для читающих слева направо) картинка должна быть выровнена по левому краю, последняя – по правому, а остальные – находится друг от друга и от крайних на одинаковом расстоянии. Вот как-то так:

fig Самый простой вариант, который я сам использую – это использовать таблицу. Это, так скажем, не самое правильное использование таблицы, но зато самое простое и наименее времезатратное, что бывает важно.

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю ширину (table {width: 100%})

fig2

Сейчас между картинками одинаковое расстояние, что и требуется. �? это нам необходимо сохранить. �? при этом крайние картинки должны быть прижаты к краям. Для этого добавим в таблицу пустые ячейки между ячейками, в которых находятся картинки.

fig3 Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих больше отводится большее место), пустые ячейки сжались до минимальной ширины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание ширины ячейкам, эти ячейки будут растянуты по ширине содержимого, если только таблице на задано свойство table-layout:fixed.

fig4 Вот мы и получили, что требовалось. Уберем границы у ячеек, которые были добавлены для наглядности, и можно использовать. Но, конечно, надо подумать, как избавиться от таблицы при верстке подобной задачи.

Магазин автозапчастей

Тянущаяся по ширине верстка с футером всегда прижатым к низу страницы (главная, типовая)
Май 2009

Xотите быстро продать (подержанный|б у) или новый авто? �? не хотите тратить впустую время, блуждая по сотням авто базаров. Тогда на�? сервис специально для Вас! На�? авторынок предлагает Вам купить или продать (подержанный|б у|) авто практически любых марок и моделей, во всех городах. На�?и б у автомобили ждут своих новых владельцев, которые хотят продать автомобиль выгодно, и в кратчай�?ие сроки. Если вы ре�?или купить ма�?ину, но новый авто вам дорого, на�? авто базар предлагает подержанные автомобили по вполне де�?евым ценам. Предлагаем Вам б у авто (подержанные автомобили), что совер�?енно не означает значит, что у нас вы сможете купить плохое авто. Б у автомобили имеет низкую цену. Авторынок — уникальный поисковик подержанных автомобиль. Вы хотите купить или продать (подержанный|б у|) автомобиль на вторичном рынке? Теперь Вам нет необходимости заходить на каждый авто рынок, не нужно ехать на автобазар. Просто посещайте на�? автобазар. Теперь купля подержанного автомобиля стала проще — добавляйте выбранные авто в Портфель по желанию. Оцените возможность искать одновременно несколько марок или моделей авто, выбирать несколько регионов, в которых продается ма�?ина. Ре�?или продать (подержанный|б у) или новый автомобиль? Желаете чтобы объявление было на на�?ем автобазаре ? Ускорьте продажу авто, сделав его VIP с помощью СМС.

Еще раз про inline-block (коротко)

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для IЕ 6 и 7 версий. Это необходимо, так как IЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия IЕ*/
}

�?менно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для IЕ.
Работает в IЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее — везде).
Для ФФ2 нужен костыль.

Название Censored

Очень долгий проект — первые страницы были сделаны еще в начале декабря 2008, некоторые добавления уже в конце мая 2009. Всего около 30 шаблонов.
Вплотную познакомился с jQuery. Конечно, код не кодерский, но вполне работоспособный.
Как обычно кастомные контролы, закругления и тени. Что мне понравилось, как я сделал, так это выбор города и упрощенный «аккордеон» собственного изготовления. Готовые аккордеоны не устроили своей громоздкостью и множеством излишеств. В моем варианте весь аккордеон занял полтора десятка строк.

jQuery('a', '#accord').each(function(){
        if ($(this).next('ul').length > 0)
            $(this).css({
                color: '#000'
            });
        $(this).click(function(event){
            if ($(this).next('ul').length > 0) {
                event.preventDefault();
            }
            $(this).addClass('selected');
            $(this).next().show('slow');
            $('ul', $(this).parent().siblings()).hide('slow');
            $('a', $(this).parent().siblings()).removeClass('selected');
        })
    })

Все остальное просто  добротная верстка. Вот пример страницы.

главная страница сайта
главная страница сайта

Что мне не нравится на этом сайте — это огромные формы. Мне трудно представить, что  кто-то станет заполнять их полностью. Например вот такую

пример формы
пример формы

Эту форму надо не просто заполнить, проставив галочки где надо. Надо при заполнении учитывать, чтобы сумма некоторых полей составляла ровно 100%.