- PVSM.RU - https://www.pvsm.ru -
В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv [1] для корректного отображения в старых браузерах.
<!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>
один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.
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; }
Представленный ниже код поможет кроссбраузерно отображать 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);
Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки [2] или фигуры [3].
-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);
Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web [4].
@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; }
Важные мета-теги для корректной работы адаптивного макета
<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">
Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента
<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>
Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных 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;
}
Позволяют упрощать отображать контент. Простой пример: объявление в 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;
}
Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:
*, *: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 [5]:
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com [6]), не работает в 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+ */
}
Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение 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>
Использованные материалы:
Автор: grokru
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/20371
Ссылки в тексте:
[1] HTML5shiv: http://code.google.com/p/html5shiv/
[2] всплывающие подсказки: http://cssnerd.com/2012/04/10/pure-css3-animated-tooltip/
[3] фигуры: http://www.css3shapes.com/
[4] Font2Web: http://www.font2web.com/
[5] Scott Kellum: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
[6] на css-tricks.com: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
[7] 8 Code Snippets for New Website Projects: http://webdesignledger.com/tips/8-code-snippets-templates-for-new-website-projects
[8] Kick-Start Your Project: A Collection of Handy CSS Snippets: http://tympanus.net/codrops/2012/10/25/kick-start-your-project-a-collection-of-handy-css-snippets/#article-section-designrelated
[9] Сайт CSS-Tricks: http://css-tricks.com/
[10] Источник: http://habrahabr.ru/post/159101/
Нажмите здесь для печати.