Работа в качестве веб-разработчиков часто требует экспериментировать с новыми сниппетами. Некоторые из ваших экспериментов будут оказаться плохими (к сожалению), а другие (качественные куски кода) - станут главными продуктами в процессе разработки сайтов. В этой статье вы увидите сниппеты, которые любой веб-разработчик может использовать. Эти блоки кода включают типичные HTML5 шаблоны и еще несколько промежуточных CSS3 решения для различных макетов сайта. Вы можете хранить эти фрагменты в текстовых файлах или в разработке программного обеспечения. Но в любом случае эти блоки кода должна оказаться полезной практикой практически в любом развитии проекта.
Основная страница HTML5 шаблонов
Начнем с очень простого шаблона HTML5 веб-страницы. Этот фрагмент кода имеет очевидные теги, тип документа наряду с некоторыми дополнительными сценариями в заголовке. В шаблоне содержится ссылка на внешний styles.css страницы для ваших стилей.
Также включены ссылки на 2 размещенных у Google сценария. Первый JQuery 1.8.2, которая является самой последней версией известного фреймворка на момент публикации. Затем второй HTML5shiv - это полезная библиотека позволяющая старым версиям Internet Explorer распознавать новые элементы HTML5.
<!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>
Clearfix для CSS обтекания (float)
Что такое CSS Clearfix все узнали несколько лет назад. Большинство веб-разработчиков до сих пор не особо осознают правила работы обтекания. А clearfix вносит некоторые дополнительные правила.
Вы должны скопировать код в любой документ CSS в котором вы используете float в макете. Clearfix класс нужно добавлять на любой контейнер элементов с внутренним обтеканием. Это полезно, например, если у вас есть 1 или 2 боковые панели и они плавают вместе с вашим основным содержанием.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
CSS3 градиенты
Просто скопируйте и вставьте эти свойства в любой селектор CSS, который нуждается в градиентном фоне. Затем вы можете изменить цвет значения на абсолютно любой, в том числе RGBA. Internet Explorer имеет много собственных настройки для создания градиентов внутри браузера. Но так как многие из них не поддерживаются в других местах вы можете удалить их из рабочего кода:
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);
HTML5 теги Мета
Структура HTML будет строиться с мета тегом viewport для управления шаблоном на мобильных устройствах.
Обычно оптимизированные для мобильных приложений сайты содержат следующие команды:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
HTML5 мультимедиа
Новые теги video и audio значительно облегчают создания сайтов для разработчиков, которые часто работают с цифровыми медиа. Изображения всегда поддерживались на веб-сайте, а аудио и видео файлы боролись за достойную поддержку продолжительно долгое время. До недавнего времени было очень мало типы файлов, которые могут транслировать видео на всех основных операционных системах.
<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>
