андрей смирнов: css-дизайн без таблиц и скриптов
второе апреля / 2 апреля, 2004 / 12:09
благодушное веселье, воцарившееся после первоапрельских шуточек дагласа баумана и дейва ши, было мгновенно уничтожено сообщением о новом и очень опасном вирусе.
вирус сканирует локальную и удаленную файловые системы на наличие html-файлов (файлы с расширением .htm, .html, .shtm, .shtml, а также любые файлы, содержащие тег <html> среди первых 128 символов документа) и проверяет их на соответствие веб-стандартам при помощи cse html validator’а. если файл проваливает тест на корректный xhtml 1.0 strict, он удаляется.
в случае, если вирус сумеет прорваться на мою локальную машину, весь id-as.com будет немедленно уничтожен! стандарт, который поддерживает этот сайт (xhtml 1.0 transitional) слегка не дотягивает до вышеупомянутого.
а посему. свистать всех наверх! задраить шлюзы! врубить файрволлы! и… бегом на вторую часть apple roadshow.
очередной ре-дизайн id-as.com / 1 апреля, 2004 / 10:69
это уже не смешно, но очередной ре-дизайн случился!
обновлено все, что входит в емкое понятие дизайна: структура, форма, функциональность. пока, правда, только на главной странице.
если главная страница у вас отображается по-старому, нажмите кнопку браузера «обновить» не менее трех раз пока не появится новый дизайн. если после трехкратного нажатия «обновить», новый дизайн не появился, сделайте следующее: сохраните управляющий новым дизайном css-файл bnew.css на своем жестком диске, откройте его в любом wysiwyg-css-редакторе типа «блокнот» и проверьте его на наличие соответствующих ошибок.
после такой проверки все окончательно прояснится и встанет на свои места. по крайней мере будет понятно, что почетное место в книге рекордов гинесса «за самую частую смену дизайна сайта» ресурсу id-as.com пока не грозит…
ie/win: квк, часть вторая / 28 марта, 2004 / 11:36
в продолжение начатого ранее разговора проиллюстрируем еще один баг в поведении ie/win по отношению к новому дизайну. на этот раз баг одинаково затрагивает все версии ie/win с пятой по шестую.
на каждой странице сайта (пока, на самом деле, только на двух) присутствует англоязычное название соответствующего раздела. на главной странице—это “events”. элемент #pagename, фоновое изображение которого используется для отображения этого названия, позиционирован по отношению к родительскому элементу следующим образом:
position: absolute; left: 0; bottom: 0;
иными словами, он прилеплен к белому полю с основным текстом страницы и не должен отходить от него ни на пиксел. и не отходит в нормальных браузерах: opera 6+, netscape navigator 6+, firefox 0.8. но во вселенной существует браузер, который творчески подходит к осмыслению потребляемого кода и его последующему рендерингу. это наш «герой», ie/win, конечно.
одной из главных целей нового дизайна id-as.com было обеспечение удобной работы с текстовым содержанием сайта при любых разрешениях монитора зрителя: от 800x600 до 1600х1200 и даже выше. при высоких разрешениях нормальная работа с текстом достигается увеличением размера шрифта в браузере. в gecko-браузерах это можно сделать быстро клавиатурным сокращением ctr++, в ie/win—через главное меню (вид>размер шрифта).
при изменении размера шрифта на «крупный» и «самый крупный» ie/win вставляет линию толщиной в один пиксел между элементом #pagename и белым полем страницы, что хорошо видно на приводимой иллюстрации.
если учесть, что белый английский текст на каждой странице призван, кроме всего прочего, слегка разбавить «невыносимую» геометричность дизайна путем слияния с расположенным ниже белым фоном, то даже такая тонкая линия легко сводит на нет вышеозначенную идею.
словом, картина вырисовывается вполне понятная. в некоторых случаях ie/win выступает просто-напросто соавтором веб-дизайнера, криво и безапелляционно навязывающим свое видение элементов layout’а.
сейчас я работаю над двумя новыми проектами, в основе которых xhtml+css-дизайн без таблиц и прочей кодовой грязи. и каждый новый день приносит новые открытия в нескончаемой череде «сюрпризов», преподносимых творением microsoft…
ie/win: кривее всех кривых / 24 марта, 2004 / 21:35
речь в этом сообщении пойдет о самом любимом россиянами и самом ненавистном для веб-разработчиков браузере internet explorer for windows.
ie/win (так обычно называют для краткости это детище microsoft) страдает кучей багов и ошибок, связанных с некорректной интерпретацией стандартов css1 и css2.
наихудшая поддержка вышеупомянутых веб-стандартов у пятой версии ie/win. что вполне логично, если учесть, что браузер был сделан в далеком девяносто восьмом году.
ie/win 5.5 лишь незначительно улучшил поддержку css, надежно сохранив кривое поведение своего предшественника по отношению к блоковой модели (box model).
текущий браузер ie/win 6 можно похвалить за то, что в нем наконец была решена проблема с блоковой моделью (в режиме полной совместимости со стандартами, который включается указанием соответствующего dtd).
и все-же факт остается фактом: ie/win 6 до сих пор имеет серьезные проблемы с корректной интерпретацией некоторых css-свойств (потенциально имеющее богатейшие возможности для сложного позиционирования элементов страницы float—одно из них).
ie/win и главное меню id-as.com
букет багов различных версий ie/win расцветает пышным цветом при рендеринге такого простого элемента дизайна id-as.com, как главное меню. смотрим картинку (изображение намеренно высветлено и откорректировано по цвету для большей наглядности):
хвала ie/win 6! он прекрасно справляется с дизайном ненумерованного списка, текущая закладка в котором выделена при помощи css-отступов и фонового цвета.
поведение ie/win 5 неадекватно, но понятно. он не поддерживает свойство padding для строчных (inline) элементов. отсюда и скукоженность выделенной закладки «события», и прилипание всего списка к левому элементу дизайна.
а вот кто знает, откуда берется горизонтальное поле, отделяющее закладку «события» от залитой этим же цветом левой части дизайна, в ie/win 5.5? я слегка поэкспериментировал с заданием разных значений используемых css-свойств, но вычислить причину такого поведения пятиполовинчатого быстро не смог. медленно же заниматься такими вещами нет ни времени, ни желания.
а посему… если кто-либо из вас сталкивался с похожей ситуацией, дайте знать на соответствующий случаю мейл.
ie/win: будущее
насколько мне известно, microsoft не планирует выхода новых версий своего браузера до появления новой операционной системы. нет никаких гарантий и того, что новая версия (когда она появится) будет очищена от текущих багов и несовместимостей со стандартами. а, значит, бороться с ie/win и нецензурно вспоминать его создателей придется еще очень даже неоднократно…
будущее веб-дизайна / 19 марта, 2004 / 14:35
как известно, в остине (техас, сша) только что завершился sxsw interactive festival. это ежегодный интерактивный форум, который фокусирует свое внимание на самом современном и творческом в мире веб-сайтов, интерактивности и онлайн-технологий.
в рамках фестиваля прошла традиционная церемония награждения sxsw web awards. в конкурсе представлено более двадцати номинаций от «анимации» и «юмора» до «ресурса разработчика» и «веблога». в этом году сразу в двух номинациях (“developer's resource” и “best of show”) победил сайт css zen garden, созданный около года назад канадским веб-дизайнером и дизайнером-графиком dave’ом shea. поздравляем!
два слова о “css zen garden”
ресурс был создан для демонстрации преимуществ и богатейших (с точки зрения дизайна) возможностей использования css.
идея проекта “zen garden” проста. dave shea создал несложный xhtml-документ, который доступен для скачивания и по правилам “zen garden” не может быть изменен. каждый желающий может применить к этому базовому xhtml-коду свой собственный дизайн через css-файл и любые подобранные для этого дизайна изображения.
все начиналось довольно скромно с вариантов, написанных самим автором. но на сегодняшний день “zen garden”—это более двухсот разнообразных дизайнов, предоставленных дизайнерами со всего мира (россии в этом списке, насколько я понимаю, пока нет).
hi-fi css-дизайн
на днях dave shea опубликовал стенограмму своего выступления на форуме sxsw 2004. вот как звучат по-русски некоторые из идей, которые завершали его доклад.
если вы дизайнер, который по той или иной причине еще не исследовал возможности css, начинайте немедленно! мир движется в этом направлении, включая заказчиков. …
если вы дизайнер, который только начал учиться css-сайтостроительству, не беспокойтесь. чем дальше, тем легче. изучать css непросто, но по мере его освоения, вы все меньше и реже будете проклинать браузеры, которые не хотят с вами «сотрудничать». …
если вы дизайнер, который уже какое-то время использует css, то где же ваш “zen garden”-дизайн? ждемс…
если вы руководитель веб-агенства и ваш дизайнер не использует css, требуйте, чтобы он начал это делать!
если вы руководитель веб-агества, и ваш дизайнер хорошо владеет каскадными таблицами стилей, вы возможно ему не доплачиваете :)
в своем более раннем сообщении dave shea публикует заметки, которые он сделал во время выступления эрика мейера, дагласа баумана и других известных деятелей современного веб-дизайна. полезное чтение. иначе не скажешь.
веб-стандарты: идем не туда?
чтобы картина будущего веб-дизайна не казалась такой уж безоблачной и однозначной, приведу пару источников, где обсуждаются вопросы использования веб-стандартов, их значимости в современном и грядущем веб-дизайне, перспектив и возможной судьбы. в статьях и комментариях к ним представлены самые разные точки зрения, что особенно интересно. все, естественно, по-английски.
десять тысяч посещений позади
чтобы все же завершить данный выпуск на мажорной ноте, порадую всех читателей id-as.com фактом преодоления десятитысячной отметки в разделе статистики под названием «посещения». в моем случае эту статистику генерирует webalizer. это общая цифра посещений сайта за шесть с половиной месяцев его существования. полученная не без участия постоянных посетителей ресурса.
за что вам всем отдельная благодарность. отмечать!
2003
- serov in sarov
- макка в москве
- карсон прилетал
недавно здесь
недавно там
синдикация
веб-стандарты
