Шаг вперед

8July2008

HTML 5

Posted by Сергей Прогонный under: Documentations; HTML; Web-technologies.

Ранее слышал о разработке стандарта XHTML 2, а сегодня на xpoint-е наткнулся на упоминание HTML5.

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

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

Уверен, HTML5 будет гораздо удобней в работе :) с нетерпением жду его поддержки браузерами.

11April2008

IE vs FireFox

Posted by Сергей Прогонный under: CSS; HTML.

Данная заметка посвящена не баталиям между производителям или отличиям данных браузеров, а тому как эти отличия свести на нет.

Для этого используются так называемые “хаки”.

HTML-хак достаточно простой в использоании

<!--[if lte IE 6]> *видит только IE6 и более ранние версии* <![endif]-->
<!--[if IE 7]> *видит только IE7* <![endif]-->
<!--[if IE 7]><!--> *видит IE7, Firefox и Opera* <!--<![endif]-->

В то же время для остальных браузеров этот код будет выглядеть как обычный комментарий. Комбинации таких хаков позволяют для разных браузеров отобразить разный HTML-код на той же странице.

Использование CSS-хаков позволяет не менять HTML-код для получения требуемого результата. Рассмотрим пример оформления таблицы:

table tr td { background: red; }
table tr > td { background: green; }

В этом случае для IE 6 и более ранних версий ячейка в таблице будет залита красным цветом, а в IE7, Firefox, Opera - зеленым.

По сути записть “tr > td” означает, что данный стиль следуюет применить для всех тегов td являющихся прямым наследником тега tr. Браузеры IE версии 6 и старше не понимают такой записи, потому просто игнорируют ее.

Таким образом чтобы дифференцировать стили для IE и для Firefox нам следует написать необходимый CSS-код для IE6, а далее воспользовавшись этим хаком переопределить необходимые значения для требуемых параметров.

Используем хаки на примере кроссбраузерного каркаса - в IE 6 мы получим две колонки; в IE7, Firefox, Opera - три колонки. Смотреть

3April2008

Кроссбраузерная верстка. Каркас

Posted by Сергей Прогонный under: CSS; HTML.

Один из главных и сложных моментов в верстке - это каркас.

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

По умолчанию считается, что любой сайт должен иметь вертикальную растяжку и фиксированную ширину, если иное не оговорено в требованиях - именно такой вариант я и описываю в данном примере.

Шаг 1. Заготовка, которая послужит нам фундаментом для верстки и может быть применена в любых проектах. Этот шаблон разработан согласно стандарта XHTML 1.0
Смотреть код HTML

Шаг 2. Создаем основные блоки - шапка, подвал и основная часть.
Смотреть код HTML

Шаг 3. Работаем со стилями: в первую очередь желательно обнулить стандартные отступы, т.к. различные браузеры по-разному их интерпретируют. После этого добавляем соответствующие настройки для созданных блоков.
Cмотреть код CSS.

В итоге получаем каркас для сайта с одной колонкой

Шаг 4. Добавляем вторую и третью колонки + соответственно стили к ним.

В результате получаем каркас на две колонки и на три колонки