На протяжении большей части последних двух лет спецификация CSS разбиралась, скручивалась, растягивалась и забивалась. Хотя у CSS, вероятно, все еще есть хитрость или два, я думаю относительно безопасно предположить, что, если что-то еще не было достигнуто с чистым CSS, это, вероятно, не может.
Конечно, Стю Николлс неизбежно докажет вам, что вы не правы, но давайте представим, что он не существует на данный момент.
Так какие у тебя варианты сейчас?
1- Забудьте об этом и дождитесь широкого распространения CSS3.
2- Используйте DOM для преодоления пробелов в CSS2
Хотя естественно рассматривать JavaScript как инструмент для проектирования взаимодействия и поведения сайта, не стоит недооценивать его способность преодолевать пробелы в представлении, которые CSS не может.
Алессандро Фулсинити продемонстрировал здесь отличный пример . Как и статья Саймона с закругленными углами за прошлый год, этот метод берет чистый HTML и «встраивает» углы в разметку через браузер. Изюминка в сценарии Алессандро в том, что он вообще не использует изображения .
Как вы можете видеть из этого вида «zoomed-n-bordered», он использует сложенные, сужающиеся блочные элементы (фактически, полужирные теги) для создания углового профиля. Если скрипт не запускается, дизайн рендерится довольно эффективно, за исключением мягких углов. Сценарий также имеет модульную структуру, позволяя вам добавлять свои углы к любому новому элементу страницы одной строкой.
Что мне нравится в этих видах мостов, так это то, что через два года, когда IE8.5, Firefox 3.4 и Safari 3.1 все делают CSS3 во сне (хорошо, назовите меня высшим оптимистом), мы можем обновить CSS и просто удалить функция из скрипта. Как будто его никогда не было.
Подобные методы могут не подходить для любых обстоятельств, но если ваша альтернатива заключается в засорении вашего контента подразумеваемыми структурами и другими нежелательными DIV для достижения цели макета, стоит подумать.
Следуя аналогичной теме, я опубликовал некоторые мысли о недавнем эксперименте с текстовыми эффектами DOM в последнем представлении « Дизайн» .
Прочитайте полный текст для мимолетных, но резюме:
- Используйте DOM, чтобы получить все стандартные заголовки на странице (в данном случае h1s)
- Создайте еще две копии каждого заголовка
- Вложите эти новые заголовки в исходные заголовки
- Используйте селекторы и абсолютное позиционирование в CSS, чтобы получить эффект тени
Я думаю, что визуальный эффект имеет потенциал и может придумать множество вариаций на тему, но проблемы доступности убивают его в его нынешнем виде. К сожалению, большинство программ чтения с экрана используют механизм IE для интерпретации каждой страницы, то есть они понимают JavaScript так же свободно, как и IE. Это проблема, поскольку это означает, что они будут повторять текст заголовка три раза. Беспокоить.
AFAIK, нет никакого способа отличить программу чтения с экрана, использующую IE и IE, от одиночества. Я рассмотрел обнаружение IE и использование там только теневого фильтра IE. Я думаю, что это сработало бы, но я бы потерял единообразие в браузерах.
Есть еще идеи по этому поводу?