Lovata Developers » Clientside

ACID3 готов!

Павел Ловцевич — Wed, 30 Jan 2008 11:40:07 +0000

Сегодня известный разработчик синтетического теста браузеров на соответствие вебстанадртам ACID, а ныне работник Google, Иан Хиксон сообщил об официальном релизе ACID3. Кроме того, все версии тестов и новости проекта теперь доступны по адресу acidtests.org.

Мы уже рассказывали ранее о нововведениях в ACID3, но не лишним будет повторить, что в отличие от ACID1, проверка которого была сосредоточена на блочной модели, и ACID2, который проверял широкое разнообразие HTML и особенностей CSS, ACID3 осуществляет проверку 100 вероятно уязвимых мест в HTTP, HTML, CSS, ECMAScript, SVG и XML, а также проверяет работу с DOM’ом (без которого сложно представить себе современно веб-приложение).

DOM2 Core
DOM2 Events
DOM2 HTML
DOM2 Range
DOM2 Style (getComputedStyle, …)
DOM2 Traversal (NodeIterator, TreeWalker)
DOM2 Views (defaultView)
ECMAScript
HTML4 (&lgt;object&rgt;, &lgt;iframe&rgt;, …)
HTTP (Content-Type, 404, …)
Media Queries
Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
SVG
XML
XHTML 1.0
CSS2 (@font-face)
CSS2.1 (’inline-block’, €?pre-wrap’, parsing…)
CSS3 Color (rgba(), hsla(), …)
CSS3 UI (’cursor’)
data: URIs
и прочее

Иан Хиксон является также одним из первых авторов спецификации HTML5, также известной как спецификация Web Apps 1.0, и ряда других разработок, как то хранение данных на стороне клиента (client‐side storage) и улучшенные формы (enhanced forms).

Иан написал 64 из 100 тестов, остальные 36 были разработаны совместными усилиями производителей браузеров и независимых веб-разработчиков. Работа над новым Acid3 началась практически в то время, когда разработчики IE8 сообщили о том, что их браузер успешно прошел Acid2. Правда, эта новость в сети была воспринята весьма критично, так как выяснилось, что для этого на стороне сервера пришлось подправить заголовки HTTP.

Обращаем ваше внимание, что для корректного тестирования вашего браузера, вы должны использовать настройки браузера по умолчанию. Изменяя масштабирование страницы, минимальный размер шрифта, применяя “fit-to-width”, или делая другие изменения можно изменить результаты прохождения теста.

Ссылки по теме:

Встречайте – ACID3

Павел Ловцевич — Fri, 11 Jan 2008 22:17:47 +0000

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

Традиционно тест проверял парсинг HTML и CSS, причем часто не прямым тестированием свойства, а обходным путем, изучая результаты его работы в браузерах. Например, для того чтобы пройти «ужасный» padding/margin тест, браузерам, кроме корректной поддержки CSS, нужно иметь правильную боксовую модель (“box model”).

Что же нового несет в себе ACID3? В первую очередь он главным образом основывается на технологиях ECMAScript и DOM. Разберем, что же именно тестируется, особенно в отношении ECMAScript:

Элизия массивов – вещи подобно [,,] должны иметь нулевую длину, а для масива [0,,1] она должна быть равна 3.
Методы массива – проверяется возможность добавления нескольких элементов в массив (.unshift(0, 1, 2)) и объединение его с undefined (.join(undefined).)
Преобразования чисел – проверяется работа таких методов как .toFixed(), .toExponential() и .toPrecision(), в первую очередь, с дробными и отрицательными чилами.
Операции со строками – метод substr() должен уметь работать с отрицательными аргументами (.substr(-7, 3)), доступ к символам строки должен осуществляться по их позиции (”my string”[0]). (это часть спецификации ECMAScript4)
Работа с датами – удостовериться, что некоторые методы возвращают NaN (например, d.setMiliseconds() без аргументов), а также что происходит обязательное смещение +1900 лет.
Unicode символы в названиях переменных – их использование должно вызывать оÑ?ибку. Например,
```
eval("test.i\\u002b= 1;");
```
Регулярные выражения – /[]/ должно соответствовать пустому массиву, а /[])]/ вызывать ошибку. Должны поддерживаться обратные ссылки (backreference) на несуществующие образы и отрицательные lookahed’ы – /(?!test)(test).exec(”test test”).
Перечисления (Enumeration) – нужно убедиться, что свойства объекта правильно перечисляются, что доступны свойства с определенными именами (toString, hasOwnProperty, etc)
Конструкторы – у пользователя должна быть возможность определять собственные конструктоы в свойстве .constructor, свойство .constructor не должно быть в перечислении, а свойство .prototype.constructor должно быть удаляемым.
Функции – возможность вызывать функцию по имени из самой себя, прямое изменение ее имени должно быть запрещено(только используя массивы функций). (function test(){ … })(); – «test» не должен быть виден в родительской области.
Ошибки – переменные в блоке catch(){} должны в первую очередь работать с аргументами catch(), а затем уже с родительскими. Например
```
var e = "my name";
try
{
...//некий код
}
catch(e)
{
alert(e);
}
```
не должно выводить “my name”.
Операции присваивания – s = a.length = “123″; – a.length должно возвращать 123, а не 3
Кодировки – encodeURI() и encodeURIComponent() должны корректно работать с нулевыми байтами.

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

Подробности автор теста обещает представить уже в ближайшие дни.

И напоследок, предварительные результаты тестирования НЕЗАКОНЧЕННОГО Acid 3 над НЕЗАКОНЧЕННЫМИ? версиями наиболее популярных браузеров, которые предоставил автор. Мы проверили, все сходится! =)

Вот эталон, который должен показать браузер.

Firefox 2.x

Firefox 3.0b2

Safari 3

WebKit Nightly

Opera 9.5b1

Internet Explorer 7

Ссылки по теме:

Обновление браузеров пользователей

Павел Ловцевич — Sun, 16 Dec 2007 11:36:05 +0000

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

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

Самый оптимальный способ из предлагаемых на выбор – установка небольшого скрипта, который при обнаружении у пользователя IE6 будет создавать сверху страницы имитацию системного сообщения браузера Internet Explorer такого вида (при этом весь контент сайта смещается вниз и ничего не перекрывается):

При нажатии пользователем на крестик справа “тулбара” тулбар исчезнет, пользователю будет установлена куки и в ближайшие 30 дней он больше не увидит этого тулбара.

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

Этот скрипт вы можете скопировать и себе на сервер: ie6fuck.js или ie6fuck.js.gz.

Уроки верстки

Павел Ловцевич — Thu, 01 Nov 2007 00:05:20 +0000

Опыт. Какое же всетаки это бесценное сокровище, его нельзя купить, одолжить, его можно только получить самостоятельно. Учиться, учиться и учиться, как говорил небезызвестный дедуÑ?ка всех октябрят. Однако опыт приходит быстрее и усваивается лучше, если человек наряду с получением академических знаний, практикуется, практикуется и практикуется.

В свое время мне очень помогли блоги вебразработчиков и форумы, на которых они делились своими практическими знаниями по интересующей меня теме верстки гипертекстовых документов. Это очень помогло мне в быстром освоении правильного подхода к верстке. До моего озарения я 5 лет придерживался старой “табличной” школы верстки, слыхом не слыхивал о принципах вебстандартов, поэтому мне было крайне тяжело переучиваться, когда я столкнулся с необходимостью кардинального роста качества моей работы.
Сегодня накопленный опыт просто давит на черепную коробку изнутри и мне хочется им поделиться в свою очередь с новым поколением. И, дабы как-то упорядочить публикацию моих материалов по верстке, я решил сделать что-то вроде электронной книги. Мне кажется, так легче будет и мне подавать материал и вам его воспринимать. Может быть этот труд даже вырастет когда-нибудь в печатное издание, как знать…

В общем на текущий момент я решил публиковать материалы примерно в следующем порядке:

Литература и электронные материалы.
Инструментарий: редакторы.
Инструментарий: браузеры и плагины.
Инструментарий: утилиты и вебсервисы.
Введение в верстку гипертекстовых документов.
Вебстандарты: теория разделения содержимого и представления.
Выбираем технологии: HTML, XHTML, CSS.
Введение в селекторы.
Специфичность селекторов.
Базовый файл стилей и рекомендации “хороÑ?его” CSS.
Блочная модель CSS.
Типичная разметка.
Работа с текстом и шрифтами.
Понятие багов и методы борьбы с ними.
Фильтрация стилей.
Работа с графикой.
Практикум и эксперименты.

Пока я вижу это так, возможно будут коррективы по ходу написания и публикации. Этот мой маленький проект я назову пока, например, CSS Book. В месяц я планирую писать 3-4 поста, которые буду публиковаться в ленте блога. Также я создал отдельную страничку CSS Book, на которой будет собираться оглавление возможно будущей книги =).

Когда деревья были большими или с чего все начинали?

Павел Ловцевич — Fri, 28 Sep 2007 08:35:28 +0000

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

В первую очередь следует знать, что кроссбраузерная верстка сродни магии. Объясняется это все банальной вещью, которую я озвучу так: ”Все мы ненавидим Internet Explorer!” Таким образом, 90% всей магии сводится к тому, чтобы заставить правильно сверстанный макет корректно отображаться в браузере Internet Explorer всех актуальных версий.

Чтобы научиться сему мастерству потребуется практика, много практики. И, сев сейчас серьезно изучать аспекты верстки, вы и через полгода будете удивляться, сколько вы до сих пор не знаете.

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

Итак, вот мой ТОП книг, обязательных к прочтению каждому frontend-разработчику или в простонародье верстальщику.

Джеффри Зельдман. Web-дизайн по стандартам.

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