Q-Zma's Burrow » HTML/CSS

Min-width и max-width для Internet Explorer

Q-Zma — Wed, 17 Oct 2007 22:28:06 +0000

Некоторые персонажи в комментариях к записи на схожую тему в одном блоге сетовали на то, что не могут найти в гуглояндексе «универсальное решение для реализации динамической ширины блока с минимальным и максимальным значением». Что ж, попробуем его туда добавить :). Сие есть не что иное как: min-width и max-width для Internet Explorer версий <= 6 (поскольку тварь последней модификации уже понимает эти свойства).

С тем, что dynamic properties (фирменная фича MS, используется для динамических расчётов значений CSS свойств элемента) зло, не могу согласиться. С их помощью можно научить ослика ходить более прямо, путём пририсовывания ему костыликов, причём замаскированных таким образом, что их наличие никак не сказывается на качестве рендерения страницы в других браузерах, а так же на драгоценной, так всеми желаемой, валидности. Именно эту фичу MS мы и будем использовать вкупе с ещё одной фирменной фичей, что звучно сonditional сomments зовётся.

Итааааак, работающий пример:



    
        Title
        
        
        
    
    
        
            
                Vivamus nonummy. Fusce risus. Duis luctus. Mauris tempor.
                Nullam consequat dolor at urna. Donec porttitor lectus ac lacus.
                Pellentesque turpis tortor, bibendum non, dictum id, mollis non,
                nulla. Aenean vehicula dapibus erat. Proin felis lorem, faucibus
                vitae, accumsan sit amet, posuere ut, leo. Nulla enim felis, mattis
                id, laoreet sed, tempus non, neque. Vivamus eu nisl. Ut posuere
                porttitor ante. Cras scelerisque ipsum eget metus. Proin ultricies
                nonummy ipsum. Maecenas dignissim sem at sem. Pellentesque faucibus,
                augue dignissim interdum vulputate, elit massa suscipit orci, vel
                feugiat massa dolor vitae sapien. Aenean porttitor nunc ac
                tellus.

А теперь я попытаюсь объяснить как эта магия работает :). У всех современных браузеров есть несколько режимов отображения страницы, так называемые «standarts compliant mode» (режим совместимости со стандартами) и «quirks mode» (режим обратной совместимости), и наш непарнокопытный друг не является исключением, начиная с версии 6. Подробнее и по-русски о режимах отображения я расскажу в следующих статьях, кому неймётся, тот может изучить довольно подробный материал, собранный, судя по всему, финскими коллегами по цеху, на английском языке. Вкратце: IE версий 5-5.5 всё время работает в режиме обратной совместимости, IE 6-7 только при условии отсутствия DTD, некорректного DTD, наличия XML декларации или простого комментария перед DTD. В разных режимах отображения роль основного элемента, который представляет собой канву для отрисовки всего контента, играют разные элементы. В случае режима обратной совместимости этим элементом является body, а в режиме совместимости со стандартами — элемент html. Для определения в каком именно режиме отображается текущая страница наши друзья индусы придумали интересное свойство document.compatMode, данное свойство появилось в IE6, и оно может принимать следующие значения: "CSS1Compat" и "BackCompat"; из этого следует, что мы можем легко разбить наш expression на две ветки: первая — для IE6-7 в режиме соместимости со стандартами, вторая — для IE всех версий в режиме обратной совместимости. В первой ветке мы используем свойство document.documentElement, которое, начиная с версии IE6 в режиме совместимости со стандартами содержит ссылку на корневой элемент документа, а во втором случае — давно известный нам объект document.body. Подобный тюнинг этого выражения позволяет избежать зависания IE разных версий в разных режимах отображения страницы.

В последующийх статьях я попробую рассказать о режимах отображения страницы в разных браузерах и conditional comments. Спасибо, что дочитали до конца ;).

Обрамляем поплавки не нарушая семантики

Q-Zma — Thu, 26 Apr 2007 18:13:42 +0000

Очень часто приходится использовать поплавки, при этом ещё чаще возникает необходимость обрамления их родительским элементом. В соответствии со спецификацией HTML, блок, вмещающий в себя поплавки, их не обрамляет. Стандартным решением этой проблемы является добавление невидимого элемента после поплавков с установкой свойства clear, однако, это нарушает семантику кода, добавляется какой-то никому нафиг не нужный элемент, который не несёт никакой смысловой нагрузки. Ну и мать его так, не нужен он нам больше. Совсем:

