Killich's Верстко Hacks

Илья Зайко Зыкин постит свои любимые верстко хаки:

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

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

1.Всегда использовать reset.css

РЕСЕТ - сбрасывает все стандартные CSS всех браузеров и помогает наблюдать более адекваватное поведение элементов.
Первое с чего начинает проф верстальщик - вставляет в CSS ресет.

Короче - смотрите внутринности например Opera.com - там оно есть.
Там вообще очень хорошо поучиться и фиксов много можно найти под ослы

Text

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
{ margin:0; padding:0; border:0; outline:0; font-size: 100.01%; vertical-align:baseline; background:transparent; font-weight:normal; line-height:100%; }
ol, ul { list-style:none; }
table, tr, td { vertical-align:top; border-collapse: collapse; border-spacing: 0; }
a { text-decoration: underline; color:#30306A;}
a:hover { text-decoration: none; }
p { margin:0 0 35px 0; line-height:180%; font-size:10pt; }
.nobr{white-space:nowrap;}
/* reset */

2.Использовать iepngfix.htc
для IE6 - показывает пнгэхи в осле6
Искать тут

Text

Ищите в гугле - абсолютно незаменимая вещь!
// IE5.5+ PNG Alpha Fix v2.0 Alpha 2
// (c) 2004-2008 Angus Turnbull http://www.twinhelix.com

3. использовать csshover3.htc
для IE6 - позволяет применять :hover для дивов

Text

Ищите в гугле - абсолютно незаменимая вещь!
При наведении на слой позволяет к нему применять псевдокласс :hover как у ссылки

4.
Всегда юзать для блоков, дочки которых имеют float

Text

overflow:hidden;
zoom:1;

Если внутри блока находятся блоки со свойством float, то родтельский блок не растягивается под высоту дочерних (даже можно сказать не натягивается на них - эта тема лечит это поведение)
решает абсолютное кол-во проблем ослов!
Однако есть одно ограничение, вы не сможете использовать абсолютное позиционирование выходящее за рамки блока с определением - overflow:hidden; что вполне понятно - блок просто не будет отображаться, т.к. фактически находится вне зоны отображения содержимого блока. Короче - чем объяснять - легче попробовать.

ХАКИ

видит только опера

Text

/* Jast Opera */
html:first-child .afisha .right ul.event_list li{
background:#F00;
}

видит только сафарь

Text

/*safari only*/
html:root* .main .left{width:556px;}

Вообще хороший список хаков под конкретный браузер тут

Text

http://higher.com.ua/article/111/poleznye-css-khaki

Эмуляция псевдоклассов - первый элемент, последний элемент для осла 6
например, нужно сделать список у которого все <li> имеют сверху и снижу рамку, а только верхний и нижней элементы списка этих рамок не имеют.

Во всех нормальных браузерах есть псевдоклассы - первый и последний элемент. У ослов такого нет - нужно в CSS внедрять expression, т.е. JS код, который определяет есть ли предыдущий/последующий элемент списка и соответственно генерит нужный стиль

Text

ul li{
   padding:10px 0 0 0;
   border-top:1px solid #FFF;
   border-bottom:1px solid #dcdcdc;

   border-top: expression(this.previousSibling == null ? '0' : '1px solid #FFF');
   border-bottom: expression(this.nextSibling == null ? '0' : '1px solid #dcdcdc');

   padding-top: expression(this.previousSibling == null ? '0' : '10px');
   padding-bottom: expression(this.nextSibling == null ? '10px' : '0');
}
ul li:first-child{
   padding:0;
   border-top:none;
}
ul li:last-child{
   padding-bottom:10px;
   border-bottom:none;
}

Та же дрянь с псевдоклассами
:before
:after

с их помощью можно принудительно в конец и начало списка принудительно подставлять некоторый контент. Иногда это бывает полезно. Например с картинками откр/закр кавычек в блоках с цитированием.
Что б автоматом подставлять кавычки на уровне CSS есть псевдоклассы :after, :before
Но не работает в Осле. Значит! Лечим осел!

Например подстановка каких то элементов перед и после списка.
Самый неверояный да еще и оптимизированный экспрешн который мне на данный момент попадался

Text

E: expression(this.yes ? '' : (this.yes = true, this.parentNode.innerHTML = 'ЛЮБОЙ КОНТЕНТ ПЕРЕД' + this.parentNode.innerHTML + 'ЛЮБОЙ КОНТЕНТ ПОСЛЕ'));

_________________________________

Эмуляция выравнивания по вертикали внутри блока для гребаных ослов
Если хочешь картинки разной высоты позиционировать в некотором блоке и всегда по середине - самое простое обернуть картинку в inline элемент, например p. Сделать line-height у <p> равным высоте блока, и задать выравнивание строчного элемента vertical-align:middle;

Но Осел - он и есть Осел. Какой бы версии он ни был. Лечим с помощью выражения, которое определяет высоту родителя и смещает <p> так что бы она была посередине блока!

Text

p{
line-height:240px;
vertical-align:middle;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? '0' : (parentNode.offsetHeight - this.offsetHeight)/2 + 'px');
}

