Хаки для браузеров

веб-дизайнер, April 15, 2009

Сегодня мне хотелось бы поговорить о так называемых «css-хаках». CSS-хаки используют тогда, когда один конкретный браузер надо заставить отображать некий блок разметки не так, как хотелось бы самому браузеру. Сразу оговорюсь, что использовать хаки нужно только тогда, когда это действительно необходимо. Скажем, всеми нами горячо любимый Internet Explorer (седьмой версии) имеет свои, сугубо специфичные представления о работе со списками. И иногда надо только ему объяснить, что он неправ:-)
Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида:

<!–[if IE]><link rel=”stylesheet” href=”css/ie.css” type=”text/css” media=”screen” /><![endif]–>

или для конкретных версий Explorer’а:
<!–[if IE7]><link rel=”stylesheet” href=”css/ie7.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE6]><link rel=”stylesheet” href=”css/ie6.css” type=”text/css” media=”screen” /><![endif]–>

И, наконец, третий путь — CSS-хаки.

Самый удобный в плане хаков браузер – Firefox (и относящиеся к его семейству), так как имеет свою группу css-классов, начинающуюся с перфикса @-moz-
Например:

@-moz-document url-prefix() {
.style {background: #F00;}
}

css-rule, x:-moz-any-link{

}

Для Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}

html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */ } Также, можно создать специальный файл стилей для Opera и подключить его следующим образом: <head>
<link rel=”stylesheet” href=”css/opera.css” type=”opera/css” media=”screen” />
&lt/head>

Google Chrome и Safari по способу работы с блочной моделью напоминают Opera и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:

body:last-child:not(:root:root) .style {
background: #F00;
}

Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:

html {
background: #f00; (это понимают все браузеры)
* background: #0f0; (а это только ослики)
}

Напоследок напомню, что практически все хаки влияют на валидность полученного кода, поэтому, если есть возможность – надо обходиться без них. А такая возможность есть почти всегда, и исключение составляет только горячо любимый всеми нами Internet Explorer:-)

Палки и плашки. О мусоре на странице.

Вячеслав Гринин, February 9, 2009

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

Под палками я понимаю либо горизонтальные разделители (<HR>), которые были введены в спецификацию HTML в эпоху web1.0 (немногим позже вымирания динозавров, да-да) и предназначались для смысловой отбивки блоков текста (аналогично типографской линии, или звездочкам) друг от друга; либо css-свойство border (граница элемента), достаточно часто используемое не по назначению.
Примеры плохого использования палок:



Если на первой картинке вертикальную палку убрать совсем, а горизонтальные уменьшить раза так в четыре, картинке полегчает. А в таком виде она полна мусора.
Во второй картинке можно вообще убрать все вертикальные палки, станет только лучше. Я, честно признаться, не понимаю, зачем они там вообще, но видел и такие примеры верстки.

Почти такая же беда и с плашками:



Плашка, это элемент также предназначенный для смысловой отбивки небольшого блока текста. Применять их нужно весьма осторожно. Если увлечься, то получится ужас, показанный на картинках выше. Да-да, я и такое видел. И даже, когда-то, делал:-)
В случае первой картинки у нас огромная плашка под основным текстом давит на зрителя и приводит его в уныние. Ее можно с легким сердцем удалить, оставив только мелкую плашку под меню. Она позволяет визуально отделить меню от основного текста и акцентирует на нем внимание зрителя.
В случае второй картинки от плашек надо вообще отказаться, обыграв визуальную отбивку блоков друг от друга более плотным межстрочным интервалом (line-height) и более разреженными отступами блоков друг от друга.

Я показал всего четыре достаточно простых примера, но если вы немного подумаете, вы легко сможете сами понять в каких еще случаях палки плашки могут мешать, а в каких – наоборот, – пригодиться. При условии соблюдения правильного баланса ваши макеты всегда будут легкими и изящными.

Трюк со ссылкой – показываем картинку.

веб-дизайнер, January 27, 2009

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

Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и  Java Script мы легко можем сделать интерфейс сайта более динамичным.

Суть метода заключается в следующем:  мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.

Подробный листинг (на примере “Шага за горизонт”):

HTML:

&lt;span id=”item1″>&lt;img src=”d1.jpg” alt=”” />&lt;/span>

CSS:

a span {
display: none;
}

a:hover span {
display: inline;
position: absolute;
}

а позиционирование элементов назначается отдельно, по id:

#item1 {
left: 495px;
top: 100px;
}

Все достаточно просто, не правда ли?;-)

————————————-

Веб-гламур – за, или против?

веб-дизайнер, December 31, 2008

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

Для начала, хотелось бы заметить, что под “гламуром” пользователями понимается что-то вроде Одной Кнопки, РуБёрнера и подобных (да-да, в основном дизайнером эти проектов является Миша Квакин, он же и первопроходчик и основоположник данного стиля оформления в рунете). “Гламурными” чаще всего называют сайты, содержащие простую (simple) графику значительных размеров, чаще всего отрисованную в 3d со стилизацией под глянцевый пластик, стекло, etc.

Однако, если мы обратим взор сюда, то в списке выдачи не увидим ничего и близко похожего. Тут у нас держатся китч (яркое коллажирование со смнешением различных стилистик), гранж (пятна, куски надписей, хаотичное нагромождение линий) и информационный дизайн, который меня, почему-то, очень подмывает назвать “хабрадизайном”. Нарочито простых (“просторных”, “свободных”) сайтов не создает практически никто. Использование 3d не идет дальше псевдо-3-дэ, исполненного в фотошопе.

Вот так вот я сидел и думал, и запутывался все больше и больше. Очень бы хотелось узнать мнение читателей (vox populi) о том, какие сайты им нравятся, какие нет; какие тенденции устраивают, а какие – раздражают.
—————————————————–

Хостинг изображений – Radikal.RUradikal.ru

Про ссылки и браузеры

веб-дизайнер, July 30, 2008

Читаю вот статьи по юзабилити сайтов – и мучит меня один вопрос: все, как один, оптимизаторы и юзабилитисты утверждают, что все, все ссылки на странице (и внешние, и внутренние) должны открываться в том же самом окне (сейчас уже корректнее и актуальнее говорить: “в той же самой вкладке”), в котором открыт сам сайт.
Сам я люблю открывать все ссылки в новой фоновой вкладке. В Опере это просто – тырц колесиком на ссылку, и она открывается в новой фоновой вкладке. Причем, прелесть Оперы в том, что после закрытия вкладки активной становится не предыдущая вкладка, а последняя активная.

Вот и стало мне инетесно, что думает по этому поводу всемогущий vox populi. Решил опрос новый завести. Посмотрите, проголосуйте.

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: