В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
1. Базовая HTML5 конструкция
Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
2. Сброс стандартных стилей браузеров
один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
3. CSS3 градиенты
Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.
background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);
4. CSS3 Transform
Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.
-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);
5. Свой @font-face
Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.
@font-face{
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#webfont') format('svg');
}
h1 { font-family: 'MyFont', sans-serif; }
6. Мета-теги адаптивной верстки
Важные мета-теги для корректной работы адаптивного макета
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
7. HTML5-медиа
Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">
<source src="media/video.mp4" type="video/mp4"> <source src="music.mp3" type="audio/mpeg">
</audio>
8. Классы для упрощения верстки
Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:
.float-left /* Or whatever name you like */ {
float: left;
}
.float-right /* Or whatever name you like */ {
float: right;
}
Или отображением элементов:
.hide {
display: none;
}
.show {
display: block;
}
9. Сниппеты дизайна
Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.
.content {
font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.title {
font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
.code {
font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}
10. Сниппеты разработки
Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6/7 support */
.clearfix {
*zoom: 1;
}
Для скрытия каких-то элементов можно применять position: absolute; left: -9999px; Однако правильнее будет использовать более простой код, автор Scott Kellum:
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:
.break {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.ellipsis {
width: 250px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis; /* Required for IE8 */
-o-text-overflow: ellipsis; /* Required for Opera */
text-overflow: ellipsis;
}
Переносы текста в теге pre:
pre {
white-space: pre-wrap; /* Chrome & Safari */
white-space: -moz-pre-wrap; /* Mozilla since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
11. Подготовка страницы для печати
Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:
@media print {
* {
background: none !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
/* Images, vectors and such */
filter: Gray(); /* IE4-8: depreciated */
filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
-webkit-filter: grayscale(100%); /* Chrome + Safari 6 */
-moz-filter: grayscale(100%); /* Future proof */
-ms-filter: grayscale(100%); /* Future proof */
-o-filter: grayscale(100%); /* Future proof */
filter: grayscale(100%); /* Future proof or polyfilled */
}
a {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
a[href="#"],
a[href="javascript:"] {
content: "";
}
}
<!-- SVG version of grayscale filter: desaturate.svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>
Использованные материалы:
- 8 Code Snippets for New Website Projects
- Kick-Start Your Project: A Collection of Handy CSS Snippets
- Сайт CSS-Tricks
Автор: grokru
