Flexbox и растягивание вложенных элементов на всю ширину родителя

Если хотите, чтобы вложенные элементы, так сказать flex-items, заняли всю ширину родителя (если у вас flex-direction: row) или по высоте (если flex-direction: column), пропишите им свойство flex-grow, отличное от 0 (нуля), что задано по умолчанию.
P.S. Flexbox нереально крут :) Очень удобный инструмент для создания разметки. Вовсю стал его использовать только недавно.

Retina и фоновые картинки

Вопрос уже достаточно изученный, но до недавнего времени мне не приходилось подстраиваться под ретину. Самый простой рецепт это использовать такую запись:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
    }
}

Вероятно я не был внимателен, читая этот рецепт. Оказалось, что недостаточно подпихнуть ретине картинку с удвоенным разрешением. Обязательным является прописывание свойства background-size. Например, так:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .class {
        background-image: url(retina_image);
        background-size: contain;
    }
}

Мне этого оказалось достаточно. Но может понадобиться и вписать явным образом размер под размер блока, которому нуден этот фон.

background-size: 100px 100px;

Как-то так:)

CSS3 selectors. Частный случай

Люблю, знаете ли, селекторы в CSS3. Позволяют делать очень удобные штуки.
Вот, например, есть блок с иконками, расстояния между которыми не одинаковые (лого соц.сетей). Можно было бы каждой иконке дать свой класс, чтобы регулировать расстояния. Но я воспользовался селектором, проверяющим наличие строки в атрибуте элемента, а именно:

E[foo*="bar"]

Я проверял атрибут SRC у тега IMG для иконки Фейсбука, назвав иконку fb.png. Получилось что-то в этом роде:

img[src*="/assets/i/ico/fb.png"]

Таким образом, не имея доступа в шаблон, есть возможность с легкостью менять отображение документа. Для, собственно, CSS и предназначен)

P.S. Правда в этом частном случае я просто поленился сделать из иконок спрайт, что по умолчанию привело бы к наличию у каждой иконки своего класса. Грешен, каюсь.

Форма заказа хостинга на sweb.ru

Уже больше двух лет наверно прошло после запуска, а мне по-прежнему очень нравится как получилась форма заказа на свебе. Тем более приятно, что в её создании принимал непосредственное участие.
Всё просто, очевидно, быстро работает.
Да и не видел пока еще форм заказа проще.

TRINET и ИЕ6

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

Правильная сокращенная запись шрифта

Использовал на корпоративном сайте краткую запись правила для шрифта:


body {
    font: 81.25%/1.5 Arial, Helvetica, sans-serif;
}

На работе LINUX (не умею готовить, и потому дико не люблю), потому работаю в Хроме (быстрее) и Файрфоксе (полезнее). VMWare умерла, а восстанавливать лень, потому проверяю в IЕ (благо основные посетители нашего сайта не IЕ-пользователи, хотя 25% немало, но можно смотреть иногда сквозь пальцы на мелкие баги в IЕ) от случая к случаю. И вот тут смотрю и вижу в IЕ7 дефолтные шрифты. Это был IЕ8 в режиме IЕ7. Причем встроенный тулбар показывает, что шрифт применяется какой-надо. Но на странице ни фига не Arial. Оказалось все просто. В Eclipse есть возможность отформатировать код (хоть и не совсем удачная реализация). И в какой-то момент случайно я отформатировал CSS. И это форматирование добавило кучу пробелов и переносов строк, в том числе и перед значением LINE-HEIGHT. Получилось вот так:


body {
    font: 81.25%/ 1.5 Arial, Helvetica, sans-serif;
}

И IЕ7 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?» Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол  прятался в мелочах.

Teen-TV (teleteen.tv)

Проект еще в разработке, и по указанному адресу еще старая версия сайта. Я же представляю свою работу по верстке. Из особенностей, мне кажется, стоит упомянуть красиво оформленные заголовки. Поначалу я думал, что придется использовать абсолютное позиционирование для вложенного в заголовок дополнительного элемента. Как ни крути, а это дополнительные сложности при дальнейшей разработке. Но удалось за счет комбинирования отрицательных margin и соответствующих padding обойтись простым фоном. За деталями — файрбаг вам в помощь.

Главная, типовая.

Параллельно верстаются макеты для каналов HDTV-1 (главная, типовая) и HDTV-2. Там почти та же самая верстка, за исключением закругленных уголков (для них потребовалась дополнительная разметка), но выглядят они совсем иначе. В общем CSS в действии: одна разметка — три разных сайта.

Июнь 2009

Обновление: какой же жуткий редизайн провели на сайте. То, что я верстал, конечно, небезупречно, но насколько интереснее и красочнее. Сейчас же что-то сильно унылое. Печально!

Cайт ruspoker.org

Фиксированная по ширине верстка (главная, типовая). Любопытна тем, что первый раз опробовал новый способ растянуть фон на всю высоту страницы. Это способ можно использовать для верстки макетов с колонками одинаковой высоты. Надо бы его поподробнее описать как-нибудь.
Май 2009

Cтроительная компания «ДОМ 21»

Приятно было работать с этим проектом: из-за дизайна. В общем и целом ничего сложного: прозрачная тень под выпадающим меню да повсюду закругленные уголки. Немного поюзал jQuery.
Единственная особенность: разметка одна — вариантов дизайна два (летний и зимний).
А так верстка фиксированная по ширине и растянутая по высоте.
Выполнено в декабре 2008.