Исправление IE с помощью условных стилей

Существует способ обхода указанных выше проблем браузера IE. Он требует некоторой хитрости и дополнительной таблицы стилей, но он работает. Можно использовать expression для создания более широкого пробела, а затем загрузить это выражение с помощью условных комментариев. Синтаксис выражения имеет следующий вид:

Этот код CSS будет полезен только для IE, поэтому мы хотим, чтобы он применялся только в IE. Это выражение будет также делать недействительной таблицу стилей, поэтому многие разработчики предпочитают изолировать вставку для IE в отдельной таблице стилей, загружаемой только в IE.

Для этого создаем новую таблицу стилей с именем ie-only.css и присоединяем ее в условном комментарии:

Отметим, что [if lte IE 7] означает "если меньше или равно IE версии 7". Это условие открывает код для браузера IE7 и более ранних версий IE, в то время как окружающий комментарий HTML скрывает код от всех остальных браузеров. Можно настроить это выражение в соответствии с требуемой версией IE, например, для версии IE6 и более ранних используйте [if lte IE 6].В основной таблице стилей задайте нормальный стиль:

И затем установите стиль для IE в ie-only.css:

Это заставит IE создать таблицу с более широким интервалом между ячейками. Необходимо только не забывать поддерживать дополнительные настройки ширины - если изменяется основная таблица стилей, нужно будет изменить также ie-only.css. Очевидно, что условные комментарии позволяют делать значительно больше, чем только оформлять таблицы, так как дополнительная таблица стилей может содержать весь код CSS, который нужен для исправления ошибок IE.

Простой дизайн

Большинство дизайнерских решений используют относительно простые комбинации фоновых цветов. Давайте зададим для заголовков столбцов таблицы серый фон, а заголовок таблицы представим белым текстом на черном фоне:

Полученный результат выглядит как на рис. 33.12:

Рис. 33.12. Таблица с негативным белым на черном заголовком таблицы и светло-серым фоном для ячеек заголовков столбцов таблицы

Распространенные варианты использования

В этом разделе мы рассмотрим несколько распространенных дизайнерских решений, которые постоянно встречаются в таблицах Web.

Разметка зебра

Широко используемым вариантом дизайна для таблиц является создание строк с альтернативными цветами. Это обычно называют "разметкой зебры". Хотя и существуют какие-то сомнения в отношении того, насколько разметка зебры действительно помогает читателю (http://www.alistapart.com/articles/zebrastripingdoesithelp), она является популярным стилем оформления. рис. 33.13 показывает пример:

Рис. 33.13. Таблица с "разметкой зебры", поочередно задающая строки с белым и светло-серым фоном

Проще всего реализация разметки зебры делается добавлением класса для чередования строк таблицы, а затем использованием контекстного селектора CSS для оформления ячеек в этих строках. Прежде всего, в строки таблицы добавляются следующим образом классы " odd " и " even ":

Можно пропустить строку заголовков столбцов, так как она имеет свой собственный стиль оформления. Затем добавляется контекстный класс для задания фона всех ячеек в строках класса odd:

Это простейший способ добавить разметку зебры в таблицу HTML, который будет работать для всех браузеров, но он имеет недостатки - что если вы добавите в таблицу строку? Тогда потребуется перемещать все имена классов odd и even, чтобы все снова выглядело правильно.

Существует два других варианта:

· Можно добавлять классы с помощью небольшого сценария JavaScript, как показано в публикации "A List Apart: Zebra Tables" (http://www.alistapart.com/articles/zebratables/). Большинство средств разработки JavaScript также имеют подходящий метод: публикация Zebra Table Showdown (http://jquery.com/blog/2006/10/18/zebra-table-showdown/) сравнивает ряд реализаций.

· Можно использовать селектор CSS3:nthchild, однако он пока еще поддерживается не во всех основных браузерах. Однако поддержка со временем улучшится.

Дополнительно о разметке зебры с помощью селектора nth-child смотрите в специальной статье на сайте dev.opera. com (http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/).

Неполные сетки

Для некоторых решений хорошо подходят менее структурированные, более открытые сетки. Простым вариантом является удаление вертикальных границ и удаление заливки фона заголовка таблицы, как показано на рис. 33.14:

Рис. 33.14. Таблица со светло-серыми границами только на внешних краях и по нижнему краю каждой ячейки

Код CSS для этого представления имеет вид:

Можно сделать еще один шаг и удалить все границы, за исключением верхней и нижней границы, чтобы определить тело таблицы - см. рис. 33.15:

Рис. 33.15. Таблица с границами только по верху и низу тела таблицы

Код CSS для такой таблицы будет следующим:

Внутренние границы

Иногда желательно удалить внешнюю границу, но сохранить внутреннюю сетку границ, как на рис. 33.16:

Рис. 33.16. Таблица с внутренней сеткой

Чтобы реализовать это для всех современных браузеров, необходимо добавить класс в ячейки th и td, которые появляются последними в каждой строке, следующим образом:

Затем мы используем этот класс для удаления правой границы из этих ячеек. Полный код CSS будет иметь вид:

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: