Наполеоновское
24 Июль 2008И снова здравствуйте. Вашему вниманию предлагается список планируемых публикаций на конец лета — начало осени:
- Рецензия на книгу Сергея Соколова «CSS 3 в примерах», разгромная.
- Статья, посвещённая эффективной работе с табличными данными — от размышлений об уместности использования таблиц до практических примеров.
- Продолжение, а точнее полная обновлённая версия статьи «CSS-менеджмент».
- Подробное исследование вопроса нарезки и оптимизации графики для вёрстки — от основ использования форматов до инструментария. Рабочее название — «С ножом против паровоза».
Отчётная часть на этом закончена, и напоследок позволю себе сообщить вам о запуске сайта DarkEntries. Вся дневниково-музыкальная часть, внезапно исчезнувшая с этого сайта, всплыла на новом домене.
Неизбежное Исключение
5 Июнь 2008Что ж, блог CSS3.info сегодня сообщил нам, что последняя бета-версия Firefox, наряду с Safari и Opera, полностью проходит тест на работоспособность CSS3-селекторов. Однако в разговорах про все чудеса CSS3 не стоит забывать про одно неизбежное исключение:
So Safari, Opera and now Firefox all pass the test; of the major browsers, that only leaves one Inevitable Exception…
Судя по словам архитектора IE8 Алекса Могилевского, CSS3-селекторы не будут внедрены в IE до тех пор, пока спецификация не будет официально утверждена. А что до тех CSS3-селекторов, что уже появились в IE7 («we actually did a couple of CSS3 Selectors for IE7»), то это, по его же словам, произошло случайно — просто человек, занимавшийся внедрением, не был в курсе, что это оказывается CSS3…
В общем, теперь-то мы знаем, что на самом деле скрывается за аббревиатурой IE ;)
Пять звёздочек
28 Май 2008Продолжая тему небольших полезных CSS-решений, предлагаю вашему вниманию интересную реализацию механизма рейтингов. С виду — всё просто: пять звёздочек, клик по каждой фиксирует рейтинг на позиции от одного до пяти баллов. Если же какой-то рейтинг уже имеется, при наведении он должен сбрасываться, чтобы пользователь имел возможность выразить своё мнение.
Каких только решений не придумано для этой тривиальной задачи — от сомнительного списка элементов <img> до более-менее внятных решений с помощью фоновых изображений. Но одно неизменно — всё это сдобрено хорошей порцией JS-кода, отвечающего за необходимое поведение. Что вполне логично приводит к тому, что без JS, в лучшем случае, не видно всей красоты, а в худшем — вообще нельзя проголосовать. В общем, не слишком хорошо.
Поэтому я предлагаю новое решение: пять звёздочек и его особенности:
- Вся динамика максимально вынесена в CSS при помощи псевдо-класса
:hover, JS применяется только для фиксирования результата голосования и для того, чтобы заставить IE6 понимать указанный псевдо-класс не только для ссылок, за счёт переключения дополнительного классаphoverпри взаимодествии с контролом. - Следовательно, при отключённом JS, во всех браузерах, кроме IE6 и младше, вся красота со звёздочками продолжает работать, а сам процесс голосования становится простым переходом по ссылке.
- Для отрисовки звёздочек используется только одна картинка, таким образом — только один запрос и контрол уже готов к работе.
- Потенциально, голосование становится возможно даже при отключённых картинках — в таком случае рейтинг выглядит как прогресс-бар. Очевидность контрола в этом случае ухудшается, но и это уже ценно.
Скажем alt картинкам!
26 Май 2008Создавая доступные сайты, без сомнения, стоит обращать внимание и на то, как они выглядят при отключённой графике. Существует ряд традиционных рекомендаций, которые помогут вам в такой ситуации:
- Не забывайте добавлять фоновый цвет при указании фонового изображения, когда цвет фона страницы совпадает или не слишком контрастирует с цветом текста.
- Постарайтесь обрисовать основные блоки, очертания которых формируются с помощью картинок, при помощи цвета фона или рамок. Чтобы каркас вашего сайта прорисовывался и без графики. Как пример такой практики — задание слабо контрастного цвета фона элементов
<img>для иллюстраций в тексте для того, чтобы избежать дырок в тексте — конечно при условии, что картинкам заданы размеры. - Не ленитесь указывать альтернативный текст для изображений и не забывайте, что этот текст можно оформлять, применяя стили шрифта к элементу
<img>.
В принципе, можно продолжать и дальше, но я не об этом. Обратите внимание на последнюю рекомендацию — о ней помнит большинство верстальщиков, иначе можно получить линейкой по рукам от валидатора. Однако мало кто вспоминает про такой слегка сомнительный, но пока вполне легальный элемент, как <input type="image"/>
И чёрт с ней, с иллюстрацией — не увидят, да может и к лучшему. А вот невозможность отправить форму при отсутствующей или неявно присутствующей кнопке — это уже дело посерьёзнее. И что будем делать? Понятное дело — прописывать текст действия, написанный или подразумеваемый на картинке. Но как? К примеру, встретил я на днях такое:
<input type="image" src="send.gif" value="Отправить"/>
Страна Советов
22 Май 2008Принимая приглашение Александра Исакова поучаствовать в провокации, предлагаю вам пять советов, облетевшие словно письмо счастья почти все русскоязычные блоги разработчиков:
- Всегда отдавайте каждому браузеру только то, что он должен и может переварить. Это значит, что ваш HTML-документ и файл стилей абсолютно валидны, не содержат загадочных невидимых юникодных символов, все хаки для IE вынесены во внешний файл и подключаются через условные комментарии. Тогда мистики в вашей работе поубавится.
- Пишите хаки только для IE, не ройте себе яму. Где и как — см. пункт 1.
- Изучайте возможности CSS3 и внедряйте их в свои работы, не забывая про обратную совместимость с динозаврами.
- Не превращайтесь в макетонарезочный автомат — мыслите на шаг вперёд дизайнера, помогайте ему и не нойте «он не предусмотрел состояние посещённых ссылок!», а просто сделайте это сами.
- Фары и ремень!.. Точнее, грамотность и типографика. Тире, копирайты, кавычки, заголовки, списки, врезки, цитаты, форматы дат, телефонных номеров — всё мнообразие представления текста. Не поддавайтесь быдло-вебу и чат-стилю текста.