До конца ноября каждый читатель моего блога может получить бесплатный комплексный аудит своего сайта

Получить бесплатный аудит

IE6 самое популярное и устаревшее приложение на рынке под названием Internet. Это самый замечательный браузер 2000 года. Он не просто так приобрел свою популярность, его было за что любить, и можно постараться полюбить сейчас, когда он слишком медленно идет к 50% рынка.

Доклад рассказывает о решениях в верстке, которые приводят IE в соответствие виденьем w3c стандартов. Я покажу, как делать тонкий css толстым javascript’ом

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

Ошибки HTML

• Картинки . При отсутствующем аттрибуте title всплывает подсказка, текст которой берется у alt (ie6, ie7);
• Label . Тегу label необходим аттрибут for . Даже для такой удобной конструкции Имя: (ie6);
• PNG . Не поддерживает прозрачность (ie6).

Ошибки CSS

• Наведение (:hover). Работает только для тега a у которого стоит аттрибут href (ie6);
• Прозрачность . Своя реализация (ie6, ie7). Некорректно отображает прозрачные элементы без фона;
• Наследование . inherit (ie6, ie7);
• :first-child, :last-child . Приходится присваивать элементу класс (ie6, ie7).

Решения

Семантически верная верстка диктует свои условия. Удобным инструментом стала связка с Firefox + Firebug + Web Developer Toolbar. Internet Explorer все чаще стал запускаться под эмуляцией на Linux и Mac, это приводит к тому, что под него сайт тестируется в последнюю очередь. Даже windows-разработчикам приходится ставить две версии одновременно - 6 и 7.

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

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

Подключаем стили

Так как стили бывают очень сложными, я предпочитаю не смешивать правила для 6 и 7 версий в одном файле, а тем более объединять их с основными стилями документа. Для седьмой версии обычно пишутся 10-20% строк шестой версии. Общие стили для обеих версий подключаются через конструкцию @import . Иногда достаточно, чтобы файл шестой версии просто дополнительно подключал файл от седьмой.

ie6.css и ie7.css
@import url(ie.css);

DHTML Behaviors

Behaviors разрабатывались для описания специфичной функциональности и поведения элемента. Внутри htc находится полноценный JScript, привязанный к каким-то событиям элемента и документа, например, наведение мышки или окончание загрузки страницы.

Подключается очень простой CSS–конструкцией:

behavior: url(behavior.htc);

Давайте посмотрим на программные решения.

Whatever:hover

//www.xs4all.nl/%7Epeterned/csshover.html

По-моему, единственное популярное расширение, которое меняет именно поведение. Хорошо лечит свойства:hover и:active .

Чтобы его установить нужно прописать в любом месте стилей:

>body { behavior: url(hover.htc) }

Для работы нужна полностью загруженная страница, после чего он начинает парсить доступные стили. Найдя ключевое слово:hover и:active для стиля, он ищет в документе привязанные элементы. Если нашел, то создает события onmouseover и onmousedown , которые добавляют класс onhover .

К сожалению, у него есть минусы.

• Тэг A без аттрибута href="" по-прежнему не работает;
• При больших размерах документа или файла стилей, браузер может занять много ресурсов компьютера, потому что заново парсит документ;
• Отрабатывает только в момент загрузки, для новых элементов, созданных например javascript’ом, требуется новое подключение, или такая запись * { behavior: url("hover.htc"); заметно нагружающая браузер;
• С вложенными:hover ведет себя не всегда правильно.

IE PNG Fix

//www.twinhelix.com/css/iepngfix/

Решает проблему с альфа каналом в png для 5.5 и 6 версий. Подключение:

img, div { behavior: url(iepngfix.htc) }

где div слой с фоном. Реализовано с помощью фильтра AlphaImageLoader. Что-бы решить проблему с некликабельными ссылками, ставит всем детям применяемого элемента style="position: relative" . Отлично подходит для небольших изображений в маленьком количестве. На сложных макетах появляются врожденные минусы:

• position: relative не помогает, если behavior накладывается на слой с position, отличным от static;
• При медленной отдаче картинок сервером, или при их большом размере, пользователю некоторое время видны изображения без применения фильтра;
• Показывает в статусной строке, сколько ему ещё осталось обработать изображений, примерно так: «Осталось 15»;
• Для работы с картинками нужен прозрачный gif.

Expressions

Для того чтобы оценить плюсы и минусы «выражений» (expression), решения на основе behavior были описаны выше. Специальная конструкция expression по праву считается лекарством от всего. Благодаря ей полноценные JavaScript–выражения можно писать прямо в CSS–файле.

#id {
свойство: expression(javascript код);
}

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

Есть несколько особенностей у expression:

• выполняется постоянно, если не переопределить CSS–свойство (см. «Оптимизация»);
• выполняется мгновенно;
• ключевое слово this необязательно, выражение this.style равносильно простому style ;
• работают комментарии /* */ , несмотря на то, что мы находимся внутри css;
• можно использовать внешние функции или библиотеки, если они объявлены или подключены в html;
• пробелы могут вызывать ошибку, хотя такое встречается редко;

Оптимизация

Основа оптимизации - это переопределение CSS–свойств, которые содержат expression. Получить к ним доступ можно с помощью:

• style
• currentStyle
• runtimeStyle

style - это style конкретного html элемента. Свойства из currentStyle мы можем только читать, зато currentStyle содержит все CSS–свойства, даже те, которые не понимает сам браузер. Свойства из runtimeStyle мы можем как читать, так и переопределять, но только те свойства, которые понимает браузер. Стоит заметить, эти свойства относятся к ноду, а не к CSS–правилу. Если мы изменяем runtimeStyle , то изменения касаются конкретного нода.

Приведу пример оптимизации. Допустим, у нас есть кнопки с прозрачностью.

Button1 { opacity: .1 }

Button2 { opacity: .2 }

Button3 { opacity: .3 }

Button4 { opacity: .4 }

Для ie, записи обычно дублируются:

Button1 { filter: alpha(opacity=10 ) }

Button2 { filter: alpha(opacity=20 ) }

Button3 { filter: alpha(opacity=30 ) }

Button4 { filter: alpha(opacity=40 ) }

Но мы можем применить экспрешн:

{ filter: expression("alpha(opacity=" +currentStyle.opacity *100 +")" ) }

IE не завис? На четырех кнопках не должен. А вот на десяти и более, он иногда виснет и вылетает. Происходит это потому, что на каждое движение мышки по странице или выполнение JavaScript–кода происходит пересчет expression. Избежать пересчета удастся, просто переопределив фильтр в начале выражения:

Button1, .button2, .button3, .button4

{ filter: expression(runtimeStyle.filter = "alpha(opacity=" +currentStyle.opacity *100 +")") }

В презентации к докладу, есть более развернутый пример.

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

Такой способ оптимизации подходит только для «статичных» элементов, которым не нужно менять свое отображение динамически. Изменение родительского класса, равнение по высоте окна и эмуляция position: static - все это проблемные участки оптимизации. Лучше их не оптимизировать, а использовать пореже.

Произошла ошибка Internet Explorer, приложение будет закрыто…

Такое сообщение иногда выдает Windows при просмотре странички, содержащей ActiveX-компоненты. Решений может быть несколько.

• Для решения проблемы "на скорую руку" запустите Internet Explorer откройте меню Сервис>Свойства обозревателя . И в появившемся окне перейдите на вкладку Безопасность . Выберите зону Интернет и нажмите кнопку Другой . В списке параметров безопасности в группе Элементы ActiveX и модули подключения для всех опций выберите Отключить .
• Либо как советует Microsoft следует установить обновление 890923 либо SP2 для Windows XP.

Плачу ли я за посещение сайтов?

Среди пользователей бытует легенда, что посещение одних сайтов "дороже" чем других, якобы владельцы тех или иных ресурсов самостоятельно устанавливают таксу. Это не совсем верно. Дело в том, что при соблюдении элементарных правил безопасности - когда вы не будете вводить правдивые данные о себе на подозрительных сайтах - владельцы сайта даже не смогут выяснить ваш номер телефона или фамилию. Не говоря уже о выставлении вам счета за посещение своего ресурса. Единственным случаем, когда за посещение сайта можно заплатить, является требование вести информацию о вашей кредитной карте. Делать этого не надо. Результатом такой неосмотрительности может стать то, что расплачиваться вашей картой будет кто-то другой.

Так за что же все-таки пользователи платят в интернете? Это определяет ваш интернет провайдер, однако наиболее распространенным "мерилом" является входящий трафик. То есть количество загруженной на ваш компьютер информации. Причем надо отметить, что не обязательно скачивать из интернета какие-то файлы, чтобы входящий трафик рос. Достаточно просто путешествовать по сайтам, ведь загружая страничку вы автоматически загружаете себе на компьютер все ее содержимое - картинки, текст, рекламные баннеры. Поэтому и получается, что посещение какого-то сайта выходит для вас дорогим, но причина не в тарифах самого ресурса, а в большом количестве картинок. Чем больше картинок (и чем лучшего они качества), тем больше входящего трафика.

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

На сайтах я читаю только текст и не хочу платить за картинки. Как их отключить?

Приверженцам браузера от Microsoft следует сделать следующее. Запустите Internet Explorer и следуйте в меню Сервис>Свойства обозревателя , в открывшемся окне перейдите на вкладку Дополнительно . В разделе Мультимедиа снимите флажки: Отображать рисунки , Воспроизводить звуки на веб-страницах , Воспроизводить видео на веб-страницах . Нажмите кнопку Применить и перезапустите Internet Explorer. Имейте в виду, что после вступления в силу сделанных изменений, сайты будут выглядеть несколько иначе, в некоторых случаях - совсем по-другому. Вернуть все обратно, вы сможете, установив искомые флажки.

Если вы пользуетесь Firefox, то предлагаю вам обратить внимание на следующие дополнения: Adblock Plus (я писал о нем ранее) и ImgLikeOpera (тоже писал раньше). Установить вышеперечисленные дополнения вы сможете на сайте addons.mozilla.org .

Для работы в интернете мне надо прописать какой-то "прокси", где это сделать?

"Прокси" называют специальный прокси-сервер, который выступает посредником между пользователями и интернетом. Как правило, он выполняет защитные функции и немного ускоряет работу в глобальной Сети. Однако прежде браузеру потребуется "объяснить", что для выхода в сеть вы собираетесь использовать прокси-сервер. Не забудьте уточнить у других пользователей адрес прокси-сервера. В главном окне Internet Explorer откройте меню Сервис>Свойства обозревателя , в открывшемся окне Свойства обозревателя перейдите на вкладку Подключения нажмите кнопку Настройка LAN . На экране возникнет окно Настройка локальной сети , в разделе Прокси-сервер установите флажок Использовать прокси-сервер и в ставших активными полях Адрес и Порт укажите необходимые параметры. Возможно, вам записали информацию о "прокси" в таком виде: proxy.infonet.ru:3128 . То, что стоит слева от двоеточия - это адрес, то что после - порт.

Как качать с YouTube?

На пресловутом youtube.com часто встречаются интересные ролики, но, к сожалению, разработчики сервиса сделали возможность скачивания файлов очень уж неявной. По крайней мере, я решал эту задачу при помощи стороннего ресурса - www.skachivai.ru .

Введите в специальной строке данного сайта, ссылку на ролик YouTube. Нажмите на кнопку Сохранить видео . Сохраните файл на жестком диске. Дождитесь завершения закачки и переименуйте искомый файл, добавляя ему расширение FLV.

После этого файл можно просмотреть любым плеером, поддерживающим просмотр FLV-файлов. Например, MediaPlayerClassic .

У некоторых сайтов адрес начинается с www. Что это обозначает?

Префикс www для написания интернет-адреса не является технической необходимостью. Когда-то давно приставкой www пользовались для того, чтобы указать на принадлежность адреса к интернет-пространству, названному World Wide Web (WWW).

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

Письмо читателя #1

В данном случае выхода нет. Доменный пользователь (под которым вы работаете) в списке локальных пользователей не отображается. От него остается только профиль в папке C:\Documents and Settings.

При всем многообразии браузеров, позволяющих выполнять комфортный выход в интернет, многие люди предпочитают использовать встроенное в OS Windows программное обеспечение. Как и любая другая программа, использование таких элементов иногда может привести к вот такой информации на экране монитора ПК: explorer exe ошибка приложения. Что делать в такой ситуации? Давайте разберемся.

Причины возникновения

Причин появления «explorer exe error» может быть множество:

• Заражение вредоносными элементами.

• Использование ограниченных прав при установленном дополнении BHO.

• Наличие конфликта в реестре ОС.

• Отсутствие элемента, важного для использования программы.

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

Процесс исправления неприятности

Начинать надо с самого простого. То есть, если не удается найти сервер или ошибка dns internet explorer, то требуется разобраться с возможно ранее установленным дополнением Browser Helper Object.

Эта же установка приводит к тому, что возникает ошибка сценария internet explorer – как убрать возникшую неприятность? Для этого необходимо:

1. Найти и выполнить деинсталляцию приложения BHO или удалить их в ручном режиме.
2. Выполнить проверку реестра с помощью команды sfc.exe /scannow.

Перезагрузить компьютер. Если ошибка на странице internet explorer все равно возникает, или проявляет себя еще раньше, то следует рассмотреть другие способы.

Другие варианты борьбы с неприятностью

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

Поэтому первый шаг – запуск антивирусников и полное сканирование операционной системы. Если ошибки сертификатов справки internet explorer все равно проявляют себя после этого процесса, то следует подумать о полной замене самого файла, отвечающего за запуск этого программного обеспечения.

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

Если не один из предложенных способов не помог ответить на поставленный вопрос, придется воспользоваться функцией «Восстановление OS». Эту операцию можно провести с помощью диска с операционкой или если на ПК применяется антивирусник компании AVZ.

Во втором случае необходимо запустить программу. Затем выбрать меню «File». В нем – «restore the system». Перед началом работы следует внимательно поставить галочки там, где следует, и только после этого запустить процедуру.

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