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

Для начала приведем пример стандартной таблицы, которая выводит список характеристик товаров для сравнения:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Характеристка 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

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

Решение 1: Flexbox

Используя следующие CSS свойства, мы можем сделать нашу табличку адаптивной:

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

Однако, данное решение не является универсальным, т.к. поддержка flexbox составляет около 80% для современных браузеров и более 93%, если учитывать версии браузеров, которые требуют префиксы. Поддержка IE начинается с IE10 (синтаксис 2012 года), в то время как IE11 имеет полную поддержку.

Так как мы заинтересованы в поддержке маленьких экранов, то мы можем игнорировать отсутствие поддержки предыдущих версий IE. На мобильных устройствах, поддержка начинается с Android 4.4 и iOS 7.1. Предыдущие версии требуют префиксы или не поддерживают данную функцию.

Решение 2: доп. разметка + ARIA

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

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 1</td>
    </tr>
    <tr>
      <td>Характеристика 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 2</td>
    </tr>
    <tr>
      <td>Характеристика 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 3</td>
    </tr>
    <tr>
      <td>Характеристика 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 4</td>
    </tr>
    <tr>
      <td>Характеристика 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

CSS в таком случае будет еще проще:

.visible-xs {
  display: none;
}

@media screen and (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }

  td:first-child,
  th:first-child {
    display: none;
  }
}

Выводы

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

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

Но в последние годы, все основные браузеры мигрировали на платформу WebKit, что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Trident вплоть до последней, 11-ой версии всеми горячо любимого браузера. Но на этом MS решили не останавливаться, и сделать жизнь разработчиков еще разнообразнее и насыщенней, путем удаления фильтров из IE 10 и 11 версий, что повлекло сложности, в том числе и с обесцвечиванием картинок с помощью CSS, методом наложения Grayscale фильтра.

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters, то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsFiddle):

