home

23 полезных CSS-приема для разработчика

CSS, без сомнения, является одним из самых важных языков разметки, которые мы используем. И хотя HTML описывает структуру документа, ее поведение может быть непредсказуемым, в зависимости от версии браузера. CSS – это тот инструмент, который позволит нам исправить все несоответствия в отображении страницы, а также оформить ее внешний вид.

Далее приведен список из двадцати трех различных CSS-приемов, которые будут полезны как начинающим, так и опытным разработчикам.

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку.

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

Стилизация ссылок в зависимости от формата файла

Этот пример направлен на улучшение пользовательского интерфейса. Зачастую в интернете, мы переходим по ссылкам, абсолютно не зная куда они ведут. Следующий фрагмент кода используется для отображения небольших иконок рядом со ссылками. Такие картинки будут подсказывать пользователю, что это внешняя ссылка, электронный адрес, pdf-файл, картинка и т.д.

/* внешняя ссылка */
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* электронная почта */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

Удаляем полосы прокрутки многострочного поля в IE

Internet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода:

textarea{
	overflow:auto;
}

Буквица

На сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах.

p:first-letter{
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:60px;
	font-family:Georgia;
}

CSS-прозрачность

Прозрачность – это свойство, которое разным браузерам, назначается по-разному. С помощью следующего фрагмента кода, вы сможете назначить прозрачность всем браузерам сразу.

.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Предзагрузчик картинок

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

div.loader{
	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}

Простой css-спрайт для кнопки

Наличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon, на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение.

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}

a:hover {
	background-position: 0 -30px;
}

Google Font API

Не так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать здесь.

<head>
	Inconsolata:italic|Droid+Sans">
</head>
body {
	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
}

Хаки для различных браузеров

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

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}

Фиксированный подвал

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

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}

/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Поворот изображения

Вращение картинки может оказаться весьма полезным, особенно если его можно использовать вместо загрузки новой, предварительно развернутой картинки. Предположим, вы хотите использовать только одну картинку для стрелки, но у вас на странице их несколько, причем развернутых в разные направления. Вот решение вашей проблемы:

img.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

Clearfix

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

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9.

.round{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Переопределение стилей

Меня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях.

p{
	font-size:20px !important;
}

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face.

@font-face {
	font-family: 'Graublau Web';
	src: url('GraublauWeb.eot');
	src: local('☺'),
		url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто.

.wrapper {
	width:960px;
	margin:0 auto;
}

Min-height в IE

Этот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг.

.box {
	min-height:500px;
	height:auto !important;
	height:500px;
}

Загрузка картинки

Этот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок.

img {
	background: url(loader.gif) no−repeat 50% 50%;
}

Вертикальное центрирование

Это небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align.

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

Создаем врезы

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

.pullquote {
	width: 300px;
	float: right;
	margin: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font: italic bold #ff0000 ;
}

Выделение текста

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

::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}

Добавляем разрыв страницы

Этот пример, снова направлен на улучшения пользовательского интерфейса, при выводе на печать. Например, при печати статьи, возможно будет полезно отделить комментарии от текста статьи, и перенести их на отдельную страницу. Если добавить класс .page-break к блоку комментариев, то все комментарии, при печати, будут выведены на отдельной странице. И вообще, этот класс можно использовать в любом месте вашего сайта.

.page-break{
	page-break-before:always;
}

Перевод статьи “25 Incredibly Useful CSS Snippets for Developers”, автор Matthew Corner

23 полезных CSS-приема для разработчика: 39 комментариев

  1. >>»Прячем текст с помощью абзаца»

    насколько я понимаю, это не есть хорошо, т.к. сделано именно для поисковика, а не для пользователя.

    1. А что плохого в том, что сделано для поисковика? Вроде как цель любого сайта — быть известным поисковику. А для пользователя — картинка, вместо текста.

      1. Дело в том, что текст находится за пределами видимости пользователя. По вашей логике можно и ссылки невидимые клепать. Конечно, это не так плачевно, но согласитесь, не хорошо.

        1. Не могу согласиться. С точки зрения семантики кода, в тэгах h1 должен содержаться заголовок страницы. Однако, очень часто, вместо текстового заголовка, используют картинку, а заголовком h1 просто пренебрегают. Но в то же время, для поисковика — картинка ничего не значит, она только для пользователя несет смысл. А заголовок как раз наоборот — содержит полезные сведения. Не вижу ничего страшного в том, что пользователь не увидит текста h1, он ему как правило, не особо интересен.

          1. не могу сказать точно, но по-моему при display: none, текст не будет доступен поисковику

          2. Более того не будет видна картинка с логотипом ради которой собственно все и затевалось )
            Да, и бан от поисковика можно получить. Это может быть сочтено поисковым спамом, так же как белым по белому писать или 0-ым шрифтом.
            Вариант с индентом отличный, единственное, обидно что при отключенных картинках заголовок будет не виден, но в последнее время это менее актуально.

          3. Ну конкретно с вариантом display: none может спамом и не посчитает, но и не обработает как заголовок, что являлось целью.
            И пример же не про картинку вообще, а конкретно про логотип компании по сути альтернатива: с возможностями применения спрайтов и т.п.

          4. В теге code не показался код (
            там был пример того как раньше вставляли логотипы тегом img с альтом.

          5. Под картинкой подразумевается фон элемента. text-indent также можно использовать для меню из картинок.

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

  3. Спасибо, отличная подборка, не про все знал.
    Единственное, что описанный вами клеарфикс появился еще во времена IE5Mac (это специально для него кстати выставляется {display: inline-block;}), а это совсем совсем не недавно, вот оригинальная статья о нем
    Clearing Floats The Old Fashioned WayLast updated: July 2, 2008
    Created May 14, 2004
    ))
    И про смену цвета выделения, знать конечно полезно, но лично по моему мнению это сильно противоречит стандартному пользовательскому восприятию.

  4. Google Font API — нет кириллицы, так что зря Вы вносили его в обзор.
    Может когда-то в будущем он добавит и кириллические.

  5. Я порекомендовал бы всячески избегать применение !important в стилях. Может ломать специфичность селекторов.
    Так же не стоит вдалбливать сброс Мейера в любую верстку без разбора. Да и не обновлялся он уже больше двух лет, что-то могло измениться.
    Подвал с expression для шестого — спорный момент.
    Clearfix тоже не всегда применим, не обжечься бы
    Вообщем, переводчику спасибо, автору — хм…

    1. Подвал с expression для шестого — спорный момент.

      Рабочий момент, проверил специально. Причём с минимальнім кодом и ухищрениями. Только предыдущему блоку padding-bottom указать надо, или, если колоночная вёрстка, — перед ним всавить блок-пустышку высотой в подвал и clearfix-ом.

  6. Спасибо за полезные вещи. Конечно, думаю эти 23 приёма ксс не всегда нужны для блога. Особой функциональности они не дают…

    1. А при чем тут блог собственно?) Статья же называется не «
      23 полезных CSS-приема для разработчика блога» ))
      Больше всего позабавило, что в «переводе» исчезли 2-а приема бесследно.

      1. они не исчезли, пересчитайте там и там, я поставила 23, потому что в оригинале их тоже 23, а в названии статьи 25

        1. Простите, не посчитал, значит у автора поста сложно с математикой)

  7. Большое спасибо за перевод!
    80 из 100% именно то, что нужно знать и держать где-то рядом, если забыл.
    Вы не против, если утащу к себе на блог большую часть статьи, с обратной ссылкой конечно?

  8. Первая фишка с заголовком понравилась. Давно интересовался подобным замутом. А то что, текст будет скрыт не отразиться негативно? Как бы поисковик не посчитал это нарушением

  9. Жестко, все, что мне так нужно было. Некоторые моменты буквально на дняз интересовали, а здесь все в одном месте, спасиб. p.s. надо уже заиметь книгу по css.

  10. Для начинающих изучать CSS-эта статья настоящий клад!Я хоть и ориентируюсь в CSS-но для своего сайта пару приемчиков применю!Век живи-век учись!

  11. Полезные функции. Даже и не знал, что у CSS столько возможностей. Интересно, а предзагрузчик картинок сильно увеличивает время загрузки страницы в целом?

  12. чтото я не понял про фиксированый подвал, неужели это такая проблема?
    а вот с поворотом изображение это интересно, надо будет попробовать

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

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