Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS 42. Тонкости дизайна в практике.


Заключение

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

Шпаргалка по CSS

Любому, кто пытался создать хотя бы парочку сайтов с применением CSS, известно, что поддержка со стороны браузеров пока далека от совершенства. Не исключено, что если стоящая перед вами задача трудна, то все кончится битьем головой об стол и клятвами никогда, ни за что на свете не подступаться больше к вебдизайну, уж лучше заняться чем-нибудь поп роще, скажем, городским планированием или ядерной физикой.
Но важно понимать, что вы не одиноки в своих мучениях. Есть целое сообщество людей, занимающихся проблемами дизайна на основе стандарт - фотоов; и они готовы делиться друг с другом знаниями.
Из многих посвященных этой теме ресурсов упомянем сайт CSS Crib Sheet, который координирует Дейв Ши - один из авторов этой книги. Он был задуман как наиболее полный справочник по типичным проблемам и их решениям, ниже мы приводим размещенные там материалы.

Если сомневаетесь, проверяйте

Вы можете избавить себя от лишней головной боли во время отладки, если сразу проконтролируете свой код.
Некорректно составленные XHTML-разметк д и таблицы стилей могут привести к различным проблемам при верстке. Пользуясь инструментами контроля, вы научитесь искать и исправлять ошибки. Отметим, что ошибки в начале документа могут быть
причиной наведенных ошибок ниже из-за неправильной вложенности или по другим причинам. Мы рекомендуем начать с исправления нескольких очевидных ошибок, а потом повторить проверку, в результате общее число ошибок может значительно сократиться.

Создавайте и тестируйте таблицы стилей сначала в самых передовых браузерах, а затем уже в остальных Если вы разрабатываете и тестируете сайт в старом браузере, то не исключено, что сайт окажется зависимым от недостаточно развитого и, возможно, некорректно работающего механизма прорисовки. И тогда будет очень обидно видеть, что в браузере, лучше совместимом со стандарт - фотоами, сайт отображается неправильно.

Лучше отталкиваться от идеала, а затем переходить к браузерам с меньшими возможностями. Тогда ваш код будет отвечать стандарт - фотоам и не придется прилагать
гигантских усилий для поддержки других браузеров.
На сегодняшний день это означает, что тестировать следует сначала в браузерах Mozilla (Firefox), Safari или Opera, а только потом вносить исправления для
Microsoft Internet Explorer.

Используя плавающее позиционирование, проверьте, правильно ли расчищается место
Плавающее позиционирование - это сложная техника, которая не всегда дает ожидаемых результатов. Если оказывается, что плавающий элемент выходит за границы объемлющего элемента или вообще ведет себя не так, как надо, проверьте правильность своих действий. Ознакомьтесь с руководством Эрика Мейера по этому вопросу на сайте Complex Spiral.
В избежание схлопывания полей задавайте отступы или границы Иногда приходится бороться с лишним пустым пространством, а иногда оно не появляется там, где вам
нужно. Если вы используете поля, то, возможно, причина неприятностей - это схлопывание.

Старайтесь избегать одновременного задания для элемента отступов/границ
и фиксированной ширины или высоты В Internet Explorer 5.0 и 5.5 для Windows модель прямоугольных областей реализована некорректно, что часто приводит к проблемам при вычислении ширины и высоты. Существуют способы обойти эту ошибку,
но лучше вообще держаться от нее подальше и задавать свойство margin для потомков, если у родителя должна быть фиксированная ширина или высота,
либо свойство padding для родителя, если конкретная ширина/высота должна быть у потомка.

Избегайте эффекта появления нестилизованного контента в Internet Explorer 6 для Windows Если для импорта внешних стилей вы пользуетесь исключительно директивой ©import, то рано или поздно обнаружите, что в Internet Explorer 6 для Windows на мгновение появляется простой, неформатированный HTML-код еще до применения к нему стилей. Этого можно избежать, присоединяя таблицу стилей по ссылке или поместив на страницу элемент s c r i p t .

