специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-2

[задача.]

При наполнении сайта клиент регулярно копирует данные из Microsoft Word, не убирая стилизацию, оставленную оным. Что становится весьма критично, когда объем текста значительно превышает отведенную для него область.

[решение.]

Решается данная проблема тремя способами.

1 Делается попытка объяснить клиенту, как надо наполнять сайт и, возможно, написать скрипт, который обрезает стилизацию, оставленную Word (такие скрипты есть в составе FckEditor, TinyEditor и многих других онлайн-редакторов).

2 Делается попытка путем прописывания наследования html-тегов стилизовать контент, находящийся внутри блока.

3 Используется свойство overflow со значением hidden, код в этом случае выглядит следующим образом:

ЛИСТИНГ

<div class=”content”>

<div style=”width: 200px; overflow: hidden;”>

User content

</div>

</div>

Все, что по своей ширине не помещается в отведенную область, просто скрывается за ее пределами. Метод весьма варварский, но иногда единственно верный.

[задача.]

Сделать так, чтобы шрифт был одинаковым во всех браузерах: Opera 7, Netscape 6, Intenet Explorer 6, Intenet Explorer 5, Opera 6.

[решение.]

Для первых трех браузеров размер шрифта — small. Но IE5 и Opera 6 отображают его на размер больше, и для них надо выставить x-small. Подставить x-small для IE5 проблем нет, но с Opera 6 придется поковыряться. Код выглядит следующим образом:

ЛИСТИНГ

#myDiv {

font-size:small;

}

/*Хак для IE5, шрифт на размер меньше. Он не понимает slashed */

* html #myDiv

{

font-size: x-small;

f\ont-size: small;

}

/*Хак для Opera 6, ей тоже надо на размер меньше*/

html>body #myDiv {

font-size:x-small;

}

/*Для оставшихся нормальных браузеров, Opera 6 не понимает эту конструкцию*/

head:first-child+body #myDiv {

font-size:small;

}

[задача.]

За счет того, что разные браузеры часто имеют разную DOM-модель, иногда возникает необходимость скрыть какую-то стилизацию от разных браузеров.

[решение.]

Данная задача, как правило, решается путем «обмана» браузеров. Практически каждый браузер не понимает различные конструкции в CSS (при этом другой браузер понимает их легко). А если учесть, что свойства можно переопределять по нескольку раз, значит таким же образом можно определить одно и тоже свойство для каждого браузера.

Воспользуемся примерами из предыдущего совета:

ЛИСТИНГ

* html #myDiv

{

font-size: x-small;

f\ont-size: small;

}

В данном случае IE5 просто пропустит конструкцию с использованием слэша и не переопределит стиль. То же самое происходит с Opera 6:

ЛИСТИНГ

head:first-child+body #myDiv {

font-size:small;

}

Кстати, первый пример применим не только к IE 5, но и к Firefox. А следующий будут воспринимать все IE:

ЛИСТИНГ

body {

background-color: #FF0000;

_background-color: #FFFFFF;

}

Для IE можно использовать в HTML conditional comments. Вообще надо понимать, что многие вещи приходится делать в HTML, хотя конечной целью все равно является CSS.

ЛИСТИНГ

<!–[if IE]>

<style>

...

</style>

<![endif]–>

Возможно, эта конструкция и портит настроение любителям чистого кода, но «на войне все способы хороши». Как вариант, можно на замену привести следующую не самую универсальную конструкцию, которая ставится в CSS. Эта конструкция работает только в IE 5 под Windows.