Seleckis.lv :: журнал Никиты Селецкого » Брaузеры

Вёрстка в Латвии: Вчера. Сегодня! Завтра?

Никита — Thu, 27 May 2010 15:31:55 +0000

Версия моего выступления на 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 браузер определяет, переходить ли ему в режим Standards Mode или нет. Указание дальнейшей спецификации и соответствующего адреса браузеру не нужно, он прекрасно справится. Спецификация нужна только для валидатора. Тем более что данная декларация, вот именно в таком виде уже включена в стандарт HTML 5 и тупые ошибки вы сможете определить W3C-валидатором.

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

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

Min-width и max-width в IE6 с помощью expression

Никита — Thu, 06 Aug 2009 08:52:17 +0000

Уже писали много раз, просто приведу свой код.

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

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

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

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

Функция из 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.

IE Tester — тестируем вёрстку в разных версиях IE

Никита — Wed, 11 Jun 2008 17:44:04 +0000

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, буду продолжать следить за обновлениями программы.

IE8 не проходит Acid2 тест

Никита — Mon, 10 Mar 2008 07:59:44 +0000

Но уже гораздо лучше.

Радует тот факт, что в M$ зачесались и стали работать в направлении поддержки стандартов. В особенности это касается правильного отображения инструкций CSS 2.1. Правда, есть косяки с отображением png. То ли он болезненно относится к экспрешенам в CSS, то ли к собственным фильтрам.

Примечательно, что IE8 имеет возможность включить эмуляцию IE7 (не забудьте после активации перезагрузить браузер).

Для верстальщиков это как нельзя кстати. M$ пошла на встречу веб-девелоперам, спасибо ей за это (хотя, это надо было делать раньше). Ещё неплохо бы встроить эмуляцию IE6, чтоб не приходилось пользоваться левыми standalone-версиями.

Скачать девелоперскую бета-версию IE8 можно на сайте производителя.

Netscape Navigator 9.0

Никита — Fri, 19 Oct 2007 10:59:37 +0000

Не поверите. Перешёл на это чудо.

Firefox – один в один, но…

В два раза быстрее
В два раза меньше памяти жрёт

Работает всё абсолютно так же, поддерживает расширения и темы от Firefox, только интерфейс немного другой и название. А так все пункты меню, все диалоговые окна, все настройки, движок – всё тоже самое что и у Firefox.

Единственное что не работает – I’m Feeling Lucky. Но в любом случае при вводе запроса в адресную строку редиректит на google.

Официальный сайт
Подробнее о возможностях

Узнал от tups.lv

Safari Bookmarks

Никита — Mon, 25 Jun 2007 07:43:39 +0000

Safari , обновился до версии 3.0.2! Качаем обновленный Safari для Windows или просто апдейтим с помощью Apple Update. Заработали те самые вылетавшие букмарки! Отображаются теперь все шрифты! Есть проблемы с формами и не поддерживается, например, скрипт авторизации в wordpress выдающий ошибку 403. Так же как и Firefox, Safari поддерживает гугловскую фишку “I’m Feeling Lucky”. И вообще продукт быстрыми темпами развивается. Особенно радует что интерфейс они оставили свой а не использовали виндозный GUI.

Safari заработал

Никита — Tue, 19 Jun 2007 21:01:38 +0000

Заработал он более корректно после обновления, которое совершил Apple Update. Так что все у кого были такие же глюки как у меня, гляньте на Safari, может уже всё в порядке. Правда всё равно, некоторые шрифты не подцепились, ну хоть менюшки работают и то хорошо.

Паранойя Мелкомягких

Никита — Fri, 15 Jun 2007 11:47:40 +0000

Ну вот нахрена делать блокировку внедрённых в web-страницу flash-объектов, если сама компания в своих flash-презентациях использует javascript-код для обхода своей же паранойи? Или таким образом они хотят стимулировать ликвидацию тэгов и ?

Safari under Win

Никита — Wed, 13 Jun 2007 13:16:32 +0000

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

Работать, работать и ещё раз работать… (с) Я сказал

CSS фильтры (хаки)

Никита — Thu, 17 May 2007 14:48:03 +0000

Когда ты верстаешь бессонными ночами, когда в Осле дивы не хотят становиться рядом, а спускаются вниз, когда Огнелис расширяет расширяет див складывая его ширину и паддинг, когда в ie7 появляются непонятные вертикальные расстояния, когда Лис с Оперой не хотят продливать бэкграунд по всему контенту, когда ie6 не хочет… да он вообще ничего не хочет делать! Приходят на выручку они – CSS ХАКИ!

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

IE6 – * html
IE7 – *+html

Например:

* html div#block { height: 100px;

}

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

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