Не полагайтесь на свойства min - width/min-height Internet Explorer для Windows не поддерживает ни то, ни другое. Зато свойства w i d t h и h e i g h t он трактует так, как будто речь идет о m i n - w i d t h и minh e i g h t , поэтому, применив фильтрацию, вы сможете добиться нужного результата с помощью одних лишь w i d t h и h e i g h t . Конкретный пример см. в статье «Min-height: fixed» .

Если сомневаетесь, уменьшите значения, выраженные в процентах Иногда из-за ошибок округления 50% + 50% дает 100,1%, и весь макет плывет. Попробуйте вместо 50% задать 49% или 49,9%.

Если контент неправильно отображается в Internet Explorer Возможно, вы стали жертвой ошибки «Peekaboo1 bug». Это, например, происходит, когда пользователь задерживает курсор мыши над ссылкой. О том, как обойти эту ошибку, написано на сайте Position Is Everything.

Проверьте, а возможен ли вообще нужный вам эффект Некоторые браузеры поддерживают расширения CSS, отсутствующие в официальной спецификации. Так,
фильтры и форматирование полосы прокрутки работают только в Internet Explorer. Если программа контроля говорит, что используемая вами конструкция не
определена, то, скорее всего, речь идет о нестандарт - фотоном расширении, которое не будет поддержано другими браузерами.

Не забывайте о порядке LoVe/HAte

