Кроссбраузерность HTML 5 и CSS 3

selevit · February 5, 2011

Всем доброго времени суток, скажите, возможно ли сделать кроссбраузерной страницу, написанную на HTML 5 с применением CSS 3? Буду благодарен за вразумительный ответ.

Edited February 5, 2011 by selevit

psywalker · February 5, 2011

Можно. Но до определённого уровня всевозможных хаков в IE, благодаря которым можно будет по максимуму задействовать все эти вещи.

selevit · February 5, 2011

psywalker, можно поподробнее?

psywalker · February 5, 2011

psywalker, можно поподробнее?

Можно. В IE далеко не реализована поддержка CSS3 и HTML5, для второго есть библиотека, она маленькая и заставляет в IE работать HTML5, а вот с первым большие проблемы. Некоторые вещи можно заменить хаками, всякими библиотеками и т.д. Такие как пнг-фиксы, закруглённые углы, градиенты, тени, в общем по мелочи, но что-то более реальное не получиться. Поэтому мой ответ - Можно, но с ограниченными возможностями, из-за IE

selevit · February 5, 2011

для второго есть библиотека

она называется html5shiv.js?

может лучше для IE создать отдельный css файл?

и вообще, стоит ли верстать на HTML5 и CSS 3?

Vlad · February 5, 2011

У вас звучит какая-то абстрактная страница. Поэтому ответить можно так: да, можно; нет, нельзя. Используя свойство overflow-x я добьюсь наличия CSS3 и полной кроссбраузерности. Все условия выполнены. Это сейчас во мне математик говорил, который требовал точных формулировок. Как гуманитарий скажу, что добиться результата в большинстве случаев тоже можно, это делается либо с помощью "костылей" либо, как же этот термин звучит... когда на IE забивают, добиваясь только корректной работы, а всякие "красивости" в нем никто не увидит.

sigma77 · February 5, 2011

когда на IE забивают, добиваясь только корректной работы, а всякие "красивости" в нем никто не увидит.

graceful degradation

Но без js полной поддержки css3 и html5 в большинстве случаев не будет.

Использовать, имхо, можно. Если 1) заказчик не против и 2) при отсутствии js страница не расползается.

psywalker · February 5, 2011

она называется html5shiv.js?
может лучше для IE создать отдельный css файл?
и вообще, стоит ли верстать на HTML5 и CSS 3?

Да, это она.

Моё мнение, что пока рано переходить на эти вещи. Вот когда хоты бы не будет ИЕ6-7 и для ИЕ8 придумают хорошую библиотеку поддержки свойств третей спеки, вот тогда другое дело.

Но если есть возможность договориться с заказчиком, то можно использовать прогрессивную вёрстку. Это ту, которая будет поддерживать CSS3 по полной во-всех браузерах, а в ИЕ будет только функционал и прямые углы.

htmlonline · February 5, 2011

У меня свой браузер, который я написал на c#.

Он прекрасно читает и то и другое...

Хотя наверное м html5 еще не встречался...

Можете показать сайт где использован html5?

Vlad · February 5, 2011

http://w3.org на HTML5.

psywalker · February 5, 2011

http://w3.org на HTML5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Можете показать сайт где использован html5?

http://www.zottarella.de/

sigma77 · February 5, 2011

Можно взять любой сайт сверстанный Светой. Отключить js и проверить, как он будет отображаться

htmlonline · February 5, 2011

Блин, не отображает...

А почему так? CSS3 Все нормально, а HTML5

Не показывает...

Vlad · February 5, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.zottarella.de/

Обратно вернули доктайп.

Тогда этот точно на HTML5

http://www.whatwg.org/

swetlana · February 5, 2011

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

Уже как минимум год почти только html5+css3 использую без лишних заморочек. Полёт нормальный.

selevit · February 5, 2011

Оцените пожалуйста корректность верстки

Сделал на HTML 5 и CSS 3.

Edited February 5, 2011 by selevit

htmlonline · February 5, 2011

Обратно вернули доктайп.
Тогда этот точно на HTML5
http://www.whatwg.org/

Не отображает ни то ни другое!

Селевит, ты ведь на c# пишешь или на с++?

selevit · February 5, 2011

