21.02.2009

Особенности верстки Gmail

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

1. Названия классов

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

2. Несемантическая верстка

Например, список папок сделан не ul>li, а дивчиками (адепты семантической верстки содрогнулись от ужаса). Однако, учитывая что все генерится яваскриптом, не вижу в этом большой проблемы.

3. Спрайт с фоном

Картинка со всеми иконками содержит фиолетово-голубой паттерн-бэкграунд.

Очевидно, сделано это для того, чтобы сразу заметить съехавшее на пиксел позиционирование иконки. Такая самотестирующаяся верстка получается. Круто, но я бы не решился отдавать в продакшн такую картинку. Мало ли что :)

4. Скругленные уголки

Думаю, в какой-то момент (вероятно, когда делали Themes) чуваки заманались вырезать эти уголки и сделали сервис, который генерит картинки на лету.

http://mail.google.com/mail/rc?a=af&c=c3d9ff&w=4&h=4
http://mail.google.com/mail/rc?a=af&c=black&w=32&h=16

Параметры: c — цвет в RGB или словом, w — ширина (от 1 до 64), h — высота (от 1 до 64). Что означает параметр a=af я не осилил.

Smart folks, those Google people :)

5 комментариев:

Анонимный комментирует...

Нечеловеческие названия классов, несемантическая верстка, весь html в js — всё это очень напоминает фреймворк, автоматически генерирующий заготовки под генерацию интерфейса по описанию.
Кстати, все стили инлайн в странице.

makishvili комментирует...

Забавно – разные уголки отдельными http-запросами.
Обосновано, если только их отрисовка их делается через js.

hmelyoff комментирует...

Степа привет :)
а какие у тебя против отдавать такой спрайт в продакшн?

Степан Резников комментирует...

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

Во-вторых, разве можно на все 100% быть уверенным, что у пользователей никогда ничего не съедет? При всем многообразии браузеров? При том, что пользователь может влиять на внешний вид страницы, начиная от размера шрифтов и заканчивая подключением своих стилей в браузере? Поэтому, я за то, чтобы постараться нивелировать съехавшую верстку, то есть сделать это незаметным. Лучше перебдеть, чем недобдеть :)

Анонимный комментирует...

Не думаю, что в Гугле генерируют картинки на лету, просто отдают сделанные заранее.