Anatoly Vorobey (avva) wrote,
Anatoly Vorobey
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>
Subscribe
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 40 comments