Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Достичь кросс-браузерной функциональности с HTML5 и CSS3

  1. Листинг 1. html5shim, HTML5-скрипт, поддерживающий Internet Explorer
  2. HTML5
  3. Структурирование страницы
  4. Листинг 2. Базовая структура страницы HTML5
  5. Рисунок 1. Макет страницы HTML5
  6. Листинг 3. Использование табличных значений для отображения
  7. Создание редактируемых областей содержимого
  8. Рисунок 2. Редактируемые области содержимого
  9. Листинг 4. Создание редактируемого HTML-элемента
  10. Отправка сообщений
  11. Листинг 5. Размещение сообщений
  12. Листинг 6. Получение опубликованных сообщений
  13. Листинг 7. Пользовательская функция события
  14. CSS3
  15. Работа с тенями
  16. Рисунок 3. Рендеринг тени с помощью CSS3
  17. Листинг 8. Создание тени в Firefox
  18. Листинг 9. Создание тени в Safari и Chrome
  19. Листинг 10. CSS-фильтры Internet Explorer для создания теней
  20. Создание градиентов
  21. Рисунок 4. Визуализация градиента с помощью CSS3
  22. Листинг 11. Создание градиента в Firefox
  23. Листинг 12. Создание градиента в Safari и Chrome
  24. Листинг 13. Создание градиента в Internet Explorer
  25. Вращающиеся элементы
  26. Рисунок 5. Поворот HTML-элемента с помощью CSS3
  27. Листинг 14. Вращение элемента в Firefox
  28. Листинг 15. Вращение элемента в Safari и Chrome
  29. Листинг 16. Вращение элемента в Internet Explorer
  30. Размер коробки
  31. Листинг 17. Размеры окна в Safari и Chrome
  32. Листинг 18. Размер окна в Firefox
  33. Листинг 19. Размер окна в Internet Explorer
  34. Выделение элементов
  35. Листинг 20. Контур и смещение контура элемента
  36. Работа с псевдоклассами
  37. Листинг 21. Распространенное использование псевдоклассов
  38. Листинг 22. Работа с псевдо-селекторами
  39. Встраивание шрифтов
  40. Рисунок 6. Встраивание шрифтов с помощью CSS3
  41. Листинг 23. Встраивание шрифтов в Internet Explorer
  42. Листинг 24. Встраивание шрифтов в Firefox, Safari и Chrome
  43. Листинг 25. Встраивание шрифтов для всех браузеров и добавление класса для назначения шрифта элементу
  44. Резюме
  45. Загружаемые ресурсы

Изучите новые методы для использования в последних браузерах

Последние версии HTML и CSS предлагают много новых функций. Например, HTML5 включает новые элементы, которые делают веб-страницы более семантическими; теперь вы можете хранить данные в автономном режиме, создавать редактируемые области содержимого, использовать функции перетаскивания и многое другое. С помощью CSS3 вы можете создавать закругленные углы без графики, а также добавлять тени и градиенты. Хотя становится доступно множество интересных новых функций, не все изменения работают в разных браузерах. В этой статье представлены конкретные методы HTML5 и CSS3, которые вы можете использовать прямо сейчас во всех последних версиях основных браузеров, включая Apple Safari, Windows® Internet Explorer®, Mozilla Firefox и Google Chrome.

В частности, некоторые версии Internet Explorer нуждаются в небольшой помощи для распознавания новых элементов HTML5. К счастью, общедоступный файл JavaScript с именем html5shim - скрипт, поддерживающий HTML5 Internet Explorer, - помогает распознавать и стилизовать элементы HTML5, которые не отображаются должным образом. Чтобы включить этот файл JavaScript, просто включите код, показанный в Листинг 1 в блоке <head> вашего HTML-файла выше любого используемого вами CSS.

Листинг 1. html5shim, HTML5-скрипт, поддерживающий Internet Explorer

<! - [if lt IE 9]> <script type = "text / javascript" src = "// html5shim.googlecode.com/svn/trunk/ html5.js"> </ script> <! [endif] - ->

Этот код также запрещает браузерам, которым он не нужен, загружать дополнительный файл, ограничивая загрузку Internet Explorer 8 или более ранней версии. Вы можете узнать больше о библиотеке JavaScript, посетив веб-сайт проекта. (Увидеть похожие темы для ссылки.)

HTML5

В дополнение ко многим новым элементам, введенным в HTML5, его новая функциональность заметна. В этом разделе рассматриваются некоторые новые элементы HTML5 и показано, как создавать редактируемые области содержимого и размещать сообщения между страницами.

Структурирование страницы

Если вы потратили много времени на структурирование веб-сайтов HTML, вы знаете, что многие общие разделы используются неоднократно. Они обычно включают заголовок для логотипа или другой идентифицирующей информации, навигацию по списку разделов веб-сайта и нижний колонтитул с информацией об авторских правах. В предыдущих версиях HTML обычно использовался атрибут id для идентификации этих элементов; например, заголовок может содержаться элементом <div> с идентификатором, установленным в «заголовок», то есть <div id = «заголовок»>.

С HTML5 вы можете использовать новые теги для определения этих конкретных областей без написания дополнительных идентифицирующих атрибутов. Например, используйте новый элемент заголовка вместо <div> с идентификатором заголовка. Это не только более логичный способ кодирования, но также может быть полезным при просмотре веб-страницы другого разработчика, поскольку многие разработчики имеют разные стили кодирования. Конечно, атрибут id по-прежнему полезен во многих ситуациях, но с этими общими элементами он больше не нужен. Перечисление 2 дает пример базовой страницы HTML5 с использованием элементов header, nav, section, article, aside и footer.

Листинг 2. Базовая структура страницы HTML5

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Кросс-браузерный HTML5 и CSS3 </ title> <! - [if lt IE 9]> <script type = "text / javascript" src = "// html5shim.googlecode.com/svn/trunk/ html5.js"> </ script> <! [endif] -> </ head> <body> <header> <nav> <! - Навигация -> </ nav> </ header> <section id = "intro"> <header> <h2> Кроссбраузерный HTML5 и CSS3 </ h2> </ header> <div> Lorem ipsum < / div> </ section> <section id = "content"> <section id = "article"> <article> <header> <h2> заголовок статьи </ h2> <p> Дата публикации <time datetime = "2009- 09-04T16: 31: 24 + 02: 00 "> 4 сентября 2009 г. </ time> </ p> </ header> <div> Пелленентский житель Morbi Tristique Senectus et netus и malesuada Fames ac turpis egestas. </ Div> < h2> Комментарии </ h2> <form id = "comment-form"> <input type = "text" name = "comment" id = "comment" /> <input type = "submit" value = "submit" /> </ form> </ article> </ section> <aside> <h2> О разделе </ h2> <p> Donec eu libero sit amet quam egestas semper. Anean ultricies mi vitae est. Mauris placerat eleifend leo. </ P> </ aside> </ section> <footer> Уведомление об авторских правах </ footer> </ body> </ html>

Каждый элемент достаточно понятен, но следует указать на несколько вещей:

  • HTML5 имеет только один тип документа: <! Doctype html>.
  • Заголовок, навигация и нижний колонтитул - это именно то, что вы ожидаете.
  • Элемент section можно использовать для определения разделов макета веб-страницы, например статьи или вступления.
  • Вы можете использовать элемент статьи, чтобы идентифицировать отдельный пост в блоге, комментарий и т. Д.
  • Вы можете использовать элемент aside в качестве боковой панели; его основная цель - обернуть содержимое главной страницы.

Чтобы элемент aside отображался рядом с содержимым главной страницы, убедитесь, что ширина каждого элемента соответствует ширине текущей страницы, и расположите элементы. Когда-то плавающие элементы были обычным способом отображения двух элементов рядом друг с другом, но с помощью элементов section и aside вы теперь можете прекратить использование float, введя значения отображения таблицы и ячейки таблицы, как показано на Рисунок 1 ,

Рисунок 1. Макет страницы HTML5
Изучите новые методы для использования в последних браузерах   Последние версии HTML и CSS предлагают много новых функций

Перечисление 2 показано, как настроить раздел содержимого для отображения в виде таблицы, а раздел статей и тег <aside> для отображения в качестве ячейки таблицы. Таким образом, вся структура действует как таблица без всего постороннего кода таблицы и ячеек таблицы, расположенных рядом друг с другом, как столбцы. Перечисление 3 дает пример того, как написать CSS для отображения этих элементов бок о бок.

Листинг 3. Использование табличных значений для отображения

#content {display: table; } #articles {display: table-cell; ширина: 620 пикселей; отступ справа: 20 пикселей; } в сторону {display: table-cell; ширина: 300 пикселей; }

Создание редактируемых областей содержимого

Еще одна интересная особенность HTML5 - ContentEditable. Как Листинг 4 показывает, что любой элемент, который использует атрибут ContentEditable, становится редактируемым. Это означает, что вы можете редактировать любой текст в элементе без необходимости использовать элемент формы. фигура 2 дает пример атрибута ContentEditable в действии.

Рисунок 2. Редактируемые области содержимого

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

Листинг 4. Создание редактируемого HTML-элемента

<div id = "editable" contenteditable = "true"> Пеллентийский житель морби триристик сенектус и нетус и малесуада слава о турции. </ DIV>

Отправка сообщений

Публикация сообщений - это новое дополнение, которое приносит много возможностей. Листинг 5 а также Листинг 6 привести примеры того, как публиковать сообщения с главной веб-страницы в iframe на этой странице.

Листинг 5. Размещение сообщений

<form id = "comment-form"> <input type = "text" name = "comment" id = "comment" /> <input type = "submit" value = "submit" /> <iframe id = "comment- iframe "src =" post-message.html "> </ iframe> </ form> <script type =" text / javascript "src =" assets / js / event.js "> </ script> <script type =" text / javascript "> var win = document.getElementById (" comment-iframe "). contentWindow; addEvent (document.getElementsByTagName ('form') [0], 'submit', function (e) {if (e.preventDefault) e.preventDefault (); win.postMessage (document.getElementById ("comment"). value, "http://studiosedition.com"); // в противном случае установите для свойства returnValue исходного события значение false (IE) e.returnValue = false; return false;}); </ Скрипт>

Функция JavaScript с именем postMessage обрабатывает фактическую публикацию сообщения; Вы используете новое событие с именем message в iframe для извлечения события и связанных свойств.

Листинг 6. Получение опубликованных сообщений

<p id = "post-comment"> </ p> <script type = "text / javascript" src = "assets / js / event.js"> </ script> <script type = "text / javascript"> addEvent (окно, "сообщение", функция (e) {if (e.origin! == "http://studiosedition.com") {document.getElementById ("post-comment"). innerHTML = 'Сообщение от' + e .origin;} else {document.getElementById ("post-comment"). innerHTML = e.origin + ":" + e.data;}}); </ Скрипт>

В этом примере используется пользовательская функция события JavaScript, которая включена в качестве внешнего файла с именем event.js . Листинг 7 показывает этот скрипт.

Листинг 7. Пользовательская функция события

var addEvent = (function () {if (document.addEventListener) {return function (el, type, fn) {if (el && el.nodeName || el === window) {el.addEventListener (type, fn, false );} else if (el && el.length) {for (var i = 0; i & lt; el.length; i ++) {addEvent (el [i], type, fn);}}};} else {return function (el, type, fn) {if (el && el.nodeName || el === window) {el.attachEvent ('on' + type, function () {return fn.call (el, window.event) ;});} else if (el && el.length) {for (var i = 0; i & lt; el.length; i ++) {addEvent (el [i], type, fn);}}};}} ) ();

CSS3

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

Работа с тенями

Тени добавляют измерение к веб-странице; ранее это было возможно только с изображениями. С помощью CSS3 вы можете управлять многими деталями, включая направление, смещение, цвет и размытие тени (показано на Рисунок 3 ). Листинг 8 , Листинг 9 , а также Листинг 10 Приведите примеры различных способов использования CSS для создания тени.

Рисунок 3. Рендеринг тени с помощью CSS3

В Firefox используйте -moz-box-shadow, чтобы применить тень к элементу. Вы можете назначить четыре значения этому свойству.

Листинг 8. Создание тени в Firefox

-moz-box-shadow: 1px 1px 4px # 666;

В Safari и Chrome используйте -webkit-box-shadow, чтобы применить тень к элементу. Вы также можете назначить четыре значения этому свойству.

Листинг 9. Создание тени в Safari и Chrome

-webkit-box-shadow: 1px 1px 4px # 666;

Для теней Safari, Chrome и Firefox доступны четыре свойства:

  • Горизонтальное смещение тени . Номер смещения может быть положительным или отрицательным; если оно отрицательное, смещение отбрасывает тень слева от элемента, а положительное значение отбрасывает тень вправо.
  • Вертикальное смещение . Это смещение также может быть установлено на отрицательное или положительное число. Отрицательное значение отбрасывает тень над элементом, а положительное значение - ниже.
  • Радиус размытия . Более высокие числа увеличивают количество размытия, которое вы видите, в то время как более низкие цифры обостряют тень.
  • Шестнадцатеричный цвет Вы можете установить шестнадцатеричный цвет тени.

CSS отличается при работе с Internet Explorer. Листинг 10 показывает, как создать тень в Internet Explorer, используя фильтры. Первый фильтр предназначен для версий 6 и 7, а второй - для версий 8 и новее.

Листинг 10. CSS-фильтры Internet Explorer для создания теней

фильтр: progid: DXImageTransform.Microsoft.dropshadow (OffX = 0px, OffY = 2px, Color = '# 333333'); -ms-фильтр: "progid: DXImageTransform.Microsoft.dropshadow (OffX = 0px, OffY = 2px, Color = '# 333333')";

Создание градиентов

Многие способы создания градиентов были популяризированы за эти годы; мой фаворит - изображение с градиентом повторения 1px. Рисунок 4 показывает, что в CSS3 этот метод более необходим, так как каждый тип браузера теперь имеет свой собственный способ обработки градиентов (показано в Листинг 11 , Листинг 12 , а также Листинг 13 ).

Рисунок 4. Визуализация градиента с помощью CSS3

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

Листинг 11. Создание градиента в Firefox

фон: -moz-linear-Gradient (вверху, #eaeaea, # 999999);

Пример Safari и Chrome в Листинг 12 результаты выглядят так же, как в примере с Firefox, но написаны по-другому:

  • Первое свойство - это тип, который позволяет установить градиент на линейный или радиальный.
  • Второе и третье свойства - это начальная и конечная точки градиента соответственно.
  • Четвертое и пятое свойства являются начальным и конечным цветами градиента соответственно.
Листинг 12. Создание градиента в Safari и Chrome

background: -webkit-Gradient (линейный, слева вверху, слева внизу, остановка цвета (0, #eaeaea), остановка цвета (1, # 999999));

Internet Explorer требуется фильтр для создания градиента. Фильтр имеет ряд связанных свойств:

  • Включено указывает, включен ли фильтр. (По умолчанию установлено значение True.)
  • EndColor определяет окончательный непрозрачный цвет градиента.
  • EndColorStr определяет окончательный цвет градиента.
  • GradientType определяет ориентацию градиента.
  • StartColor определяет начальный непрозрачный цвет градиента.
  • StartColorStr определяет начальный цвет градиента.

Листинг 13 использует простейшую форму градиентного фильтра, определяя начальный и конечный цвет.

Листинг 13. Создание градиента в Internet Explorer

фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# eaeaea', endColorstr = '# 999999');

Вращающиеся элементы

Иногда обычного горизонтального отображения элемента недостаточно. С введением преобразования теперь вы можете вращать элемент в CSS3 (как показано на Рисунок 5 ). Независимо от того, нужен ли элемент полностью перевернутым на бок или под небольшим углом, чтобы соответствовать вашему дизайну, это возможно во всех браузерах с кодом, показанным в Листинг 14 , Листинг 15 , а также Листинг 16 ,

Рисунок 5. Поворот HTML-элемента с помощью CSS3

Код для поворота элемента прост: просто используйте число и градус, чтобы указать степень. В Firefox используйте -moz-transform для поворота элемента, так как код в Листинг 14 показывает.

Листинг 14. Вращение элемента в Firefox

-moz-преобразование: поворот (-2deg);

В Safari и Chrome используйте -webkit-transform для поворота элемента.

Листинг 15. Вращение элемента в Safari и Chrome

-webkit-преобразование: поворот (-2deg);

У вас есть несколько вариантов при вращении элемента в Internet Explorer. Если первый метод преобразования не работает, вы всегда можете вернуться к фильтрам. Фильтр для поворота элемента в Internet Explorer - это матрица. Хотя это может быть немного сложным в использовании, оно выполняет свою работу, когда это необходимо.

Фильтр Matrix имеет ряд связанных свойств:

  • Dx дает X компонент для линейных преобразований.
  • Dy дает компоненту Y для линейных преобразований.
  • Включено используется для включения фильтра.
  • FilterType используется для установки пикселей преобразованного содержимого.
  • M11 определяет первую строку / первую запись столбца для линейных преобразований.
  • M12 определяет первую запись строки / второго столбца для линейных преобразований.
  • M21 определяет вторую запись строки / первого столбца для линейных преобразований.
  • M22 определяет вторую запись строки / второго столбца для линейных преобразований.
  • SizingMethod используется для определения размера контейнера, соответствующего размеру результата.
Листинг 16. Вращение элемента в Internet Explorer

-ms-преобразование: поворот (-2 градуса); фильтр: progid: DXImageTransform.Microsoft.Matrix (sizingMethod = 'авторазвертка', M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104); -ms-фильтр: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod =", авторазвернуть ")

Размер коробки

Все браузеры используют блочную модель W3C, а с CSS3 вы можете использовать размер блока, чтобы установить способ, которым браузер отображает ширину и высоту элемента. Элемент border-box указывает браузеру использовать фактическую ширину и высоту без учета отступов и границы. Листинг 17 показывает размеры коробки в Safari и Chrome.

Листинг 17. Размеры окна в Safari и Chrome

-webkit-box-sizing: content-box;

В Листинг 18 Обратите внимание, что единственное различие между размерами блоков Safari / Chrome и Firefox заключается в том, что Firefox использует свойство -moz-box-sizing.

Листинг 18. Размер окна в Firefox

-moz-box-sizing: content-box;

Internet Explorer использует свойство -ms-box-sizing, как показано в Листинг 19 ,

Листинг 19. Размер окна в Internet Explorer

-ms-box-sizing: content-box;

По умолчанию для некоторых браузеров им предлагается учитывать отступы и границы при установке ширины элемента, что приводит к уравнению (ширина или высота) + отступы + граница .

Выделение элементов

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

Листинг 20. Контур и смещение контура элемента

контур: 1px пунктирная #cccccc; смещение по контуру: 10 пикселей;

Работа с псевдоклассами

Многие псевдоклассы уже используются; большинство из них обычно связаны с тегами привязки для гиперссылок. Псевдоклассы позволяют добавлять различные состояния в элемент и изменять свойства в зависимости от текущего состояния. Листинг 21 показывает общее использование для псевдоклассов.

Листинг 21. Распространенное использование псевдоклассов

a: ссылка {} a: посетила {} a: hover {} a: active {}

Псевдоселектор, показанный на Листинг 22 создает состояние наведения для редактируемой области содержимого HTML5 и применяет ранее описанный код структуры.

Листинг 22. Работа с псевдо-селекторами

#editable: hover {outline: 1px dotted #cccccc; смещение по контуру: 10 пикселей; }

Встраивание шрифтов

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

Рисунок 6. Встраивание шрифтов с помощью CSS3

Для Internet Explorer вам необходим доступ к формату файла .eot для шрифта, который вы хотите использовать. Листинг 23 показывает, как встроить шрифт, если у вас есть правильный файл шрифта.

Листинг 23. Встраивание шрифтов в Internet Explorer

семейство шрифтов: yanone; src: url ('../ fonts / yanone.eot');

Для Firefox, Safari и Chrome вы можете встраивать шрифты .ttf или .otf. Листинг 24 показывает код для встраивания этих шрифтов для последующего использования на веб-странице.

Листинг 24. Встраивание шрифтов в Firefox, Safari и Chrome

семейство шрифтов: yanone; src: local ('Yanone'), формат url (../ fonts / yanone.ttf) ("TrueType");

Когда у вас есть встроенный шрифт, примените его к фактическому элементу HTML, создав класс по имени семейства шрифтов, которое вы использовали в объявлении @ font-face. Листинг 25 показывает, как использовать этот шрифт в классе, а затем применить его к элементу HTML.

Листинг 25. Встраивание шрифтов для всех браузеров и добавление класса для назначения шрифта элементу

@ font-face {font-family: yanone; src: url ('../ fonts / yanone.eot'); src: local ('Yanone'), формат url (../ fonts / yanone.ttf) ("TrueType"); } .yanone {font-family: yanone, Verdana, Arial, Helvetica, sans-serif; }

Резюме

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

Загружаемые ресурсы

похожие темы

Подпишите меня, чтобы комментировать уведомления