?

Log in

No account? Create an account
немного о веб-дизайне - Поклонник деепричастий [entries|archive|friends|userinfo]
Anatoly Vorobey

[ website | Website ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| English-language weblog ]

немного о веб-дизайне [янв. 18, 2009|03:41 am]
Anatoly Vorobey
(может быть интересно разве что веб-разработчикам и веб-дизайнерам)

Полдня сегодня еб... простите, игрался с 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:
[User Picture]From: esycat
2009-01-18 03:32 am
А указание доктайпа просто опущено или его не было? Браузеры могут сильно по-разному рисовать в quirks и strict режимах.

Для отладки отступов и всех прочих расстояний и ещё кучи всего в Firefox очень удобно использовать расширение Firebug и ещё Web Developer. WebKit имеет всетроенный аналог.
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 03:59 am
Нет, я как-то не задумывался даже над доктайпом, хотя помню, что это может быть важно. Попробую, спасибо.

(Ответить) (Parent) (Thread)
[User Picture]From: spamsink
2009-01-18 03:35 am
Можно ли объявить таблицу с клетками размером в 1х1 пиксел (или процент), а потом манипулировать colspan и rowspan в свое удовольствие?

Edited at 2009-01-18 03:37 (UTC)
(Ответить) (Thread)
[User Picture]From: esycat
2009-01-18 03:40 am
Расстояние между блоками в Fx/Chrome получается за счёт пробельных символов в коде. Поскольку внешне элементы являются инлайновыми, то пробелы не схлопываются.
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 03:51 am
Ах вот оно что :) огромное спасибо!

Я понимаю так, что они здесь себя правильно ведут, а IE неверно, игнорируя пробельные символы, да?
(Ответить) (Parent) (Thread) (Развернуть)
[User Picture]From: esycat
2009-01-18 03:43 am
Если Вы можете позволить себе не ориентироваться на IE6, то очевидно у задуманной страницы будет весьма ограниченный круг пользователей. Может быть, получится поднять планку сразу до IE8? :-)
(Ответить) (Thread)
[User Picture]From: esycat
2009-01-18 03:49 am
В последнее время от меня по работе поддержка IE практически не требуется, и более опытные специалисты по кросс-браузерности могут поправить, но вроде inline-block пока ещё остерегаются массово использовать. Сейчас повсеместно плавающие элементы и игра на absolute спозиционированных блоках внутри relative.
(Ответить) (Parent) (Thread)
[User Picture]From: eugenem
2009-01-18 04:21 am
http://www.positioniseverything.net/articles/onetruelayout/examples

самый крутой layout что я видел. сам не пользовался, обходился более простыми...
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 09:57 am
Спасибо!
(Ответить) (Parent) (Thread)
[User Picture]From: gaius_julius
2009-01-18 06:40 am
иногда в качестве источников идей и "правильных" примеров очень помогает http://csszengarden.com
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 09:57 am
Спасибо!
(Ответить) (Parent) (Thread)
From: ext_72902
2009-01-18 08:11 am
Когда-то IE7 означало набор жабоскриптов, заставлявших IE6 понимать стандарты правильно. Может быть, этот проект ещё жив.
(Ответить) (Thread)
[User Picture]From: kruzzik
2009-01-18 08:40 am
Рекомендую маленький фреймворк http://www.blueprintcss.org/. Избавляет от необходимости ломать голову над css и писать отдельные стили для IE.
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 09:57 am
Спасибо. Действительно выглядит удобно, но хочется вначале научиться "руками", а там посмотрим.
(Ответить) (Parent) (Thread)
[User Picture]From: emdin
2009-01-18 08:48 am
Пока у меня ни на одном проекте вёрстка слоями себя не оправдывала. Таблицы работают всегда. Хоть это и скучно.
(Ответить) (Thread)
From: oleg_mu
2009-01-19 07:52 pm
Кайф от блочной верстки я лично вкурил, когда делал первый сайт с использованием ООП. При подключении хедеров, фотеров, меню и контентов, таблицы проигрывают.ю А ежели все упрятываешь в контейнеры, тогда проще. Хотя свой гемор, несоменно, присутствует, с ишаком особенно.
(Ответить) (Parent) (Thread)
[User Picture]From: dimaniko
2009-01-18 10:03 am
Анатолий, если у вас еще будут вопросы, выложите файл с примером где-нибудь на сервере и дайте на него ссылку. Тогда ответы на вопросы вы будете получать быстрее и точнее - мы просто будем тыкать в код дев-тулзами, минуя стадию "скопировать, создать файл, открыть локально".
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 10:08 am
Да, звучит логично. Спасибо, может быть, воспользуюсь :)
(Ответить) (Parent) (Thread)
[User Picture]From: dimaniko
2009-01-18 10:15 am
И да, если вам нужен результат поскорее - сверстайте таблицей, послушайте Павла.

Если же у вас исследовательский интерес, то, кроме доктайпа вам понадобится знание про hasLayout, много-много времени и нервов и вот такая футболка:
* html fuck you
http://dimaniko.livejournal.com/55944.html
(Ответить) (Thread)
[User Picture]From: avva
2009-01-18 10:18 am
про hasLayout знаю. Футболка отличная :-)
(Ответить) (Parent) (Thread)
[User Picture]From: _1313
2009-01-18 10:26 am
мне кажется, что с флоатами было бы проще и надёжней. если я не ошибаюсь, шестой ие не умеет inline-block.
(Ответить) (Thread)
[User Picture]From: ki_zu
2009-01-18 12:18 pm
У шестого всё так же как и у седьмого с этим делом. Т.е. если после inline-block в ие переопределять просто inline всё волшебным образом работает.

Но да, для лейаута лучше флоаты обычно.
(Ответить) (Parent) (Thread)
[User Picture]From: ak_47
2009-01-18 06:12 pm
Как это сделать? Можно таблицу, но таблицу я заранее не хотел.
Удивительно что ещё никто не запостил этот линк: http://giveupandusetables.com/
:)
(Ответить) (Thread)
From: irablondinochka
2009-01-18 09:17 pm
30% пользователей это как-то очень много?
(Ответить) (Thread)