Псевдоклассы для ссылок всегда нужно задавать в следующем порядке: link, visited, hover, active. При любом другом порядке конечный результат не гарантирован. Если вы пользуетесь также псевдоклассом : focus, то применяйте порядок LVHFA (Мэтт Хоуи
предложил такую мнемоническую фразу «Lord Vader's Handle Formely Anakin»).
He забывайте о порядке следования значений в стенографических свойствах
Стенографические свойства b o r d e r , m a r g i n и padding подразумевают определенный порядок следования значений: против часовой стрелки, то есть top,
right, bottom, left. Следовательно, запись margin: О lpx Зрх 5рх; означает, что верхнее поле отсутствует, правое равно 1 пикселю и так далее. Запомните мнемоническое слово «TRouBLe», и вы всегда будете указывать порядок правильно.
Указывайте единицы измерения для ненулевых значений

Спецификация CSS настаивает на указании единиц измерения для кегля шрифтов, величин полей и других линейных размеров. (Единственное исключение составляет свойство l i n e - h e i g h t , для которого задавать единицу измерения необязательно, хотя и допустимо.) Не следует полагаться на поведение конкретного браузера в случае отсутствия единиц измерения. Впрочем, нуль - всегда нуль, будь он выражен в рх, em или иных единицах, поэтому разрешается не задавать единицу измерения для значения 0.

Пример: p a d d i n g : 0 2рх 0 lem;
Проверьте, как выглядит страница при разных размерах шрифтов
Передовые браузеры, к примеру Mozilla и Opera, позволяют пользователю изменять размер текста вне зависимости от единицы измерения. У некоторых пользователей наверняка выставлен иной размер шрифта по умолчанию, нежели у вас. Старайтесь, чтобы ваша верстка выглядела пристойно в максимально широком диапазоне размеров шрифтов.

Следите за соответствием регистра в HTML и CSS
Согласно спецификации, язык CSS чувствителен к регистру букв, и большинство браузеров следуют этому требованию. Имя ' home Page' для класса вполне
допустимо при условии, что оно записано одинаково в HTML-разметке и в таблицах стилей. Применение же правил к элементам класса ' homepage' в этих условиях приведет к ошибкам в пользовательских агентах, которые строго соблюдают спецификацию (например, в Mozilla).

Тестируйте на встроенных таблицах стилей, эксплуатируйте на импортированных
Если на этапе разработки вы помещаете таблицу стилей между тегами и , то устраняете потенциальную причину ошибок из-за кэширования. При работе с некоторыми старыми браузерами это бывает весьма существенно. Но не забивайте переносить весь код CSS во внешний файл перед запуском в эксплуатацию. Этот файл можно импортировать (©import) или связать (). В противном
случае преимущества внешних таблиц стилей будут утрачены.

Добавляйте видимые рамки на этапе отладки верстки Универсальное правило типа * { b o r d e r : s o l i d l p x #f00;} может сильно помочь при поиске ошибок в макете. Добавление рамки к отдельным элементам поможет выявить перекрытия и л ишнее пу-
стое пространство, которое иначе было бы трудно заметить.

Не заключайте путь к изображениям в одиночные кавычки При указании пути к фоновым изображениям кавычки вообще необязательны, но если он заключен в одиночные кавычки, то Internet Explorer 5 для Macintosh не загружает карт - фотоинку. Пользуйтесь либо двойными кавычками, либо обходитесь без них.
Будьте аккуратны при стилизации ссылок на внутренние анкеры Если в вашем коде встречается классический анкер , то к нему будут применяться псевдоклассы :hover и : a c t i v e . Чтобы этого избежать, пользуйтесь для анкеров атрибутом i d —
или применяйте несколько
более длинную синтаксическую конструкцию -
: l i n k : h o v e r , : l i n k : a c t i v e . С

He ссылайтесь на пустые файлы, резервируя место для будущих таблиц стилей (например, для КПК или печатных устройств) Браузер Internet Explorer 5 для Mac некорректно обрабатывает пустые таблицы стилей, из-за чего время загрузки страницы возрастает. Поместите в файл хотя бы одно правило (можно даже комментарий) или просто уберите ссылку на него.

Поймите суть проблемы
Быть может, самый важный наш совет состоит в том, что уяснение сути возникшей проблемы — это ключ к ее решению. Понимание приходит с опытом, после
многих часов, потраченных на составление кода. Предположим, что вы заметили пустую горизонтальную полоску высотой 3 пикселя перед плавающим
элементом в браузере Internet Explorer для Windows, и только в нем. Если вы не знаете, что в этом браузере есть ошибка, проявляющаяся при работе с плавающи-
ми элементами, то будете пробовать отрицательные поля, относительное позиционирование, а возможно, даже какие-то трюки, чтобы подправить положение
окружающих элементов и избавиться от ненужного промежутка.
Но, зная заранее об уникальной для Internet Explorer проблеме, заключающейся в увеличении полей некоторых плавающих элементов точно на три пикселя,
вы не станете гадать и пробовать все вышеперечисленные способы.
Попытка исправить необъяснимые ошибки приводит к их накоплению. Применив на странице несколько обходных маневров, вы создаете зависимость от имеющихся в конкретном браузере ошибок алгоритма прорисовки. Отладка верстки на более поздних этапах дизайна лишь усложнится, если сразу не решить проблем, возникших в начале работы.
Понимая, что же на самом деле послужило причиной ошибки, вы сможете подойти к ее исправлению более осмысленно. Сайт Crib Sheet - это только отправная
точка. Существует еще множество сайтов, на которых детально рассматриваются дефекты, имеющиеся в разных браузерах.
(Кстати говоря, если вас заинтересовала ошибка, связанная с тремя пикселями, то на этом сайте вы узнаете, как исправить ее, а заодно и много других специфичных для Internet Explorer ошибок.







css



css


css


style css42

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 37
Гостей: 20
Пользователи: deEquigue
Роботы: robot Bot, Yandex Bot, robot Bot, Google Bot, Google Bot, MSN Bot, robot Bot, Yahoo Bot, robot Bot, robot Bot, robot Bot, crawl Bot, robot Bot, robot Bot, robot Bot, Google Bot

20-ка посетителей: deEquigue, AgnesAccony, qgdoosque, Anthonybaift, VladisVep, Briaxx56nAvant, tanya172, taAnipse, Molinarosi, zhwykrysrq, FrankCappy, lpImpaigN, eythoumb, Anna.slinHon, hqNonfoula, shadowmoon, RodneyRep, xgywbovnqr, Potomok495, Lucanamn


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги