8 Code Snippet cho một project website mới

Mỗi khi thực hiện một project mới bạn có thể sẽ phải xây dựng lại cấu trúc ban đầu vì các mục đích khác nhau, Dưới đây là 8 snippet tác giả Jake Rocheleau để xuất cho việc thực hiện một prject website mới, bạn có thể lưu trữ chúng dưới dạng các file txt hay file code ngắn gọn và có thể sử dụng nhanh chóng.
1. Cấu trúc cơ bản của HTML5

Đây là một cấu trúc rất cơ bản của html5, có doctype rõ ràng kèm theo đó là một số script bổ sung trong phần head, ngoài ra còn tham chiếu đến file style.css để style cho website.

Trong đoạn snippet này sử dụng script được lưu trữ tại google là jQuery 1.8.2 là version mới nhất và HTML5shiv hỗ trợ việc sử dụng các thành phân html5 trên trình duyệt IE.Bài viết này copy từ http://vshare.biz

<!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>

</head>

<body>

</body>
</html>

2. Clearfix cho float

Đây là một phần rất cần thiết khi thao tác với các thành phần sử dụng float. Nên chèn vào bất cứ project nào có sử dụng float trong layout, chèn thêm class clearfix vào thành phần bao bọc thành phần dùng float.

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

3. CSS Browser Reset

Mỗi trình duyệt có cách thể hiện khác nhau nên việc xử lý trước khi style cho website là khá quan trọng để các thành phần có thể hiện thị như nhau trên các trình duyệt. Margin va padding là một trong các thuộc tính bị tác động nhất, snippet dưới đây là tổng hợp chuẩn cho các thành phân như font, margin, padding. Đoạn dưới đây được tác giả bổ dung từ nguồn của Eric Meyer.

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. CSS3 Gradients

Đoạn code dưới đây tạo gradient cho hấu hết các trình duyệt hiện nay.

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);

Copy và dán vào bất kỳ selector nào cần thiết, chỉ cần thay đổi giá trị màu sắc bao gồm cả RGBA để transparent. IE hỗ trợ khá nhiều thuộc tính để tạo ra gradient bên trong trình duyệt, nhưng chúng có thể không hỗ trợ cho trình duyệt khác nên bạn có thể lược bỏ.

5. CSS3 Transforms

Đây là một thuộc tính ít được sử dụng vì các trình duyệt cũ không hỗ trợ cho nó.

-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);

6. @font-face

Đây là một vấn đề nan giải khi muốn sử dụng các font khác font hệ thống, bên cạnh đó là việc hiển thị trên các trình duyệt khác nhau. Nó không đơn giản như chọn font trong photoshop. Tham khảo code sau để áp dụng bản sao của font và chỉ cần áp dụng nó và font-family để hoạt động.

@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; }

Lưu ý rằng bạn vẫn sẽ cần phải thiết lập thuộc tính font-family vào bất kỳ selector nào bạn cần sử dụng font này. Ngoài ra, bạn cần phải cung cấp ít nhất một tập tin .woff được hỗ trợ từ các trình duyệt dựa trên css3. Lý tưởng nhất là nên tạo các bạn sao font với các định dạng OTF, TTF, EOT, WOFF, và SVG.

Có một công cụ trực tuyến tuyệt vời tên là Font2Web để chuyển đổi cho bạn. Tuy nhiên có sự giới hạn sử dụng trong ngày, tuy nhiên đây là một công cụ hữu ích cho bạn.

* Bonus: http://fontface.codeandmore.com/ – Đây là công cụ được tạo ra bởi một nhóm của Việt Nam hỗ trợ việc tạo font-face.

7. HTML Meta Tag cho responsive layout

Việc thiết kế web hỗ trợ các thiết bị di động là một xu hướng phổ biến torng thời gian qua.Để đơn giản hơn thì dưới đây là một số tag meta sử dụng trong <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">

Tag meta viewport là điều tất yếu trong responsive layouts. Nó thiết lập màn hình theo tỳ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay. Hai tag khác hỗ trợ cho trình duyệt IE Mobile và các trình duyệt di động cũ.

8. HTML5 Embedded Media

<video> và <audio> là 2 trong số các tag mới của HTML5 hỗ trợ cho phát các tập tin đa phương tiện. Hình ảnh luôn hỗ trợ trên các trình duyệt tuy nhiên video và audio sẽ gặp một chút khó khăn. Dưới đây là snippet sử dụng hỗ trợ cho 2 tag trên với hầu hết các định dạng hỗ trợ trong các trình duyệt.

<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>

Thanks Tác giả: Jake Rocheleau & Giới thiệu: vshare.biz