____________________________________________

Как сделать блок тянущимся до определенного момента?
А вот так!

Очередная эмуляция для Ослов

Text

.body{
min-width: 990px;
max-width: 1300px;
-width: expression(document.documentElement.clientWidth > 1280? "1280px": document.documentElement.clientWidth < 990? "990px": "auto");
}

______________________________________________

Position FIXED Практика и решение

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

Задача решается очень просто - в CSS есть свойство position: fixed;
Однако в IE это свойство не работает.
Следовательно для него необходимо свойство, которое понять может только IE а все прочие будут игнорировать.

Определяем:

Text

<div class="fixme">
содержимое блока
</div>

Text

.fixme { position: absolute; left: 33%; top: 30%; }
div.fixme {
z-index: 1000;
-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
}
body > div.fixme { position: fixed; top: 30%; left: 33%; }

Начала Браузер видит определение

Text

.fixme { position: absolute; left: 33%; top: 30%; }

После этого переходит к следующему определению

Text

-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) +

Это определение может увидит только IE 6 (именно для этого здесь стоит знак - перед определением top)
Если его убрать, то все браузеры будут отображать блок нормально, а IE 7 будет тупить, т.к. он понимает и expression и top.

во всех остальных браузерах будет выполняться определение

Text

body > div.fixme { position: fixed; top: 30%; left: 33%; }

только IE его не увидит.

Так мы получаем блок в указанном месте сайта.

Text

/* FIXED PATCH */
.fixme { position: absolute; left: 33%; top: 30%; }
div.fixme {
border: 7px solid #CCC;
background: #ECEEED;
z-index: 1000;
width: 400px;
color: #000;
-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
}
body > div.fixme { position: fixed; top: 30%; left: 33%; }
/* FIXED PATCH */

________________________________________________

Почти адекватная эмуляция табличных структур в дивах. Есть небольшие ограничения

Text

/* tab emulation */
.tbl{
width: 100%;
display: table;
}
.contentbody{ display: table-row; }
.column{
display: table-cell;
vertical-align: top;
}
.column,{
display: inline;
vertical-align: top;
zoom: 1;
}
/* tab emulation */

Text

__________________________________________________________________

Охеренный баг Ослов с SELECT элементами которые не имеют z-index

если сверху выводим блок, то селекты как кишки торчат на экране и никогда ничем не перекрываются

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

Text

.fixme iframe {
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
width:400px;
height:100px;
}

только iframe c фильтром filter:mask(); способен перекрыть селекты

	Автор	Тема: Killich's Верстко Hacks (Прочитано 4315 раз)
0 Пользователей и 1 Гость смотрят эту тему.