HTML-верстка: инструменты и приемы профессиональной front-end разработки

Нежелательные приемы CSS


назад вперед

Здесь я укажу некоторые техники, которые нежелательно использовать.


Behavior в браузере IE 5

Что это? В Internet Explorer 5 была введена технология behavior. Это способ изменения поведения html-элементов, с помощью CSS стилей.

Почему нежелательно использовать? Атрибут behavior поддерживается только браузером Internet Explorer.

Чем заменить? Используйте вместо этой технологии JavaScript или HTML DOM.


Изменения цвета при наведении мыши

В следующем HTML файле содержится элемент <style>, который задает поведение элемента <h1>:

<html>
<head>
<style type="text/css">
h1 { behavior:url(behave.htc); }
</style>
</head>

<body>
<h1>Поводи мышкой надо мной!!!</h1>
</body>
</html>

Содержимое XML документа "behave.htc" показано ниже:

Пример (Только в IE5 и выше)

<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />

<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}

function low_lite()
{
element.style.color='blue';
}
</script>


Симулятор печатаемого текста

В этом примере мы рассмотрим эффект текста, который распечатывается прямо при вас. Следующий HTML файл содержит элемент <style>, задающий поведение элемента с id="typing":

<html>
<head>
<style type="text/css">
#typing
{
behavior:url(behave_typing.htc);
font-family:"courier new";
}
</style>
</head>

<body>
<span id="typing" speed="100">IE5 ввел управление поведением элементов.

Это способ, который добавляет функциональность динамического HTML в обычные веб-сраницы с легкостью CSS.<br /><br />Как работает эта технология?<br />
С помощью XML мы можем обратиться к любому элементу веб-страницы и управлять этим элементом.</p>
</span>
</body>
</html>

XML документ "typing.htc", задающий поведение, содержит следующий код:

Пример(Только в IE5 и выше)

<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />

<script type="text/javascript">
var i,text1,text2,textLength,t;

function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}

function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
  {
  clearInterval(t);
  }
}
</script>

Я не стал делать примеры, поскольку не очень уважаю браузеры IE, тем более не собираюсь изучать их стандарты, отличные от стандартов W3C. Думаю, что для вас не составит труда проверить эти примеры самим.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта