Seleckis.lv :: журнал Никиты Селецкого » Брaузеры http://seleckis.lv Tue, 08 Feb 2011 13:52:50 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Вёрстка в Латвии: Вчера. Сегодня! Завтра? http://seleckis.lv/journal/research/vyorstka-v-latvii-vchera-segodnya-zavtra http://seleckis.lv/journal/research/vyorstka-v-latvii-vchera-segodnya-zavtra#comments Thu, 27 May 2010 15:31:55 +0000 Никита http://seleckis.lv/?p=1835 Версия моего выступления на Web Standards Days Riga 2010 вызвавшего неоднозначную реакцию.

Много было регистраций работников различных дизайн студий, компаний занимающихся разносторонней веб-разработкой, банков, министерств, фрилансеров и просто интересующихся. Я не зря добавил в форму регистрации поле для адреса сайта. Те люди, что собрались на конференцию, скромно говоря, флагманы, пионеры латвийской веб-разработки. Поэтому не грех было покопаться в их работах и попробовать понять, что же всё-таки у нас происходит с текущим использованием технологий?

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

Вчера

Итак, что же можно назвать «вчера»?

  • ASCII кодировка
  • Не использование DOCTYPE
  • DOCTYPE с указанием спецификации
  • Валидация ради валидации

Список можно продолжить, но мне лениво.

Кодировка

Для начала рассмотрим какие кодировки использовались на проанализированных сайтах.

Здесь всё замечательно, почти на всех сайтов используется кодировка utf-8. Это проще, чем подбирать для каждого языка свою. Здесь могу только посоветовать, тем 7 %, кто остался переходить на uft-8. Больше говорить не о чем.

DOCTYPE

Многие до сих пор не понимают значения доктайпа. Для того, чтобы это понять, нужно сначала обратиться к истории. Ну долго копаться в ней не будем, единственно упомянем, что существует два режима отображения веб-страницы — Standards Mode  и Quirks Mode,  ну так исторически сложилось. Первый — это режим отображения согласно веб-стандартам W3C, второй — режим поддержки старых сайтов, написанных в 90-е годы. Чем конкретно они отличаются читайте на W3C или в Википедии, ищите в Гугле… информации полно, но я на этом зацикливаться не буду. (Ну там ещё есть almost standards, который от standards почти не отличается)

Если вы не пишете доктайп, то включается Quirks Mode. Если пишете — Standards Mode. Но есть исключения:

  • Internet Explorer воспринимает декларацию HTML 4.0 и старее как Quirks Mode.
  • В случае с XHTML по правилам требуется xml-декларация. И её фактически никогда не пишут, поскольку из-за неё IE6 переключается в Quirks Mode.
  • Опера вообще не поддерживает Quirks Mode. Даже без DOCTYPE страница рендерится в Standards Mode.

Более подробные нюансы о QuirksMode можно почитать в Википедии.

Итог: Чтоб избежать проблем нужно использовать DOCTYPE обязательно.

DOCTYPE с указанием спецификации или валидация ради валидации

Теперь посмотрим как у нас обстоят дела с доктайпами на латвийских сайтах.

Великолепно! 68 % указывают XHTML  декларацию. А теперь проверим, проходят ли они валидацию?

Внимание, вопрос! Зачем для сайтов указывать доктайпы со спецификацией, если валидацию они не проходят?

Если почитать спецификацию XHTML, то такой документ по сути должен передаваться в формате application/xhtml+xml. Это можно сказать «чистый» XHTML. Правильный. Мы все любим правильность и я в том числе, поэтому большинство сайтов написаны в формате XHTML. Там и правильные закрывающие теги и правильная вложенность и дубрирующееся написание значения атрибутов-флагов.

А на самом деле все передают такой документ в формате text/html. Почему? Во-первых многие не знают, что он должен передаваться как application, а во-вторых — незачем! Чаще всего модульные технологии расширения, для которых был создан XHTML, не используются. Ни прстранства имён, ни MathML, ни семантическая вёрстка через RDF и другие крутые вещи не нужны для создния веб-сайтов и сервисов.

