Применение CSS существенно облегчает работу разработчика веб-документов. С появлением каждой новой версии браузера у пользователя появляется необходимость совершенствовать CSS. В настоящей статье размещены 10 наиболее полезных советов Трентона Мосса, которые помогут вам сэкономить ценное время, потраченное на скитание по глобальной сети в поисках необходимого решения возникшей проблемы.
1. Блоковые элементы против строчных
Элементы HTML разметки делятся на блоковые и строчные.
Характеристика блоковых элементов:
- всегда начинаются с новой строки;
- можно задать высоту, высоту строки и верхнее и нижнее поля;
- если ширина не установлена, то по умолчанию она составит 100%.
К блочным элементам относятся следующие теги: <div>, <p>, <h1>, <form>, <ul> и <li>.
Строчные элементы обладают противоположными характеристиками:
- пишутся на той же строке;
- высота, высота строки и поля не изменяются;
- ширина также не изменяется, она равна длине текста или изображения.
Примером таких тегов являются: <span>, <a>, <label>, <input>, <img>, <strong> и <em>.
Для того чтобы изменить статус элемента, используется «display». Но необходимость применения этого параметра может вызвать сомнение: для чего заменять блоковый оператор на строчный или наоборот? С первого взгляда может даже показаться, что вам вряд ли придется когда-либо воспользоваться этим трюком, однако, фактически, именно он является мощным методом, с помощью которого вы можете:
- начать строку со строчного элемента;
- поместить блоковый элемент в середине строки;
- определить ширину строчного элемента;
- изменить высоту строчного элемента;
- распределить цвет фона по ширине текста блокового элемента, не определяя точную ширину.
2. Блочная модель ( Box Model Hack)
Блочная модель используется для визуализации в браузерах до 6-й версии, когда такие параметры как border (граница) и padding (отступ) прописываются вместе с параметром width (ширина) в одном блоке.
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;Первая команда читается всеми браузерами, вторая команда – всеми браузерами, кроме IE 5-й версии. Так как вторая команда стоит именно второй, она имеет превосходство над первой: любая команда, находящаяся на втором месте в блоке преобладает над первой. Итак, как же все это работает? Пустой комментарий ( /**/) перед двоеточием проинструктирует IE 5. o игнорировать команду, с этой же целью пустой комментарий ставится после двоеточия. Пользуясь этим правилом, можно спрятать команду от всех IE 5. x браузеров.
3. Минимальная ширина страницы
Другой весьма удобной CSS командой является команда mid — width , с помощью которой можно определить среднюю ширину любого элемента, в частности, страницы.
К сожалению, IE не понимает этой команды, поэтому придется постараться, чтобы сделать ее функциональной и для этого браузера. Для этого в теге <body> нужно, во-первых, прописать <div>, т.к. нельзя задать минимальную ширину для <body>:
<body>
<div class=»container»>
Затем, прописывается команда, задающая минимальную ширину в 600 пикселей.
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}Первая команда устанавливает минимальную ширину в 600 пикселей, вторая представляет собой команду, прописанную в Java script, которая будет понятна только IE. Следует отметить, что хотя при помощи этой команды вы делаете свой CSS документ недействительным, вам может понадобиться размещение данной команды в заголовке своего HTML-документа. Вместе с минимальной шириной страницы можно задать и максимальную величину:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
} 4. Ширина и длина в IE браузерах
Угодить IE довольно таки не просто. Для этого браузера не существует команд min- width (минимальная ширина) и min- height (минимальная высота), он распознает команды width (ширина) и height (высота) как эти команды.
Это вызывает немало проблем, т.к. для того, чтобы изменить размер текста или количество текста, необходимо изменить параметры блочной модели. Если в блоке прописываются только команды width (ширина) и height (высота), то не один IE браузер не даст возможности менять параметры блока. С помощью только команд min- width (минимальная ширина) и min- height (минимальная высота) также не возможно манипулировать параметрами в IE браузерах.
Особенно много трудностей возникает при использовании фоновых изображений. Так, для фонового изображения шириной 80 пикселей и высотой 35 пикселей необходимо, чтобы размеры блока (рамки) были по умолчанию именно 80 на 35 пикселей. Однако, изменяя параметры текста, необходимо расширять границы блока.
Для решения этой проблемы необходим следующий код для блока class=» box»:
.box
{
width: 80px;
height: 35px;
}html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}Все браузеры прочтут первое CSS правило, а IE проигнорирует второе правило, поскольку в нем используется дочерний селектор. Другие браузеры (не IE) прочтут второе правило, которое, как уже говорилось, имеет превосходство над первым, т.к. в нем прописывается более конкретная информация.
5. Команда преобразования текста
Другая менее известная, но не менее полезная CSS команда – это команда text- transform (преобразование текста). Три правила, которые могут прописываться этой командой: text- transform: uppercase, text- transform: lowercase, и text- transform: capitalize. Согласно первому правилу, все символы прописываются прописными буквами, в соответствии со вторым – все прописываются строчными, а по третьему правилу каждое слово начинается с заглавной буквы.
Эта команда крайне необходима, особенно, когда редактированием контента занимается сразу несколько человек, т.к. она обеспечивает соответствие стиля по всему веб-сайту. Например, заголовки страниц вашего сайта должны начинаться с заглавных букв, команда text- transform: capitalize станет гарантиейвыполнения этого условия, даже если редакторы забыли прописать каждый заголовок с заглавной буквы.
Также предпочтительно использовать команду transform: uppercase длятого, чтобы прописать заглавными буквами отдельные заголовки, т.к. некоторые программы ( screen reader) видят короткие слова как акронимы и в результате « CONTACT US» может превратиться в « contact US», что резко меняет смысл фразы.
6. Исчезающий текст или изображение в IE
IE иногда выдает дефект, который проявляется в исчезновении фоновой картинки с экрана. Фактически эта картинка присутствует на странице, и, выделив все или обновив страницу, вы снова увидите её. Довольно таки странно.
Это проблема часто касается именно фоновых изображений или текста, размещенного в непосредственной близости с переменным элементом. Для решения проблемы существует несколько альтернатив: можно просто добавить position: relative к CSS команде для исчезающего элемента – и, как ни странно, это помогает. Если же это не помогает (а иногда именно так и случается), можно установить ширину для исчезающего элемента – это уж точно должно помочь.
7. Невидимый текст
Иногда вам необходимо сделать определенный текст невидимым. Такой текст может понадобиться пользователям программ вроде «screen reader» для категоризации предметов или вставки заголовков для разделов. Если вам не хочется изменять вид вашей страницы, добавляя какие-то элементы, просто сделайте их невидимыми, и не один браузер не распознает их.
Иногда необходимо сделать невидимой информацию в портативных и печатных файлах, в которых она не должна появиться.
С помощью display: none легко сделать невидимым текст портативных и печатных файлов, однако это не универсальная команда, она может быть применима не ко всем программам ( screen reader). В последнее время появляется очень много «умных» программ, которые просто игнорируют любой текст, для которого прописано правило display: none.
Для таких программ используется особое правило: position: absolute; left: — 9000 px. Такая команда разместит текст на 9000 пикселей влево от левого края экрана, и, таким образом, сделает его невидимым.
8. CSS документы для портативных файлов
Можно создать специальный CSS документ, предназначающийся для портативных компьютеров и мобильных телефонов и активируемый только при использовании одного из этих приборов для доступа к вашему сайту. Все больше сайтов создают отдельные CSS документы для печати; при использовании такого документа любая веб-страница автоматически становится пригодной для печати, как только пользователь собирается распечатать ее.
Приведенная ниже команда используется для загрузки CSS документа в портативный компьютер или мобильный телефон:
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />CSS команда для CSS файлов портативных приборов имеет превосходство над любой равнозначной командой основного CSS документа. Что же это за файл?
В идеале нужно продумать страницу таким образом, чтобы пользователям портативных приборов не пришлось прокручивать ее горизонтально.
Для того чтобы сделать свою страницу удобной для такого пользователя, просто откройте ее в обычном браузере и задайте ее ширину в 150 пикселей. Затем откройте свой основной CSS файл и пропишите несколько дополнительных команд в самом низу документа. Эти команды подгонят формат веб-сайта под параметры монитора портативного компьютера или мобильного телефона и облегчат просмотр страниц. Затем откройте новый документ, вырежьте эти команды и вставьте в этот документ, сохраните его под именем handheldstyle. css или под любым другим именем.
Веб-сайт для просмотра пользователей портативных приборов должен отличаться от того, который предназначается для пользователей обычных браузеров, т.к. работа пользователя за портативным прибором имеет свою специфику.
9. Эффект объемной кнопки
Раньше объемные кнопки были очень модными, но для их установки были необходимы Java script и картинка, что затрудняло их создание. Сейчас создание таких кнопок возможно при использовании специальных команд CSS:
a {
display: block;
border: 1 px solid;
border- color: # aaa #000 #000 # aaa;
width: 8 em;
background: # fc0;
}
a: hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}Кроме этих команд для создания желаемого эффекта могут использоваться и другие команды.
10. Одинаковый код для навигации по странице
На многих веб-сайтах подсвечивается пункт меню, соответствующий местонахождению пользователя на сайте. Это существенно помогает пользователю ориентироваться на сайте и является основным требованием, обеспечивающим удобство и простоту использования. Однако удобную навигацию по сайту может обеспечить только отлаженная HTML разметка для каждой страницы, на создание которой уходит много времени. Возможно, ли задать подсветку навигации для каждой страницы сайта одним HTML-кодом? Трентон Мосс дает положительный ответ.
Прежде всего, необходимо определить класс для каждого пункта навигации:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>Затем нужно добавить id для тега <body>. Идентификатор id должен отображать, в каком разделе сайта находиться пользователь, и изменяться, когда пользователь переходит в другой раздел. Так, если пользователь находится на главной странице, содержание id будет следующим: <body id =“about”>, в разделе «О компании» — <body id =“home”>, в разделе «Контакты» — <body id =“ contact”>.
Следующим шагом будет создание нового CSS правила:
#home .home, #about .about, #about .about, #contact .contact
{
commands for highlighted navigation go here
}Это правило будет действовать только при условии, когда class=“home” содержится в id=“home”, class=“about” в id=“about”, а class=“contact” в id=“contact”. Это произойдет только тогда, когда пользователь зайдет в соответствующий раздел сайта, незаметно для себя подсвечивая пункт меню.
Источник информации: http://www.sitepoint.com/