Nell’articolo di oggi vi presento 6 utilissimi code snippets per i vostri progetti, utilissimi per velocizzare le vostre fasi di sviluppo!
Standard html5 template
<!doctype html> <html lang="it-IT"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Titolo</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> <h1>Targetweb Start page!</h1> </body> </html>
Clearfix CSS
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
Per usarlo vi basterà usare la classe all’interno dell’elemento a cui volete dare il clearfix (destro e sinistro).
Reset 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; }
Implementare font con la tecnica @font face
Avete un font e volete usarlo sul vostro prossimo progetto? Usate questo codice:
@font-face{
font-family: 'Targetweb';
src: url('trg.eot');
src: url('trg.eot?#iefix') format('embedded-opentype'),
url('trg.woff') format('woff'),
url('trg.ttf') format('truetype'),
url('trg.svg#webfont') format('svg');
}
h1 { font-family: 'Targetweb', sans-serif; }
Meta tag per lo sviluppo responsive
<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">
Implementare media con HTML5 (Audio e Video)
<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>
Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!
Image Credits “Code” disponibile su Shutterstock – Code image