Так зачем же мы пишем такой сложный Доктайп? И при чём он у всех такой разный. Он вам не нужен такой! Напишите его проще. Вот так:

<!DOCTYPE html>

Дело в том, что именно по этой части DOCTYPE браузер определяет, переходить ли ему в режим Standards Mode или нет. Указание дальнейшей спецификации и соответствующего адреса браузеру не нужно, он прекрасно справится. Спецификация нужна только для валидатора. Тем более что данная декларация, вот именно в таком виде уже включена в стандарт HTML 5 и тупые ошибки вы сможете определить W3C-валидатором.

Хорошо, допустим вы такой упрямый и всё равно считаете, что будете верстать в XHTML и указывать соответствующий доктайп, просто потому, что так правильней и можно проверить в валидаторе ту самую паранойю «disabled=”disabled”». Но на какой стадии вы это делаете? На стадии девелопинга! Так на продакшен-сервере, то он вам зачем?! Вот то-то и оно…

Холивар про «em vs. px» напишу чуть позже.

]]> http://seleckis.lv/journal/research/vyorstka-v-latvii-vchera-segodnya-zavtra/feed 12 Min-width и max-width в IE6 с помощью expression http://seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression http://seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression#comments Thu, 06 Aug 2009 08:52:17 +0000 Никита http://seleckis.lv/?p=1690 Уже писали много раз, просто приведу свой код.

В JavaScript-файле размещаем такую функцию:

function width(min,max){
	w = document.documentElement.clientWidth;
	return (w <= min) ? min + "px" : ((w >= max) ? max + "px" : "auto");
}

Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение:

  1. Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина;
  2. Если ширина документа больше максимальной ширины, то возвращается максимальная ширина;
  3. Иначе ширина указывается автоматическая.

Функция из CSS вызывается следующим образом:

div {
    width: expression(width(600,1000));

    /* далее для нормальных браузеров */
    min-width: 600px;
    max-width: 1000px;
}

600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью условных комментариев, либо воспользоваться хакками, поскольку чтобы изменить значение придётся лезть в два файла, а не в один. Ну это уже как кому удобнее.

Скачайте пример и убедитесь, что всё работает.

Минимальную ширину в IE 6 можно эмулировать с помощью приёма, в котором указывается правый border для контейнера шириной в необходимую минимальную ширину элемента, а элементу задаётся правый отрицательный margin равный той же минимальной ширине. При этом внутренний элемент должен быть либо плавающим (float), либо inline-block. В общем не читайте и не внимайте в эти последние предложения, а просто посмотрите пример на cssplay.co.uk.

]]> http://seleckis.lv/journal/browsers/min-width-i-max-width-v-ie6-s-pomoschyu-expression/feed 7 IE Tester — тестируем вёрстку в разных версиях IE http://seleckis.lv/journal/browsers/ie-tester-testiruem-vyorstku-v-raznyih-versiyah-ie http://seleckis.lv/journal/browsers/ie-tester-testiruem-vyorstku-v-raznyih-versiyah-ie#comments Wed, 11 Jun 2008 17:44:04 +0000 Никита http://seleckis.lv/journal/browsers/ie-tester-testiruem-vyorstku-v-raznyih-versiyah-ie

Internet Explorer

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

Как раньше делал я когда работал на Windows? Обновлял IE до версии 7 и устанавливал Multiple IE installer. Когда появилась восьмая версия, я обновил IE и стал пользоваться встроенной эмуляцией IE7.

Минусы в Multiple IE — не поддерживаются Conditional Comments и разные косяки рендеринга.

С тех пор многое изменилось, я стал работать на Маке, а соответственно стал использовать Parallels для запуска Win-софта.

IETester

Но не пришлось ставить глючный Multiple Installer. Я нашёл отличную замену, великолепную задумку и неплохую реализацию программы объединяющей в себе 4 браузера: IE 5.5, 6.0, 7.0 и 8 beta 1. Версия программы пока что 0.2.2, поэтому может быть ещё не стабильна и иногда может вылетать. Но текущий релиз оправдал мои надежды и действительно можно оценить разницу рендеринга всех указанных браузеров в одном окне. Теперь веб-разработка идёт гораздо легче и полноценнее.

Чтобы программа работала наиболее стабильно на Windows XP, нужно чтобы обязательно IE был обновлён до версии 7.
После обновления обязательно перезагрузите Windows. После установки IETester тоже перезагрузитесь. Такие процедуры немного придадут стабильности программе.

Что пока не работает:

  • При изменении размера окна, некоторое содержимое может пропадать. Рефрешь помогает.
  • Кнопки Назад/Вперёд не достаточно корректно работает.
  • Не корректно работает фокус, во всяком случае у IE7. В IE8 работает.
  • Не работают java-апплеты.
  • Не работает Flash в IE6.

Работа над IETester продолжается, разработку ведёт французская компания Core Services, буду продолжать следить за обновлениями программы.

]]> http://seleckis.lv/journal/browsers/ie-tester-testiruem-vyorstku-v-raznyih-versiyah-ie/feed 23 CSS фильтры (хаки) http://seleckis.lv/journal/browsers/css-filtryi-haki http://seleckis.lv/journal/browsers/css-filtryi-haki#comments Thu, 17 May 2007 14:48:03 +0000 Никита http://localhost:8506/?p=583 Когда ты верстаешь бессонными ночами, когда в Осле дивы не хотят становиться рядом, а спускаются вниз, когда Огнелис расширяет расширяет див складывая его ширину и паддинг, когда в ie7 появляются непонятные вертикальные расстояния, когда Лис с Оперой не хотят продливать бэкграунд по всему контенту, когда ie6 не хочет… да он вообще ничего не хочет делать! Приходят на выручку они – CSS ХАКИ!

Моя палочка-выручалочка. В основном пользуюсь (если уж без этого совсем никак):

  • IE6 – * html
  • IE7 – *+html

Например:

* html div#block {
height: 100px;

}

Означает что стиль будет работать только в IE6.

Для других не применяю. Под FF 2 и O9 затачиваю.

]]> http://seleckis.lv/journal/browsers/css-filtryi-haki/feed 3 XHTML умер в младенчестве http://seleckis.lv/journal/view/xhtml-umer-v-mladenchestve http://seleckis.lv/journal/view/xhtml-umer-v-mladenchestve#comments Tue, 27 Mar 2007 13:33:03 +0000 Никита http://localhost:8506/?p=454 Вот уже 7 лет прошло с тех пор как появился XHTML и был одобрен W3C. C тех пор консорциум всё пытался заставить производителей браузеров и web-мастеров следовать новому стандарту, но особо ему это не удаётся. Всё из-за “слишком” жёстких правил спецификации (как то – прекращение работы и выдачи ошибки при неправильном написании кода). Вот не любят web-макетировщики писать правильный код, нужно им чтоб браузер не орал, а хоть что-то показывал. Ну ладно перекосило в FF, зато в IE нормально выглядит. А то что в IE “баг + баг = хз, вроде получилось”, на это можно закрыть глаза, поскольку IE самый популярный.

Дело в следующем, W3C отказалось от дальнейшей работы над XHTML и решила вернуться к HTML. Некоторые считают что префикс “X” вообще был добавлен несознательно – ничего он не расширяет. Возможно.

