Лого SiteHere.ru

Подводные камни CSS и как с ними бороться

Подводные камни CSS и как с ними бороться

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

Стили кнопок

Начнем с оформления кнопок. При попытке придать стиль кнопке, например «Отправить», если хотите чтобы она отображалась одинаково во всех браузерах, не забывайте о следующих свойствах:

1
2
3
4
5
6
7
8
9
10
/* удалить внешние отступы в IE */
.button{
  overflow: visible;
}
 
/* удалить внутренние отступы в Firefox */
.button::-moz-focus-inner{
  border: 0;
  padding: 0;
}

Использование псевдо-элементов

Вы наверняка знаете о таких псевдо-элементах как :before и :after, которые позволяют добавлять контент до или после блоков, которым задан данный элемент. Кроме того, элементы, такие как <input> или <img> не содержат в себе другие элементы, таким образом псевдо-элементы к ним не применяются. Исключением является элементом <hr>.


Градиент на всю высоту страницы

Если в CSS3 добавить градиент на фон, то он будет находится только слева сверху. Для того чтобы растянуть на всю страницу, необходимо прописать следующие строки:

1
2
3
4
5
6
7
8
9
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Высота 100%

При установке значения height:100% всегда помните о высоте родителя этого элемента. Если у элемента родителя не определена высота, то у этого элемента определена высота в 100% от ничего! Это грубая ошибка. Вот пример этой ошибки:

1
2
3
<div id="parent">
    <div id="child">текст</div>
</div>

и

1
2
3
4
5
6
7
8
9
10
#parent{
    height: 400px;
    padding:10px;
    background:red;
}
 
#child{
    height: 100%;
    background:green;
}

Внимательно следите за этим!


Размеры input

Например при создании формы поиска, когда мы указываем размеры <input type="text"> и <input type="submit">, то на самом деле размеры на странице не будут одинаково отображаться. Для этого в CSS3 есть свойство, которое отвечает за размеры input-ов:

1
box-sizing: content-box | padding-box | border-box;


Это несколько частоиспользуемых советов и методов. Эти советы будут очень полезны начинающим.

Если есть какие-то вопросы, задавайте их в комментариях ниже.

Успехов!

Источник: css.dzone.com

2 комментария к записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *