8 ловушек CSS и методы их обхода
Когда пишется код CSS, очень легко попасть в одну из ловушек. Чтобы их преодолеть, нужно использовать небольшие и эффективные трюки.
В данном уроке описывается несколько моментов, которые помогут при работе над CSS частью вашего проекта.
1. Задаем стили для кнопок
Начнем с классических кнопок HTML. Когда создаются кнопки, например, input type"submit" или button, и хочется получить точность до пикселя, нужно вспомнить о следующих командах:
01 /* Удаляем избыточный отступ в сторону для IE */
02 .button{
03 overflow: visible;
04 }
05
06 /* Удаляем избыточный отступ внутрь для Firefox */
07 .button::-moz-focus-inner{
08 border: 0;
09 padding: 0;
10 }
2. Используем псевдо-элементы
Несомненно, что вам уже известны псевдо-элементы, такие как :before и :after, которые помогают определять содержание, вставляемое перед (или после) основного элемента. Однако, элементы input и img не имеют содержания и псевдо-элементы не работают с ними. А элемент hr позволяет использовать псевдо-элементы.
Также нужно помнить о разнице между :before и ::before. IE8 допускает использование только одинарного двоеточия.
3. Фоновый градиент для всего раздела body
Если вы пробовали использовать CSS3 градиент для тега body, то наверняка заметили, что он не растягивается, а повторяется. Чтобы исправить положение используйте следующий код:
1 html {
2 height: 100%;
3 }
4 body {
5 height: 100%;
6 margin: 0;
7 background-repeat: no-repeat;
8 background-attachment: fixed;
9 }
4. Отсутствие переходов для градиентов
К сожалению, ни один из браузеров не поддерживает переходы градиентов (пока).
Но можно использовать следующие трюки:
1. Использовать свойство background-position для :hover, чтобы создать иллюзию перехода градиента. В действительности используется сдвиг по оси Y.
01 a{
02 background: linear-gradient(orange, red) repeat-x;
03 display: inline-block;
04 padding: 20px;
05 }
06
07 a:hover{
08 background-color: red;
09 background-position: 0 -15px;
10 transition: background-position .1s linear;
11 }
2. Трансформация background-color и использование изображения градиента, которое будет иметь изменяющуюся прозрачность. Такая техника создаст иллюзию перехода градиента.
01 a{
02 background-color: orangered;
03 background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
04 transition: background-color .1s linear;
05 display: inline-block;
06 padding: 20px;
07 }
08
09 a:hover{
10 background-color: red;
11 }
5. Зазор между элементами inline-block
Допустим, вы используете inline-block вместо float для горизонтального списка. При этом появляется зазор между вашими элементами inline-block. чтобы исключить его необходимо использовать "грязную" разметку.
То есть, вместо четкой структуры:
1 <ul>
2 <li>один</li>
3 <li>два</li>
4 <li>три</li>
5 </ul>
Нужно писать так:
1 <ul>
2 <li>один</li><li>два</li><li>три</li>
3 </ul>
6. Когда height: 100% действительно работает?
Все достаточно просто: когда вы используете height: 100% для элемента, всегда думайте о высоте его родителя. Если высота родителя не определяется в стилях, то внутренний элемент будет иметь 100% высоты от ничего.
Вот такой широко распространенный пример разметки:
1 <div id="parent">
2 <div id="child">2</div>
3 </div>
Стили для него:
01 #parent{
02 height: 400px;
03 padding:10px;
04 background:red;
05 }
06
07 #child{
08 height: 100%;
09 background:green;
10 }
Зеленый цвет элемента #child с помощью правила height: 100% будет растянут на все 400px по вертикали.
7. Скругленные углы для таблиц
Трюк заключается в установке свойства таблицы border-spacing в значение 0. Свойство border-collapse по умолчанию имеет значение separate, поэтому нужно установить его в значение collapse для IE7 и старше (для обратной совместимости кода).
1 table {
2 *border-collapse: collapse; /* IE7 и старше */
3 border-spacing: 0;
4 border-radius: 5px;
5 }
8. Модель элемента ввода
Когда разрабатывается элемент поиска, например, то после установки одинаковых значений для свойств height или width элементов input type="submit" и input type="text" результат обычно расстраивает.
Причина расстройств заключается в том, что для элемента input type="submit" используется модель определения размеров border-box, а для элемента input type="text" — модель content-box (в IE и FF).
Чтобы устранить причину расстройств, нужно использовать одинаковые модели для элементов ввода. Для этого используется свойство CSS3 box-sizing:
1 box-sizing: content-box padding-box border-box;
