10 советов по CSS для WEB-разработчика

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками 🙂 Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.

1) @media

Медиа-запросы CSS3

1
2
3
@media screen and (max-width: 960px) {
...
}

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

Более подробно о медиа-запросах: https://xozblog.ru/2012/09/responsive-menu/

2) background-size

css фоновое изображение

1
2
3
4
body {
   background: url(image.jpg) no-repeat;
   background-size: 100%;
}

Еще одним чрезвычайно полезным свойством CSS3 является background-size. Благодаря этому свойству можно масштабировать фоновое изображение как угодно.

3) @font-face

css font face

1
2
3
4
5
@font-face {
   font-family: Blackout;
   src: url("blackout.ttf") format("truetype");
}
h1 { font-family: Blackout; }

Вы все еще пользуетесь стандартными шрифтами? Тогда мы идем к Вам! Это шутка конечно же, но действительно «грех» не воспользоваться свойством CSS @font-face и установить на своем сайте те шрифты, которые лучше всего подходят к разработанному дизайну и будут выглядет одинаково в разных браузерах и на разных устройствах. Все, что нужно — найти или создать шрифт и подцепить его к странице с помощью CSS @font-face. Также можно воспользоваться сторонними сервисами, такими как Google Web Fonts.

Более подробно о пользовательских шрифтах — https://xozblog.ru/2012/09/font-face/

4) margin: 0 auto

1
2
3
#container {
   margin: 0 auto;
}

Удивительно, что до сих пор не разработано свойств для центрирования блок элемента (div). Поэтому приходится прибегать к ухищрениям, вот один из лучших способов как отцентрировать div по отношению к его родителю.

5) overflow: hidden

1
2
3
.container {
   overflow: hidden;
}

Бывает необходимо чтобы размеры блочного элемента оставались нетронутыми, т.е. не увеличивались под действием содержимого: будь то текст или изображение. Решается это просто свойством overflow со значением hidden. Также у этого свойства есть и другие значения, например можно сделать полосу прокрутки (значение scroll).

6) .clearfix

1
2
3
4
5
6
7
8
.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

Для тех ситуаций когда overflow: hidden не работает, можно воспользоваться методом Clearfix. Название класса может быть любым, не обязательно clearfix.

7) color: rgba()

rgba css

1
2
3
.btn {
   color: rgba(178,120,134,1);
}

Используя RGBa CSS можно придать прозрачность цвету, что невозможно при использовании шестнадцатеричное значение (#fafcdc). Для создания цвета надо указать значения составляющих цветов: красного, зеленого и синего, а также выставить альфа параметр. 1 — полностью не прозрачный, 0 — полностью прозрачный, соответственно 0.5 — прозрачный на половину.

8) input[type=»text»]

1
2
3
input[type="text"] {
   width: 200px;
}

При разработке дизайна грамотно применяйте css селекторы, это позволит сократить и оптимизировать код. И в целом стремитесь минимизировать количество кода, ведь это залог хорошего программирования) Благодаря селектору приведенному выше, выбираются все поля с типом text и им задается ширина 200px.

Более подробно о CSS селекторах: https://xozblog.ru/2012/10/checkbox-radio-css3/

9) transform: rotate(30deg)

css transform

1
2
3
4
5
6
7
.title {
     -moz-transform: rotate(15deg); /* Для Firefox */
     -ms-transform: rotate(15deg); /* Для IE */
     -webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
     -o-transform: rotate(15deg); /* Для Opera */
     transform: rotate(15deg);
}

Не стоит также забывать об анимации CSS. Зачем перегружать веб-страницу лишними скриптами, когда их можно заменить css анимацией.

Более подробно о CSS анимации и свойстве transform: https://xozblog.ru/2012/06/transform/

10) a {outline: none;}

1
a {outline: none;}

Ничто не может испортить дизайн больше, чем пунктирные линии вокруг ссылки при нажатии. С помощью outline: none этого можно избежать.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!