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