Давно не приходилось верстать макеты интернет-магазинов и вот настал тот самый день, когда довелось заняться этим. Сразу встал вопрос как лучше и что самое главное как наиболее семантично сделать данный проект.
Главные требования
- 2 колонки товаров равной ширины и высоты.
- Без таблиц и без использования table-cell.
- Одинаковое отображение страницы в ie6 и всех остальных более умных браузерах. ie 5.5 нас никаким образом не интересует.
- Минимум кода.
- Без использования javascript для подсчета высоты.
- Резиновый блок с товарами.
- Разумеется валидность.
Вот стало интересно кто-то еще практикует include блоков в своей верстке?
Появилась первая информация о датах проведения — в этом году слет пройдет с 3ого по 6ое июля в городе Таганрог на местной турбазе. Слет в том году был замечательным, так что надеюсь, что в этом году он будет еще лучше. Запись участников проводится на joomlaforum в специально созданом топике. Ждем заявок!
Ранее я приводил перечень всех png фиксов для ie6, которые мной были найдены. Недавно мне пришлось использовать достаточно большое число png иконок (gif не подходит по той причине, что фон под иконками разный и обтравить его не представляется возможным) на одой странице и тут возникла достаточно интересная ситуация. Иконок в сумме всего четыре, тегов img для них порядка 200. Казалось бы, что это ничего страшного, так как иконка загрузится всего один раз и далее будет браться из кеша, что собственно и происходит.
Исходим из наличия четырех иконок и употребления их на странице в числе 265 штук. Тестирование производится локально. В качестве средств тестирования выступает ie6, Windows Task Manager, Http analyzer
Казалось бы, что с выходом новой версии багов должно уже не быть, но Мелкософт© отличился как всегда. Вообще лично я считаю использование хаков для любого браузера, кроме internet explorer 6 моветоном — 6ому позволительно брыкаться, так как он стар, а вот любой современный браузер должен понимать чего от него хочет верстальщик, но так сложилось (или руки растут из иного места), что приходится что-то хакнуть.
Итак, вот оно:
Способ первый и самый простой. Действует в том случае, если в internet explorer 7 все хорошо, а вот в 8ом что-то посыпалось.
Просто в
<head>
</head>
добавляем строку, попутно не забывая указать DOCTYPE
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
И все у нас становится хорошо. Скажем спасибо Майкрософту® так заботящемуся об обратной совместимости.
Казалось бы задача проста, но на деле все оказывается иначе. text-align не помогает, margin:auto работает только при фиксированной ширине. Что делать? Решение достаточно старо, но кода у меня поменьше.
Microsoft включила-таки IE8 в систему автоматических обновлений Windows Update, причём сразу в статусе критического обновления. Таким образом, в самое ближайшее время этот браузер будет установлен на подавляющем большинстве компьютеров с Windows, заменив устаревшие IE6 и IE7.
Слово «Семантика» определяет смысловое значение предложений, в нашем же случае разметки страницы в ее исходном коде.
Фактически это никому, кроме как разработчику и не нужно, но зачем же это делается
- Верстальщик тем самым упрощает в первую очередь работу себе, ведь значительно легче разобратся в «красивом» коде, чем в «свалке» тегов с неявной структурой и вложенностью.
- Зачастую это делается для личного удовольствия, тем самым мы подводим себя на новый уровень верстки.
- Реже по прихоти заказчика, который в подавляющем большинстве случаев сам не знает что это и зачем оно нужно. Заказчик знает это слово из-за тенденции, которую создали сами разработчики.
Три факта про этот хак
- Нижнее подчеркивание("_") является валидным в спецификации CSS2.1
- Браузеры игнорируют неизвестное CSS свойство
- MSIE 5+ игнорирует "_" перед любым CSS свойством
Что это нам дает?
Данный вопрос появляется регулярно. Решений данной проблемы предостаточно, все они отличаются друг от друга, но все они выполняют свою функцию — исправляют отображение картинок формата png в браузере Internet Explorer 6.
Причиной появления серого фона вместо прозрачного является отсутствие обработчика альфа-канала в самом браузере, что приводит к невозможности кроссбраузерного использования фомата png. Лично я крайне редко прибегаю к использованию png картинок по двум причинам:
1) «вес» картинок данного формата как правило достаточно сильно превосходит jpeg (если используются картинки с разрешением выше 20×20 пикселей без прозрачности), что в итоге будет влиять на скорость загрузки сайта. Лучше попытаться «склеить» две jpeg картинки, чем сразу прибегать к использованию прозрачности.
2) необходимость использования дополнительных скриптов. Если на сайте используется 1-3 png картинки, то скорость обработки и конвертации их в обработчик альфа-канала не займет много времени визуального отображения, но если же картинок более 10, то это сильно «подвесит» браузер. Заметить это можно в поочередном исчезании серого фона у картинок, а не моментальном.