img.grayscale:hover {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
	background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

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

• оригинальное изображение;
• предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

.directions .direction a.open-modal{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: grayscale(1); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

1. размещаем несколько блок-ссылок с фоном;
2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

Посмотреть в живую | Скачать демо

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

Но в некоторых случаях мы можем исхитриться и все таки добиться эффекта rowspan и colspan. Для этого необходимо добавить несколько дополнительных элементов, или «перевернуть» таблицу, чтобы столбцы стали строками, а строки ячейками столбцов — в таком случае мы реализуем rowspan.

При разработке данной странички я использовал Bootstrap 3 (HTML, CSS и Javascript фреймворк). До сих пор, к сожалению, не понимаю преимуществ данного фреймворка, кроме, пожалуй, симпатичного оформления формочек, сброса стилей и установки общего вида для всех браузеров и платформ. Еще пожалуй можно выделить адаптивность дизайна.

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

Итак, как же создать rowspan в таблице Bootstrap? Разделите вашу таблицу не по строкам, как вы привычно это делаете а по столбцам. Пример, как бы выглядела таблица если бы мы использовали <table>:

<table>
	<tr>
		<td>11</td>
		<td rowspan="6">2x</td>
		<td>31</td>
	</tr>
	<tr>
		<td>21</td>
		<td>32</td>
	</tr>
	<tr>
		<td>31</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td>34</td>
	</tr>
	<tr>
		<td>51</td>
		<td>35</td>
	</tr>
	<tr>
		<td>61</td>
		<td>36</td>
	</tr>
</table>

Как мы видим таблица разделена по строкам и в каждой строке имеет по 2 эелемента, т.к. в первой строке у нас определен элемент с rowspan=6. Теперь мы, используя блочную верстку и стандартные классы Bootstrap «перевернем» таблицу и будем плясать от столбцов:

<div class="row">
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	11
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	21
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	31
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               	41
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		51
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				2x
  			</div>
  		</div>
   	</div>
  	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				13
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		23
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		33
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				43
  			</div>
  		</div>
  		<div class="row">
  			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		  		53
  			</div>
  		</div>
   	</div>
</div>

Как видите, теперь у нас одна строка, и в этой строке три столбца, а в них уже 5 элементов. Элементы остались на своих местах, и появился один высокий блок, который и реализует наш rowspan.

Если у вас есть еще идеи, как можно реализовать такой «костыль» — пишите в комментариях.
Всем удачной верстки.

В последнее время я не часто вас баловал новыми записями, и вот наконец-то интересный пост в моей блоге!
Сегодня я бы хотел ознакомить вас с тестом браузеров. Таких как:

• Google Chrome 24.0.131
• FireFox 12.0
• Internet Explorer 9
• Opera 12.12

Недавно я наткнулся на ресурс проверки браузера на работу с HTML5. Сайт оценивает браузер, и после чего выдает оценку в очках, где максимум — 500 очков. И вот какие результаты мне выдал ресурс.

Первое место занимает естественно Google Chrome с 448 очками:

На второе место номинируется… как вы думаете кто? FF? Opera?

Скажу сразу, что я был слегка удиивлен выдачей, но это была Opera! (Посмотрев на результат я сперва испугался, ну вы понимаете о чем я )

Замыкать тройку лидеров будет естественно FireFox. Он, с количеством в 340 баллов занимает 3 место:

UPD: не учел последних обновлений FF, но места остаются за своими владельцами! Вот выкладываю обновленный скрин

Четвертым к финишу естественно пришел Internet Explorer 9 (8,7) набрав лишь 138 и по 42 очка соответственно.

Собственно все, кто имеет дело с разработкой WEB приложений знают приблизительную оценку браузеров, так что их  моим постом вряд ли удивишь, собственно как и меня результатами ресурса. Я это пишу к тому, что есть еще клиенты, заказывающие разработку сайта и требующие чтобы поддерживался Internet Explorer.

На эту тему можно много спорить и распинаться, но я скажу, что:

• IE пользуются считанные проценты пользователей интернета
• если наблюдается острая необходимость у заказчика совокупить мозг верстальщика, то N$ решат вопрос

Надеюсь что пост пригодится и будет кому-то еще интересен, линк на ресурс прикрепляю.

Удачной верстки!

Учитывая мою «любовь» к ИЕ, как разработчика, я не сразу захотел обновлять сие чудо мелко-магких (Microsoft), но взвесив все аргументы все же решился на обновление, ибо я, как, опять таки, разработчик должен следить за новыми поступлениями браузеров, ибо именно под них и оптимизируется (подгоняется) сайт, чтобы во всех браузерах он отображался корректно.

Вот началась загрузка нового Internet Explorer 9… Установка…

И вот, у меня теперь новый Internet Explorer 9! Ну что ж, посмотрим, чем в этот раз разработчики ИЕ нас порадуют?
Для начала я хотел бы отметить, что експлорер теперь тоже имеет интерфейс как и остальные браузеры :).

Ну это здорово. Наконец-то ИЕ стал таким же легким как и Хром, к примеру.
Далее, что я смог отметить — это поддержка таких CSS свойств, как border-radius и box-shadow.
А теперь копнем в глубь.

Новое внутри
Итак, внутренние изменения Internet Explorer 9. Этот браузер базируется на движке Trident версии 5.0. Его прошлое воплощение, версия 4.0, была представлена вместе с IE 8 и добавила полную поддержку CSS 2.1, а заодно впервые позволила браузеру Microsoft пройти уже неактуальный на тот момент тест Acid2. Cкромненькое такое обновление.

Trident 5.0 – это совсем иное дело. За два года его разработки Microsoft внедрила поддержку стандартов SVG (векторная графика на основе XML), XHTML, HTML5 и CSS 3. Два последних поддерживаются не полностью, но HTML5 еще не завершен (и будет доделываться до 2014 года), как и CSS 3. С другой стороны, все это уже поддерживается WebKit (Chrome, Safari), Presto (Opera) и Gecko (Firefox) – в отличие от Internet Explorer другие разработчики обновляют свои продукты куда чаще, постепенно добавляя поддержку новых стандартов по частям, а не сразу внедряя большое количество нововведений.

В итоге подобной модернизации Internet Explorer 9 показывает 95 из 100 баллов в тесте Acid3, тогда как восьмая версия довольствовалась 20 баллами, а седьмая вообще 12. Прогресс на лицо, причем прямо-таки огромный прогресс. Хотя, конечно, все соперники продукта от Microsoft давно показывают 100 из 100.

Не забыл софтверный гигант и о JavaScript. Google Chrome подстегнул всех разработчиков браузеров, так что те в срочном порядке взялись за оптимизацию. В результате все браузеры стали работать ощутимо быстрее, в том числе и IE 9. За это надо благодарить новый JS-движок Chakra, являющейся частью Trident 5.0.

Самая главная его инновация – возможность выделить исполнение JS-кода в отдельный поток, который назначается для выполнения свободному процессорному ядру. Таким образом Chakra лучше работает с многоядерными компьютерами. Кроме того, он способен загрузить даже графический процессор, в частности назначив ему обсчет трехмерной графики или декодирование видео. Надо полагать, что это задел на будущее. Например, для внедрения технологии WebGL, недавно представленной своей первой версией.

Стандарт CSS 3, в отличие от CSS 2.1, состоит из множества раздельных модулей (сейчас их 40), описывающих оформление тех или иные элементов страницы. В IE 9 добавилась поддержка модулей Backgrounds and Borders (фон и границы), Values and Units (значения и единицы измерения), Media Queries (медиа-запросы).

Самые главные инновации HTML5 касаются поддержки воспроизведения аудио и видео без дополнительных плагинов (тэги и ). Internet Explorer 9 официально поддерживает кодек H.264 – так же, как и Apple. Google и Opera предпочитают открытый WebM (открытый, к слову, самой Google). Впрочем, Google выпустила плагин для браузера Microsoft, добавляющий возможность воспроизведения контента, закодированного WebM.И, конечно же, самая рекламируемая «фишка» IE 9 – использование аппаратного ускорения видеокарты для формирования (рендеринга) веб-страниц. Для вывода изображений используется API Direct2D, для вывода текста – DirectWrite, видео – Media Foundation (современная замена DirectShow).

Технология Media Foundation была представлена вместе с Windows Vista и в Windows XP недоступна. Впрочем, мы уверены, что отказ от поддержки XP новой версией браузера связан не только с этим – Microsoft просто хочет сделать свои новые ОС более привлекательными для установки. Выход IE 9 – это еще один повод сменить XP на Windows 7. Причем повод весьма серьезный – новый браузер явно лучше всех прежних, выпущенных софтверным гигантом.

Новое снаружи
Последняя кардинальная переработка интерфейса Internet Explorer случилась 5 лет назад вместе с выходом седьмой версии. Восьмой «эксплорер» почти не отличался от седьмого внешне. Он разве что стал несколько «живее», красочней – добавились значки в меню, улучшилась адресная строка, появилось пару новых обозначений.

Internet Explorer 9 подвергся очередной коренной переработке. Microsoft называет это «компактным интерфейсом». И он действительно компактен – осталась всего одна панель, где уместили все необходимое: кнопки вперед/назад, адресную строку (также вмещающую несколько кнопок), панель с вкладками страниц и кнопки «домой», избранное, сервис. Сверху справа стандартные кнопки управления окном, справа как всегда полоса прокрутки.

Надо сказать, что новый Internet Explorer, несмотря на аскетичный дизайн, получился весьма стильным. Все подобрано гармонично, выполнено аккуратно и красиво. Браузер не выглядит «простым» — напротив, возникает ощущение скрытой мощи. IE 9 имеет свой уникальный стиль, который сразу запоминается и узнается впоследствии. Явно над ним поработали хорошие дизайнеры.

Адресная строка восьмой версии браузера отвечает современным требованиям, предлагая варианты страниц при вводе адреса, состоящие из ранее посещенных сайтов и журнала посещений, а заодно выводя их заголовки страниц. В IE 9 все это сохранилось, а также было дополнено. Так поле поиска теперь совмещено с адресной строкой, а потому она предлагает варианты поисковых запросов. В общем-то на это способны все современные браузеры, но ведь это не повод отказываться от такой полезной функции, верно? По умолчанию используется поисковый движок Bing (какой же еще?), но его можно заменить и на другой.

При вводе чего-либо в адресную строку IE 9 автоматически старается распознать адрес это или поисковый запрос. Но можно добиться гарантированного поиска сначала введя символ «?».

В правой части адресной строки уместили четыре кнопки: поиск (вызывает режим поиска, раскрывая список с предложениями по запросу), режим совместимости (включает обратную совместимость с IE 7/8), обновить и остановить загрузку данных. В других браузерах две последние кнопки мы привыкли видеть слева. Но и такое их местоположение вполне удобно.

Вкладки в IE 9 расположили по соседству с адресной строкой – справа от нее. Это, конечно, экономит с два десятка пикселей по высоте, но открыв много вкладок в них будет сложнее ориентироваться, чем прежде. За последней вкладкой находится кнопка открытия новой – эта «фича» доступна еще со времен IE 7.

Восьмой Internet Explorer предложил возможность цветовой дифференциации вкладок, открытых из одного источника. IE 9 сохранил ее.

Новая функция – перенос вкладки в новое окно. Делается это простым перетягиванием вкладки с панели в любую область рабочего стола. Не запрещено «вернуть» ее назад. Также возможно перетаскивание вкладок между открытыми окнами Internet Explorer 9.

Но куда интереснее иная возможность – любую вкладку можно закрепить на панели задач Windows 7 подобно отдельному приложению, перетащив ее туда мышью. Причем контекстное меню такой страницы может содержать не только пункты параметров закрепления и ее открытия в режиме InPrivate (он, к слову, тоже остался со времен IE 8). На сайте может содержаться специальный код, получив который IE 9 покажет в меню указанные разделы ресурса.

Открывая страницу из закрепленного значка окно браузера чуть меняет свое оформление. Домашней страницей для него назначается именно та, что была закреплена, а кнопка «домой» переезжает из правого угла в левый и меняет символ «домика» на значок сайта. Кроме того изменяют свой цвет кнопки назад и вперед – он зависит от значка-логотипа страницы.

Претерпела изменение страница, отображаемая при открытии новой вкладки. Здесь теперь показываются популярные сайты, а заодно есть опция повторного открытия последнего сеанса. В IE 8 на этом месте отображался список недавно закрытых страниц, тогда как IE 7 рассказывал о прелестях вкладок и давал полезные советы по ускорению работы в браузере.

Строка состояния в IE 9 по умолчанию отключена. Однако, полагаем, многие привыкли смотреть на ней ту или иную информацию, в частности адрес страницы, на которую ведет ссылка. Новый браузер Microsoft позволяет включить классическую строку состояния, но одновременно предлагает альтернативу. Адреса и другие сообщения показываются в виде подсказки, которая пропадает сразу как указатель мыши смещается с того или иного элемента. По нашему мнению это очень удобно – на самом деле, зачем держать целую незанятую полоску, когда большую часть времени она пустует? С другой стороны иногда эти подсказки перекрывают какой-либо элемент на странице, до которого хочется дотянуться мышью. И чтобы добиться желаемого приходится дергать рукой в сторону, что несколько сбивает.

Все сообщения Internet Explorer 9 показывает в неназойливой тонкой панели, отображаемой в нижней части окна. Она не перекрывает страницу и позволяет работать с ней далее.

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

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

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

Еще одна инновация IE 9 – слежка за работой установленных плагинов. Если какой-то из них замедляет работу браузера, то предлагается его отключить.

На этом можно завершить рассказ об интерфейсе Internet Explorer 9. Как, впрочем, и о самом браузере. Можно разве что сказать несколько слов об улучшенной защите от вредоносных сайтов. Судя по тестам организации NSS Labs, IE 9 смог опознать 99% недоброкачественных ресурсов, тогда как IE 8 ограничился показателем 90%.

Еще одно заметное изменение в средствах для разработчиков, впервые представленных в IE 8. Они и в первой своей редакции были весьма и весьма неплохи, а потому не получили серьезных нововведений в IE 9. Однако они все также позволяют просматривать страницу, отрисованную разными версиями движка Internet Explorer. Теперь к IE 7 и 8 добавился IE 9. Очень радует, что Microsoft не удалила данную возможность.

Вывод
Очень жаль, что Internet Explorer 9 не поставляется в качестве предустановленного браузера в Windows 7. В противном случае вряд ли у пользователей, не пробовавших иные продукты, возникло желание искать ему замену. Определенно девятая версия средства серфинга от Microsoft наилучшая из всех ранее выпущенных.

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

Некоторые изменения можно назвать «догоняющими» — Microsoft просто дотянулась до уровня конкурирующих браузеров. В частности это относится к совмещению адресной строки и строки поиска, предложениям по поисковым запросам, ненавящевым сообщениям внизу страницы, переработанному менеджеру закачек.

Ускорение работы Internet Explorer 9 очевидный плюс нового браузера. Пока что он один из немногих, способных на использование аппаратного ускорения видеокарты. Похожую возможность предлагает Google Chrome и она присутствует в еще не вышедшем Firefox 4, но Microsoft использовала ее везде, где только возможно. Кроме того, новый JavaScript-движок Chakra тоже оказался весьма производительным. Впрочем, это относится только к 32-битной версии IE 9. Его 64-битное воплощение отчего-то работает с JavaScript в 5 раз медленнее (судя по тесту SunSpider), примерно на уровне IE 8. Явно, что Microsoft не уделила достаточного внимания для оптимизации 64-битного варианта. Впрочем, вряд ли кто-то им пользуется в качестве основного – для него пока не существует 64-битного Flash-плеера, что для настольного компьютера весьма серьезно. Но Adobe уже работает над этой проблемой, так что Microsoft стоило бы подсуетиться в этом отношении. Особенно если учесть, что ее браузер пока единственный под Windows, существующий в 64-битном исполнении.

Тем не менее, вряд ли Internet Explorer 9 вызовет массовый переход с других браузеров. Мы уверены, что многие удовлетворены той программой, которой пользуются в данный момент. Но вот остановить или хотя бы замедлить переход на продукты не от Microsoft он способен. Новый браузер работает быстрее и он удобнее прошлых версий. Если компания не снизит темп, то Internet Explorer 10 вполне сможет превзойти конкурентов по большинству пунктов, а не сравняться по ним.

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

В интернете бытует два варианта:
1) Валидность кода — один из важных этапов раскрутки и продвижения сайта;
2) Валидность кода — это потраченное зря время, и абсолютно не нужная шлифовка.

