немного о веб-дизайне

[avva]

(может быть интересно разве что веб-разработчикам и веб-дизайнерам)

Полдня сегодня еб... простите, игрался с CSS и браузерами. Прочитал за последние два дня значительную часть CSS: The Definitive Guide - отличная, кстати, книга, хорошо объясняет, продуманная организация материала, не слишком лаконично, не слишком подробно, в самый раз.

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

Я пытался построить рядом несколько колонок внутри общего контейнера. В каждой из колонок должна быть своя сложная организация, а не просто текст, и ширина у каждой из них может быть разная. Как это сделать? Можно таблицу, но таблицу я заранее не хотел. Можно пустить колонки в плаванье, но я не очень хорошо понимаю механику плаванья, хотя тут это довольно просто, и наверное смог бы написать. Меж тем в книге я как раз дошел до главы, которая прочистила мне мозги насчет блочных и строчных элементов, фундаментальных различий между ними, и того, как их менять с помощью display: невзирая на природу исходного элемента в HTML. Я тут же наивно решил, что не может не быть простого способа расставить рядом колонки с помощью обычного потока, без плавающих блоков.

Довольно быстро я наткнулся на display: inline-block, который делает именно то, что надо: "наружу" элемент выглядит как часть строчного контекста, и поэтому укладывается с другими такими же в строку; а "внутрь" он - блочный элемент, так что ему можно задавать размеры и все как следует в нем расставлять. После того, как все заработало, я обрадовался и даже не сразу догадался попробовать в IE7, где, естественно, все немедленно сломалось.

Тут я опускаю подробное описание следующих нескольких часов, проведенных за чтением книги, чтением десятков хороших, глупых и средненьких сетевых статей и блог-записей, и десятка попыток написать что-то так, чтобы нормально показывалось в FF, IE7 и Хроме. Результаты:

IE7 поддерживает inline-block с несколькими серьезными ограничениями. Во многих местах написано, не вполне корректно, что в IE7 можно поставить inline-block: только на элемент, который по умолчанию строчный (или до того был сделан строчным). Т.е. например, если в документе заменить в иерархии все дивы на спаны, то по крайней мере inline-block: худо-бедно в ΙΕ7 будет работать. Но это само по себе очень кривое решение, потому что внутри спанов неудобно все расставлять, и сами они неправильно ложатся, поэтому их приходится силой в том же CSS делать блочными; но тогда, если внутри inline-block-элемента в IE7 обнаруживаются де-факто блочные, в нем опять все портится.

Другой способ, который, кажется, не так хорошо известен: если IE7 сначала для блочного элемента видит inline-block (что само по себе не работает), а потом для него же inline, то получается как раз то, что надо (элемент получает поведение inline-block). Не спрашивайте меня, почему. Это можно только выучить наизусть, дети, понять это невозможно. Вторую декларацию можно послать отдельно одному IE7, чтобы другие браузеры не видели. Это тоже можно сделать, оказывается, тысячью способов. Мне понравился вот какой: небольшой кусок js, который определяет браузер и ставит его имя в класс элемента html документа. В результате в CSS можно начинать селекторы просто скажем .ie или .ie7 и дальше что-то конкретное, и это пройдет только в IE. Другой способ добиться того же самого - conditional comments в IE, скрывающие кусок HTML-я от других браузеров; тут недостаток в том, что стили для IE нужно тогда хранить в отдельном файле.

Проблему с блочными элементами внутри inline-block в IE7 я смог решить только частично. Происходит следующее: если у такого элемента есть, например, height: (возможно, еще какие-то штуки, просто эта мне была важна), то он растягивается во всю ширину экрана, и растягивает содержащий его inline-block контейнер вместе с собой. Если теперь его переделать в inline с помощью того же трюка с переопределением для IE7, то он опять начинает работать, и следующий за ним блочный элемент начинает новую строку; но если и его переделать в inline с той же целью, то они, естественно, становятся рядом. Я, кажется, обойдусь, но если есть лучше способ это исправить, буду рад узнать. Скажем, в коде, который указан ниже, я уже не могу поставить height: 100px на класс middle, если захотел бы, не сломав все в IE7.

Еще один нерешенный вопрос: почему FF/Chrome оставляют промежутки между элементами, выстроенными через inline-block, а IE не оставляет, и как их привести в соответствие. Кто-нибудь знает?



