Мини Чат
Еще 10 хитростей CSS о которых вы возможно не знали

Наша статья "Еще 10 хиростей CSS о которых вы возможно не знали" нашла такую широкую поддержку, что мы решили что пришло время предложить вам еще 10 хиростей CSS о которых вы возможно не знали.

1.Блочные или строковые элементы.

Практически все HTML элементы являются либо блочными, либо строковыми. Блочные элементы характеризуются следующими свойствами:

  • Всегда начинаются с новой строки.
  • Height, line-height, а так же top и bottom margins могут быть изменены.
  • Ширина по умолчанию соответствует 100% по содержанию элементов внутри, если только не определена специально.

В качестве примеров блочных элементов <div>, <p>,<h1> <form>, <ul> и <li>. Строковые элементы в свою очередь обладают противоположными характеристиками.

  • Начинаются на той же строке
  • Height, line-height, а так же top и bottom margins не могут быть изменены.
  • Ширина по содержимому текста/рисунка и не может быть изменена.

Примеры строковых элементов включают в себя <span>, <a>, <label>, <input>, <img>, <strong> и <em></em>. Для того чтобы изменить состояние элемента возможно с помощью display: inline или display: block.

Но каков смысл с менять элемент с блочного на строковы или наоборот? Вообще-то может показаться что необходимость в таком изменении очень низка, но действительность состоит в том что это очень мощная техника которую можно применять в любом из перечисленных случаев:
  • Получить строковый элемент на новой строке
  • Получить блочный элемент на той же строке
  • Контролировать ширину строкового элемента (особенно полезно для ссылок навигации).
  • Изменять высоту строковых элементов.
  • Установить цвет background colour по ширине текста блочного элемента, без точного задания ширины.

2.Еще "финт" по отношению к блочному элементу.

"Финт" с блочным элементом используется еще когда имеем дело Internet Explorer ранее 6 версии, где border и padding входят в ширину элемента в противоположность остальным. Количество CSS методов решения этой проблемы постоянно ростет, так что представим еще один наиболее понравившийся нам:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

Первая команда width читается всеми браузерами; вторая всеми кроме IE5.x на PC. Так как вторая команда идет после первой,то она имеет преимущество над второй-любые команды идущие следом переписывают предидущие. Так вот как это все работает?

Устанавливая пустой тег (/**/)перед двоеточием мы прячем команду от IE5.x. Таким же образом устанавливая пустой тег с комментариями добиваемся игнорирования команды IE5.x

3.Минимальная ширина страницы.

Существует очень удобная комманда min-width, с помощью которой вы можете определить любой элемент.Это может быть особенно полезно для минимальной ширины страницы.

К сожалению IE не знает об этой комманде, поэтому мы должны найти новые пути для работы с этим браузером. Во-первых необходимо вставить <div> сразу внутри <body>, так как мы не можем применить width к <body>:

<body>
<div id="container">

Далее создаем наши CSS комманды, для того чтобы применить минимальную в ширину 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

Первая комманда ординарная команда установки мнимальной ширины; вторая короткая JavaScript комманда которуя понимает только IE. Необходимо отметить что эта комманда сделает ваш CSS не валидным, поэтому возможно для вас будет более приемлемым включать ее в head каждого 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 как min-width и min-height- идем далее!

Это может быть проблемой, потому что нам может понадобиться чтобы области были с изменяемыми размерами, для того чтобы, возможно, текста болшьше они вместили или пользователь изменил текст. Если мы применим теги width и height, то другие браузеры(не IE) не дадут возможность размеру меняться. Если мы применим только min-width и min-hieght, то мы не будем контролировать ни длину ни ширину в IE!

Это особенно проблематично при использованиии в качестве background картинок. Если вы используете background image с шириной 80px и высотой 35рх, вы хотите быть уверенны что размер области использующей этот рисунок по-умолчанию равен именно 80 x 35px. Однако, если пользователь изменит размер текста, то размер области должен будет измениться соответствующе.

Для решения этой проблемы необходимо применить код к области использующей class="box":

.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

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

5.Text-transorm комманда.

Одна из менее популярных, но очень полезных комманд является тext-transorm. Три наиболее простых значения у этой комманды

text-transform: uppercase, text-transform: lowercase и text-transform: capitalize
. Первое значение переводит все буквы в заглавный регистр, второе в маленькие, а третье первую букву каждого слова заглавной.

