Дизайн превыше всего

18 апреля 2010

В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. Media queries позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой статистике). Зато можно вставить в шапку мегакартинку.

Не касаюсь содержания, но статья, на которую я перешел из твиттера, была  по делу, неважно (smashingmagazin похвалил… хотя скорее smashingmagazin’у понравилась форма обратной связи  – прокрутить почти до дна, а там, кроме красивой формы, еще одна мегакартинка, да еще разрезанная на несколько частей). Не знаю, что вдруг так меня задело, дизайнерский сайт, и ладно. Стало просто интересно, как сверстано=) (так себе, в общем-то (не сравнивайте с версткой стархака=))

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

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

Метки: ,
Написано в CSS | Нет комментариев »

ИЕ7 и пробелы в CSS

24 декабря 2009

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


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

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


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

И ИЕ7 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?»

Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол  прятался в мелочах.

Метки: ,
Написано в CSS, верстка | Нет комментариев »

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

14 ноября 2009

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

Метки: ,
Написано в разное | 2 комментариев »

Странная бага Оперы

8 октября 2009

Случайно столкнулся со странной багой в опере 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, кроме определения минимальной высоты. И только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.

  1. Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
  2. Да и неверно это в принципе писать стили в HEAD: растет размер страницы, стили не кешируются, если у вас больше, чем один шаблон, то править стили придется в нескольких местах

В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.

Метки: , ,
Написано в CSS | 4 комментариев »

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

19 августа 2009

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

.someclass{
    display: inline-block;
}

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

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

Метки: , , , , , , ,
Написано в CSS, верстка | 2 комментариев »

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

25 июля 2009

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

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

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

fig2

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

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

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

Метки: ,
Написано в CSS, верстка | 2 комментариев »

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

5 июля 2009

Вы используете условные комменарии? Конечно, вы их используете. Чтобы отделить стили для ИЕ от других и при этом сохранить валидность своего CSS. Тем самым добавляя лишние http-запросы для все еще  многочисленных несчастных пользователей ИЕ. И еще в некоторой степени затрудняя себе правки стилей, если какое-либо свойство различается и для нормальных браузеров, и для ИЕ7, и для ИЕ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]-->

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

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

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

.selector {attr: value }

для ИЕ7:

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

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

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

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

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

Метки: , , , ,
Написано в CSS, верстка | 2 комментариев »

« Предыдущие записи

CSS Guru работает на WordPress. Локализация Lecactus.ru
Записи (RSS) и Комментарии (RSS).