2013-02-26 3 views
3

Хорошо известно, что html5 semantic tags won't degrade gracefully in IE lesser than version 9 without some help in form of conditional javascript snippet. Это означает, что пользователи с IE7 и отключенным javascript увидят что-то уродливое, а не ваше блестящий сайт html5.Можно ли использовать обнаружение браузера на стороне сервера, чтобы обеспечить изящное ухудшение семантических тегов html5 в IE7 и IE8.

Я думал о пути решения, что и придумал следующий подход: на стороне сервера (скажем, в MVC зрения) есть что-то вроде:

OutputHtml5WithFallback("<header>MyHeader</header>", "<div>MyHeader</div>"); 

и иметь браузер нюхают код чтобы выяснить, пришел ли запрос от IE7 или IE8. Если браузер распознается как IE7 или IE8, выход HTML будет

<div>MyHeader</div> 

иначе

<header>MyHeader</header>   

Это, кажется, своего рода подмена доказательство - если браузер прикидывается IE7 он получит html5 разметки без каких-либо элементов html5. Моя самая большая проблема заключается в том, что этот подход может быть обескуражен поисковыми системами (поскольку различные html предоставляются для разных агентов пользователя).

Не могли бы вы указать на другие недостатки, которые мне могут не хватать?

ответ

1

Вам нужно будет внимательно следить за кэшированием прокси-серверов, иначе прокси-сервер может кэшировать вашу страницу IE7 и обслуживать ее в более современных браузерах или кэшировать вашу страницу HTML5 и обслуживать ее в IE7, и ваш сервер никогда не получит возможность предоставить правильная версия.

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

+0

хороший момент, спасибо. Я не думаю, что я отключу кэширование, чтобы иметь возможность обслуживать разную HTML-разметку для IE7. – anikiforov

0

Редактировать: Просмотреть комментарий bfrohs. Вы do все еще должны использовать document.createElement('HTML5ElementName'), чтобы получить правильный стиль в конце концов.

Тем не менее, я не думаю, что длина серверной части для выравнивания HTML5-деградации - хорошая идея. Если кто-то по-прежнему использует IE6/7/8 и по умолчанию отключен JavaScript, подавляющее большинство страниц в Интернете (от Facebook до New York Times) в любом случае не будут функционировать для них .


В HTML, неизвестные элементы (например, <blah>) автоматически считаются встроенными элементами. Для исправления для старых версий IE, вам необходимо установить все новые блочные элементы для display: block;, что это то, что делает CSS:

article,aside,canvas,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section,summary { 
    display:block; 
} 

Это решает 99% проблем компоновки с HTML5 в старых браузерах , (Другие, такие как аудио и видео с элементами управления, могут по-прежнему нуждаться в работе или другом резервном механизме, чтобы быть действительно полезными)

+0

Не могли бы вы объяснить более подробно, как работать только CSS? Веб-страница, на которую вы ссылаетесь, говорит «Включить javascript» в разделе «как использовать». И они используют $ .webshims.polyfill(); для инициализации. – anikiforov

+0

Я обновил свой ответ с небольшим количеством объяснений. –

+0

CSS только будет * не * работать. Старые IE не разбираются одинаково, что приводит к искаженной DOM. См. Http://blog.whatwg.org/supporting-new-elements-in-ie – 0b10011

0

Пока ваш стиль не зависит от новых элементов HTML5, вы можете без проблем просматривать HTML5 в IE7.

Таким образом, вы можете использовать:

<header><div class="header"></div></header> 

Это не очень красиво, но это спасло бы вас от кода на стороне сервера.