ul.menu {
	display:block;
	list-style:none;
	margin:0;
	padding:0;
}
ul.menu li {
	float:left;
	width:25%;
	text-align:center;
}
ul.menu:after {
	/* для «нормальных» браузеров */
	content:".";
	display:block;
	height:0px;
	font-size:0px;
	line-height:0px;
	overflow:hidden;
	clear:both;
	visibility:hidden;
}
ul.menu {
	height:1%;
}
html>/**/body ul.menu {
	height:auto !important;
}


	One
	Two
	Three
	Four

Те же яйца только в профиль…

Q-Zma — Fri, 15 Dec 2006 05:24:19 +0000

Один мой заказчик попросил погонять его сайт под IE7, скачал я его значить, поставил на вторую тачку, чтобы не засорять и так подыхающий от обилия браузёров мой бедненький тормозящий бук и что же я обнаружил? А обнаружил я следующее: как было это кучей говна так и осталось, только сверху на неё дезодорантом сильно побрызгали, чтобы не воняло так сильно. Похоже что ядро небыло переписано с ноля, а было просто обработано напильником, кое что пофиксили, кое-что добавили, но чуда не произошло :-).

CSS3 селекторы :first-child и :last-child

Q-Zma — Fri, 24 Nov 2006 00:57:26 +0000

Пролог

Всем, кто более или менее имеет отношение к HTML- и XHTML-вёрстке, наверняка известно, что такое CSS-селекторы. В процессе выполнения некоторых задач я столкнулся, как и все, кто относит себя к указанной выше группе, с проблемами совместимости. Пенять на производителей браузеров в случае с селекторами :first-child и :last-child, очевидно, смысла нет, поскольку эти селекторы из стандарта третьей версии, который на данный момент имеет статус чернового варианта. Однако, мы всё же можем использовать их в повседневной деятельности, но потребуются кое-какие финты ушами.

Пример использования

Чаще всего я использую эти селекторы для отображения горизонтальных меню с разделителями с помощью списков, для того, чтобы полностью отделить описание структуры от стиля отображения:

Факты

Единственный браузер, который более или менее нормально поддерживает оба этих селектора — Mozilla Firefox (однако и в этом прекрасном, мною горячо любимом и активно используемом, браузере есть некоторые бока);
В браузерах Opera с 7 по 9 версий картина немного отличается от огненного лиса, :first-child реализован намного «прямее» чем :last-child (что, кстати, довольно странно, какая нахрен разница, казалось бы, селекторы-антонимы, механизм для выяснения является ли элемент первым потомком или последним практически один и тот же).
Про всем известный и самый распространённый браузер я скромно промолчу, матом ругаться не хочется :-) (подробности об этом ниже).

Mozilla Firefox

Ошибки в реализации

Неправильная интерпретация селекторов при условии наличия анонимного бокса непосредственно перед первым либо после последнего дочернего элемента.
Если перед первым дочерним элементом либо после последнего элемента с помощью JavaScript был добавлен ещё один элемент, то браузер так же неправильно определяет первый и последний дочерние элементы.

Opera

Ошибки в реализации

С селектором :first-child картина аналогичная браузеру Mozilla Firefox.
Селектор же :last-child реализован через, ивините уж за просторечие, жопу. Чтобы добиться универсальности лучше всего использовать по максимуму возможности селектора :first-child.

Internet Explorer

Ошибки в реализации

Реализация полностью отсуствует однако ошибки есть, но не в реализации, а в генетическом коде разработчиков этого чудовища ;-).

Универсальное горизонтальное меню с разделителями

Данный пример не претендует на полную универсальность, однако функциональность его была проверена в браузерах Mozilla Firefox 1.0.8, 1.5.0.8, 2.0, Opera 7.54, 8.52, 9.02, Internet Explorer 5.5, 6.

XHTML код (файл test.html)

В виду того, что CSS код для «нормальных» браузеров и для Internet Explorer радикально отличаются, а также по причине того, что CSS код для Internet Explorer не является валидным, рекомендуется использовать альтернативный CSS файл, подключаемый после CSS файла для «нормальных» браузеров с помощью conditional comments.



    
        
        Untitled Document
        
        
    
    
        
            
                First item
            
            
                Second item
            
            
                Third item

