IE, HTML5, createElement

24th January 2008 - 13:38

HTML5 очень большой упор делает на обратную совместимость. Поэтому такие вещи, как например элемент <dialog>, можно использовать прямо сейчас: они добавляют новую семантику, и новые браузеры могут делать с ними что-то интересное, но и старые браузеры будут показывать что-то вменяемое. Но есть и другие элементы — например новые виды разделов, среди которых <footer>, <header>, <aside> — которые просто тянет использовать, но не получается. В IE6 и IE7 эти элементы неизвестны, браузер их игнорирует. Причем игнорирует настолько, что даже не дает назначить им в CSS ни одного свойства. А это значит, что <header> не получится даже заставить отображаться как блок, он будет вести себя как строчный элемент. Другими словами, использовать этот элемент сейчас можно, только если автору не интересно показывать страницу пользователям IE.

Иван Сагалаев: IE8 и HTML5

Решение есть. Правда, как обычно, через одно место.

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

Sjoerd Visscher

<html>
<head>
<style>
  header, footer, section {
    margin: 20px 0;
    border: 1px solid black;
    display: block;
  }
  article {
    display: block;
    border: 5px solid green;
    margin: 10px;
  }
</style>
<script>
  var el, els = 'header,footer,section,article'.split(',')
  while ((el = els.pop()))
    document.createElement(el)
</script>
</head>
<body>
  <header>
    <h1>...</h1>
  </header>
  
  <section>               
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
  </section>
  
  <footer>
    <p><small>...</small></p>
  </footer>
</body>
</html>

Categories: CSS,dHtml | comments: (0)

Комментарии временно отключены.