Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для IЕ 6 и 7 версий. Это необходимо, так как IЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.
�?менно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для IЕ.
Работает в IЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее — везде).
Для ФФ2 нужен костыль.
В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. Media queries позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой статистике). Зато можно вставить в шапку мегакартинку.
Не касаюсь содержания, но статья, на которую я перешел из твиттера, была по делу, неважно (smashingmagazin похвалил… хотя скорее smashingmagazin’у понравилась форма обратной связи — прокрутить почти до дна, а там, кроме красивой формы, еще одна мегакартинка, да еще разрезанная на несколько частей). Не знаю, что вдруг так меня задело, дизайнерский сайт, и ладно. Стало просто интересно, как сверстано=) (так себе, в общем-то (не сравнивайте с версткой стархака=))
Хотя, конечно, надо смотреть на статистику по посетителям сайта. Может быть на указанный сайт не заходят посетители, у которых мониторы с меньшим разрешением. Но для меня такой поход — хорошая иллюстрация к заголовку этой моей реплики, когда дизайн превыше всего.
Несильно информативная статья, но может быть это растолкает меня на продолжение написательства.
�?спользовал на корпоративном сайте краткую запись правила для шрифта:
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 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?» Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол прятался в мелочах.
Случайно столкнулся со странной багой в опере 9.64 и 10. Есть простой всем известный способ растянуть сайт на всю высоту окна браузера:
CSS
html, body {
background:#fff;
border:0;
height:100%; /*trick*/
margin:0;
padding:0;
}
.wrap {
background:red;/* для контраста*/
min-height:100%;
_height:100%;/* ie6 underscore hack*/
margin:0 auto;/* расположим блок посередине экрана */
width:90%;/*необязательно*/
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<link href="minheightbug.css" media="screen" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
�? вариант со стилями в самом .HTML файле, прописанными в HEAD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<style type="text/css">
html, body {
background:#fff;
height:100%;
margin:0;
padding:0;
}
.wrap {
background:red;
min-height:100%;
margin:0 auto;
width:90%;
}
</style type="text/css">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
(DOCTYPE не важно какой)
Простой общеизвестный способ. Но...
�?грался как-то с разметкой (чуть позже распишу с какой). Создал html-файл и начал писать стили в HEAD, для скорости и чтоб не делать лишних телодвижений (еще один файл, переключаться из HTML в CSS). Начал тестить: ФФ — гут, Хром — гут, Сафари (вин) — гут, �?Е (о чудо) — гут. �? тут черед дошёл до оперы…
�? я увидел, что блок WRAP не растягивается на всю высоту окна. Отресайзишь окно — растягивает. Обновишь — опять WRAP по высоте на свой контент.
Странная бага оперы то же самое после ресайза окна в опере
Решил посмотреть предыдущую работу, в которой использован этот же способ. Опера все показывает правильно. Одна разница: там стили подключены внешним файлом через LINK. Я в недоумении. Опера правильно применила все стили, прописанные в HEAD, кроме определения минимальной высоты. �? только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.
Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
Да и неверно это в принципе писать стили в HEAD: растет размер страницы, стили не кешируются, если у вас больше, чем один шаблон, то править стили придется в нескольких местах
В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.
Фиксированная по ширине верстка (главная, типовая). Любопытна тем, что первый раз опробовал новый способ растянуть фон на всю высоту страницы. Это способ можно использовать для верстки макетов с колонками одинаковой высоты. Надо бы его поподробнее описать как-нибудь.
Май 2009
Warning: Illegal string offset 'caption' in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108
Warning: Cannot assign an empty string to a string offset in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108
Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:
Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для �?Е)
button {padding: 2px 1px !important}
Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в �?нтернет Експлорере.
Поясню в чем дело. �?нтернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:
Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:
отступы в кнопках в файрфоксе
Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.
�? что же делать? Как привести в чувство этот загадочный �?Е? Читать далее
Очень просто. В таблице стилей пропишите для input и textarea следущее
input,
textarea {
outline:none;
}
Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input, который должен тянуться на всю предоставляемую ему ширину
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них: обводка есть / обводка убрана
Есть у �?Е6 такая особенность: если какому-либо блоку задать ширину, то �?Е6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то �?Е6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).
Забавно, что поводы для написательства мне дает студия Лебедева: выходом в свет нового сайта, или же, как в это раз, новым рецептом в Техногрете.
Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.
Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что же, хороший способ применения нечасто используемого свойства inline-block. Но…
Так это выглядит в браузере:
Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.
Боремся с отсутствием со стороны Файрфокса 2 поддержки простого, но нужного свойства inline-block
Так случилось, что ФФ2 не поддерживает для свойства display значения inline-block. Взамен него в ФФ2 есть несколько нестандартных CSS-свойств, в частности -moz-inline-stack. �?з того, что я знаю, это свойство лучше других подходит для повторения поведения, подобного inline-block. Но при его использовании надо учитывать несколько странностей. Для демонстрации этих странностей CSS-свойства буду прописывать инлайн, а для просмотра этих странностей вам понадобится браузер Файрфокс 2.
