Я не трус, но чёрт возьми!
30 августа 2008И вроде ничего страшного — ну вышел IE8 beta 2, ну добавили поддержку каких-то новых свойств из стандарта CSS 2.1. Сиди себе и жди финальную версию где-нибудь поздней осенью. А там что? Никакого тебе hasLayout’а, никаких expression’ов — словом, никаких привычных методов борьбы с багами…
И поэтому немного страшно.
Для тех, кто не хочет, чтобы было страшно, есть два решения. Первое — поверить лозунгам Microsoft, что, мол, мы делаем браузер ориентированный на полную поддержку веб-стандартов. Что ж — отлично, значит, во избежание каких-то проблем, нужно просто не отдавать IE8 файлы хаков:
<head><link rel="stylesheet" type="text/css" href="style.css"/><!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css"/><![endif]–></head>
«Если версия IE младше, чем восьмая, то подключаем файл с хаками», — говорит нам этот код. В результате, мы в полной мере доверяем той поддержке веб-стандатов, а также тем багам, которые безусловно всплывут после выхода IE8. Благородно до умиления, но, по мне, слишком рисково.
Наполеоновское
24 июля 2008И снова здравствуйте. Вашему вниманию предлагается список планируемых публикаций на конец лета — начало осени:
- Рецензия на книгу Сергея Соколова «CSS 3 в примерах», разгромная.
- Статья, посвещённая эффективной работе с табличными данными — от размышлений об уместности использования таблиц до практических примеров.
- Продолжение, а точнее полная обновлённая версия статьи «CSS-менеджмент».
- Подробное исследование вопроса нарезки и оптимизации графики для вёрстки — от основ использования форматов до инструментария. Рабочее название — «С ножом против паровоза».
Неизбежное Исключение
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="Отправить"/>