Селевит, ты ведь на c# пишешь или на с++?

Что именно?

Edited February 5, 2011 by selevit

htmlonline · February 5, 2011

У меня браузер на с# не читает последнюю версию HTML5...

selevit · February 5, 2011

У меня браузер на с# не читает последнюю версию HTML5...

Я так понял, что твой браузер - это стандартный шаблон MFC в Visual Studio и не строчки кода ты туда не добавил.

В VS, даже 2010 версии применяется шаблон для IE8, а он, как бы не поддерживает HTML 5.

Edited February 5, 2011 by selevit

htmlonline · February 5, 2011

Ну насчет не строчки кода не добавил не соглашусь...

Я добавил туда стартовую страничку свою напмсанную на c# получилось что то вроде вебтопа на укозе, там есть заметки, функция вскрытия кода страницы, и ещескуча всего...

swetlana · February 5, 2011

Оцените пожалуйста корректность верстки
Сделал на HTML 5 и CSS 3.

дивный суп с кучей лишнего.

html5 и css3 сами по себе не делают вёрстку хорошей.

<body>
<div id="wrapper">

а зачем?

почемуне обойтись одним контейнером? Естественным, body.

Зачем лишний див тут?

	<section class="searchForm">
	<form method="get">

то же самое: зачем лишний section? Он не несёт ни грамма смысловой нагрузки.

value="Поиск" onfocus="this.value = '';" onblur="this.value = 'Поиск';"

html5, говорите? А свойство placeholder для кого?

Кстати, кнопка submit в форме всё-таки должна быть.

<span> | </span>

этот мусор зачем?

Кто-то что-то про css3 говорил?

Тогда почему не nav.topNav a:not(:first-child):before { content: "|"; }?

ах, ие6 такого не поймёт…

<section id="topBar">

имелся в виду <header>?

Ан нет, в <header> завёрнута только часть шапы. Странно. Нелогично.

<a href="#delphi" title="Перейти на форум в раздел Delphi"><section id="delphi_img"></section></a>

набор тэгов, не содержащих в себе ничего — это нехорошо.

Валидатор, конечно, не ругается на такую конструкцию (формально по спецификации это допустимо ибо section — элемент инлайновый), но она ужасна и противоестественна.

<section> применяется для раскладки. Этим тэгом выделяется часть страницы, чтобы в ней разместить логически завершённую часть информации.

Размещать его внутри ссылки — это примерно как шубу в трусы заправлять.

	<section id="mainNavBg">
	<nav id="mainNav">

Опять же: зачем? Зачем два контейнера там, где по смыслу нужен один?

Ну и использование id без достаточно увесистых на то причин — нехорошо и бессмысленно.

Верх тут:

<footer id="footer">

Зачем? <footer> — он и есть футер. Он не нуждается ни в каких id. Он один на странице.

	<ul>
		<li>Sergey Levitin © 2010-2011. All rights reserved</li>
	</ul>

Простите, а это список чего?

Или я не понимаю, а в будущем сюда добавятся копирайты соавторов?

Как вы думаете, зачем изобрели html5 с его новыми тэгами (пока умолчим о новом функционале, который в данной странице не использован, да и пока не всегда можно применять на практике), когда всё то же можно сверстать на html4 или xhtml?

Чем к примеру <header> лучше <div id="header">?

Да только тем, что код получается более чистый, красивый и осмысленный.

А в вашем случае эта возможность не использована.

Тогда каков смысл?

————

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

http://swetlanabayer.ru/blog/examples/code-live.ru/

Только прошу не кидаться тапками и тухлыми помидорами, глядя на это чудо в IE. Всё-таки не полноценная работа, а именно набросок за полчаса для общего представления. Там и стили-то частично утянуты у топикстартера без оглядки на здравый смысл. Хотя использование сторонних решений для градиентов в IE заменено на использование штатных возможностей этого браузера.

Edited February 5, 2011 by swetlana

Serlutin · February 5, 2011

<footer> — он и есть футер. Он не нуждается ни в каких id. Он один на странице.

Не согласен. Подвалов может быть сколько угодно. Общий подвал сайта, подвал статьи, да мало ли чего подвал ещё может быть.

swetlana · February 5, 2011

