Як змусити всі браузери правильно розмальовувати розмітку HTML 5
Побіжний огляд елементів HTML 5
Чорновий стандарт HTML 5 описує набір нових семантично значимих елементів описувати стандартного шаблону веб сторінки. Використання елементів, які є “значущими” (тобто описують свій вміст) спрощують читання та організацію коду, а також полегшують завдання для пошукових механізмів і з читання та організації вашого контенту.
Елементи HTML 5, які використовуються у нашому прикладі:
Тільки читання назв елементів вказує на їх призначення. Для цього їх і вигадали!
. Він визначає групу заголовних елементів(
), таким чином ви, наприклад, можете групувати назву посту блогу та підзаголовок разом. Потрібно вважати цей елемент не заголовком сторінки, а заголовком поточної секції.
Крок 1: HTML
Представимо найчастіше використовуваний шаблон - 2 колонки із заголовком і футером:
Такий шаблон зазвичай супроводжується водоспадом елементів
І для завершення потрібно додати кілька простих повідомлень до елементу “main”:
“Чому ми не використовували замість
Наприклад, стиль, який використовується для
Але що відбувається, коли браузер знаходить елемент, який може розпізнати? Певної відповіді на це питання немає. Такий елемент може залишитися без стилю взагалі, може використовуватися стиль за замовчуванням, а може взагалі виводиться на екран. Таким чином, нам потрібно бути повністю впевненими, що будь-який з наших нових елементів матиме стиль CSS:
Тепер ми можемо поводитися з цими елементами як з
Тепер погляньмо на наш шаблон. Код зібраний в єдине ціле та протестований у кількох браузерах. Так шаблон виглядає у Safari 4:
Однак у Internet Explorer 6 виглядбуде таким:
Що не так на малюнку? Однозначне встановлення display: block; CSS вказує браузеру на наші наміри щодо елемента.
На жаль, IE ігнорує елементи, які неможливо розпізнати, незалежно від CSS. Наш контент зміщується ліворуч у батьківському контейнері, начебто елементів HTML 5 немає. Якимось чином нам потрібно змусити IE виводити невідомі елементи та задавати їм відповідні стилі.
Просто використовується виклик document.createElement() для кожного нового не розпізнаного елемента.
Зазвичай виклик даного методу використовується для вставки елемента безпосередньо у відгалуження DOM; іншими словами, існуючий контейнер всередині тега . Ви можете також використовувати його для фіксації невідомого елемента. Однак, цей трюк працює при виклику document.createElement() в тезі без посилань на елемент, що містить!
Remy Sharp написав “Скрипт HTML 5 Enabling”, який робить такий трюк для всіх елементів HTML 5.
Чудово. Internet Explorer 6 тепер зображує код HTML 5 так само, як і Safari 4.
Висновок
Даний урок підготовлений для вас командою сайту.
5 останніх уроків рубрики "HTML та DHTML"
Лайфхак: найкорисніша функція var_export()
При написанні чи налагодження PHP скриптів ми часто користуємося функціями var_dump() і print_r() виведення попередніх даних масив і об'єктів. У цьому пості я хотів би розповісти вам про функцію var_export(), яка може перетворити масив у формат, придатний для PHP коду.
17 безкоштовнихшаблонів адмінок
Безкоштовні шаблони панелей адміністрування.
30 сайтів для скачки безкоштовних шаблонів поштових листів
Створення шаблону для письма не така вже й проста справа. Пропонуємо вам вибірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.
Як здійснити затримку під час натискання клавіші за допомогою jQuery?
Наприклад, у вас є поле пошуку, яке обробляється при кожному натисканні клавіші клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде надіслано за такими фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?
15 нових сайтів для скачування безкоштовних фото
Добірка із 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.