Только что узнал о замечательном псевдоэлементе ::-ms-clear. Он задаёт стиль кнопки для очистки текстового поля в браузерах семейства IE.
P.S. Не является стандартом.
Рубрика: Верстка
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
Уже больше двух лет наверно прошло после запуска, а мне по-прежнему очень нравится как получилась форма заказа на свебе. Тем более приятно, что в её создании принимал непосредственное участие.
Всё просто, очевидно, быстро работает.
Да и не видел пока еще форм заказа проще.
P.S. Свеб обновился, и форма канула в лету.
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
Обновление: какой же жуткий редизайн провели на сайте. То, что я верстал, конечно, небезупречно, но насколько интереснее и красочнее. Сейчас же что-то сильно унылое. Печально!
P.S. Макеты потеряны, ссылки убраны.