Не согласен. Подвалов может быть сколько угодно. Общий подвал сайта, подвал статьи, да мало ли чего подвал ещё может быть.

В общем случае — да.

В данном частном случае он надолго и уверенно один.

Да даже если предположить, что появятся футеры в статьях, то конструкций типа body > footer или article footer также никто не отменял.

selevit · February 6, 2011

swetlana, спасибо, учел все Ваши замечания, вот HTML код.

<body>
<header>
<section id="topBar">
<span class="welcome">Добро пожаловать, гость</span>
<nav class="topNav">
<a href="index.html" title="На главную">Главная</a>
<a href="#" title="Вход">Вход</a>
<a href="#" title="Зарегистрироваться">Регистрация</a>
</nav>
<form id="searchForm" method="get">
	<input type="text" name="query" size="20" title="Введите текст для поиска" placeholder="Поиск..."/>
	<input type="submit" class="hidden_submit"/>
</form>
</section>
<a href="#delphi" id="delphi_img" title="Перейти на форум в раздел Delphi"></a>
<a href="#cpp" id="cpp_img" title="Перейти на форум в раздел C++"></a>
<a href="index.html" id="logo" title="На главную"></a>
<a href="#java" id="java_img" title="Перейти на форум в раздел Java"></a>
<a href="#pascal" id="pascal_img" title="Перейти на форум в раздел Pascal"></a>
</header>
<nav>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Исходники</a></li>
	<li><a href="#">Софт</a></li>
	<li><a href="#">Форум</a></li>
	<li><a href="#">Правила</a></li>
	<li><a href="#">FAQ</a></li>
</ul>
</nav>
<section id="container">
<article id="content">
</article>
<aside id="sideLeft">
</aside>
<aside id="sideRight">
</aside>
</section>
<footer>
<span>Sergey Levitin © 2010-2011. All rights reserved</span>
</footer>
</body>
</html>

Edited February 6, 2011 by selevit

swetlana · February 6, 2011

Как же учёл, когда все те же ошибки?

<a href="#delphi" id="delphi_img" title="Перейти на форум в раздел Delphi"></a>

Это пустой тэг. Мягко говоря, не комильфо.

В моём примере по ссылке выше показано направление правильного решения.

применение id в данном случае не выглядит таким уж некрасивым, скорее оно тут вполне оправдано, но можно обойтись и без оного. Опять же в примере показано как.

<input type="text" name="query" size="20" title="Введите текст для поиска" placeholder="Поиск..."/>

ну почему type=text? Что за чушь? Это же поле поиска или я чего-то не понимаю?

и зачем size и title?

size служит для задания размера поля ввода, другого назначения у него нет. А размер задаётся в css. Значит здесь это мусор.

title — выводит подсказку при наведении. Пользователь должен сразу понять, что перед ним форма поиска. А после того, как он понял, в столь дурацких подсказках он уже не нуждается. Мусор.

<input type="submit" class="hidden_submit"/>

это как?

кнопка только для того, чтобы она была в коде, но от юзера её скрыть?

Сударь, а вы юзеров вообще видели?

Не сферических юзеров в вакууме, которые описаны в серьёзных научных трудах, а реальных. Тех, которые не знают, что это за кнопка с буквами «enter» у них на клавиатуре.

Именно для этих юзеров и нужна кнопка, в которую можно ткнуть мышом.

<section id="topBar">

эта конструкция исходит из положения, будто первично оформление.

Если решите впоследствии поменять внешний вид, велика вероятность, что не удастся обойтись правкой css, а придётся менять всё целиком и полностью.

Но об этом, конечно, можно говорить сколько угодно. Понимание приходит, когда встречаемся с такой ситуацией в реальности.

<section id="container">

зачем?

какова его смысловая нагрузка?

Очередной раз исключать возможность перекомпоновки?

И, кстати, зачем везде id? Смысла в них, мягко говоря, мало. В данном случае.

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

Опять же в примере по ссылке показано, как можно поступить с теми же колонками. А в реальных проектах всё ещё интереснее.

—--

да, ссылку на пример повторю на всякий случай: http://swetlanabayer.ru/blog/examples/code-live.ru/

Sign In

Кроссбраузерность HTML 5 и CSS 3

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information