Лично мне больше нравится писать в XHTML по той причине, что он, на мой взгляд, правильней. Но есть ньюансы. Обо всём по порядку:

  1. Логично, что если существует тэг <b>, то у него должен быть закрывающий </b>, почему же тогда в HTML нет закрывющего тэга у <br>? Такого рода тэги выбиваются из правил, значит это исключение, а когда есть исключение – не исключены ошибки. Значит тэг <br> будет как… ну можно сказать отдельный тип тэга, для простоты парсинга видоизменяем – <br />.
  2. В HTML существуют атрибуты-флаги, т.е. не содержащие значение. Они сами по себе и ключ и значение.

    <input type="checkbox" checked>
    В XHTML все атрибуты должны иметь какое-то значение.

    <input type="checkbox" checked="checked" />
    Вот тут уже по-моему лишнее. Я бы предложил вариант добавить атрибут, типа params, и туда складывать, всё что без значений:

    <input type="checkbox" params="checked, disabled" />
    Хотя я не помню, чтобы я в одном тэге использовал больше одного атрибута-флага, в таком случае можно писать одно значение, а не несколько через запятую.

  3. Все значения атрибутов должны быть в двойных или одинарных кавычках. И это правильно. Это также упрощает парсинг.
  4. Имена тэгов и атрибутов в XHTML пишутся строчными (маленькими) буквами. Я соблюдаю только потому, что мне так удобнее. Но это уже на любителя. Некоторые любят глобальные контейнеры большими буквами выделять, для наглядности. Но факт упрощения парсинга всё равно не оспорим.
  5. Перехлёст тэгов не допустим. Я считаю, что это должно касаться только блочных тэгов и таблиц. А, например, очень не плохая была бы возможность:

    <b>Здесь жирный текст. <i>А здесь наклонный и жирный.</b> Только наклонный текст</i>
    Вроде не правильно. Но удобнее чем:

    <b>Здесь жирный текст. </b><i><b>А здесь наклонный и жирный.</b> Только наклонный текст</i>
    Главное не запутаться.

  6. Кодировка по-умолчанию является UTF-8. Вот это резонно. Скоро выйдет PHP 6.0, который тоже по-умолчанию будет использовать UTF-8. Всё в этой жизни приходит к универсальности. Иначе сдыхает.
  7. В картинках обязательно должен быть атрибут alt, для браузеров не поддерживающих картинки и для пользователей дальних уголков нашего необъятного Google-мира, которые ради экономии трафика отрубают загрузку картинок.
  8. Размещать текст сразу в тэге body запрещено, нужен блочный элемент. Это крайность.
  9. Вложение блочных элементов(<div>,<p>) внутрь инлайновых(<a>,<strong>,<em>) логически недопустимо и у таких горе-макетировщиков должен падать браузер. Я сказал, должен!
  10. По специальным символам, типа &amp; не могу ничего сказать, ибо не могу пока прийти к единому мнению. Но с этим тоже надо что-то делать
  11. А всётки слишком много буков в декларации версии.

И последнее. Вернусь в началу. Если человек не умеет писать правильный код, то у него ничего не должно работать. Это принцип языков программирования. Некоторые считают, что нельзя HTML возводить в статус языка программирования, т. к. там ничего не программируется, это язык разметки и работать он должен как текстовой редактор. Возможно они и правы. Но тогда как избавиться от мусора и понять где у меня ошибка? Пересматривать весь код, больше ничего не остаётся. А с другой стороны, браузеры пытаются понять, что же хотел сказать мастер если он написал не по правилам, может это первый шаг к браузерам с AI? Браузер пытается прочитать его логику. А логики там нет. Web-мастер тупо ошибся. Нужен ли нам в браузере AI в таком случае?

W3C отказалась от XHTML из-за неудачи с внедрением. А неудача была из-за совместимости в браузерах, которые поддерживали все версии HTML/XHTML. Вот если бы рубанули всё нафиг или переход сделали бы более жёстким, вот где было бы счастье. Опять же рекламную компанию и убеждения на конференциях.

Кстати не плохо было бы администрации W3C подумать о дизайне своего сайта.

]]> http://seleckis.lv/journal/view/xhtml-umer-v-mladenchestve/feed 6