(слева IE, справа Chrome; каждому элементу дан border размером в один пиксель для наглядности; FF выглядит так же, как Chrome).

Тот вариант, к которому я пока пришел, выглядит примерно так:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

    div.container{ font-size: 30px; }
    .container * { border: 1px gray dashed;}

    .container .column { width: auto; height:5em; display: inline-block; }
    .container .upper { height: 30%; width: auto; }

</style>
<!--[if IE]>
<style>
    .container .column { display: inline; }
    .container .upper { display: inline; }    
</style>
<![endif]-->
</head>
<body>

<div class='container'>
  <div class='column'> 
    <div class='upper'>
      123
    </div>
    <div class='middle'>
      abc
    </div>
    <div class='lower'>
      раз два три
    </div>
  </div>
  <div class='column'>
    <div class='upper'>
      456
    </div>
    <div class='middle'>
      def
    </div>
    <div class='lower'>
      четыре пять шесть
    </div>
  </div>
</div>
</body>
</html>

Comments

[esycat.livejournal.com]

А указание доктайпа просто опущено или его не было? Браузеры могут сильно по-разному рисовать в quirks и strict режимах.

Для отладки отступов и всех прочих расстояний и ещё кучи всего в Firefox очень удобно использовать расширение Firebug и ещё Web Developer. WebKit имеет всетроенный аналог.

[avva.livejournal.com]

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

[avva.livejournal.com]

Офигительно! Strict mode в IE7 решил проблему блочных элементов с высотой внутри inline-block. Теперь они не портят контейнер, и их не надо переопределять в inline (только сам элемент, который inline-block, надо). Огромное спасибо еще раз :)

[esycat.livejournal.com]

XHTML 1.0 Strict — наш выбор. ;-)

Раньше самой известной, кажется, проблемой отсутствия указания доктайпа было, что IE в quirksmode значение padding считал составляющей значения width элемента.

А кстати, вот один из отличных сайтов по HTML/CSS/JS:
http://quirksmode.org/

[avva.livejournal.com]

Спасибо!

[spamsink.livejournal.com]

Можно ли объявить таблицу с клетками размером в 1х1 пиксел (или процент), а потом манипулировать colspan и rowspan в свое удовольствие?

[esycat.livejournal.com]

Расстояние между блоками в Fx/Chrome получается за счёт пробельных символов в коде. Поскольку внешне элементы являются инлайновыми, то пробелы не схлопываются.

[avva.livejournal.com]

Ах вот оно что :) огромное спасибо!

Я понимаю так, что они здесь себя правильно ведут, а IE неверно, игнорируя пробельные символы, да?

[esycat.livejournal.com]

Ага, вроде так.

[mummy1.livejournal.com]

Кажется наоборот, для ФФ пробельный символ - отдельный элемент типа #TEXT. Чего ни в каких спеках HTML не написано. В кои-то веки IE не врет :)

[esycat.livejournal.com]

Это называется Text Node и написано в спеках DOM (http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1312295772).

[mummy1.livejournal.com]

Ага. Но все равно мне кажется у ФФ там что-то было не так с этими текстовыми нодами. Не то их слишком много вкрадывалось между двумя тэгами (т.е. оне не были нормализованы), не то что-то такое. Видимо спек не то что бы был нарушен, но был имплементирован как-то некрасиво... Ну да фиг с ним.
Я Вам только хотел заметить, что искренне восхищен Вашим владением темой, б.п.

[esycat.livejournal.com]

Если Вы можете позволить себе не ориентироваться на IE6, то очевидно у задуманной страницы будет весьма ограниченный круг пользователей. Может быть, получится поднять планку сразу до IE8? :-)

[esycat.livejournal.com]

В последнее время от меня по работе поддержка IE практически не требуется, и более опытные специалисты по кросс-браузерности могут поправить, но вроде inline-block пока ещё остерегаются массово использовать. Сейчас повсеместно плавающие элементы и игра на absolute спозиционированных блоках внутри relative.

[avva.livejournal.com]

Почему? IE6 уже отстает от IE7. Если я хочу, чтобы моя страница работала у среднего пользователя Windows, который не знает, что такое Firefox, или не заинтересован в нем, но система устанавливает автоматические updates, то у него, если я правильно понимаю, уже давно есть IE7.

Игнорируя IE6, я теряю где-то 30% пользователей. Кстати, я не знаю - может, этот код и заработает в IE6, я не пробовал, мне лень :)