CSS код для «нормальных» браузеров (файл test.css)

.nav
{
    list-style:none;
    display:block;
    /*
        свойство overflow имеет такое значение
        для того, чтобы элемент UL вмещал в себя
        поплавки и автоматически увеличивал свои
        размеры, это не влияет на IE
    */
    overflow:hidden;
    border:1px solid blue;
    width:500px;
    margin:0;
    padding:0;
}
.nav li
{
    float:left;
    padding:0 10px;
    border-left:1px solid blue;
    margin:10px 0;
}
.nav li:first-child
{
    border:none;
}

CSS костыли для Internet Explorer (файл test-ie.css)

.nav
{
    /*
        этот финт ушами выполняет ту же функцию, что и
        overflow: hidden; в CSS файле для нормальных
        браузеров, по сути это эмуляция CSS селектора
        :after, в конец списка добавляется невидимый
        элемент высотой в один пиксель, благодаря чему
        элемент UL вмещает в себя поплавки и обрамляет их
    */
    behavior:expression
    (
        !this.after
        ?
        this.after = this.innerHTML =
            this.innerHTML + '.'
        :
        ''
    );
}
.nav li
{
    /*
        а вот этот финт, кстати, является как раз эмуляцией
        селектора :first-child
    */
    border-left:expression
    (
        (this == this.parentNode.firstChild)
        ?
        ('none')
        :
        ('1px solid blue')
    );
    /*
        уменьшаем нижний внешний отступ элементов списка
        на один пиксель, поскольку мы добавили невидимый
        элемент с такой высотой
    */
    margin-bottom:9px;
}
/*
    это стиль невидимого элемента, который
    мы добавили к списку (см. выше)
*/
.nav li.cleaner
{
    clear:left;
    height:1px;
    line-height:1px;
    font-size:1px;
    overflow:hidden;
    visibility:hidden;
    margin:0;
    padding:0;
}

Эпилог

Вот, собственно, и всё, что я хотел рассказать по этому поводу. Надеюсь кому-то это поможет, ибо я, честно говоря, перед тем как всё это узнать потратил немало времени на изучение мегабайтов блогов и разнообразных доков, естественно, данная микростатья не освещает и одного процента того, что я узнал, копаясь в пучинах интернета. Отдельное спасибо хочется сказать Владимиру Токмакову и тебе, уважаемый читатель, если ты, конечно, дочитал до конца ;-).

Update (26.04.2007)

Как оказалось, я немного лажанулся, селектор :first-child присутствует во второй версии стандарта CSS, а :last-child только в третьей, и сразу становится понятно, почему первый реализован в опере прямее :-).

Несколько злых багов IE

Q-Zma — Sat, 14 Jan 2006 12:02:12 +0000

Столкнулся недавно с некоторыми интересными багами в IE.

Всем наверно известно насколько несовершенна и глючна модель CSS-позиционирования IE, но описания этих багов я вроде бы нигде не встречал, хотя целенаправленно таковые и не искал :-).

Вложенное относительное позиционирование

В макете, который я делал, были вложенные блоки с position:relative;, согласно логике блок спозиционированный асолютно (position:absolute;) должен позиционироваться относительно ближайшего родителя, который имеет position:relative;, однако IE почему-то такой логике не следует, а позиционирует блок относительно самого первого родителя, который имеет position:relative;. Побороть этот глюк я так и не смог :-(.

Ускользающие ссылки

Ссылки в абсолютно спозиционированных блоках, фоном которых является загруженное в CSS фильтром AlphaImageLoader PNG-изображение с альфа каналом, кликнуть практически невозможно, потому что они мистическим образом исчезают :-). Этот глюк тоже побороть не удалось.

Постскриптум

Кстати, я немного обновил шапочку, зимой навеяло что-то...

И ещё: никого не раздражают мои приземлённые посты на главной странице раджаки? А то я выпадаю немного из общего формата со своими рабочими записками, и мне кажется, что кому-то они могут показаться неинтересными и никчемными. Если есть таковые, кому это не нравится, то я могу из общей ленты свой блог убрать, я понимаю, что формат не тот ;-).

Update

Как оказалось глюк с исчезающими ссылками можно решить как и большинство проблем с помощью присваивания инлайн-блокам ссылок position:relative;. Вот так то, такой вот он загадочный всеми обожаемый и мне ненавистный Internet Explorer...