Блеск и мощь HTML5/CSS3: заглянем в будущее

Веб, как известно, не стоит на месте. Он развивается изо дня в день, и развивается достаточно быстро. И одной из составляющих этого процесса развития является эволюция стандартов.

Существующие на сегодняшний день стандарты front-end-development'а (HTML4, XHTML (даже 1.1), CSS2.1) с каждым днём все меньше соответствуют реалиям современности. Веб-приложения становятся всё динамичнее, интерфейсы - всё сложнее и интерактивнее. Верстальщики и веб-технологи всё чаще вынуждены прибегать ко всяческого рода ухищрениям, хакам, js-извращениям, генерации элементов дизайна на стороне сервера (за примерами далеко ходить не надо - те же закругленные уголки или текст с эффектами). Это не есть гуд, т.к. усложняет процесс разработки, делает архисложной смену дизайна, а в последнем случае - вызывает повышение нагрузки на сервер. Есть, конечно, такие вещи, как кэширование сгенерированных изображений и т. д., но они полностью не решают проблемы.

Новые стандарты разметки (HTML5) и стилей (CSS3) призваны решить хотя бы некоторые из вышеописанных проблем. В первую очередь их приход облегчит создание сложных и нестандартных интерфейсов, кастомизацию стандартных элементов управления и некоторые другие вещи, в последнее время активно применяемые в вебе (фоновая загрузка файлов, плейсхолдер в поле поиска и т.д.).

Что же увидим мы, верстальщики, программисты и разработчики пользовательских интерфейсов, проснувшись в мире новых стандартов? Начнём с HTML5.

Новая версия языка разметки впечатляет с первого взгляда. Она предлагает нам прямо-таки огромное количество разных новшеств.  Некоторые из них бесспорно полезны, полезность других под вопросом, и вокруг них ведутся нешуточные дискуссии, но главное - мы видим поразительное различие между тем, что нас ждёт и тем, что было во времена HTML4. Оно и немудрено - новый стандарт разрабатывался достаточно долго, и у ребят из W3C было достаточно времени, чтобы придумать, чем нас порадовать =).

Что же предлагает новый HTML? В первую очередь это новые теги. Наиболее яркими примерами могут послужить элементы <audio> и <video>, предназначенные, соответственно, для добавления аудио- и видео-контента на страницу и позволяющие в некоторых случаях отказаться от использования Flash, или элемент canvas, позволяющий создавать векторные изображения и , при желании, изменять их на лету (например, скриптом).

Как и следовало ожидать, в сообществе разработчиков разгорелся спор на тему того, что же будет целесообразнее применять - новые HTML-элементы или проверенный временем Flash, который, помимо простого отображения мультимедийного контента, позволяет работать с ним на низком уровне. Имхо, использование новых элементов вполне оправдано в ряде случаев. Если мне нужен крутой плеер с возможностью применения различных эффектов, ускоренного/замедленного воспроизведения etc - тут, естественно, без флеша не обойтись (ну или Silverlight - всё-таки тоже достаточно мощная технология, негоже её обижать =)). А если мне просто нужно вставить звук или видео на страницу, или предоставить такую возможность своим пользователям - так тут новые элементы будут в самый раз. Особенно если я верстальщик, не владеющий флешем, и мне не хочется привлекать к работе флешера и делиться с ним прибылью)). Тем более, что для элементов <audio> и <video> возможно создание кастомных элементов управления.

Кроме элементов, содержащих новую функциональность, HTML5 предлагает также ряд структурных элементов: header, nav, article, aside, footer и т.д. Как видно из названия, они призваны заменить вещи, подобные <div id="header">, <div id="footer"> и т.д. Это якобы сделает разметку более семантичной и облегчить поисковым ботам вычленение полезного содержимого из текста страницы. Тут, естественно, тоже без споров не обошлось: многие разработчики считают полезность новых структурных тегов, мягко говоря, сомнительной. И тут-то я с ними согласен: во-первых, <header> ничем не лучше <div id="header">, во-вторых, у меня может быть нестандартный layout элементов на странице, и таких вещей, как хидер/футер, там вообще не будет. А в-третьих...


http://habrahabr.ru/blogs/webdev/47443/#comment_1218980

есть мнение, что разработчики и будут пихать эти блоки всюду и на весь контент в целях SEO


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

Ещё одна вкусность, которую предлагает новый стандарт - это новый API для работы как с новыми, так и ос старыми элементами. В частности, это API для работы с элементами <audio> , <video> и <canvas>, что позволит создавать аудио/видео плееры с нестандартным интерфейсом и интерактивные графики.

Такой немаловажный аспект в веб-разработке, как работа с формами, тоже не остался без внимания. HTML5 предлагает новые типы полей ввода (date, datetime, local, number, range, email etc), которые, бесспорно, должны упростить разработчику создание сложных форм, а пользователю - ввод разноплановых данных.

Кроме новых полей ввода, появилась ещё такая вещь, как валидация форм. Теперь у элемента ввода достаточно указать, например, атрибут required или required email, чтобы обеспечить проверку данных при отправке формы.

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

Я привел лишь самые яркие и значимые примеры нововведений HTML5. Более подробно об этом стандарте вы сможете прочитать по приведённым в конце статьи ссылкам.