Эта комманда очень сильно поможет вам, если вы хотите быть уверены в размерности стиля на всем сайте, особенно если существует несколько коннтент редакторов сайта. Скажем для примера, ваш стиль диктует что бы слова в заголовках всегда начинались с заглавной буквы.Для того чтобы это было наверняка используйте text-transform:capitalize.Даже если редактор сайта забудет о заглавных буквах, это не вызовет ошибку в отображении.

Все таки более желательно использовать text-transform: uppercase нежели заглавные буквы, так как сканеры текста могут воспринять слово из заглавных букв в качестве абривиатуры. Наглядный пример фраза ‘CONTACT US’ может быть интерпретированна как 'contact U S’.

6.Исчезновение текста или картинок в IE.

У IE существует очент странный баг когда текст или рисунок иногда исчезает. Этот момент до сих пор актуален, но если вы выделите все на странице или обновите ее, то рисунок или текст снова появиться. Странно не правда ли?

Эта проблема как правило присуща background рисунками тексту после float элемента. Рецепт против этого, необходимо прописать

position: relative
в коммандах CSS для ичезающего элемента, и по какой-то невероятной причине это устраняет проблему. Если и это не помогает (это иногда случается), то пропишите ширину для непокорного элемента и это должно решить проблему.

7. Невидимый текст.

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

Вы возможно так же захотите скрыть текст с помощью CSS файла для печатной или портативной версии.

Чтобы сделать невидимым можно использовать

display: none
- легко! Это хорошо работает для портативных и печатных версий страницы, но не так здорово для большенства сканеров текста. Сканеры текста не настолько разумны, и зачастую опускают тест к которому пременено правило display: none.

Для сканеров текста необходим новый подход

position: absolute; left: -9000px
. Тем самым размещает текст на 9000рх левее левого края экрана, тем самым делая его невидимым.

8. CSS документ для портативных устройств.

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

Следующие комманды используются для вызова CSS файла для мобильных устройств:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

СSS команды в этом "мобильном" файле переопределяют аналогичные в главном CSS файле. Так, какие комманды необходимо добавить в этот файл?

В идеале вы не должны заставлять пользователя мобильного устройства скроллить через весь сайт. Понять это можно уменьшив размеры вашего сайта на обычном браузере вашего компьютера до ширины в 150рх. Затем отркройте ваш основной CSS файл и в самом низу добавьте несколько команд. Команды которые необходимо прописать - должны подогнать разрешение сайта таким образом, чтобы исчез горизонтальный скролл на ширине в 150рх. Затем создайтке новый документ, вырежте и вставьте эти новые команды, затем сохраните файл как handheldstyle.css (либо любое другое название понравившееся вам).

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

9. Эффект 3D нажатие кнопки.

Взглянув назад в раннии дни web, когда 3D кнопки только появились, отображаясь нажатыми при наведении мыши, они применялись повсеместно. В те времена, этого можно было добиться с помощью изображений и javascript, но с приходом CSS мы можем обновить всё ретро и обновить эффект:


Пример

Вам потребуются следующие команды:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Помимо этих команд, вы можете добавить любые другие для того чтобы добиться необходимого вам эффекта - ограниченного только вашим воображением!

10. Один и тот же код навигации на всех страницах.

Большинство веб сайтов подсвечивают пункты навигации нахождения пользователя на сайте, для лучшей ориентации. Это основополагающее требование юзабилити, может быть головной болью, так как HTML код навигации на странце должен соответствовать всем и каждой. Как максимально сооветствовать обеим значениям итих слов? Возможно ли это? Конечно возможно ...

Во-первых, вы должны присвоить class каждому элементу навигации:

<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 должно представлять, где пользователь находится на сайте и должно менятся когда пользователи перемещаются в другие разделы сайта. Когда на домашней странице, это должно читатся как

<body id="home">
. В разделе "О нас"
<body id="about">
и в "Наши контакты"
<body id="contact">
.

Далее создаем новое CSS правило:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}


Основой этого является правило которое срабатывает когда class="home" содержит id="home", и когда class="about" содержит id="about", class="contact" содержит id="contact". Такая ситуация происходит когда пользователь находится в орределенном разделе сайта, эффект подсвечивания пенктов навигации.


Источник