Дрессируем IE

В последнее время появляется все больше и больше скриптов, эмулирующих работу CSS3 правил в IE, и скриптов, создающих элементы и атрибуты HTML5. Я вижу в этом только позитивные моменты:

  • разметка страниц становится более чистой и семантичной
  • отпадает необходимость использовать изображения для теней, закругленных уголков и бордеров
  • inline-валидация форм
  • продвижение веб-стандартов
  • сохранение существующей разметки после того, как использование скриптов будет не нужно

Как вы наверняка знаете, для интернет эксплорера нужно “включить” все новые элементы и атрибуты из HTML5, чтобы работать с ними. Remy Sharp написал скрипт, включающий все элементы HTML5 в IE. Все что нужно, это вызвать скрипт в head‘e, так как IE должен знать о элементе до того, как отрисовать его.

Для эмуляции некоторых CSS3 правил можно использовать CSS3 PIE. На данный момент поддерживаются, либо частично поддерживаются следующие правила:
CSS3 PIE

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient как background image
  • rgba

CSS3 PIE использует Behaviors для эмуляции, что накладывает некоторые ограничения и возможные неудобства:

  • Вы должны будете подключать PIE Behavior в каждом правиле, со свойствами CSS3
    (behavior: url(PIE.htc);)
  • У всех элементов, в которых используется PIE должен быть выставлен position:relative
  • Возможны проблемы с производельностью в интерактивных элементах

В общем, в некоторых случаях PIE будет адекватной заменой существующим “костылям”, а в некоторых — нет.

Удачных опытов!

Разметка. Transitional vs Strict

XHTML Strict

Речь в статье пойдет о такой, казалось бы изжеваной и изъезженой теме, как валидация веб-документа по одной из DTD-схем, которые в свою очередь определяются с помощью DOCTYPE.

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

В последнее время, многие редакторы и CMS’ки автоматически проставляют DOCTYPE для документа, что само по себе является прорывом, но к сожалению этого недостаточно, так как зачастую это именно Transitional схема. Начинающие разработчики не уделяют этому должного внимания, а зачастую вобще не подозревают что у них есть выбор.

Перед тем как перейти к самой сути вопроса давайте вспомним что такое Transitional схема. Она была создана как переходная, для облегчения перехода от HTML3.2 к HTML4, сохраняя унаследованые элементы и атрибуты.

Continue reading

(X)HTML – структура и семантика кода

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок – используйте для него елементы Heading(h1h6), если абзац/параграф – paragraph(p). Если у вас есть список – используйте элементы списков (ul/ol), если вы цитируете – используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду. Continue reading

Блокируем нежелательные HTML-элементы с помощью CSS

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.

В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать “старую, добрую разметку”, ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и “вечный” font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Continue reading

Забыть о target

Гениальный в своей простоте способ заставить ссылку открыться в новом табе/окне, не используя deprecated атрибут target:

< а onclick="return !window.open(this.href)" hrеf="http://www.google.com">

Преимущества этого способа перед обычным open.window(url) в том, что если javascript отключен, то ссылка все равно сработает. Кроме того, ссылка будет проиндексирована поисковиками.

Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.

Поведение браузеров при нажатии Ctrl+Click / Shift+Click:
В IE6 – в обоих случаях новое окно.
В IE7 – в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 – неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera – в обоих случаях новый таб
Safari/Win – в обоих случаях новое окно

При нажатии колесиком мышки ссылка срабатывает как обычно везде, кроме IE6, естественно.

In general, не стоит принуждать посетителей к чему-либо, предпочтительнее дать посетителю знать какого рода сама ссылка (файл [включая тип], внешняя/окно) с помощью иконок, которые можно легко прикрутить с помощью CSS, на пример вот так, тем самым давая ему возможность выбрать самому, где ее открыть.

Верстаем HTML/CSS календарь

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

Готовых скриптов в Сети много, разной степени навороченности и крутизны, но мне нужно было что-то простое и я не хотел использовать javascript, поэтому решил сделать сам. И вот что у меня получилось:

HTML/CSS календарь

Давайте посмотрим как делается симпатичный календарь с помощью HTML/CSS. Continue reading

Подсветка навигации

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

Navigation highlight

Многие вэб-разработчики уделяют этому аспекту юзабилити не достаточно внимания или совсем не уделяют, не смотря на то что существует достаточно много способов для реализации “подсветки”.

Давайте рассмотрим несколько сравнительно не сложных примеров. Continue reading

Выпадающее меню

Пример выпадающего менюСоздание многоуровнего выпадающего меню с помощью CSS, пары строчек Javascript, работающего корректно в Файрфоксе, Опере, Интернет Эксплорере и Сафари кажется вам непосильной задачей? Да ничего подобного!

Давайте развеем это заблуждение.

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

Continue reading

XHTML 2.0

XHTML 2.0 ValidНужда в более строгих или если будет угодно, требовательных версиях HTML возникла во-первых из-за того что сейчас все более часто речь идет не только о создании “формальных” документов для привычных нам компьютеров, но и для всевозможных переносных устройств, таких как коммуникаторы, наладонники и прочих, в которых отсутствует или почти отсутствует возможность подгружать дополнительные ресурсы, которые бы обеспечивали более полную комплексность HTML синтаксиса.
Дополнительной целью более строгих стандартов является ускорение вывода страницы пользователю. Если в случае с HTML, браузер пытается “подстроиться” под код и вывести его максимально корректно в независимости от ошибок, то с XML такое не пройдет. Браузер просто не будет его парсить. Соответственно, user-agent затрачивает время на интерпретацию вольной мысли верстальщика и пока стандарты не ужесточатся на столько, что документы с ошибками просто перестанут отображаться, такая ситуация останется неизменной. А страдает от этого пользователь.
В теории, как только код станет соответсвовать жестким требованиям, браузеры будут затрачивать гораздо меньше времени на его отображение. Все счастливы.
Вот здесь и должен вступить в силу XHTML 2.0, который все еще находится в разработке, в основном из-за того что переход на него будет обозначать отказ от поддержки всех предыдущих стандартов.
Немного о грядущих изменениях:

Continue reading

Правильный DOCTYPE

Что такое DOCTYPE? Это способ указать браузеру, как правильно отображать документ и по какой схеме.

Существует много типов HTML , как то: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict и множество других. DOCTYPE указывает браузеру структуру, элементы и их атрибуты для каждого типа HTML.

Указывание DOCTYPE критично, так как при его отсутствии браузер попытается отрендерить документ так как он считает нужным, а не так как этого хотите вы и/или требуют стандарты. Ни о какой валидации соответственно и речи быть не может. Можно провести часы, пытаясь заставить браузер отобразить то, что вам нужно без DOCTYPE и не добиться успеха.

Continue reading