Разобравшись с HTML5, можно потихоньку перейти и к CSS3. Новая версия языка стилей также предлагает нам немало нового, и, что немаловажно, последние версии популярных браузеров многие из этих вещей поддерживают, особенно вездесущие Chrome и Safari.

В первую очередь это, конечно, новые селекторы, с помощью которых теперь гораздо легче получить доступ к нужном элементу на странице, а в некоторых случаях - можно обойтись без использования JS. Те, кто использует фреймворки JQuery, Prototype или ExtJS, уже оценили по достоинству пользу таких вещей, как :nth-child, :disabled, :checked, :first-of-type, :root и т.д.

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

Про первую часть рассказывать особо нечего - это такие свойства, как border-radius (позволяет делать закругленные углы), text-shadow (текст с тенью), box-shadow (тоже тень, но уже для произвольного элемента) и другие. А вот о трансформации и анимации хотелось бы поговорить отдельно. И для этого мы рассмотрим несколько весьма интересных свойств..

TRANSFORM

Свойство transform позволяет применить трансформацию к элементу. Данное свойство может иметь значение none (элемент не трансформируется), либо описывать функцию (функции), которая(ые) применяется(ются) для трансформации объекта. Функций много, все они имеют различные наборы параметров. В качестве примера можно привести функции:


  • translate(x[, y]) - определяет сдвиг элемента по осям х и (если задан второй параметр) у.

  • rotate(x, y) - определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin.


Код для трансформации объекта с использованием этих функций может выглядеть, например, так:
transform:rotate(0deg) translate(0px,0px);

Webkit- и Gecko-based браузеры поддерживают это свойство с использованием специфических префиксов: -webkit-transform и -moz-transform соответственно.

TRANSFORM-ORIGIN

Задаёт центр поворота для объекта. Например,

transform-origin: 50% 0;

То же самое с префиксами в браузерах: -webkit-transform-origin и -moz-transform-origin.

@-KEYFRAMES "ANIMATION NAME".

Cвойство keyframes позволяет нам определить ключевые кадры и время их показа. Например:

@-webkit-keyframes 'bounce' {0 {top: 20px;}
40% {top: 0;}
60% {top: 20px;}
100% {top: 0}
}
#ball:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}

В этом примере мы сначала определяем анимацию, которая перемещает объект на 20 пикселей вниз и возвращает его обратно, а затем применяем её к элементу #ball. При этом используются следующие свойства:

  • animation-name - определяет используемую анимацию

  • animation-duration - задаёт продолжительность анимации

  • animation-iteration-count - задаёт количество повторов анимации. Значение infinite означает, что анимация будет повторяться бесконечно


В конце статьи приведена ссылка на пример использования вышеописанных свойств.

Ещё одно новшество CSS3 - это использование переменных в CSS-коде. Например, вот так:

@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
@variables {
myMargin1: 2em;
}
@variables print {
myMargin1: 2em;
}
.data, div.entry {
margin-left: 30px;
margin-left: var(myMargin1);
}

Вокруг этого нововведения тоже разгорелся нешуточный спор:  одни считают, что переменные нужны для случаев, когда нужно указывать одно и то же значение для многих элементов, другие приводят в качестве контраргумента возможность группировки селекторов с одинаковыми свойствами. А мне показалось единственно правильным вот это мнение:

http://habrahabr.ru/blogs/css/23356/#comment_558851

Переменным — нет, константам — да! 8)

Ибо переменные в прямом смысле этого слова в CSS действительно не нужны, поскольку значение переменной, по сути, задаётся один раз и не меняется. CSS - это всё-таки не язык программирования, как ни крути.

Ну вот, собственно, и всё, что я хотел рассказать о новых стандартах. И на этой мажорной ноте...

Что, думали, всё?) Ан нет. Ибо есть одна бооольшая палка в колесе прогресса, которую просто грех было бы не помянуть там, где используется слово "стандарты". Имя этой злой волшебной палочке, как все уже, наверное, догадались - Internet, прости, господи, Explorer. Если в восьмой версии с горем пополам сделали-таки поддержку HTML4/CSS2.1, то о какой-либо адекватной поддержке HTML5/CSS3 пока что говорить не приходится. И то, что на данный момент слышно о IE9 Preview, отнюдь не радует. Хотя поддержка HTML5 вроде бы как заявлена, но уже точно известно, что не будет поддерживаться тег <video> (видимо, причина в необходимости продвижения Silverlight). С ACID-тестами та же картина, а главное - знакомые девелоперы, которые уже скачали и попробовали этот чудо-браузер, в один голос говорят, что это такое же г..., как и предыдущие версии. В общем, всё сводится к одной фразе :

На презентации Internet Explorer 9 парализованный мальчик встал и вышел.

Вот теперь всё, всем спасибо. Надеюсь, вы смогли почерпнуть из этой статьи что-то новое о новых (сори за тавтологию) стандартах.

Ссылки:

Что нового в HTML5

HTML5: пять вещей, вызывающих особый интерес

Что нового в HTML5 [2]

Internet Explorer 9: первые подробности

Анимированный AT-AT Walker из Звёздных Войн на чистом CSS3

CSS3: аинмация, трансформация, переменные

Свойство CSS3 transform

Свойство CSS3 transform-origin

Следующая запись

Предыдущая запись

Похожие записи

Комментарии

Еще нет комментариев.

Пингбэки

Оповещения открыты.

Трэкбэки

URL архива

Only authorized users can post comments