Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk, and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process.
In this article I’d like to share 8 bits of code which any web developer can use. These code blocks include typical HTML5 and some more intermediate-level CSS3 solutions for various website layouts. You could store these snippets in a txt file or in development software like Coda or Adobe Dreamweaver. But either way these blocks of code should prove useful in nearly any development project.
1. Basic HTML5 Page Template
To get us started I have included my very basic HTML5 webpage template. This code snippet has the obvious doctype tag along with some additional header scripts. The template makes reference to an external page styles.css for your stylesheet designs, which can be updated to anything.
Also I have included references to 2 Google-hosted scripts. The first is jQuery 1.8.2 which is the most recent version as of this publication. Then second I’m including the HTML5shiv document so that older versions of Internet Explorer can recognize newer HTML5 elements.
<!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="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
2. Clearfix for CSS Floats
I learned about the CSS clearfix method years ago when just first getting into coding. Most web developers understand how floats work, but clearing floats brings in some additional rules.
You should copy my code below into any CSS document you’re using with floats in a layout. Then you should append the .clearfix class onto any container elements with internal floats. This is useful, for example, if you have 1 or 2 sidebars floating alongside your main content and need to clear the lower footer content down to the bottom of the page.
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
3. CSS Browser Resets
Each web browser comes packaged with its own set of standard rules for styling documents. By default if you include no other CSS rules you’ll be given a set of standard fonts, margins, and padding for your website.
Typically web developers want to remove these preset values so that each browser will render the webpage exactly the same. Margins and padding is one big area, but there are other topics as well. I’ve worked out this snippet through Eric Meyer’s CSS resets while adding a few additional lines of, in my opinion, important code.
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; }
4. Full CSS3 Gradients
The code below should create CSS3 gradients for nearly all web browsers on the current market. It can be tough when you are working with these new properties since there are so many rules to keep in mind. Also you have to conform to CSS prefixes for alternate rendering engines, and they’re tough to memorize!
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);
Just copy and paste these properties into any CSS selector which needs a gradient background. Then you can modify the color values to anything you like, including rgba() syntax for transparency. Internet Explorer has a lot of proprietary settings for generating gradients inside the browser. But since many of these are unsupported elsewhere you may choose to remove them from production code.
5. CSS3 Transforms
This is a lesser-used property by developers because of the lack in support from older browsers. But CSS transforms have changed the way developers create user interfaces on websites. Thanks to browser transforms you can generate custom tooltips and custom shapes with just a few lines of code.
-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);
You will have to be careful about using the transform properties on too many elements. These may sometimes cause ugly bugs with Internet Explorer and some older versions of Firefox. Your designs will look best if you can tack on other properties as well, such as box shadows or rounded borders. Or alternatively offer a background image as a fallback method.
6. Custom @font-face Typography
There have been plenty of tutorials explaining how to include your own custom fonts using CSS3. The process isn’t as easy as designing text in Photoshop, but you do get some neat effects in the browser. Use this code snippet if you want to include copies of your own fonts and load a unique font-family value into your 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; }
Note that you will still need to setup the font-family property on any elements you need using this font. Also you’ll want to provide at least a .woff file which is heavily supported by all CSS3-based browsers. Ideally you should include copies of the fonts which are OTF, TTF, EOT, WOFF, and SVG.
There is a fantastic tool online named Font2Web which can actually do this conversion for you. They are limited to a select number of requests per day, but it is one of the best free solutions to generate copies of your fonts.
7. HTML Meta Tags for Responsive Layouts
Mobile responsive web designs have become extremely popular in the past few years. As such it’s common to see more code snippets thrown around and used for this purpose. To make things a bit simpler I have included just a few meta tags which you can add into your document <head> section.
<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">
The meta viewport tag is the only one which should be required for responsive layouts. This will set the view on all screens at a 1×1 aspect ratio. This will remove the default functionality from smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching. The other two tags are supported in Mobile IE and older smartphone browsers, but aren’t necessary for mobile effects in your layout.
8. HTML5 Embedded Media
The new <video> and <audio> tags are such a relief to developers who frequently work with digital media. Images have always been supported on the web, but audio and especially video files have been struggling for decent support going on a long time now. Up until recently there were very few file types which could stream video on all major Operating Systems.
<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>
Thankfully the audio and video tags share a similar syntax. We can use the preload attribute to start downloading data before the user even clicks play. I tend to veer away from this method since we don’t always know if the user is going to stream, and thus could be wasting bandwidth. But you can feel free to customize these options as they best suit your needs.
Conclusion
I am sure there are some other awesome code snippets which have not been covered in this article. I want to present this collection as a very basic starter kit for web developers to build off. These are some amazing solutions for creating killer HTML5/CSS3 websites.
Feel free to copy and share this article anywhere on the web. Additionally you may back up these code snippets to a local file or template on your computer. If there are any related codes or questions you can think of, feel free to share with us in the discussion area below.