На самом деле, если почитать интернет, то кроде как и одни и вторые правы, но тем не менее такого быть не может. Нужна ли валидность или нет?

Я, например, когда создаю сайт специально не делаю валидный код. Если получается, то хорошо, если нет, так нет. А вот если после необходима раскрутка, или просто необходимо продвижение сайта, то я перед раскруткой сайта делаю его валидным.

Валидация — достаточно интересный, и не всегда приятный процесс. Есть ряд причин, которые делают его таким:
1)  Вы заходите в валидатор и проверяете свой документ. И вам обработчик выдает 500 ошибок. Руки опускаются, верно? А если у вас просто не верно выбран тип документа? Просто выберите из списка любой, и проверьте, будет ли меньше ошибок.

2) Вы валидируете ваш сайт и обработчик выдает вам ошибки, там где их не должно быть…WTF??? Что делать? Да все очень просто, возможно где-то впереди, вы совершили одну единственную ошибку и она привела к таким последствиям.

3) Пока непонятно как завалидировать тег <noindex>. При этом не потерять его свойств. Правда я нашел один вариант, не знаю на сколько он рабочий, вроде как рабочий.

<div>
Дорогой Яндекс! <div><!--Не индексируй меня! --><b><!--Пожа-а-а-алуйста!--></b></div>
Вот этот кусок можно проиндексировать. А <span><!--вот этот, пожалуй, не стоит--></span>.
</div>

Вообщем есть много нюансов. Сейчас мой сайт практически валиден. Не знаю, буду ли я заниматься его валидацией, т.к. учитывая все хаки и доп.примочки на сайте — на это уйдет лиюо несколько дней, либо ничего не выйдет. Ну а есть ведь чем еще заняться!

Что такое вообще валидация?

Валидация — это проверка сайта на его «правильность написания» с точки зрения кода. Есть несколько типов документов. В основном это:

• XHTML;
• HTML;

Которые в свою очередь, делятся на:

• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• HTML 4.01 Strict
• HTML 4.01 Transitional
• HTML 4.01 Frameset
• HTML 3.2
• HTML 2.0
• XHTML 1.1
• XHTML + RDFa
• XHTML Basic 1.0
• XHTML Basic 1.1
• XHTML Mobile Profile 1.2
• XHTML-Print 1.0

И прочие. Все перечислять не буду, их можно посмотреть на сайте w3.org. Там же вы можете проверить свой сайт на валидность кода. Еще есть возможность проверки на валидность CSS.

Итак, у каждого из этих типов документов есть свои правила. (Это как правописание. Нужно писать правильно и красиво.)
И валидация — это проверка, соблюдает ли сайт эти правила, правильно ли программист написал код, с точки зрения правил именно этого типа документа, или нет.

