Будучи веб-разработчиком, нам часто приходится идти на компромисс и пробовать новые системы, фреймворки и онлайн-ресурсы. Один код может оказаться полным завалом, в то время как другой станет “скрепкой” в процессе разработки.
На нашем сайте уже была статья о полезных сниппетах – HTML5 сниппеты для улучшения работы веб-сайта. В этой статье мы расскажем о 8 сниппетах, которые может использовать любой веб-разработчик для создания и разработки новых проектов. Эти блоки кода включают типичный HTML5 код и CSS3 решения для различных макетов веб-сайтов. Вы можете хранить эти сниппеты в текстовом файле (txt file) или программном обеспечении для разработок, такие как Coda, Adobe Dreamweaver или Visual Studio. Но, в любом случае, эти блоки кода станут полезными в развитии практически любого проекта.
Простой готовый HTML5 шаблон страницы
Для начала, мы включили простой HTML5 шаблон веб-страницы. В этом сниппете есть doctype тег, а также дополнительные скрипты хэдера. Шаблон содержит ссылки на внешние страницы styles.css для вашего дизайна, которые могут быть обновлены подо что угодно.
Мы также включили ссылки на 2 скрипта – jQuery и HTML5shiv документ, для того чтобы старые версии Internet Explorer могли распознавать новые элементы HTML5.
<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
Clearfix для CSS Floats
Большинство веб-разработчиков понимают как работают флоуты, но их очистка, добавляет дополнительные правила.
Вам следует скопировать код написанный ниже в любой CSS документ, где вы используете флоуты в макете. Затем, нужно добавить .сlearfix класс на любой контейнер элементов с внутренним флоутом.
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }CSS сбросы браузера
Каждый веб-браузер поставляется в комплекте с собственным набором стандартных правил по дизайну документов. По умолчанию, если не включать никаких других правил CSS, вам предоставляется набор стандартных шрифтов, полей и паддинга для веб-сайта.
Обычно веб-разработчики хотят удалить заданные значения для того, чтобы каждый браузер отображал веб-страницы одинаково.
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; }Полные CSS3 градиенты
Приведенный ниже код, должен создать CSS3 градиенты практически для всех веб-браузеров на сегодняшнем рынке.
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);
Просто скопируйте и вставьте эти свойства в любой CSS селектор, который нуждается в градиентном фоне. Затем вы можете изменить значение цвета на какие угодно, в том числе rgba() синтаксис для прозрачности. У Internet Explorer есть много собственных параметров для формирования градиентов внутри браузера. Но, так как многие из них не поддерживаются в других местах, вы можете удалить их из рабочего кода.
CSS3 трансформации
Эта функция не всегда используется разработчиками из-за отсутствия в ней поддержки старых браузеров. Но CSS transforms изменили то, как разработчики создают пользовательские интерфейсы на веб-сайтах. Благодаря браузер-трансформации, вы можете генерировать пользовательские подсказки и формы с помощью нескольких строк кода.
-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);
Вы должны быть осторожны при использовании transform свойств на большом количестве элементах. Это может вызвать ошибки в Internet Explorer и в некоторых старых версиях Firefox.
Уникальная @font-face типография
Существует много учебников, объясняющие как включить пользовательские шрифты используя CSS3. Этот процесс не так прост, как дизайн текста в Photoshop. Используйте этот код, если хотите включить копии ваших собственных шрифтов и загрузить уникальное font-family значение в ваш CSS.
@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; }Обратите внимание, что вам нужно настроить font-family функцию на любой нужный элемент, с помощью этого шрифта. Также вам нужно предоставить хотя бы .woff файл, который поддерживается всеми CSS3-браузерами. В идеале вы должны включить следующие копии шрифтов: OTF, TTF, СРВ, WOFF и SVG.
HTML мета тэг для респонсивных макетов
Мобильный респонсивный (адаптивный) дизайн стал чрезвычайно популярным за последние несколько лет. Поэтому часто можно видеть разбросанные сниппеты, используемые для респонсивных целей. Чтобы сделать вещи немного проще, мы включили несколько мета-тегов, которые вы можете добавить в раздел документа <head>
<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">
HTML5 для поддержки видео и аудио (embedded media)
Новый <video> и <audio> теги стали большим облегчением для разработчиков, которые часто работают с digital media. Изображения всегда поддерживались в Интернете, а вот аудио и видео файлы, боролись за достойную поддержку очень долгое время.
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> <source src="media/video.mp4" type="video/mp4"></source> <source src="media/video.webm" type="video/webm"></source> <source src="media/video.ogg" type="video/ogg"></source> </video> <audio controls="controls" preload="none"> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
К счастью, аудио и видео теги разделяют подобный синтаксис. Мы можем использовать preload атрибут (предварительную загрузку), чтобы начать загрузку данных, прежде чем пользователь кликнул “play”.
Мы уверены, что есть и другие потрясающие сниппеты, которые не были описаны в этой статье. Но мы хотели представить эту коллекцию как очень простой/стартовый набор для веб-разработчиков. Если у вас есть дополнения – напишите в комментариях!
Высоких вам конверсий!
