Блог на HTML5
16 Июня, 2009XHTML/CSS, веб стандарты, Общие
Это было так просто, что я не удержался. Новые таги такие миленькие! ;-)
Доктайп и новые таги
На самом деле больше ничего и не изменилось. Ну, кроме, соответствующих изменений в CSS блога.
Доктайп не может не радовать, тем что его впервые в жизни можно выучить наизусть (невалидные не предлагать, я приличный верстальщик):
- <!DOCTYPE html>
Класс, да? =)
В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.
Самые приятные новые таги будут: <header>,<footer>,<nav>,<article> — говорят сами за себя.
<aside> — вторичный контент, то, что обычно в сайдбаре.
<section> — какой-то смысловой раздел документа.
Собственно переход
Все очень просто, если у меня в коде было:
- <!‐‐ BEGIN .hentry ‐‐>
- <div class=’hentry’>
- content
- </div>
- <!‐‐ END .hentry ‐‐>
То стало:
- <article class=’hentry’>
- content
- </article>
И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article.
Таким же образом боковая колонка:
- <!‐‐ BEGIN .secondary ‐‐>
- <div class=’secondary’>
- боковая колонка
- </div>
- <!‐‐ END .secondary ‐‐>
превращается в:
- <aside>
- боковая колонка
- </aside>
И если все показать целиком:
Новые таги
Их же можно увидеть если сделать View Source на этой страничке сейчас.
Есть в этом какая-то красота :).
На самом деле оставшиеся классы и айди почти полностью мог бы заменить суперсемантичный атрибут role, но атрибутивные селекторы пока не всем доступны. А было бы красиво:
- <section role=”maincontent”>
А в CSS:
- section[role=maincontent] {
- bla:bla;
- }
Код почти читается.
Оговорки в использовании
IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <acronym>):
- <!‐‐[if IE]>
- <script>
- document.createElement(‘header’);
- document.createElement(‘footer’);
- document.createElement(‘section’);
- document.createElement(‘aside’);
- document.createElement(‘nav’);
- document.createElement(‘article’);
- </script>
- <![endif]‐‐>
Это все новые таги, которые я использовал для блога.
Вторым нюансом является то, что эти элементы во всех браузерах по умолчанию будут инлайновыми. То есть вам придется написать в CSS что-то вроде:
- header, nav, article, footer,section {
- display:block;
- }
С этим можно жить.
Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпом application/xhtml+xml. Но я голосую за вариант: «Наплевать».
Сладкое
В HTML5 добавили таги <video> и <audio>:
- <video src=’xxx.yyy’ autoplay controls>
- <a href=”xxx.yyy”>Download this video (или другой альтернативный контент, если видео на загрузится)</a>
- </video>
Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:
В Сафари, не очень красивые дефолтовые контролы
В Firefox 3.5b
Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам понадобится даунгрейдиться до 9.52. Спасибо @pepelsbey из Оперы за разъяснения ;)
Однако, вот так выглядит там проигрывание видео:
В Opera 9.52, на иконку «Пауза» я навел курсор.
Во всех браузерах контролы исчезают когда курсор не на видео.
Оценивать красоту пока бессмысленно, мы все просто играем с новым понятием. Но я решил что будет интересно посмотреть, как это выглядит сейчас. В любом случае с помощью несложного javascript можно создать свои собственные элементы управления, любого внешнего вида. В этом, собственно, и преимущество того, что видео доверили браузерам.
О том как использовать HTML5-видео уже сейчас читайте дальше.
Ссылки
Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;)
На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.
- HTML5 Editor’s Draft — главная информация что есть на данный момент об HTML5
- HTML5 на YouTube и на сайте компании Apple
- Про использование html5-video уже сейчас
- HTML 5 elements test (и пример странички)
- Structural Tags in HTML5 от Steve Smith
- Поддержка всяких модных фич в браузерах
- Экспериментальный HTML5-валидатор да и обычный уже тоже проверяет HTML5
- Статья про HTML5 на A List Apart
- Готов ли HTML5?
Если с переходом на HTML5 что-то поломалось, я буду рад это услышать! Уж больно гладко все. Я даже прошел валидацию.
И, да, это все пока лишь эксперименты. Не для серьезного использования, конечно.
Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)
красавчик! :)
а с валидацией что на данный момент?..
<sarcasm />?
Интересный пост. В опере, вроде, все в порядке.
@Кир: валидацию успешно прохожу и вот так ;)
И, кстати Кир, я восхищен вашим подходом к верстке.
@Ghost Bear: Спасибо!
хоть таг <sarcasm> и не ввели, зато есть <ruby>, ROR программистам понравится HTML5
Ну так у нас css2 всё ещё в кандидатах ходит))
А вот что касается изначальной инлайновости новых структурных элементов — это бред какой-то. Внутри ведь по-любому будут элементы блочного уровня. Зачем… Нет, даже нафига так делать-то?..
А я не буду смотреть в другие браузеры, просматриваю в лисе. Просто я начну верстать обновлённый дизайн своего блога на html5. Akella, thnx за “пинок” ;)
@Михаил: я сам удивлялся :) но, возможно причина в том, что эти таги просто не «заведены» в броузерах, а все «выдуманные» по дефолту инлайновые. Вот когда стандарт разовьется, им присвоят какие-то дефолтовые стили.
@cinic: Но все же нужно помнить что стандарт не завершен, и это все экспериментирование и игры :), А так: буду рад увидеть еще один сайт на HTML5 =)
Все равно боюсь 22го года…
Однако почитаем-с…
Все правильно, если мы не можем повлиять на сами стандарты, то можно попытаться хотябы приблизить их принятие. Когда дойдут руки до домашней странички — обязательно посмотрю в сторону пятерки.
>буду рад увидеть еще один сайт на HTML5
Полгода как там, правда из всех нововведений HTML5 пользуюсь только доктайпом и валидностью закрытых тегов <link />б <br /> (их WP вставляет, править его желания нет, а XHTML не моя религия).
Класс!
Только в Safari Version 4.0 (5530.17) for MacOS у картинок в посте нет левого отступа.
Упс!
Странно — отправил комментарий и отступ появился…
Статья понравилась. Пишите ещё про ваши эксперименты с HTML5. =)
Я вот буквально сегодня решил посмотреть проходят ли валидацию сайты разных производителей браузеров. И обалдел от доктайпа увиденного здесь: http://validator.w3.org/check?uri=http://www.apple.com/safari/
А потом зашел сюда и понял, что окончательно отстал :)) Просто я, лично, был на 100% уверен, что HTML5 в потенциальной яме (ну приблезительно как СSS3). Оказалось, что все намного лучше. Буду пытаться пользоваться. Большое спасибо.
P.S. Вот еще в РСС-ах нашел: http://html5gallery.com/ :)
Спасибо за интересную статью, но “таги” заставляет нервно передёрнуться
Когда же стандарт станет таки стандартом… Ведь с ним всё становится так логично и понятно, эх. Спасибо за наглядную демонстрацию :)
PS. а css3 в полной мере никто не покажет?
полная ерунда. это всё лишнее усложнение. тем более сейчас, когда это не стандарт и ие6 правит миром. увы, вероятно, 22 всё-таки придется подождать
Так, мені незрозуміло. То то ти переінвентнув інтернет вчора, чи хто? Увесь той галас через якесь «відєо»? Вони років зо десять так і не домовились як встроїти нестандартний контент, а тепер що? Домовляться? Буде вам якийсь «відєо-жаст-фо-інтернет-експлорер» тег, що ви його вимушені будете хакати!
> Тим, щодо вашого транскрипто-нацизма. У слові середня літера читається як æ, тож у звичній для одних, як то англійців. манері воно буде майже через «а», але на зразок «тег», але у інших майже через «е», але на зразок «таг». Я вважаю, що якщо вас тіпає через літеру у вірнонаписаному слові, то вам треба нерви підлікувати, бо це ж не діло.
Юра, ти хоч і фігню пишеш, але не звертай уваги на коментарії не по суті. Щось розвелось багатенько російсько-мовних поборників незрозуміло звідки взятої транскрипції у якості єдиної вірної. Краще напиши щось цікаве вже нарешті, скільки можна? Ти можеш втратити читача!!!
Похоже скрипты не помогают в ie . Смотрел в 6,7.
А вообще, очень классно, только еще года 2 как минимум пользоваться этим смысла нет, доля 6го, 7го ie очень велика. :(
Это все прекрасно работает в ИЕ, так что не стоит по этому поводу беспокоиться.
Просто я там кавычку случайно поставил неправильную, и джаваскрипт поломался. Уже все ок. ;-)
CSS3 еще интереснее, может в каком-то посте их вместе совмещу, чтобы увидеть как все красиво будет через 10 лет )
Спасибо за линк FruJo!
@DenisX: а в чем усложнение? Что таги более понятные? или доктайп короче стал? =) И в ИЕ6 оно работает, и на сайте apple оно сейчас работает. Но если внимательно присмотреться, я все равно много раз оговорился что это эксперименты. ;)
Теперь, действительно всё ОК. Спасибо! Будем внедрять ;)
Да я прекрасно понимаю что этот стандарт не завершён. НО экспериментировать надо! Поэтому, постараюсь поскорее ;)
Юрий, экспериментируй и дальше. Всё это помогает узнать больше о HTML5.
Очевидно, что коммерческие проекты сейчас трогать не надо. На сегодняшний день логика диктует верстать в HTML 4.01
type=’text/javascript’ можно везде убрать. И type=”text/css” тоже.
А вот страница с комментариями валидацию не проходит, но глюк, насколько я понял, правится за минуту:
Line 488, Column 76: Bad value 100% for attribute cols on element textarea: Expected a digit but saw % instead.
…ment” cols=”100%” rows=”10″ tabindex=”5″>
Спасибо Виталий и Михаил! Все поправил и поудалял, теперь еще чище :) Если бы не эти архивы блога за 5 лет, хед был бы еще красивее)
@Никита: согласен, все последние проекты сам верстаю в HTML 4.01 Strict
Я теж думав, що htm5 це далеке майбутнє, а воно вже зовсім поруч. Дякую за статтю.
низнаю, низнаю. я больше приверженец xhtml2, т.к. люблю более строгие правила и хороший код, а не tag soup, который как раз таки породил html4, ибо с xml такого быдлокодинга бы не прошло в массы.
странно что audio, video не внедряет IE, ибо изначально эта штука всё же нацелена на коммерцию, хотя политику умом IE врятли можно понять :)
насчёт стилей новых тегов — изначально браузер их не держит (поэтому у них нет вообще никаких стилей, кроме тегов audio, video) и они никак не описаны и чёрт его знает как DOM себя поведёт, если с ними манипулировать.
на сегодняшний момент гараздо оправдоней внедрение css3, нежели новые теги, которые по сути не так уж нужны
кстати, с этим доктайпом IE переходит в quirks mode? если да, то не очень то хорошо..
Не переходит.
Вот, я знаю что все это знают, но я должен это произнести. Если бы правила были такими строгими с самого начала, интернет наверное был бы другим, и не уверен что лучше для пользователей ;)
А xhtml вроде бы полумертв (судя по вниманию разработчиков браузеров к нему), да здравствует html5 =)
уж очень режет глаз ТАГ, даже сейчас пишу – “тег” не подчеркивается проверкой орфографии.
через жопу решение, уж извините, лучше 100% поддерживаемый xhtml нежели на 80 html5, потом какой нибудь заказчик на готовом проекте вытрахает весь моск.
не Юрко, то мені уся така честь, що на честь мене назвалися? Отак! Якщо ріже очі, то не читайте. Людина зробила нормальну чоловічу транслітерацію, враховуючи транскрипцію. Я, хоч і вважаю, що автор цього блоґу неправий майжу в усьому, навіть цей пост ніякий, але до «таґа» ви даремно причепилися. Я й сам пишу «тег», але це не значить, що людина не може писати інакше.
Знайшли чим хизуватися — спелчекер. Людині, що вказує як писати слова, спелчекер не потрібен!
Юрий, поздравляю с апгрейдом блога и большое спасибо за наглядную демонстрацию работы с новыми экспериментальными тегами! И, если не ошибаюсь, насчет 2022-го народ уже успокоили — CR уже в следующем году?
не Юрко,
Оно-то, может, и лучше, да вот только нет у XHTML 100%-й поддержки браузерами (IE вообще не поддерживает его родной медиа-тип). По факту HTML5 поддерживается лучше, т.к. сам стандарт писан с реальности (парсинг в реальных браузерах, уже сейчас работающие фичи типа autocomplete и т.п.). К тому же HTML5 полностью обратно совместим как с HTML4.01, так и с XHTML1.x, и в этом его сила :).
В общем, ура прогрессу и этому блогу! :)
Классно, и главное это уже работает в Опере
В данный момент невалидно ;) Затея прикольная, но особого смысла нет. А с 2022 – это вообще хохма, конечно. Может быть уже человечества не будет. Планы о html-5 на 2022, надо же.
@akella:
> И, кстати Кир, я восхищен вашим подходом к верстке.
надеюсь, в хорошем смысле?.. :)
@all
http://www.whatwg.org/specs/web-apps/current-work/#html-vs-xhtml
“When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an “XHTML5″ document.”
пускай xhtml 2 и на последнем издыхании. черновик, указанный выше, вполне вписывается в мои религиозные воззрения :) фиолетово, xhtml 2, xhtml 5 или boobs 9, лишь бы xml.
любителям нынешнего xhtml и “строгости стандартов” – многие из вас сервят страницы как application/xhtml+xml? грошь цена тому доктайпу, если по конкретному итогу всё равно получаем невалидную html 4 кашу из tag soup, которую к сожалению хавают браузеры.
“грошь цена тому доктайпу, если по конкретному итогу всё равно получаем невалидную html 4″
это лишь отголоски html4, ибо изначально в sgml был ахтунг, оттуда всё и пошло, поехало ака “пишу как хочу”. а если делать всё по принципу xml, то как правило проблем не возникает.
@Тормоз: Это wordpress что-то намудрил в комментариях с тагами, оно бы и в xhtml было невалидным, так что это нормально :) Но 2022 ждать не надо уже в следующем году у спецификации будет статус достаточный для нормального внедрения. 2022 формальность, к тому времени уже он никому не будет интересен.
@Кир: конечно в хорошем :) Вы в высшей степени аккуратны.
С xml другая проблема: сайты с невалидной версткой вообще не отображаются. Это не устраивает ни большинство разработчиков сайтов, ни браузеров ни пользователей :).
дык никто не будет ждать 22 года, css2 вот до сих пор не стандарт, но давно уже стал де-факто (css3 тоже внедряют несколько лет по немногоу), ибо время не ждёт, а развиваться нужно.
“С xml другая проблема: сайты с невалидной версткой вообще не отображаются.”
ну а что мешает сделать правильно? :) почему если в css не закрыть скобку, то он едит, а html всё прощает? да это проще, у каждого есть свой хомяк, каждому есть, что сказать и показать, но основа от этого начинает гнить
css3 тоже еще не стандарт, так же как и html5. Просто дату html5 незаслуженно распиарили, хотя цсс3 будет тоже готов еще нескоро. Так что все это ягоды с одного поля :) Главное что более менее активно браузеры их стали внедрять.
xml строже, но в условиях веба, слишком ресурсоемко контролировать постоянную строгую валидность, при том что в случае ошибки сайт будет недоступен. Неоправданно большая цена, браузеры на это не пойдут. Потому что в первую очередь негатив за это упадет на них: «Мой фаерфокс постоянно ломается на некоторых сайтах». Вот так это будет выглядеть.
Да, к сожалению, именно так. Одно время Opera многим не нравилась именно потому что нормально отображала только правильный код. Причём, 99% пользователей вообще не задумываются о том, кто виноват… да и не должны они думать об этом.
Замкнутый круг выходит?
Правда, Opera и валидный код тогда частенько коряво отображала :)
P.S. Раз уж затронули эту тему, tag soup, валидность и прочее… хочу ещё поругаться на гигантов. Вот почему они не чувствуют своей ответственности? Процент хорошего кода в сети был бы намного выше, если бы Яндекс, Google и тот же Лебедев хоть какое-то внимание обращали на стандарты. На них смотрят, их ставят в пример.
пускай будут html5 и xhtml5, если xml и mime – полностью осознанный выбор кодера, то в чем может быть проблема? разве что в криворуких программистах, так и наровящих при интеграции всё изуродовать какой-нибудь невалидной фигнёй :)
да, при такой строгости при xml-ошибке вместо сайта будет xml же алерт :) лично для меня это спортивный стимул
Кир, для тебя стимул, как для разработчика, а для владельца сайта прямые убытки. Особенно если это интернет-магазин.
отлично понимаю.. :) я всего лишь хотел сказать, что если кодер берётся делать именно правильный xhtml, то это полностью его решение и, конечно же, ответственность. его трудозатраты на обучение программиста “не ломать xml”, его объяснения заказчику и т.д. и т.п.
никто ведь насильно кодить _именно так_ не заставляет, чего вы так набросились на эту тему? :) будет html5, будет счастье, 90% даже знать не будут о всяких application/xhtml+xml.
я просто хочу иметь такую возможность – дело выбора и каких-то личных принципов :)
“Раз уж затронули эту тему, tag soup, валидность и прочее… хочу ещё поругаться на гигантов. … На них смотрят, их ставят в пример.”
лебедев же правильно говорил, — “лучший валидатор это браузер”, потому что красивый, или уж тем более семантичный код, вообще никому не нужен кроме того кто чего писал. все видят то, что в браузере. просто изначально пошли поэтому пути, вот собственно и имеем то, что имеем.
насчёт xml и всяких жёлтых “экранов смерти”. есть масса xml-форматов, например, тот же RSS. и почему-то с момента появления он активно пошёл в массы даже не смотря на свой “строгий синтаксис”. все пользуются и все счастливы. куча сервисов которые парсят тысячи rss-каналов и не знают бед, а вот попробуйте пропарсить среднестатистическую html-страницу (так сказать, почувствуй себя браузером), от части это и побудило к появлению подобного формата.
Ну вот, cr_ наглядно проиллюстрировал влияние гигантов на формирование мнение в целой отрасли. Перепечатку этой нелепости про валидатор-браузер все здесь присутствующие, уверен, видели уже десятки, если не сотни раз.
Попробую объяснить… Может быть я идеалист, конечно, но неужели вам безразлична эта чудовищная энтропия? Вы хотя бы приблизительно представляете масштабы “бедствия”?
Красивый и семантичный код нужен всем разработчикам, просто это понимают не многие. Дело в том, что суммарные затраты ресурсов (времени и усилий) на поддержку (да и создание, даже прежде всего создание) изначально правильного кода и кода “под браузеры” отличаются на порядки. Суть и задумка именно в этом, а не в самоудовлетворении техноэстетов.
я то прекрасно всё понимаю, и все сайты у меня валидные (хотя бы для себя я это делаю). мало того, я за качественные сайты с качественным кодом, и за семантику, и за микроформаты, в конце концов (хотя они и не юзаются нигде пока что) :)
НО! именно упрощение правил и приводит к обратному: там можно не закрывать, а тут можно таблицей, а там вообще чем угодно — вот и получается сумбур в коде, в головах и в вебе в целом.
я же не призываю всех на xml преходить, вовсе нет. благо мы может управлять контентом и способом его выдачи (content-type). просто, именно ужесточение ведёт к стандартизации и отсеивания более менее качественного кода от супового набора :) неужели так сложно закрыть тег, да взять всё в кавычки? ведь алерт говорит именно о вашей ошибке в коде, который “идеален” в html :)
@cr_
Так упрощение — это как раз-таки XML: закрытие элемента — только одноименный закрывающий тег и баста, в отличие от HTML, где P, например, корректно закрывается при открытии любого блочного тега. При этом XML-веллформность (нарушения которой караются желтым экраном смерти) и собственно XHTML-ная валидность (отвечающая за корректность DOM) связаны постольку-поскольку. В итоге в XHTML ленивый верстальщик может запросто напихать в строчный контейнер кучу блочных элементов, и браузеру (он же не валидатор!) придется как-то с этим жить. Тогда как в HTML этого не допустит уже парсер (по крайней мере в идеале) — хотя и ценой собственной тяжеловесности. Но что важнее для надежности работы сайта?
А что касается “можно таблицами” — так ведь до сих пор действительно было можно, при правильном закрытии тегов это валидно (не противоречит формальной грамматике) и в HTML4-, и в XHTML1.x. А вот формальная грамматика HTML5 (она намного сложнее и “умнее”, чем “старые добрые” DTD), по идее, как раз выдаст на это ворнинг — независимо от синтаксиса сериализации…
@Akella, слушай а принцип использования article & section.
То-есть вложенность первого во второе и наоборот, чем ты руководствовался? У меня с англицким не очень классно, так что чтение спецификации особо не порадовало меня.
По поводу XML и недоступности контента, была у меня история:
Сделал сайт, валидный, иксхтмльный, с правильными контент-типами, рабочий везде. Выложил, пошли валом отзывы о нерабочести сайта в фоксах/операх.
Полез разбираться, выяснил что у многих стоял аутпост (любящий заменять всё подряд на [AD]), а кто-то сидел за проксями, режущими всё подряд. И всё, кончились мои эксперементы, потому как содержимое я изменить никак не мог, а резалось именно оно.
@cinic: Вот тут пример глянь и все думаю станет ясно
А для каких браузеров это работает? У меня в Seamonkey всё перекорёжило, некоторый текст нельзя прочитать.
Thanks ;)
@Лёша Работает во всех браузерах, кроме тех, что на движе старого Фаерфокса, в новом seamonkey уже будет работать. А в старом чтобы работало нужно отсылать с контент-тайпом application/xhtml+xml
Уважаемые, разъясните пожалуйста, стоит ли уже сейчас внедрять доступные возможности HTML5?
PS – среди ярой переписки к сожалению ничего толком понять не смог :(
Увлёкся, читаю сейчас статьи про HTML 5 в процессе создания своего первого сайта на HTML 5. Вызывает недоумение, почему разработчики не включили замечательные особенности реализации XHTML 2. Например, href для любого элемента. Те же меню навигации в XHTML 2 получились бы на порядок элегантнее.
А HTML 5 раздувает код, так получается.
Ух ты. Три дня назад, оказывается, объявили, что на XHTML 2 уже можно поставить крест – http://zigzag.habrahabr.ru/blog/63470/ Ну и ладно :)
Сделал небольшой дайджест информации о HTML 5 – http://brokenbrake.biz/2009/07/06/future
P.S. Akella, извини, заспамил тебе всё :)
@bisserof: Можно начать с простого: доктайп. А если сайт не какой-то очень-очень важный, то и таги новые можно уже использовать.
@Тормоз: ну прям выдающийся ;) Вот кстати слова самого Зельдмана про XHTML2 и HTML5. Еще на Design For Masters тоже HTML5, просто без новых тагов, а пока через классы
class="section"и т.д. (правильно же я говорю Евгений?).Интересно, почему отказались от идеи продолжить эволюцию именно вот так, через классы? Микроформаты могли бы решить большинство проблем, а с новыми тегами возникают новые проблемы.
Кстати, вчера осознал всю ущербность вложенных section. Для роботов чудесное решение, а для человека?
Ну в идеале-то использование человеком section сведется к тому, что роботы их будут парсить и производить из них какую-то полезную информацию для человека. Как и микроформаты — они же для роботов скорее, чем для человека.
Или ты про верстальщиков?
в чем же ущербность section? по сути тот же див, только теперь уже для более “семантичной” верстки надо подходить пологичнее, чем просто дивов наляпать, хотя можно и просто наляпать :)
сам уже с две недели всё делаю на хтмл5, вполне неплохо.
2akella, кстати, в связи с обновкой Fx и долгожданной поддержкой font-face, шрифт Myriad Pro смотрится как-то мелко, чуть ли не в кашу :/
@cr_: дело скорее в том что мой хак, стал действовать не только для Сафари, фонт-фейс я не использую. Да и не нужен он вроде тут.
Ну когда же уже винда научится нормально отображать Myriad?! =( Это какой-то заговор.
Нет, это не тот же div. И я вроде бы и не про верстальщиков, т. к. непосредственно содержанием теперь в большинстве случаев управляют из CMS, верно? Авторы материалов обычно не имеют представления о HTML, да и не нужно им это.
Akella, у тебя WP, я не знаю как там точно устроено, но наверняка ты же не расставлял вручную абзацы, они генерировались автоматически. А как генерировать вложенные section, на основе чего? Как это сделать удобным?
У меня TextPattern, там внутри Textile, довольно удобная штука. Но это я просто для примера, мне так проще. Пишу я статью с подзаголовками. Как сейчас?
—
h2. Первый подзаголовок
текст текст
h3. Подзаголовок третьего уровня
снова текст текст
h2. Второй подзаголовок статьи
текст
—
Я к тому, что использование h1-h6 мне видится вполне логичным и при этом очень лёгким и для обработки и для генерации любых оглавлений.
Кто будет мучаться с section? Чтобы использовать их по задумке разработчиков, вышеприведённый пример должен быть таким:
—
(section)
h1. Первый подзаголовок
текст текст
(section)
h1. Подзаголовок третьего уровня
снова текст текст
(/section)(/section)
(section)
h1. Второй подзаголовок статьи
текст
(/section)
—
Кому это кажется удобным?
P.S. Угловые скобки заменил на обычные, чтобы их не съел парсер комментариев.
Они и сами насколько я знаю спорят об этом(точнее почти обо всем =) ), я думаю в том, что касается самого контента: секшнов и не должно быть, они скорее разделения более высокого уровня, и не должны генерироваться пользователем. Заголовочной структуры для контента вполне же хватает.
Section же предполагает что внутри него может быть хедер, футер, и создается, насколько я понимаю, для “ответвления” заголовочной структуры. То есть если хватает h1-h6 (а для обычного ввода пользователя, или поста их хватает) то он и не так нужен. А если уж ты захочешь в посте сделать “подраздел”, то можно просто выделить блок текста с заголовками и нажать кнопку section (когда таковая будет в визуальном редакторе)
Вот смотри как они на w3c описывают:
News items маленько развеяли туман в моей голове.
А ещё я не понимаю, почему практически во всех примерах внутри новых тегов ставят старые. И у тебя… вот почему внутри footer стоит ещё и p, зачем он там?
Это что-то вроде странной традиции (привычки), или именно так правильно?
Я так подумал, может быть все эти новые тэги и не должны быть блочными, даже когда браузеры про них узнают? То есть они вообще не предназначены для влияния на отображение, они носят исключительно семантический смысл.
Опять же не ясно, зачем надо было их внедрять? Использовали бы классы footer, nav и т.п. Много неясного, сумятица какая-то.
Насчет новых тагов думаю дело скорее в том, что они посмотрели на статистику использования классов, и решили ввести новые семантические элементы. Все эти header footer nav section article на самом деле просто входят в топ используемых классов.
Ну, упростить чтобы, что ли.
Нет, блочные они планируются – http://www.w3.org/TR/html5/the-xhtml-syntax.html#display-types
Тогда тем более непонятно, зачем внутри ещё дополнительные p. В общем, в сравнении с нынешними стандартами код раздувается, это не очень приятно.
Так ведь это не упрощает, а наоборот усложняет. И появляются проблемы с обратной совместимостью. Впрочем, глупо тут об этом спорить, конечно. “Там” надо доказывать, а у меня английский ниже плинтуса. Получается, будем есть, что дадут :)
Почему усложняет? Там где эти элементы не были нужны, их и не нужно, можно обойтись классом или другим тагом, а там где они явно выражены и их роль играют всякие div class=”header”, почему бы и не использовать новый таг? Тогда напротив сокращаются лишние классы, и все более читабельней. У меня на блоге кода, например, стало меньше.
А обратная совместимость почему? Все старые таги ведь работают как и раньше. Просто еще и новые.
Вот кстати статистика по классам.
Ты прав. Это я всё под впечатлением section был, похоже, мозги уже не соображают :)
2akella: странно, до 3.5 был ариал, хотя шрифты новые не ставил. а что там за хак такой был?
2Тормоз: что-то мне подсказывает, что вы сами всё усложняете. сделаете как вам удобно или как вам кажется правильней, зачем так замарачиваться.
Вот из этого поста, я использовал 5й способ, а рабочий на данный момент только 4й, я там апдейт написал.
Просто 3й фаерфокс не читал тот хак, а Мириад у тебя видимо был уже давно. А тут вышел новый 3.5, прочел мой хак и подключил Мириад.
Так на новом движке Симанка пока только в альфатестировании, вроде
По идее aside применить к сайдбару будет неправильно т.к. отношения к статье он не имеет. Тут более уместен nav.
Да. Думаю, в aside будет логично помещать тэги (категории, метки, etc).
Думаю он подходит для тех целей о которых говорите вы, так же как и для моих, вот как описывает его w3c
То есть не “относящегося” а “касающегося”, а последние 5 постов вполне касаются любого поста на этом блоге =) Как и полезные ссылки. Твиты разве что под сомнением – но я не склонен выдумывать сложности на ровном месте, все должно быть просто.
Открыл для себя ваш блог. Он чудесен)
Akella, вы можете объяснить как вы так сделали, что при открытии вашего сайта в IE, Java уже включён?
У меня всё время появляется подсказка, хотите ли вы, мол, ключить.
паба-а-а-ам..
http://media2.smashingmagazine.com/wp-content/uploads/images/xhtml2-html5/comic-960px.jpg
[...] Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с [...]
Жаль, очень люблю оперовские браузеры. Может обратиться в оперу, чтобы она включала поддержку во все последующие? А то какая то не полноценная получается опера, не так ли?
http://dl.getdropbox.com/u/157567/cssing.PNG
Ах, да. Хром версии 2
Спасибо! Но это явно что-то с русским мириадом у вас, а не с ХТМЛ5. Попробую отменить мириад для всех тогда уж
Понятно, что не в ХТМЛ5. Видимо, так сошлись звезды, потому что все остальное показывает текст корректно, в том числе и третий хром на другой машине.
В гугловском хроме это работает? (Там даже обычное форматирование таблицей как-то по другому отображается, потому и справшиваю)
искал в яндексе про хтмл5 нашел вас :) Спасибо прояснили немного ситуацию, для реферата информация пригодиться
Если кого-то интересует HTML 5 в серьез:
http://htmlmaster.ru
Материала еще мало, но, например, того, что в справочнике, на русском больше нигде нет.
Хм, теги конечно интересные. Надо будет попробовать с ними пошаманить.
Скажите, а почему сейчас все логотип тегом не добавляют?
Наверное это все же не так сильно распространено, чаще есть header внутри которого или лого, или название сайта текстом или еще что-то. Я лично для лого часто использую заголовочный таг.
А может просто пока не приходило обсуждающим в голову =) или далеко не самая приоритетная идея, что ли. Можно спросить у них напрямую в этой рассылке
Даже с выходом FF 3.5 в стилях по-умолчанию не появилось html-5 тегов.
Роман, я не понял, что Вы говорите про header.
Рюмкин, Вас тоже, что-то Вы путаете впринципе. В стилях тегов никак быть не может, да еще и по умолчанию? Или Вы про стилевые теги? Так зачем они новые?
Их достаточно и так, чтобы при отключенных стилях страница отображалась упорядочено.
Думаю они имеют ввиду то, что по дефолту таги header,footer и прочие сейчас имеют стиль display:inline;, что плохо сочетается с актуальной спецификацией. И в новых браузерах это до сих пор не изменилось.
Да тоже это пришлось не по вкусу.
В любом случае чаще их как блочными прийдется использовать.
На днях в WHATWG буду писать по одному вопросу и это прихвачу.
Вышел 3-ий урок.
Бескопромиссное освещение article и section, и всего с ними прилагающегося.
А чего это див с id=”header” ты оставил, если уж ты решил заменить его на ? смотрится не очень рационально. Либо одно, либо другое.
*на тег header (вырезал, нехороший)
Да, кажется для каких-то стилей было удобнее, и еще что-то связанное с тем что header не мог быть ребенком у body, из-за корявой пока еще спецификации html5. Header это мол не header, а footer тоже не футер, а aside это вам не сайдбар :) Через год они все исправятся или все их будут считать идиотами еще лет десять. ;-)
Akella пишет: “было бы правильно если header не мог быть ребенком у body”
Аkellа, body – тело документа, а не тело каких-то частей документа. Если это принять во внимание все становится на свои места. А вот тега contenter’a, что нет, это да.
Теперь по поводу того, что все новые теги имеют по дефолту уровень и, сответственно, воспроизведение: inline. Просто вопрос с тем “какой уровень кому назначить” отложен разработчиками “на потом”. Во всяком случае я рекомендую “блочить” все теги, что имеют formatCandidate: block в самом начале стилевого файла. Есть все основания пологать, что они в финалке будут блочными.
Пользуясь случаем, рад сообщить, что вышло несколько новых уроков, в том числе про множественные колонки(мульти-колонки).
В оригинале называемые multiple-columns / multi-columns — что при переводе означает одно и тоже.
Не:
а
Тут мы опять возвращаемся к идиотизму создателей стандарта что sidebar это у нас не сайдбар, а header это у нас вроде как не хедер, а “далее следует пространное непрактичное определение термина”
“сейчас header не может быть ребенком у body”
Посмотри, напр. мой сайт, header ребенок у body, проходит валидацию.
Или про что ты?
Значит что-то уже изменили, на момент верстки сайта не пропускал валидатор такое
Ясно
[...] Источник http://cssing.org.ua/2009/06/16/html5-wordpress/ [...]
Я вот тоже решил написать небольшой обзор проблем внедрения HTML5 – может, кому полезно будет. Информация актуальна на май 2010.
Посмотрите внимательно здесь http://tinyurl.com/2cvl7y8
Небольшой сайтик на HTML 5, необычный )))
http://www.qlider.ru
Что скажите? сайт на html 5 мне очень понравился !
Уроки анимации на HTML5 http://dmitry-samohin.ru/programming/html5/da-vertel-ya-vse-na-html5
Оставить комментарий