[esycat.livejournal.com]

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

IE8 переписан from scratch, но по поведению отличается от IE7 значительно меньше, нежели IE7 после IE6. Я предполагаю, что ориентируясь сразу на восьмую версию Вы избавитесь от мелкой головной боли с минимальными излишними проблемами для пользователя.

Хотя, как уже заметил, я последнее время практически не занимаюсь поддержкой IE, моё представление может быть несколько ошибочно. :-)

[lz.livejournal.com]

30% пользователей это как-то очень много. У нас считается, что можно совсем игнорировать, когда меньше двух процентов

[avva.livejournal.com]

Если бы это было для работы, я бы не смог, конечно, игнорировать IE6 :)

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

[lz.livejournal.com]

по отзывам наших верстальщиков пока все это работает крайне криво. Хотя больше всего они ненавидят почему-то не IE (это такое неизбежное зло), а Opera

[tpars.livejournal.com]

А почему? Очень любопытно. :)

[esycat.livejournal.com]

Именно потому, что IE — это неизбежное зло, а у Opera значимый процент аудитории только в России, однако браузер иногда позволяет проявлять свои замысловаты особенности.

[eugenem.livejournal.com]

http://www.positioniseverything.net/articles/onetruelayout/examples

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

[avva.livejournal.com]

Спасибо!

[gaius-julius.livejournal.com]

иногда в качестве источников идей и "правильных" примеров очень помогает http://csszengarden.com

[avva.livejournal.com]

Спасибо!

[migmit.vox.com (from livejournal.com)]

Когда-то IE7 означало набор жабоскриптов, заставлявших IE6 понимать стандарты правильно. Может быть, этот проект ещё жив.

[kruzzik.livejournal.com]

Рекомендую маленький фреймворк http://www.blueprintcss.org/. Избавляет от необходимости ломать голову над css и писать отдельные стили для IE.

[avva.livejournal.com]

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

[oleg-mu.livejournal.com]

Спсп(б)... На певый взгляд, дествительно полезная штучка.

[kruzzik.livejournal.com]

Рад поделиться.
Я вклеил блюпринт во все свои проекты и страшно доволен. Удобные стили и кроссбраузерность без хлопот.

[emdin.livejournal.com]

Пока у меня ни на одном проекте вёрстка слоями себя не оправдывала. Таблицы работают всегда. Хоть это и скучно.

[oleg-mu.livejournal.com]

Кайф от блочной верстки я лично вкурил, когда делал первый сайт с использованием ООП. При подключении хедеров, фотеров, меню и контентов, таблицы проигрывают.ю А ежели все упрятываешь в контейнеры, тогда проще. Хотя свой гемор, несоменно, присутствует, с ишаком особенно.

[dimaniko.livejournal.com]

Анатолий, если у вас еще будут вопросы, выложите файл с примером где-нибудь на сервере и дайте на него ссылку. Тогда ответы на вопросы вы будете получать быстрее и точнее - мы просто будем тыкать в код дев-тулзами, минуя стадию "скопировать, создать файл, открыть локально".

[avva.livejournal.com]

Да, звучит логично. Спасибо, может быть, воспользуюсь :)

[dimaniko.livejournal.com]

И да, если вам нужен результат поскорее - сверстайте таблицей, послушайте Павла.

Если же у вас исследовательский интерес, то, кроме доктайпа вам понадобится знание про hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html), много-много времени и нервов и вот такая футболка:

http://dimaniko.livejournal.com/55944.html

[avva.livejournal.com]

про hasLayout знаю. Футболка отличная :-)

[http://users.livejournal.com/_1313/]

мне кажется, что с флоатами было бы проще и надёжней. если я не ошибаюсь, шестой ие не умеет inline-block.

[ki-zu.livejournal.com]

У шестого всё так же как и у седьмого с этим делом. Т.е. если после inline-block в ие переопределять просто inline всё волшебным образом работает.

Но да, для лейаута лучше флоаты обычно.

[ak-47.livejournal.com]

Как это сделать? Можно таблицу, но таблицу я заранее не хотел.

Удивительно что ещё никто не запостил этот линк: http://giveupandusetables.com/
:)

[irablondinochka.livejournal.com]

30% (http://www.infomedicina.ru/)пользователей (http://www.serdcabol.ru/)это как-то очень много?