Это значит, что необходимо соблюдать эти стандарты. Все правила к каждому из типов документа есть на сайте w3.org, правда на английском языке.

Для чего все это делается, я расскажу уже в следующей статье.

Что такое вообще «кросс-браузерность» у сайта? Кросс-браузерность (cross-browser compatibility)- от английского cross — пересекать, а browser — браузер,  compatibility — совместимость. Из данного набора слов можно уже интуитивно понять, что это такое. Кросс-браузерность — одно из главных свойств сайта — отображаться во всех браузерах одинаково.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями. (Wikipedia | ru.wikipedia.org/wiki/Кросс-браузерность)

Таким образом, вы должны будете учесть все особенности и свойства хотя бы основных браузеров web’а:

1. Google Chrome
2. Opera
3. FireFox
4. Internet Explorer
5. Safari

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

Google Chrome.
Я считаю что этот браузер самый быстрый, на сегодняшний день, в интернете. В нем нет ничего лишнего, он быстро открывается и быстро загружает страницы. Есть много модулей и плагинов, которые так же быстро работают. Есть плагины для web-разработчиков. Это первое место в моем рейтинге.

Opera.
Отдадим дань привычке :). Я сам сижу под этим браузером, и не знаю почему под ним, а не под хромом. Полноценный браузер с множеством всяких, как нужных, так и не нужных примочек и вещей. Я для себя выделил одну функцию — Opera Dragonfly. Очень удобная штука как по мне, дает возможность просматривать код непосредственно элемента, а не всей страницы. Многие скажут что у хрома так же реализована такая возможность, но тем не менее я считаю что у оперы все-таки это реализовано более юзабильно и удобно. Это второе место.

Internet Explorer.
Гхм…что сказать про нашего ослика? Почему ослика? Ну Internet Explorer — IE — ИА — ослик. Так вот, лично я не перевариваю этот браузер. Для начала как пользователь. Он медлителен, неудобный, напичканный множеством не нужных вещей. Я его ненавижу как разработчик! Он очень тяжел в вёрстке. Он не поддерживает кучу свойств css.