сейчас на сайте:
Лучшие сказки мира 03skazki.ru
Детектив и фантастика 03pressa.ru
Песни прошлых лет 03pesni.ru
Для досуга
Окно Некоторые заметки об оформлении сайтов ПОНЕМНОГУ СО ВСЕГО СВЕТА-ИНТЕРНЕТА Используйте DOCTYPE. Применяйте position: relative. Придайте элементу свойство hasLayout. Устранение бага с повторяющимися символами. Используйте !important или современные селекторы. Избегайте процентных размеров. Тестируйте раньше и тестируйте чаще. Осуществляйте рефакторинг вашего кода. Чтобы задать нулевую высоту для элемента <div> Очищайте плавающие блоки с помощью overflow:hidden; Используйте CSS-спрайты. Альтернативный текст или фото А “портят” наши страницы в основном следующие 4 вещи: Используйте условные комментарии вместо хаков Задавайте id для body Избегайте использования !important Не используйте PNG24 там, где он не особо нужен Зачем ссылкам может понадобиться оформление, отличное от остальных ссылок? . Сокращённые формы записи (font, margin, padding и пр.) cellpadding - cellspacing Сбрасывайте значения по умолчанию у элементов, у разных браузеров они могут быть разными. Добавляем иконку предзагрузки к большим изображениям при помощи CSS Запрет на просмотр с доменов, IP, показ картинок [.htaccess] Используйте DOCTYPE. Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> или (для XHTML): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target, а многие используют его по привычке. Допустимые DOCTYPE DOCTYPE Описание HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы. XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы. XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. Применяйте position: relative. Элемент position: relative - Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения Установка элементу position: relative решает множество проблем, особенно, если вы наблюдаете невидимые или странно выровненные блоки. При этом необходимо помнить, что все дочерние элементы с position: absolute станут позиционироваться относительно этого элемента. Используйте display: inline для плавающих элементов (те, к которым применяется свойство float). У плавающих элементов, имеющих левый/правый отступ margin, в IE6 этот отступ удваивается. Т.е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему. Придайте элементу свойство hasLayout. Многие проблемы рендеринга в IE6 (и в IE7) решаются путем назначения элементу свойства hasLayout. Это настройка для IE, определяющая, каким образом ограничивать содержимое и располагать его по отношению к другим элементам страницы. Установка hasLayout может иметь существенное значение, если вам необходимо превратить строчный элемент (например, ссылку) в блок или применить эффекты прозрачности. Самый простой способ установки hasLayout - это указание CSS-свойств height или width (также может быть использован zoom: 1, однако это правило не является частью стандарта CSS). Т.е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1%. Вот примерчик: <div class="block"> какой-то текст <div class="absolute">это позиционируем абсолютно</div> </div> .block { position: relative; /* для того, чтобы блок с .absolute позиционировать относительно этого блока */ padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто возникает, когда у родителя установлен паддинг */ height: 1%; /* вот оно, спасение для IE6 */ } .absolute { position: absolute; bottom: 0; left: 0; } Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%. Множество несоответствий стандартам IE при визуализации веб-страниц может быть устранено путем присвоения конкретным элементам свойства layout. Layout является исключительно концепцией IE/Win, которая определяет, как будет ограничено и визуализировано внутреннее содержание элементов, как элементы будут взаимодействовать и влиять друг на друга, реагировать на и передавать события, вызванные пользователем или приложением. Это качество в одностороннем порядке может быть вызвано некоторыми свойствами CSS. Некоторые HTML элементы обладают им по умолчанию. Единственным способом выставить hasLayout = false для любого элемента является удаление или сброс первоначального CSS-свойства, которое вызвало hasLayout = true. В отличие от стандартных свойств или специфических CSS-свойств, доступных в различных браузерах, layout не может быть присвоен напрямую через CSS-объявления. Другими словами, не существует никакого «layout-свойства». По-видимому, layout есть по умолчанию у следующих элементов: * <html>, <body> * <table>, <tr>, <th>, <td> * <img> * <hr> * <input>, <button>, <select>, <textarea>, <fieldset>, <legend> * <iframe>, <embed>, <object>, <applet> * <marquee> Следующие заданные пары CSS-свойств/значений позволяют элементу получить layout: * position: absolute. Назначается блоку, в него вложенному, что является причиной некоторых проблем. * float: left|right. У модели «плавающих» элементов присутствует множество хаков (quirks), связанных с некоторыми аспектами layout-элемента. * display: inline-block. Иногда помогает, когда элемент находится на уровне строки, и ему требуется layout. Добавление layout, по-видимому, единственный реальный эффект этого свойства. Само по себе «поведение в качестве строчного блока» (inline-block) может быть получено в IE, но несколько независимо: IE/Win: строчный блок и hasLayout. * width: любое значение, отличное от auto. Очень часто используется в качестве неявного исправления, даже чаще, чем hasLayout успевает испортить ситуацию. * height: любое значение, отличное от auto. height: 1% используется как Holly Hack. * zoom: любое значение, отличное от normal. Исключительно MS-свойство, не стандартно. zoom: 1 может быть использовано для отладки. * writing-mode: tb-rl. Исключительно MS-свойство, не стандартно. В IE7 переполнение (overflow) вызывает также присвоения layout. * overflow: hidden|scroll|auto Это свойство не применяется в предыдущих версиях, пока layout не будет добавлен к блоку другими методами. * overflow-x|-y: hidden|scroll|auto Являясь частью модуля блочной модели CSS3, overflow-x и -y пока еще не достаточно широко реализованы. Они не вызывали свойство hasLayout в предыдущих версиях IE. В IE7 появились новые действующие лица, регулирующие hasLayout. В контексте hasLayout минимальные/максимальные свойства действуют аналогично ширине и высоте, и, по-видимому, так же работает фиксированное и абсолютное позиционирование. * position: fixed ./. * min-width: любое значение. Даже выставление значения в 0 присваивает элементу layout. * max-width: любое значение отличное от ‘none’. ./. * min-height: любое значение. Даже значение, равное 0, выставляет hasLayout = true. * max-height: любое значение отличное от ‘none’. ./. Для линейных (inline) элементов (либо линейных по умолчанию, как span, или при назначении им display: inline) * width и height вызывают hasLayout в IE5.x и IE6 или более новых только в режиме «quirks». Начиная с IE6, когда браузер находится в режиме «стандартной совместимости», линейные элементы игнорируют свойства width и height, и выставление свойств width или height не заставляет элемент приобрести layout. * zoom всегда вызывает hasLayout, но оно не поддерживается в IE5.0. Элементы, у который есть layout и display: inline ведут себя именно так, как предписано это стандартами для линейных блоков (inline-block): они располагаются горизонтально, как слова в строке или абзаце, чувствительны к вертикальному выравниванию и применяют некоторые методы «ужатия» (shrink-wrapping) к собственному содержимому. Как только линейные элементы получают layout, они начинают вести себя как линейные блоки. В этом и заключается объяснение того факта, что в IE/Win линейные элементы могут содержать блочные, и при этом возникает меньше проблем, чем в других браузерах, в которых элементы с display: inline остаются линейными. Сбрасываем hasLayout Если выставить следующие свойства в их значения по умолчанию с помощью отдельного правила, это сбросит (или отменит) hasLayout, если не останется других свойств, его выставляющих: * width, height (в auto); * max-width, max-height (в none) (в IE7); * position (в static); * float (в none); * overflow (в visible) (в IE7); * zoom (в normal); * writing-mode (из tb-rl в lr-tb). Разработчикам стоит с осмотрительностью использовать сброс этих свойств. Рассмотрим какое-нибудь меню: изменение статуса hasLayout у a:hover, умышленно или нет, приведет к неожиданному отображению (или нестабильности IE6 при совместном динамическом использовании с position: relative). Отличается и свойство display: если inline-block выставляет haslayout = true, этот флаг позже не сбрасывается в false при переписывании этого значения с помощью block или inline в другом наборе правил. Выставление свойств min-width, min-height в их значение по умолчанию, которое равно 0, по-прежнему присваивает элементу hasLayout, но IE7 воспринимает для таких целей нестандартное значение auto, которое и сбрасывает hasLayout. Скриптовое свойство hasLayout CSS-хаки Следующие хаки устанавливают свойство hasLayout, они были проверены в IE7 и более ранних версиях. John Gallant и Holly Bergevin опубликовали Holly hack: /* \*/ * html .gainlayout { height: 1%; } /* */ * Обеспечивает layout в IE5–6 для любого элемента, за исключением линейных в IE6 в стандартном режиме. * Работает, в общем случае, хорошо за исключением тех случаев, когда height:0 или 1px является более стабильным решением. * Не совместим с overflow: hidden, кроме IE6 в стандартном режиме (в нем height: 1% приводится к height: auto, если у родительского элемента не задана высота). * Не имеет никакого эффекта в IE7 в стандартном режиме, в нем * html не соответствует никакому элементу. Чтобы назначить layout в IE6 и более ранних версиях, мы можем использовать хак с подчеркиванием: .gainlayout { _height: 0; } И чтобы назначить layout для IE7, можно воспользоваться свойством min-height: .gainlayout { min-height: 0; } Альтернативным путем, и, возможно, выдержавшим проверку временем, является использованием условных комментариев: <!–[if lte IE 6]><style>.gainlayout { height: 1px; }</style><![endif]–> <!–[if IE 7]><style>.gainlayout { zoom: 1; }</style><![endif]–> Еще одним безопасным и изящным решением будет использование внешней таблицы стилей, вызываемой из условных комментариев, для каких бы то ни было исправлений, в которых нуждается IE-Win: <link rel=»stylesheet» href=»allbrowsers.css» type=»text/css» /> <!–[if lte IE 7]><link rel=»stylesheet» href=»iefix.css» type=»text/css» /><![endif]–> Для IE6 и более ранних версий стоит всегда использовать height (если мы хотим обеспечить поддержку IE5.0, у нас будет не такой большой выбор), хотя это свойство и вызывает конфликты с чем-то другим (overflow: hidden). Что касается значения, то 1%, 1px, 0 будет более или менее равноправны, но 1% может (хотя и очень редко) вызывать некоторые проблемы. height не может использоваться для линейных элементов в стандартном режиме, и этого свойства стоит избегать в IE7 (или использовать с крайней осторожностью: только значения в процентах, и только при отсутствии у родительского элемента заданной высоты). В таких случаях рекомендуется использовать display: inline-block или zoom: 1. Мы наблюдали некоторое количество безуспешных попыток применить так называемые «Holy hacks» к плавающим элементам или к элементам с заданной шириной. Запомните: целью данного хака является не задание элементу высоты, но вызов hasLayout = true. Не присваивайте layout всему подряд: * {_height: 1px;}. В таких количествах layout вместо лечебного воздействия способен убить вашу верстку на корню. Управление хаками Как показал релиз IE7, невозможно предсказать, будут ли следующие версии IE по-прежнему нуждаться в hasLayout для исправления некоторых ошибок и как они будут реагировать на фильтры, которые используются на текущий момент. В этом свете рекомендуется использовать исключительно MS-свойство zoom и(ли) условные комментарии. <!–[if lt IE 7]><style>/* style for IE6 + IE5.5 + IE5.0 */.gainlayout { height: 0; }</style><![endif]–> <!–[if IE 7]><style>.gainlayout { zoom: 1; }</style><![endif]–> * zoom: 1; присваивает layout в IE5.5+ любому элементу (включая линейные), но не имеет никакого эффекта в IE5.0 * Не известно побочных эффектов (хотя линейные элементы ведут себя как линейные блоки). * Если требуется валидность страницы, zoom должен быть спрятан внутри условных комментариев. Как включить haslayout Прямого css свойства haslayout нет. Его можно включить, используя некоторые css свойства. Haslayout имеют некторые элементы по-умолчанию, это такие элементы как htm, body, table, tr, th, td, img, hr, input, button, select, textarea, fieldset, legend, iframe, embed, object, applet, marquee . Включить haslayout можно с помощью CSS:1 .container{ zoom:1; /*Самое распространенное. Кстати, это свойство не валидно*/ height:1%; position:absolute; position:relative; overflow: hidden; float:left; float:right; display: inline-block /* Когда нужно сделать haslayout инлайн элементу */ /* И другие...*/ } Устранение бага с повторяющимися символами. Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений: применить ко всем плавающим элементам display: inline; применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага); поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>; поместить пустой <div></div> в самом конце плавающего блока. Используйте только тег <a> для кликабельных элементов и элементов, использующих :hover. Эффект с помощью псевдокласса :hover в IE6 работает только для тега <a>. Также этот тег необходимо использовать для контроля с помощью JavaScript-виджетов, чтобы он был управляем с помощью клавиатуры. Есть несколько альтернативных вариантов, но тег <a> является более надежными, чем большинство решений. Используйте !important или современные селекторы. Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом: #element { min-height: 20em; height: auto !important; /* понимают все современные браузеры */ height: 20em; /* IE6 неправильно использует данное значение /* } IE6 не понимает min-height и неправильно переопределяет высоту auto с помощью 20em. Тем не менее, он увеличивает размер, если содержимому требуется больше места. Другой вариант заключается в использовании современных селекторов, например: #element { min-height: 20em; height: 20em; } /* IE6 проигнорирует это */ #element[id] { height: auto; } Избегайте процентных размеров. Проценты путают IE6. Если вы не можете точно определить размер каждого родительского элемента, лучше отказаться от использования процентов. При этом можно использовать процентные размеры в других браузерах, например: body { margin: 2% 0 !important; margin: 20px 0; /* только IE6 */ } Тестируйте раньше и тестируйте чаще. Не прекращайте тестировать в IE6 до тех пор, пока ваш сайт не будет завершен, иначе проблем будет еще больше, и это займет больше времени на исправление. Если ваш сайт корректно работает в FireFox и IE6, то почти наверняка он работает и в других браузерах. Осуществляйте рефакторинг вашего кода. Зачастую решение багов может занять больше времени, чем переосмысление проблемы макета. Незначительные изменения в HTML и CSS зачастую являются более эффективными. Это может означать, что вы полностью откажетесь от правильного кода, но возникнет меньше долгосрочных проблем, и вы будете знать, как справиться с проблемой в будущем. Чтобы задать нулевую высоту для элемента <div> в IE необходимо кроме свойства height:0; добавить ему свойство line-height:0; Очищайте плавающие блоки с помощью overflow:hidden; Используйте CSS-спрайты. CSS-спрайт - это картинка, объединяющая в себе несколько изображений, относящихся к какому-либо элементу страницы. Например, изменение изображения при наведении курсора. Плюсы CSS-спрайтов заключаются в том, что, во-первых, снижается количество запросов к серверу при загрузке страницы, во-вторых, не будет задержки в появлении изображения в момент наведения курсора. Пример Данный способ оптимизации для меня, как веб-мастера, явился весьма оригинальным и интересным, в связи с чем хочу поделиться информацией с читателями моего блога. Не отрицаю, что найдутся те, кто данную фишку уже давно используют, поэтому такие могут смело пропускать данный пост. Остальным же читать и брать на вооружение. Итак… Для получения эффекта изменения изображения при наведении на него курсора обычно используется две картинки: одна – для положения «по умолчанию», вторая – для положения “hover”, когда курсор наведен на изображение. Тем не менее, есть один способ с применением всего лишь одного изображения, который имеет некоторые преимущества. Вот как данный эффект реализуется обычно. HTML-код может выглядеть примерно следующим образом: <a href="#" id="yaprak"> </a> Соответствующий CSS будет содержать следующие стили: a#yaprak { width: 64px; height: 64px; background-image: url('yaprak_bw_color.png'); display: block; text-decoration: none; } a#yaprak:hover { background-position: -64px 0; } Фото состоит из двух фото с размером 132х68 Альтернативный текст или фото HTML-код: <a id="logo" href="#"><b>Логотип</b><i></i></a> CSS-код для блока ссылки: #logo { display: block; position: relative; width: 150px; height: 100px; text-decoration: none; cursor: pointer; } Данным кодом ссылку мы делаем блоком, указываем ее размеры, задаем свойство position: relative для возможности позиционирования вложенных элементов относительно блока ссылки, убираем подчеркивание и для кроссбраузерности указываем курсор мыши. CSS-код для блока с альтернативным текстом: #logo b { display: block; position: absolute; z-index: 1; top: 0; left: 0; font-size: 20px; line-height: 20px; } Этим кодом мы позиционируем альтернативный текст относительно блока ссылки, указываем уровень слоя, меньший слоя с изображением, задаем отступы, и, если нужно, все необходимые параметры для шрифта. Здесь также необходимо указать высоту строки, равной размеру шрифта, чтобы текст не “обрезался” в некоторых браузерах. CSS-код для изображения: #logo i { display: block; position: relative; z-index: 2; width: 100px; height: 140px; background: url(logo.jpg) no-repeat; } Здесь мы позиционируем блок изображения, указываем ему уровень слоя, больший, чем для блока с текстом, задаем размер, равный блоку ссылки, и само изображение. В результате получается, что, если пользователь просматривает страницу с отображением рисунков, то увидит изображение, в обратном случае - альтернативный текст, чего мы и добивались. А “портят” наши страницы в основном следующие 4 вещи: JavaScript. Глобальные CSS, размещаемые в заголовке документа. Flash. Несуществующий по стандартам тег <noindex>, придуманный Яндексом. Отказаться от каждого из этих пунктов часто не представляется возможным, но, благо, существуют обходные пути, которые позволяют привести эти 4 элемента к виду, соответствующему стандартам. Об этом и хочу поведать ниже. JavaScript Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид: <script> код скрипта </script> А должно быть так: <script type="text/javascript"> код скрипта </script> Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии: <script type="text/javascript"> <!--//<![CDATA[ код скрипта //]]>--> </script> Глобальные CSS Здесь все по аналогии с предыдущим пунктом: <style type="text/css"> /* <![CDATA[ */ .style {margin: 0; padding: 0} /* ]]> */ </style> Flash <object type="application/x-shockwave-flash" data="flash.swf" width="468" height="60"> <param name="flashvars" value="link=http://site.com/" /> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> </object> Данный код не позволяет автоматически устанавливать флеш-плейер, но ведь нам важнее валидность, не правда ли? Тег <noindex> Оформить этот тег необходимо следующим образом: <del class="hide"><![CDATA[<noindex>]]></del> то, что необходимо запретить индексировать Яндексу <del class="hide"><![CDATA[</noindex>]]></del> А в файл стилей добавить: .hide {display: none} Используйте условные комментарии вместо хаков The syntax I use is: <p><!--[if IE]> According to the conditional comment this is Internet Explorer<br /> <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5<br /> <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0<br /> <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5<br /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is Internet Explorer 7<br /> <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up<br /> <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6<br /> <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6<br /> <![endif]--> </p> Есть довольно большая вероятность, что после смены версии IE какие-то хаки перестанут работать. В случае условных комментариев такая вероятность мала. Задавайте id для body Это действительно удобно. Как пример: смена цвета заголовка, текста и фона для каждого раздела. Не придётся дополнительно добавлять классы. Избегайте использования !important Если нормальный вес селектора легко просчитать, то вот бороться с десятью перекрывающими друг друга !important уже тяжко. !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля. При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом. !important добавлен в авторский стиль — будет применяться стиль автора. !important добавлен в пользовательский стиль — будет применяться стиль пользователя. !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора. !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя. Итог от применения !important в общем случае показан в табл. 1. Табл. 1. Результат применения !important Стиль автора Стиль пользователя Результат BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt } BODY { /* Черный цвет текста */ color: #000; /* Размер текста 12 пунктов */ font-size: 12pt } Lorem ipsum dolor sit amet... Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов. BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt } BODY { /* Черный цвет текста, повышенная важность */ color: #000 !important; /* Размер текста 12 пунктов */ font-size: 12pt } Lorem ipsum dolor sit amet... Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов. BODY { /* Серый цвет текста */ color: silver; /* Размер текста 8 пунктов */ font-size: 8pt } BODY { /* Черный цвет текста, повышенная важность */ color: #000 !important; /* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt !important } Lorem ipsum dolor sit amet... Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов. BODY { /* Серый цвет текста, повышенная важность */ color: silver !important; /* Размер текста 8 пунктов, повышенная важность */ font-size: 8pt !important } BODY { /* Черный цвет текста, повышенная важность */ color: #000 !important; /* Размер текста 12 пунктов, повышенная важность */ font-size: 12pt !important } Lorem ipsum dolor sit amet... При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > В браузере Opera аналогичное действие происходит через команду Инструменты > Настройки > Вкладка «Дополнительно» > Содержимое > Кнопка «Параметры стиля» Не используйте PNG24 там, где он не особо нужен IE6 пока ещё живее всех живых, а с PNGFIX-ом, как известно, проблем хватает. Зачем ссылкам может понадобиться оформление, отличное от остальных ссылок? . Потому, что эти ссылки открываются в новом окне, и пользователь должен быть готов к такому повороту событий Прежде чем продолжать, хочу отметить, что я никогда не злоупотребляю открытием ссылок в новом окне браузера и вам не советую (см. также «Об открывании новых окон»). Но иногда это действительно необходимо. Итак, ближе к телу. Самым первым приходящим на ум решением, как же нам выделять ссылки с атрибутом target="_blank", является введение отдельного CSS стиля: a{ text-decoration:underline } a.blank{ font-weight:bold } В этом случае мы просто ручками применяем стиль blank к нужным гиперссылкам, от чего те приобретают полужирное начертание. Но это решение не годится, поскольку предполагает ручную расстановку стилей. Поэтому рассмотрим вариант, основанный на CSS2 селекторах по атрибутам и псевдоэлементах: a{ text-decoration:underline } a[target="_blank"]{ font-weight:bold } a[target="_blank"]:after{ content:" (откроется в новом окне)"; } Сие означает, что все ссылки с атрибутом target="_blank" автоматически будут иметь полужирное начертание. Кроме того, после ссылки будет указан текст (откроется в новом окне). Плохо одно — это решение не работает в Internet Explorer любой версии. Работает на данный момент только в Opera 5+ и Netscape Navigator 6+/Mozilla. Чтобы все ссылки с атрибутом target="_blank" автоматически имели полужирное начертание и в IE, нужно использовать конструкцию expression(): ------------------ Допустим, у вас есть картинка, которая должна всегда располагаться в нижнем правом углу страницы. Вместо того, чтобы писать код, отслеживающий прокрутку и изменение размеров страницы, достаточно указать в таблице стилей следующее: img#pic { top:expression(document.body.scrollTop + document.body.clientHeight - offsetHeight); left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth); position:absolute } Вот и все пироги. Теперь при изменении размеров страницы или её прокрутке, картинка автоматически будет помещена на своё законное место — в нижний правый угол страницы. Главное не забудьте указать у изображения атрибуты width и height: <img src="logo.gif" id="pic" width="100" height="30" alt="Логотип" /> ------------------------------- a{ text-decoration:underline; font-weight:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "bold" : "normal") } -------------------------- font-weight:expression((this.getAttribute("target")=="_blank" && this.getAttribute("done") == null) ? ((this.innerHTML+=unescape(' %28в новом окне%29')),(this.setAttribute('done','yes')),"bold") : "normal") --------------------------- Сокращённые формы записи (font, margin, padding и пр.) Свойство background Value: [ <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'> ] | inherit Для избежания конфликтов с пользовательской таблицей стилей, рекомендуется помимо свойства background указывать также свойство color. Свойство border Value: [ <'border-width'> || <'border-style'> || <color> ] | inherit В отличие от margin и padding, это свойство может задавать границу только для всех четырёх сторон сразу. Учтите также, что Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов. Свойства border-top, border-right, border-bottom, border-left Value: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit Если цвет не указан, то он берётся из значения CSS свойства color. Свойство font Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit CSS2 позволяет задавать с помощью данного свойства системные значения (caption, icon и пр.), чего не достичь с помощью font-family. Правда, значения message-box, small-caption и status-bar в IE4+ выглядят как messagebox, smallcaption и statusbar. Учтите, что некоторые браузеры требуют (и согласно спецификации, они правы), чтобы были указаны оба компонента: font-size и font-family. То есть, font:bold 120%; не пойдёт, а вот конструкция font:bold 120% Times,serif; в самый раз. Свойство list-style Value: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit Значение none устанавливает оба свойства list-style-type и list-style-image в состояние none, т. е. у списка будет отсутствовать какой-либо маркер. Свойство margin Value: <margin-width>{1,4} | inherit Если заданы все четыре значения, то они применяются, соответственно, к верхней, правой, нижней и левой границе. Если же задано только одно значение, оно относится ко всем сторонам. Ну а если задано два или три значения, остальные цифры берутся из значений противоположной стороны. Можно использовать отрицательные значения. Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов. Свойство outline Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit Про это свойство можно лишь сказать, что поддерживается оно только в Opera7b. UPDATE: а также в IE6+ и FF1+. Свойство padding Value: <padding-width>{1,4} | inherit Относительно количества значений, смотрите комментарий у свойства margin. Нельзя использовать отрицательные значения. Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов. Старайтесь также не использовать padding применительно к элементу table, т. к. эффект непредсказуем во многих браузерах. cellpadding - cellspacing давно не пишут <table cellpadding="0" cellspacing="0" border="0">. лучше один раз написать стиль: table{ border:0px; /* border="0" */ border-collapse:collapse; /* cellspacing="0" */ } table td{ padding:0px; /* cellpadding="0" */ } HTML код: <table> <tr> <td>Foo</td> <td>Bar</td> </tr> </table> Вид: Foo Bar Когда нужно получить другой вид таблицы, переопределяют этот базовый стиль, для верности иногда с помощью !important: table.stuff{ border-collapse:separate; } table.stuff td{ padding:5px 10px; border:1px solid #666666; } HTML код: <table class="stuff"> <tr> <td>Foo 2</td> <td>Bar 2</td> </tr> </table> Вид: Foo 2 Bar 2 Есть такое CSS свойство, как border-spacing. Но , что оно совсем не работает в Internet Explorer. Поэтому растояние между ячейками при border-collapse:separate всегда в этом браузере одинаковое, равное 2 px. Сбрасывайте значения по умолчанию у элементов, у разных браузеров они могут быть разными. <link rel="stylesheet" type="text/css" href="reset.css"> reset.css <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: baseline; } a img, :link img, :visited img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } </style> Вариант 2 reset2.css body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } Добавляем иконку предзагрузки к большим изображениям при помощи CSS Пишем CSS-код Код минимален, создается всего одно просто правило следующего содержания: .load { background: url(loading/ajax-loader102.gif) center no-repeat; Пишем HTML-код <div class="load" style="width:200px;height:200px"> <img src="025.jpg" alt="Альтернативный текст" /></div> Пример: маленькая библиотека gif для подзагрузки --скачать loading.zip или воспользоваться генератором gif-подзагрузки http://www.ajaxload.info/ ЗАПРЕТ НА ПОСЕЩЕНИЕ ОПРЕДЕННЫХ САЙТОВ (попытка разместить рекламу) [.htaccess] ## SITE REFERRER BANNING RewriteEngine on # Options +FollowSymlinks RewriteCond %{HTTP_REFERER} badsite\.com [NC,OR] RewriteCond %{HTTP_REFERER} badsite\. [NC,OR] RewriteCond %{HTTP_REFERER} sub\.badsite\.com [NC] RewriteRule .* - [F] 1. Без "http://www.". Запрет на домены badsite.com badsite. sub.badsite.com ЗАПРЕТ НА РАЗМЕЩЕНИЕ КАРТИНОК ОПРЕДЕННЫХ САЙТОВ (попытка разместить рекламу) [.htaccess] ## DISABLE HOTLINKING RewriteEngine on # Options +FollowSymlinks RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourotherdomain.com/.*$ [NC] RewriteRule \.(gif|jpg|jpeg|png|js|css)$ - [F] 1. Без "http://www.". Запрет на домены yourdomain.com yourotherdomain.com 2. Картинки gif jpg jpeg png ЗАПРЕТ НА ПРОСМОТР САЙТА С ЗАДАННЫХ IP [.htaccess] ## USER IP BANNING <Limit GET POST> order allow,deny deny from 42.12.5.34 deny from 193.110.145.185 deny from 212.173.53. deny from 69.242. allow from all </Limit> 1. Запрет на IP 42.12.5.34 193.110.145.185 212.173.53. 69.242. Библиотека JAVASCRIPT 1997- 2010 (июль 2010 г.) Дизайн и сопровождение © SE@RCHER
ПОНЕМНОГУ СО ВСЕГО СВЕТА-ИНТЕРНЕТА
Используйте DOCTYPE.
Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
или (для XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target, а многие используют его по привычке.
Применяйте position: relative.
Элемент position: relative - Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения Установка элементу position: relative решает множество проблем, особенно, если вы наблюдаете невидимые или странно выровненные блоки. При этом необходимо помнить, что все дочерние элементы с position: absolute станут позиционироваться относительно этого элемента.
Используйте display: inline для плавающих элементов (те, к которым применяется свойство float).
У плавающих элементов, имеющих левый/правый отступ margin, в IE6 этот отступ удваивается. Т.е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему.
Придайте элементу свойство hasLayout.
Многие проблемы рендеринга в IE6 (и в IE7) решаются путем назначения элементу свойства hasLayout. Это настройка для IE, определяющая, каким образом ограничивать содержимое и располагать его по отношению к другим элементам страницы. Установка hasLayout может иметь существенное значение, если вам необходимо превратить строчный элемент (например, ссылку) в блок или применить эффекты прозрачности.
Самый простой способ установки hasLayout - это указание CSS-свойств height или width (также может быть использован zoom: 1, однако это правило не является частью стандарта CSS). Т.е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1%. Вот примерчик:
<div class="block"> какой-то текст <div class="absolute">это позиционируем абсолютно</div> </div> .block { position: relative; /* для того, чтобы блок с .absolute позиционировать относительно этого блока */ padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто возникает, когда у родителя установлен паддинг */ height: 1%; /* вот оно, спасение для IE6 */ } .absolute { position: absolute; bottom: 0; left: 0; }
Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%. Множество несоответствий стандартам IE при визуализации веб-страниц может быть устранено путем присвоения конкретным элементам свойства layout. Layout является исключительно концепцией IE/Win, которая определяет, как будет ограничено и визуализировано внутреннее содержание элементов, как элементы будут взаимодействовать и влиять друг на друга, реагировать на и передавать события, вызванные пользователем или приложением. Это качество в одностороннем порядке может быть вызвано некоторыми свойствами CSS. Некоторые HTML элементы обладают им по умолчанию. Единственным способом выставить hasLayout = false для любого элемента является удаление или сброс первоначального CSS-свойства, которое вызвало hasLayout = true. В отличие от стандартных свойств или специфических CSS-свойств, доступных в различных браузерах, layout не может быть присвоен напрямую через CSS-объявления. Другими словами, не существует никакого «layout-свойства».
По-видимому, layout есть по умолчанию у следующих элементов:
* <html>, <body> * <table>, <tr>, <th>, <td> * <img> * <hr> * <input>, <button>, <select>, <textarea>, <fieldset>, <legend> * <iframe>, <embed>, <object>, <applet> * <marquee>
* position: absolute. Назначается блоку, в него вложенному, что является причиной некоторых проблем. * float: left|right. У модели «плавающих» элементов присутствует множество хаков (quirks), связанных с некоторыми аспектами layout-элемента. * display: inline-block. Иногда помогает, когда элемент находится на уровне строки, и ему требуется layout. Добавление layout, по-видимому, единственный реальный эффект этого свойства. Само по себе «поведение в качестве строчного блока» (inline-block) может быть получено в IE, но несколько независимо: IE/Win: строчный блок и hasLayout. * width: любое значение, отличное от auto. Очень часто используется в качестве неявного исправления, даже чаще, чем hasLayout успевает испортить ситуацию. * height: любое значение, отличное от auto. height: 1% используется как Holly Hack. * zoom: любое значение, отличное от normal. Исключительно MS-свойство, не стандартно. zoom: 1 может быть использовано для отладки. * writing-mode: tb-rl. Исключительно MS-свойство, не стандартно.
В IE7 переполнение (overflow) вызывает также присвоения layout.
* overflow: hidden|scroll|auto Это свойство не применяется в предыдущих версиях, пока layout не будет добавлен к блоку другими методами. * overflow-x|-y: hidden|scroll|auto Являясь частью модуля блочной модели CSS3, overflow-x и -y пока еще не достаточно широко реализованы. Они не вызывали свойство hasLayout в предыдущих версиях IE.
В IE7 появились новые действующие лица, регулирующие hasLayout. В контексте hasLayout минимальные/максимальные свойства действуют аналогично ширине и высоте, и, по-видимому, так же работает фиксированное и абсолютное позиционирование.
* position: fixed ./. * min-width: любое значение. Даже выставление значения в 0 присваивает элементу layout. * max-width: любое значение отличное от ‘none’. ./. * min-height: любое значение. Даже значение, равное 0, выставляет hasLayout = true. * max-height: любое значение отличное от ‘none’. ./.
Для линейных (inline) элементов (либо линейных по умолчанию, как span, или при назначении им display: inline)
* width и height вызывают hasLayout в IE5.x и IE6 или более новых только в режиме «quirks». Начиная с IE6, когда браузер находится в режиме «стандартной совместимости», линейные элементы игнорируют свойства width и height, и выставление свойств width или height не заставляет элемент приобрести layout. * zoom всегда вызывает hasLayout, но оно не поддерживается в IE5.0.
Элементы, у который есть layout и display: inline ведут себя именно так, как предписано это стандартами для линейных блоков (inline-block): они располагаются горизонтально, как слова в строке или абзаце, чувствительны к вертикальному выравниванию и применяют некоторые методы «ужатия» (shrink-wrapping) к собственному содержимому. Как только линейные элементы получают layout, они начинают вести себя как линейные блоки. В этом и заключается объяснение того факта, что в IE/Win линейные элементы могут содержать блочные, и при этом возникает меньше проблем, чем в других браузерах, в которых элементы с display: inline остаются линейными.
Сбрасываем hasLayout
Если выставить следующие свойства в их значения по умолчанию с помощью отдельного правила, это сбросит (или отменит) hasLayout, если не останется других свойств, его выставляющих:
* width, height (в auto); * max-width, max-height (в none) (в IE7); * position (в static); * float (в none); * overflow (в visible) (в IE7); * zoom (в normal); * writing-mode (из tb-rl в lr-tb).
Разработчикам стоит с осмотрительностью использовать сброс этих свойств. Рассмотрим какое-нибудь меню: изменение статуса hasLayout у a:hover, умышленно или нет, приведет к неожиданному отображению (или нестабильности IE6 при совместном динамическом использовании с position: relative).
Отличается и свойство display: если inline-block выставляет haslayout = true, этот флаг позже не сбрасывается в false при переписывании этого значения с помощью block или inline в другом наборе правил.
Выставление свойств min-width, min-height в их значение по умолчанию, которое равно 0, по-прежнему присваивает элементу hasLayout, но IE7 воспринимает для таких целей нестандартное значение auto, которое и сбрасывает hasLayout. Скриптовое свойство hasLayout
CSS-хаки
Следующие хаки устанавливают свойство hasLayout, они были проверены в IE7 и более ранних версиях.
John Gallant и Holly Bergevin опубликовали Holly hack:
/* \*/ * html .gainlayout { height: 1%; } /* */
* Обеспечивает layout в IE5–6 для любого элемента, за исключением линейных в IE6 в стандартном режиме. * Работает, в общем случае, хорошо за исключением тех случаев, когда height:0 или 1px является более стабильным решением. * Не совместим с overflow: hidden, кроме IE6 в стандартном режиме (в нем height: 1% приводится к height: auto, если у родительского элемента не задана высота). * Не имеет никакого эффекта в IE7 в стандартном режиме, в нем * html не соответствует никакому элементу.
Чтобы назначить layout в IE6 и более ранних версиях, мы можем использовать хак с подчеркиванием:
.gainlayout { _height: 0; }
И чтобы назначить layout для IE7, можно воспользоваться свойством min-height:
.gainlayout { min-height: 0; }
Альтернативным путем, и, возможно, выдержавшим проверку временем, является использованием условных комментариев:
<!–[if lte IE 6]><style>.gainlayout { height: 1px; }</style><![endif]–>
<!–[if IE 7]><style>.gainlayout { zoom: 1; }</style><![endif]–>
Еще одним безопасным и изящным решением будет использование внешней таблицы стилей, вызываемой из условных комментариев, для каких бы то ни было исправлений, в которых нуждается IE-Win:
<link rel=»stylesheet» href=»allbrowsers.css» type=»text/css» />
<!–[if lte IE 7]><link rel=»stylesheet» href=»iefix.css» type=»text/css» /><![endif]–>
Для IE6 и более ранних версий стоит всегда использовать height (если мы хотим обеспечить поддержку IE5.0, у нас будет не такой большой выбор), хотя это свойство и вызывает конфликты с чем-то другим (overflow: hidden). Что касается значения, то 1%, 1px, 0 будет более или менее равноправны, но 1% может (хотя и очень редко) вызывать некоторые проблемы.
height не может использоваться для линейных элементов в стандартном режиме, и этого свойства стоит избегать в IE7 (или использовать с крайней осторожностью: только значения в процентах, и только при отсутствии у родительского элемента заданной высоты). В таких случаях рекомендуется использовать display: inline-block или zoom: 1.
Мы наблюдали некоторое количество безуспешных попыток применить так называемые «Holy hacks» к плавающим элементам или к элементам с заданной шириной. Запомните: целью данного хака является не задание элементу высоты, но вызов hasLayout = true.
Не присваивайте layout всему подряд: * {_height: 1px;}. В таких количествах layout вместо лечебного воздействия способен убить вашу верстку на корню.
Управление хаками
Как показал релиз IE7, невозможно предсказать, будут ли следующие версии IE по-прежнему нуждаться в hasLayout для исправления некоторых ошибок и как они будут реагировать на фильтры, которые используются на текущий момент. В этом свете рекомендуется использовать исключительно MS-свойство zoom и(ли) условные комментарии.
<!–[if lt IE 7]><style>/* style for IE6 + IE5.5 + IE5.0 */.gainlayout { height: 0; }</style><![endif]–>
* zoom: 1; присваивает layout в IE5.5+ любому элементу (включая линейные), но не имеет никакого эффекта в IE5.0 * Не известно побочных эффектов (хотя линейные элементы ведут себя как линейные блоки). * Если требуется валидность страницы, zoom должен быть спрятан внутри условных комментариев.
Прямого css свойства haslayout нет. Его можно включить, используя некоторые css свойства. Haslayout имеют некторые элементы по-умолчанию, это такие элементы как htm, body, table, tr, th, td, img, hr, input, button, select, textarea, fieldset, legend, iframe, embed, object, applet, marquee . Включить haslayout можно с помощью CSS:1 .container{ zoom:1; /*Самое распространенное. Кстати, это свойство не валидно*/ height:1%; position:absolute; position:relative; overflow: hidden; float:left; float:right; display: inline-block /* Когда нужно сделать haslayout инлайн элементу */ /* И другие...*/ }
Устранение бага с повторяющимися символами.
Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:
применить ко всем плавающим элементам display: inline; применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага); поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>; поместить пустой <div></div> в самом конце плавающего блока. Используйте только тег <a> для кликабельных элементов и элементов, использующих :hover.
Эффект с помощью псевдокласса :hover в IE6 работает только для тега <a>. Также этот тег необходимо использовать для контроля с помощью JavaScript-виджетов, чтобы он был управляем с помощью клавиатуры. Есть несколько альтернативных вариантов, но тег <a> является более надежными, чем большинство решений.
Используйте !important или современные селекторы.
Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом:
#element { min-height: 20em; height: auto !important; /* понимают все современные браузеры */ height: 20em; /* IE6 неправильно использует данное значение /* }
IE6 не понимает min-height и неправильно переопределяет высоту auto с помощью 20em. Тем не менее, он увеличивает размер, если содержимому требуется больше места.
Другой вариант заключается в использовании современных селекторов, например:
#element { min-height: 20em; height: 20em; } /* IE6 проигнорирует это */ #element[id] { height: auto; }
Избегайте процентных размеров.
Проценты путают IE6. Если вы не можете точно определить размер каждого родительского элемента, лучше отказаться от использования процентов. При этом можно использовать процентные размеры в других браузерах, например:
body { margin: 2% 0 !important; margin: 20px 0; /* только IE6 */ }
Тестируйте раньше и тестируйте чаще.
Не прекращайте тестировать в IE6 до тех пор, пока ваш сайт не будет завершен, иначе проблем будет еще больше, и это займет больше времени на исправление. Если ваш сайт корректно работает в FireFox и IE6, то почти наверняка он работает и в других браузерах.
Осуществляйте рефакторинг вашего кода.
Зачастую решение багов может занять больше времени, чем переосмысление проблемы макета. Незначительные изменения в HTML и CSS зачастую являются более эффективными. Это может означать, что вы полностью откажетесь от правильного кода, но возникнет меньше долгосрочных проблем, и вы будете знать, как справиться с проблемой в будущем.
Чтобы задать нулевую высоту для элемента <div>
Очищайте плавающие блоки с помощью overflow:hidden;
Используйте CSS-спрайты.
Данный способ оптимизации для меня, как веб-мастера, явился весьма оригинальным и интересным, в связи с чем хочу поделиться информацией с читателями моего блога. Не отрицаю, что найдутся те, кто данную фишку уже давно используют, поэтому такие могут смело пропускать данный пост. Остальным же читать и брать на вооружение.
Итак…
Для получения эффекта изменения изображения при наведении на него курсора обычно используется две картинки: одна – для положения «по умолчанию», вторая – для положения “hover”, когда курсор наведен на изображение. Тем не менее, есть один способ с применением всего лишь одного изображения, который имеет некоторые преимущества.
Вот как данный эффект реализуется обычно.
HTML-код может выглядеть примерно следующим образом:
<a href="#" id="yaprak"> </a>
Соответствующий CSS будет содержать следующие стили:
a#yaprak { width: 64px; height: 64px; background-image: url('yaprak_bw_color.png'); display: block; text-decoration: none; }
a#yaprak:hover { background-position: -64px 0; }
Фото состоит из двух фото с размером 132х68
Альтернативный текст или фото
CSS-код для блока ссылки: #logo { display: block; position: relative; width: 150px; height: 100px; text-decoration: none; cursor: pointer; }
Данным кодом ссылку мы делаем блоком, указываем ее размеры, задаем свойство position: relative для возможности позиционирования вложенных элементов относительно блока ссылки, убираем подчеркивание и для кроссбраузерности указываем курсор мыши.
CSS-код для блока с альтернативным текстом: #logo b { display: block; position: absolute; z-index: 1; top: 0; left: 0; font-size: 20px; line-height: 20px; }
Этим кодом мы позиционируем альтернативный текст относительно блока ссылки, указываем уровень слоя, меньший слоя с изображением, задаем отступы, и, если нужно, все необходимые параметры для шрифта. Здесь также необходимо указать высоту строки, равной размеру шрифта, чтобы текст не “обрезался” в некоторых браузерах.
CSS-код для изображения: #logo i { display: block; position: relative; z-index: 2; width: 100px; height: 140px; background: url(logo.jpg) no-repeat; }
Здесь мы позиционируем блок изображения, указываем ему уровень слоя, больший, чем для блока с текстом, задаем размер, равный блоку ссылки, и само изображение.
В результате получается, что, если пользователь просматривает страницу с отображением рисунков, то увидит изображение, в обратном случае - альтернативный текст, чего мы и добивались.
А “портят” наши страницы в основном следующие 4 вещи:
JavaScript. Глобальные CSS, размещаемые в заголовке документа. Flash. Несуществующий по стандартам тег <noindex>, придуманный Яндексом. Отказаться от каждого из этих пунктов часто не представляется возможным, но, благо, существуют обходные пути, которые позволяют привести эти 4 элемента к виду, соответствующему стандартам.
Об этом и хочу поведать ниже.
JavaScript Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид:
<script> код скрипта </script>
А должно быть так:
<script type="text/javascript"> код скрипта </script>
Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии:
<script type="text/javascript"> <!--//<![CDATA[ код скрипта //]]>--> </script>
Глобальные CSS Здесь все по аналогии с предыдущим пунктом:
<style type="text/css"> /* <![CDATA[ */ .style {margin: 0; padding: 0} /* ]]> */ </style>
Flash
<object type="application/x-shockwave-flash" data="flash.swf" width="468" height="60"> <param name="flashvars" value="link=http://site.com/" /> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> </object>
Данный код не позволяет автоматически устанавливать флеш-плейер, но ведь нам важнее валидность, не правда ли?
Тег <noindex>
Оформить этот тег необходимо следующим образом:
<del class="hide"><![CDATA[<noindex>]]></del> то, что необходимо запретить индексировать Яндексу <del class="hide"><![CDATA[</noindex>]]></del>
А в файл стилей добавить:
.hide {display: none}
Используйте условные комментарии вместо хаков
<p><!--[if IE]> According to the conditional comment this is Internet Explorer<br /> <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5<br /> <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0<br /> <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5<br /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is Internet Explorer 7<br /> <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up<br /> <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6<br /> <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6<br /> <![endif]--> </p>
Есть довольно большая вероятность, что после смены версии IE какие-то хаки перестанут работать. В случае условных комментариев такая вероятность мала.
Задавайте id для body
Это действительно удобно. Как пример: смена цвета заголовка, текста и фона для каждого раздела. Не придётся дополнительно добавлять классы.
Избегайте использования !important
Если нормальный вес селектора легко просчитать, то вот бороться с десятью перекрывающими друг друга !important уже тяжко. !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
Итог от применения !important в общем случае показан в табл. 1.
Lorem ipsum dolor sit amet...
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.
В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя >
В браузере Opera аналогичное действие происходит через команду Инструменты > Настройки > Вкладка «Дополнительно» > Содержимое > Кнопка «Параметры стиля»
Не используйте PNG24 там, где он не особо нужен
IE6 пока ещё живее всех живых, а с PNGFIX-ом, как известно, проблем хватает.
Зачем ссылкам может понадобиться оформление, отличное от остальных ссылок? .
Прежде чем продолжать, хочу отметить, что я никогда не злоупотребляю открытием ссылок в новом окне браузера и вам не советую (см. также «Об открывании новых окон»). Но иногда это действительно необходимо.
Итак, ближе к телу. Самым первым приходящим на ум решением, как же нам выделять ссылки с атрибутом target="_blank", является введение отдельного CSS стиля:
a{ text-decoration:underline }
a.blank{ font-weight:bold }
В этом случае мы просто ручками применяем стиль blank к нужным гиперссылкам, от чего те приобретают полужирное начертание.
Но это решение не годится, поскольку предполагает ручную расстановку стилей. Поэтому рассмотрим вариант, основанный на CSS2 селекторах по атрибутам и псевдоэлементах:
a[target="_blank"]{ font-weight:bold }
a[target="_blank"]:after{ content:" (откроется в новом окне)"; }
Сие означает, что все ссылки с атрибутом target="_blank" автоматически будут иметь полужирное начертание. Кроме того, после ссылки будет указан текст (откроется в новом окне). Плохо одно — это решение не работает в Internet Explorer любой версии. Работает на данный момент только в Opera 5+ и Netscape Navigator 6+/Mozilla.
Чтобы все ссылки с атрибутом target="_blank" автоматически имели полужирное начертание и в IE, нужно использовать конструкцию expression():
------------------ Допустим, у вас есть картинка, которая должна всегда располагаться в нижнем правом углу страницы. Вместо того, чтобы писать код, отслеживающий прокрутку и изменение размеров страницы, достаточно указать в таблице стилей следующее:
img#pic { top:expression(document.body.scrollTop + document.body.clientHeight - offsetHeight); left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth); position:absolute }
Вот и все пироги. Теперь при изменении размеров страницы или её прокрутке, картинка автоматически будет помещена на своё законное место — в нижний правый угол страницы. Главное не забудьте указать у изображения атрибуты width и height:
<img src="logo.gif" id="pic" width="100" height="30" alt="Логотип" />
a{ text-decoration:underline; font-weight:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "bold" : "normal") }
--------------------------
font-weight:expression((this.getAttribute("target")=="_blank" && this.getAttribute("done") == null) ? ((this.innerHTML+=unescape(' %28в новом окне%29')),(this.setAttribute('done','yes')),"bold") : "normal") ---------------------------
Сокращённые формы записи (font, margin, padding и пр.)
Для избежания конфликтов с пользовательской таблицей стилей, рекомендуется помимо свойства background указывать также свойство color.
Свойство border Value: [ <'border-width'> || <'border-style'> || <color> ] | inherit
В отличие от margin и padding, это свойство может задавать границу только для всех четырёх сторон сразу. Учтите также, что Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов.
Свойства border-top, border-right, border-bottom, border-left Value: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
Если цвет не указан, то он берётся из значения CSS свойства color.
Свойство font Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
CSS2 позволяет задавать с помощью данного свойства системные значения (caption, icon и пр.), чего не достичь с помощью font-family. Правда, значения message-box, small-caption и status-bar в IE4+ выглядят как messagebox, smallcaption и statusbar.
Учтите, что некоторые браузеры требуют (и согласно спецификации, они правы), чтобы были указаны оба компонента: font-size и font-family. То есть, font:bold 120%; не пойдёт, а вот конструкция font:bold 120% Times,serif; в самый раз.
Свойство list-style Value: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
Значение none устанавливает оба свойства list-style-type и list-style-image в состояние none, т. е. у списка будет отсутствовать какой-либо маркер.
Свойство margin Value: <margin-width>{1,4} | inherit
Если заданы все четыре значения, то они применяются, соответственно, к верхней, правой, нижней и левой границе. Если же задано только одно значение, оно относится ко всем сторонам. Ну а если задано два или три значения, остальные цифры берутся из значений противоположной стороны.
Можно использовать отрицательные значения.
Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов.
Свойство outline Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Про это свойство можно лишь сказать, что поддерживается оно только в Opera7b. UPDATE: а также в IE6+ и FF1+.
Свойство padding Value: <padding-width>{1,4} | inherit
Относительно количества значений, смотрите комментарий у свойства margin.
Нельзя использовать отрицательные значения.
Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов. Старайтесь также не использовать padding применительно к элементу table, т. к. эффект непредсказуем во многих браузерах.
cellpadding - cellspacing
table{ border:0px; /* border="0" */ border-collapse:collapse; /* cellspacing="0" */ }
table td{ padding:0px; /* cellpadding="0" */ }
HTML код:
<table> <tr> <td>Foo</td> <td>Bar</td> </tr> </table>
table.stuff{ border-collapse:separate; }
table.stuff td{ padding:5px 10px; border:1px solid #666666; }
<table class="stuff"> <tr> <td>Foo 2</td> <td>Bar 2</td> </tr> </table>
Вид:
Есть такое CSS свойство, как border-spacing. Но , что оно совсем не работает в Internet Explorer. Поэтому растояние между ячейками при border-collapse:separate всегда в этом браузере одинаковое, равное 2 px.
Сбрасывайте значения по умолчанию у элементов, у разных браузеров они могут быть разными.
reset2.css
Добавляем иконку предзагрузки к большим изображениям при помощи CSS
Код минимален, создается всего одно просто правило следующего содержания:
.load { background: url(loading/ajax-loader102.gif) center no-repeat;
Пишем HTML-код
<div class="load" style="width:200px;height:200px"> <img src="025.jpg" alt="Альтернативный текст" /></div>
Пример:
ЗАПРЕТ НА ПОСЕЩЕНИЕ ОПРЕДЕННЫХ САЙТОВ (попытка разместить рекламу) [.htaccess]
RewriteCond %{HTTP_REFERER} badsite\.com [NC,OR] RewriteCond %{HTTP_REFERER} badsite\. [NC,OR] RewriteCond %{HTTP_REFERER} sub\.badsite\.com [NC] RewriteRule .* - [F]
1. Без "http://www.". Запрет на домены badsite.com badsite. sub.badsite.com ЗАПРЕТ НА РАЗМЕЩЕНИЕ КАРТИНОК ОПРЕДЕННЫХ САЙТОВ (попытка разместить рекламу) [.htaccess]
ЗАПРЕТ НА ПРОСМОТР САЙТА С ЗАДАННЫХ IP [.htaccess]