Internet Explorer 9. Test Drive

Internet Explorer 9 Сегодня компания Microsoft представила на всеобщее обозрение первую публичную сборку Интернет Эксплорер 9. Собственно это даже не сборка как таковая, а голые рендерный и js-движки. Интерфейс пока что отсутствует, но возможности браузера посмотреть уже можно.

Скачать и установить Internet Explorer 9 Platform Preview можно на специальной странице. На ней же можно посмотреть на демки поддержки HTML5, CSS3 и SVG(!).

Устaнавливать эту сборку можно не опасаясь, она не имеет никакого отношения к Интернет Эксплореру, установленому на вашей системе. Минимальные требования для установки — Windows Vista SP2 и выше. Видимо и с релизом будет так же.

Из интересных вещей стоит отметить высокую скорость рендеринга и поддержку некоторых аспектов CSS3 и HTML5. Поддерживается свойство border-radius и CSS3 селекторы. Поддерживается тег video на http://youtube.com. Фильтры из предыдущих версий IE не поддерживаются.

Поддержка CSS3 пока что на невысоком уровне, по крайней мере если смотреть на http://css3please.com. Более того, замечены глюки с некоторыми свойствами и псевдоклассами из CSS2, например :first-letter. Тем не менее, мне кажется что направление выбрано правильное и результаты не заставят себя ждать. Уже то, что в Microsoft поняли, что цикл разработки продукта не может продолжаться 6 лет, уже о чем-то да говорит.

С одной стороны радостно от того, что все участники “гонки вооружений” скоро обзаведутся современными браузерами, а с другой грустно от того что зоопарк только ширится.

IE 6/7/8/9, Firefox 3.6, Opera 10.5, Safari 4, Chrome 4 – уже 8 браузеров, это не говоря о мобильных. У верстальщиков всегда будет хлеб. С маслом.

CSS-хаки для IE 8

Продолжаем тему Internet Explorer 8. Освоим CSS-хаки:

1. Быстрое решение:

.ie8only { color /***/: #fff9 }

Работает только в Standards Mode

2. Более разумный подход к вопросу:

В файле стилей для IE, подключеном через условный комментарий создаем такую структуру:

html>/**/body #id { property: value; }

Почему именно в отдельном файле? Потому что такую конструкцию прочтут все современные браузеры, включая IE8. Нужно помнить, что в таком случае все остальные хаки, предназначеные для IE6/7, должны быть прописаны через их собственные специфичные хаки (тогда IE8 ничего не заподозрит):

  • IE 6 — * html
  • IE 7 — *+html

IE со льдом, пожалуйста

IE on the rocksНе смотря на то, что в последний год наблюдается постоянная тенденция снижения количества посетителей на сайтах с браузером Internet Explorer 6 и даже принимая во внимание тот факт, что Майкрософт внесла Internet Explorer 8 в список важных обновлений в Windows Update, ни одна компания, уважающая себя и посетителей своих сайтов, а тем более желающая зарабатывать деньги, не откажется от поддержки 6-ого Интернет Эксплорера.

Это детище мелкомягких, срок выдержки которого поболее чем у лучших коньяков, не желает становиться лучше с годами (видимо надо было хранить в дубовых бочках). И нам, веб-разработчикам, приходится с этим мириться. Количество версий Интернет Эксплорера, которые надо поддерживать – растет, и эпопея эта затянулась. Со времени выхода 7-ой и 8-ой версии Интернет Эксплорера появилось несколько утилит, позволяющих тестировать верстку в нескольких версиях IE одновременно.

Вот скромный список вариантов “борьбы” с Интернет Эксплорером:

  • Multiple IE
  • IE Tester
  • IE Collection
  • Виртуальные машины
  • Выйти на пенсию Continue reading

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

XHTML Strict

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

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

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

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

Continue reading

Соломоновы столбцы

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.

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

Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)

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

Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:

<table>
		<caption>Столбцы / колонки:</caption>
		<colgroup>
			<col />
			<col class="alt" />
			<col />
			<col class="alt" />
			<col />
		</colgroup>
		<tr>
			<th>FF2/3</th>
			<th>IE6/7</th>
			<th>Opera</th>
			<th>Safari</th>
			<th>Other</th>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
	</table>

Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.

Вот так выглядит CSS:

table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/*Стиль для столбца*/
col.alt {
background: #ddf;
}

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

Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win)

Список поддерживаемых стилевых правил. Спецификация.

Мысли о разрешении экрана. Год спустя

В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 800х600, что само по себе не удивительно, если взглянуть на статистику. Соответственно, либо сайты оптимизированы под 1024х768 и выше, либо они “резиновые”, что встречается реже.

Ситуация закономерная и соответствует развитию рынка мониторов и стремлениям дизайнеров/разработчиков. Я уже размышлял над этим год назад. Так вот, год спустя мои мысли приобрели немного другое направление.

Количество посетителей сайтов с разрешением 800х600 не только не уменьшится, а увеличится. Связано это напрямую с развитием субноутбуков, кпк, мобильников и прочих переносимых девайсов. Добрая половина субноутбуков уже сейчас имеет разрешение 1024х600, но сайт, оптимизированый под 1024х768, открытый на таком экране, в большинстве случаев будет неудобоваримым так как займет всё окно браузера. А в дизайне, как известно, важны пустоты.

Поэтому я предлагаю перестать игнорировать 800х600 и начать смотреть на этот вопрос под другим углом. Мне кажется разумным:

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

Таким образом, мы убиваем одним выстрелом двух зайцев. У сайта появляется полноценная мобильная версия, и мы заботимся о посетителях с маленьким… разрешением.

Добавление файла стилей для мобильных устройств делается так:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Про корректное оформление мобильной версии сайта можно почитать на старом добром ресурсе A List Apart.

Переключать стили можно с помощью JQuery вот так или так.

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

@Media 2008 Лондон. Отчет. Часть вторая

@Media 2008 лого

Часть первая.

Второй день конференции начался с жестокого похмелья доклада Nate Koechley под названием “Professional Front-End Engeneering”. Как Нэйт и обещал, он толкнул зажигательную речь о Front-End’е и его значении в веб-разработке. Особый упор был сделан на том, что Front-End веб-разработка по сути своей ни чем не отличается от архитектуры и поэтому отношение к ней, со стороны разработчика и его начальства не должно быть другим. Архитектор, проектируя здание, не позволяет себе махнуть рукой на то, что будет с домом через 5—10 лет, проект наполняется чертежами, схемами, документацией и тд. Так почему разработка сайтов должна отличаться?

Он призвал веб-разработчиков не пренебрегать своей работой даже если они убеждены, что проект, который они делают, не важен и не будет развиваться. Веб, как известно, среда динамическая и постоянно расширяющаяся, по сему любой, даже самый маломальский проект может “выстрелить” и его надо будет срочно расширять, дорабатывать и развивать. Соответственно не стоит экономить на документации, комментировании собственного кода, стоит помнить возможности повторного использования элементов интерфейса и возможности для расширения. Continue reading

@Media 2008 Лондон. Отчет. Часть первая

@media 2008 лого

29-30 Мая в Лондоне прошла четвертая конференция для веб-разработчиков @Media. Мне посчастливилось на ней побывать и я, как и обещал, публикую отчет о поездке. Для начала немного общих сведений о конференции:

@Media проводится уже в четвертый раз и обычно это происходит в Сан Франциско, Лондоне и Гонг Конге с промежутком в неделю, в течении месяца. В этом году конференция проводилась только в Лондоне, не смотря на то, что изначально была заявлена и в Сан Франциско. Причина отмены американской части конференции мне не известна.

Ежегодно в конференции принимают участие многие мастистые и известные разработчики и дизайнеры из разных стран. Фактически каждый год конференцию почитают своим присутствием представители Google, Yahoo, W3C, Clear Left, 37 Signals и других известных компаний и веб-студий.

Доклады на конференции идут в виде своеобразного марафона – один за другим, с небольшими перерывами на обед и кофе, в течении двух дней, с 9.00 до 17.00. Лекции идут параллельно в двух разных аудиториях, что с одной стороны создает свободу выбора, а с другой – ставит иногда перед участниками диллему выбора.

В общем конференция эта во многом знаковая и задающая тон сообществу веб-разработчиков. По крайней мере так было, и я надеюсь что будет. А теперь перейдем собственно к отчету и тому что было в этом году. Continue reading

Будущее CSS

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

CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году – Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.

Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.
И все бы хорошо, если бы это не вносило смуту в ряды разработчиков, часть которых небезосновательно утверждает что использование переменных на уровне документа это благо, так как позволяет с большей легкостью изменять значения тех или иных свойств, да и сами свойства. Другая часть разработчиков не согласна с этими утверждениями и твердит о том, что переменные – зло, так как толка от них мало, они только путают и тд. Continue reading