Các tính năng mới trong CSS3
Phần này giới thiệu cho bạn các tính năng mới có thể tìm thấy trong các đặc tả CSS cấp 3 — bao gồm các bộ chọn CSS mới ví dụ như các lớp có cấu trúc, dựa vào trạng thái, và giả phủ định; cũng như các kiểu bộ chọn mới khác. Nó cũng cho thấy nhiều hiệu ứng mà CSS3 cung cấp trước đây đã đòi hỏi các hình ảnh được tạo ra bằng cách sử dụng một ứng dụng riêng biệt và được lưu trữ dưới dạng GIF, JPG, PNG. Các hiệu ứng này bao gồm các hình bóng rơi trên văn bản và các hộp, các góc được làm tròn trên các đường viền, và sử dụng tính mờ đục để tạo ra một sự xuất hiện mờ. Nhiều tính năng trong số đó (chẳng hạn như độ mờ đục và các góc được làm tròn) là tương đối phổ biến trong sử dụng do thực tế là chúng làm giảm nhiều khả năng tùy chỉnh trong các trình duyệt Web di sản. Tiếp theo, bạn sẽ tìm hiểu về các cách bố trí nhiều cột mới mà bạn có thể tạo ra chúng khi sử dụng CSS3. Các cách bố trí này là một sự tạo mẫu cho bố cục tờ báo ở nơi văn bản sẽ trải dài trên một số các cột đã đặt hoặc theo chiều rộng cột cụ thể khi cần. Một tính năng khác sẽ được thảo luận là vấn đề bao gồm các phông chữ Web phi tiêu chuẩn nhờ sử dụng thẻ @font-face. Cuối cùng, sẽ giới thiệu một số các tính năng CSS3 mới khác, chẳng hạn như sự hỗ trợ cho HSL (Hue, Saturation và Lightness - Màu sắc, độ bão hòa, cường độ ánh sáng) và các mô hình màu RGBA (Đỏ, Xanh lá cây, Xanh da trời, và Alpha).
Các bộ chọn mới
Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử <div> bạn sẽ sử dụng bộ chọn div: div { border: 1px solid #000; }.
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, bạn sẽ sử dụng bộ chọn: .highlight { background-color: yellow; }.
Cuối cùng, để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, bạn sẽ sử dụng: #myDiv { width: 250px; }.
Tất nhiên, có thể kết hợp các bộ chọn này, do đó để chọn tất cả các phần tử <div> có làm nổi bật lớp
highlight, bạn sẽ sử dụng
div.highlight, hoặc chọn phần tử <div> có ID là myDiv bạn sẽ sử dụng
div#myDiv.
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm (và đã thực hiện kể từ các phiên bản trước) một loạt các bộ chọn phức tạp hơn. Ví dụ, bạn có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text. Hoặc bạn có thể sử dụng lớp-giả :hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.
Có nhiều bộ chọn hơn nữa, tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn, tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số lượng mã HTML và JavaScript cần phải viết.
Các bộ chọn thuộc tính
- E[foo^="bar"]
- Chọn một phần tử, E, mà thuộc tính
foo của nó bắt đầu chính xác bằng chuỗi bar - E[foo$="bar"]
- Chọn một phần tử, E, mà thuộc tính
foo của nó kết thúc chính xác bằng chuỗi bar - E[foo*="bar"]
- Chọn một phần tử, E, mà thuộc tính
foo của nó chứa chuỗi bar
Các lớp-giả có cấu trúc
- E:root
- Chọn một phần tử, E, gốc của tài liệu (thẻ <html>)
- E:nth-child(n)
- Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ của nó
- E:nth-last-child(n)
- Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ của nó
- E:nth-of-type(n)
- Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu của nó
- E:nth-last-of-type(n)
- Chọn một phần tử, E, phần tử anh chị em cuối cùng thứ n của kiểu của nó
- E:last-child
- Chọn một phần tử, E, mà phần tử của nó là phần tử con cuối cùng của phần tử cha mẹ của nó (Lưu ý rằng E:first-child đã được định nghĩa trước trong CSS2)
- E:first-of-type
- Chọn một phần tử, E, phần tử anh chị em đầu tiên của kiểu của nó
- E:last-of-type
- Chọn một phần tử, E, phần tử anh chị em cuối cùng của kiểu của nó
- E:only-child
- Chọn một phần tử, E, phần tử con duy nhất của phần tử cha mẹ của nó
- E:only-of-type
- Chọn một phần tử, E, phần tử anh chị em duy nhất của kiểu của nó
- E:empty
- Chọn một phần tử, E, không có phần tử con nào (bao gồm cả các nút văn bản)
Lớp-giả target
- E:target
- Chọn một phần tử, E, là đích của URI đang biểu thị
Phần tử UI nói đến các lớp-giả
- E:enabled
- Chọn một phần tử giao diện người dùng, E, được kích hoạt
- E:disabled
- Chọn một phần tử giao diện người dùng, E, bị vô hiệu hóa
- E:checked
- Chọn một phần tử giao diện người dùng, E (một nút radio hay hộp kiểm tra), được đánh dấu chọn hoặc được chọn
Các lớp-giả Negation
- E:not(s)
- Chọn một phần tử, E, không khớp với bộ chọn đơn giản s
Bộ kết hợp anh chị em chung
- E ~ F
- Chọn một phần tử, F, có một phần tử E đứng trước
Sự hỗ trợ của trình duyệt cho các bộ chọn thuộc tính mới và bộ kết hợp anh chị em chung là tuyệt vời, do chúng làm việc trên hầu như tất cả các trình duyệt Web hiện đại. Sự hỗ trợ cho các lớp-giả mới có trong các phiên bản mới nhất của hầu hết các trình duyệt, nhưng bạn có thể cần có cả các bản thay thế cho các trình duyệt cũ hơn như Internet Explorer 6/7 và Firefox 3.0.
Các hiệu ứng mới
Mặc dù các bộ chọn mới có lẽ là những tính năng làm giảm đau đầu cho các nhà phát triển nhiều nhất, những cải tiến mà mọi người muốn nhìn thấy là các hiệu ứng mới sáng chói có sẵn. Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới, bao gồm:
- nền (bây giờ mới hỗ trợ nhiều nền)
- mẫu-nền
- gốc-nền
- kích thước-nền
- bán kính-đường viền (các góc được làm tròn)
- hình ảnh-đường viền
- màu sắc-đường viền (các đườmg viền gradient)
- hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)
- kích thước-hộp
- độ mờ
- khoảng trống-đường bao
- chỉnh lại kích thước
- tràn-văn bản
- hình bóng-văn bản
- bọc-từ
Trang Web HTML5/CSS3 mẫu mà bạn sẽ tạo ở cuối của hướng dẫn này sẽ hiển thị một số những hiệu ứng mới đang hoạt động.
Các bố trí nhiều cột
Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng trên một số cột, giống như bạn có thể thấy trong một tờ báo. Điều này có thể được thực hiện theo hai cách, hoặc sử dụng đặc tính độ rộng cột, ở đó bạn định nghĩa mỗi cột sẽ rộng bao nhiêu (số lượng các cột được xác định bởi các vùng có sẵn cho thùng chứa), hoặc bằng cách sử dụng đếm-cột, ở đó bạn định nghĩa số lượng các cột cần được sử dụng. Sau đó độ rộng sẽ thay đổi dựa vào vùng có sẵn cho mỗi cột.
Các tính năng khác về các cách bố trí nhiều cột bao gồm đặc tính khoảng hở-cột, cho phép nhà phát triển định nghĩa khoảng không gian cần có giữa các cột khi sử dụng phương thức độ rộng-cột. Một sự bổ sung có ích khác là đặc tính quy tắc-cột, cho phép một quy tắc định kiểu-đường viền được đặt giữa các cột. Cuối cùng có đặc tính là phân phối-không gian-cột, xác định cách để lại khoảng trống cần được phân bổ giữa các cột.
Các cách bố trí các cột hiện được các trình duyệt Mozilla và WebKit hỗ trợ. Hiện nay, các cách bố trí này được thực hiện bằng các đặc tính độc quyền tạm thời được bắt đầu bằng - moz hay -Webkit, tương ứng. Khi đặc tả này đã được hoàn tất, các trình duyệt này cuối cùng sẽ chuyển sang các đặc tính tiêu chuẩn CSS.
Các phông chữ Web
Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5. Thật không may, việc này đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó. Kết quả là, các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào CSS2.
Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, bây giờ bạn có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình. Một ví dụ về quy tắc quy tắc @font-face như sau: @font-face { font-family: Alexa; src: url('Alexa.otf'); }.
Bây giờ bạn có thể sử dụng phông chữ này theo các quy tắc CSS riêng của bạn, chẳng hạn như: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.
Hãy nhớ rằng các phông chữ giống như các hình ảnh — nếu chúng không phải là của riêng bạn thì bạn có thể cần giấy phép để sử dụng chúng trên Web. Ngoài ra, bạn có thể trả tiền (hoặc tải về miễn phí) cho một số phông chữ trả phí một lần để có thể đưa các phông này vào các trang Web của bạn khi bạn thích.
Các tính năng mới khác
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha). Các truy vấn phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các thiết bị khác nhau dựa vào kích thước khung nhìn của chúng. Ví dụ, bạn có thể cung cấp kiểu dáng cụ thể cho các thiết bị có khung nhìn thấp hơn 500 điểm ảnh (chẳng hạn như điện thoại thông minh, PDA hoặc các thiết bị di động khác). Mô đun tiếng nói của CSS3 cho phép bạn điều khiển các đặc tính tiếng nói cho một trình đọc màn hình, bao gồm cả âm lượng, sự cân bằng, tốc độ, nén, và nhiều hơn nữa.
Kết hợp tất cả lại với nhau: Trang HTML5/CSS3 mẫu
Ở giai đoạn này, chắc bạn muốn nhúng tay vào và bắt đầu tạo các trang sử dụng các tính năng mới quan trọng mà HTML5 và CSS3 cần cung cấp. Trong phần này, bạn sẽ tạo một trang HTML có chứa nhiều tính năng mới này. Phần này của hướng dẫn sẽ chia sự phát triển của trang thành các phần con như sau:
- Cấu trúc trang HTML5 cơ bản
- Sử dụng các phần tử ngữ nghĩa mới
- Giới thiệu phần tử <video>
- Cải tiến biểu mẫu Web
- Phần tử <canvas> và API vẽ 2D
Toàn bộ mã nguồn sẽ được xây dựng trong một tệp HTML duy nhất, có tên là index.html. Bạn có thể mở tệp này từ bất kỳ vị trí nào trên máy tính của bạn; không cần triển khai tệp này lên một máy chủ Web để tải về. Một số trình duyệt có thể cung cấp cho bạn các cảnh báo về việc chạy kịch bản lệnh cục bộ, vì vậy hãy chắc chắn theo dõi các tính năng tạo kịch bản động nếu được yêu cầu.
Trong lúc thực hiện, hãy bổ sung thêm các quy tắc CSS cho trang này vào một tệp bảng định kiểu bên ngoài, có tên là styles.css. Bạn sẽ thấy một số ví dụ về các đặc tính CSS3 mới như là bán kính-đường viền,hình bóng-văn bản, hình bóng-hộp trong trang mẫu này.
Dù sao, thế cũng đủ cho công việc này rồi, vậy chúng ta hãy bắt đầu với một số HTML5!
Cấu trúc trang HTML5 cơ bản
Như bạn đã biết rõ, các trình duyệt Web có thể hoạt động trong các chế độ khác nhau tùy thuộc vào việc có sẵn một doctype (kiểu văn bản hợp lệ) trong một tài liệu HTML không. Nếu không tìm thấy doctype hợp lệ nào, trình duyệt sẽ hoạt động trong chế độ quirks, trong đó một số tính năng phi tiêu chuẩn được duy trì để tương thích ngược. Nếu tìm thấy có doctype hợp lệ, trình duyệt sẽ hoạt động trong chế độ các chuẩn, theo các chuẩn W3C và IETF.
Kiểu văn bản cho HTML5 là rất đơn giản: <!doctype html>.
Bạn nên đặt dòng này ở đầu mỗi trang HTML5 mà bạn tạo. Chúng ta hãy tiếp tục và định nghĩa các phác thảo cơ bản cho trang index.html. Có thể tìm thấy đoạn mã này trong Liệt kê 1.
Liệt kê 1. Cấu trúc tài liệu HTML5 cơ bản
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
|
Bạn có thể nhận thấy rằng không giống như các hương vị XHTML gần đây của HTML, thẻ <html> đang mở không còn đòi hỏi các thuộc tính xmlns hoặc xml:lang nữa, và chỉ riêng thuộc tính lang cũng đủ. Tương tự như vậy, phần tử <meta> mô tả một tập ký tự thuộc tính tốc ký mới để định nghĩa mã hóa ký tự của trang. Thật đáng giá để nói rằng những thay đổi này chỉ làm dễ dàng hơn và làm giảm số lượng mã cần thiết để thực hiện các nhiệm vụ đơn giản. Các phương thức cũ vẫn hoàn toàn hợp lệ.
Bạn cũng có thể tự hỏi tại sao phần tử <link> không mô tả thuộc tính type (kiểu). CSS chỉ được hỗ trợ kiểu bảng định kiểu hiện nay, và tất cả các trình duyệt hiện đại sẽ thừa nhận kiểu text/css nếu không có kiểu nào được cung cấp, vì vậy kiểu không phải là bắt buộc. Vậy, hoàn toàn có thể cung cấp thuộc tính type nếu bạn muốn như vậy.
Điểm cuối cùng đáng chú ý trong Liệt kê 1 là phần tử <script>, nó tải tệp JavaScript html5.js được lưu trữ trên máy chủ ngoài. Khi các trình duyệt Microsoft Internet Explorer (phiên bản 8) không hỗ trợ các phần tử HTML5 mới, trình duyệt này không nhận ra các phần tử như <article>, <section>, <header>, và v.v. Nó không chỉ không nhận ra những phần tử này, mà còn ngăn cản chúng được định kiểu. Nỗ lực thành công để tránh các vấn đề này là sử dụng hàm JavaScript document.createElement() để tạo các phần tử giả cho mỗi thẻ. Kịch bản lệnh này sẽ thực hiện việc này cho tất cả các phần tử HTML5 mới do đó bạn không phải lo lắng về nó. Tôi khuyên bạn nên bao gồm cả kịch bản lệnh này trong tất cả các công việc HTML5 của bạn.
Tiếp theo, bạn sẽ thêm một số các phần tử ngữ nghĩa mới vào trang này để tạo cấu trúc hình ảnh của trang. Bạn cũng sẽ tạo ra một số quy tắc của bảng định kiểu để làm cho trang này trông dễ coi hơn.
Sử dụng các phần tử ngữ nghĩa mới
Để minh họa cách các phần tử ngữ nghĩa HTML5 mới nên được sử dụng như thế nào, bây giờ bạn sẽ thêm những các phần tử ngữ nghĩa này vào tệp index.html. Cấu trúc cơ bản của các phần tử này sẽ tuân thủ nét phác thảo sau đây:
- header (tiêu đề)
- nav (chuyển hướng)
- article (bài viết)
- header (tiêu đề)
- section (phần)
- footer (chân trang)
Như bạn thấy, trang này sẽ tự mở ra với một header (tiêu đề), theo sau bởi một nav (chuyển hướng), sau đó một article bài viết), và cuối cùng là một footer (chân trang). header sẽ có nhiều nhóm tiêu đề sử dụng phần tử hgroup. article sẽ có một tiêu đề cũng như một phần tử section cũng có tiêu đề riêng của nó. Mã cho cấu trúc này được thể hiện trong Liệt kê 2, và nên được thêm vào giữa thẻ <body> mở và đóng của Liệt kê 1.
Liệt kê 2. Khi sử dụng các phần tử ngữ nghĩa HTML5
<header>
<hgroup>
<h1>Company Name</h1>
<h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<header>
<time datetime="2010-01-12" pubdate>
<span>Jan</span> 12
</time>
<h1>
<a href="#" title="Link to this post"
rel="bookmark">Article Heading</a>
</h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several sections, each
with its own heading, as well as a video element which will play a video without
Flash on browsers that support it.</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or page.
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>
<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>
|
Đoạn mã trong Liệt kê 2 tương đối rõ ràng. Phần tử <header> > chính bao gồm một phần tử <hgroup> có hai nhóm tiêu đề: một phần tử tiêu đề <h1> và một phần tử phụ đề <h2>. Phần tử <nav> chính là một danh sách không theo thứ tự có ba mục, mỗi một mục liên kết đến một trang hư cấu trên trang Web đó. Phần tử <article> chứa <header> riêng của mình, có một phần tử <time> chỉ ngày công bố bài viết. Bạn sẽ thấy rằng phần tử này có chứa một thuộc tính datetime (ngày giờ), để chỉ rõ một biểu mẫu chuẩn hóa của ngày đăng bài để các máy tính có thể đọc nó dễ dàng. Nội dung của phần tử time (thời gian) là "Jan 12" (12 tháng Giêng) để mọi người thấy dễ đọc hơn. Thuộc tính pubdate cho biết rằng đây là ngày công bố bài viết theo yêu cầu.
Bên dưới tiêu đề là một đoạn HTML bình thường, và theo sau nó là một phần tử <section> mới, có chứa một <header> có tiêu đề và một đoạn của phần này. Bạn sẽ tạo ra nhiều phần hơn nữa với các vùng bổ sung của trang được tạo trong các phần còn lại của hướng dẫn này.
Nếu bạn mở trang này trong trình duyệt của bạn, nó sẽ trông không đẹp lắm, vì nó vẫn còn chưa được định kiểu với CSS. Hãy thêm một số kiểu dáng để làm cho các trang trông đẹp hơn một chút. Hãy thêm đoạn mã của Liệt kê 3 vào tệp styles.css.
Liệt kê 3. Các kiểu dáng CSS cho các phần tử HTML5 ngữ nghĩa mới
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 480px; margin: 0px auto;
}
header h1 {
font-size: 36px; margin: 0px;
}
header h2 {
font-size: 18px; margin: 0px; color: #888;
font-style: italic;
}
nav ul {
list-style: none; padding: 0px; display: block;
clear: right; background-color: #666;
padding-left: 4px; height: 24px;
}
nav ul li {
display: inline; padding: 0px 20px 5px 10px;
height: 24px; border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3; text-decoration: none;
font-size: 13px; font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #993333;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px; float: left;
margin-left: 14px; text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center; font-size: 12px;
color: #888; margin-top: 24px;
}
|
Hầu hết các quy tắc CSS này đều chứa các đặc tính đã có sẵn trong CSS vào lúc này, nhưng bạn có thể nhận thấy rằng quy tắc article > header time chứa các thuộc tính bán kính-đường viền (bao gồm các đặc tính riêng biệt của trình duyệt cho các trình duyệt dựa trên Mozilla và WebKit). Quy tắc này thêm góc được làm tròn cho hộp ngày/giờ trên các trình duyệt được hỗ trợ, chẳng hạn như Firefox, Safari, và Chrome.
Bạn cũng sẽ nhận thấy việc sử dụng đặc tính hình bóng-văn bản theo quy tắc article > header h1. Hầu hết các trình duyệt hiện đại đều hỗ trợ đặc tính này.
Những điều thú vị về cả hai đặc tính của CSS3 được giới thiệu trong phần này là chúng làm giảm khả năng tùy chỉnh. Nói cách khác, nếu trình duyệt Web của khách truy cập không hỗ trợ những đặc tính mới này, thì đơn giản là chúng sẽ bị bỏ qua và các phần tử sẽ được định kiểu theo các đặc tính được hỗ trợ khác bất kỳ. Trang này bao gồm các nội dung hiện có của nó sẽ trông giống như ảnh chụp màn hình trong Hình 2 (ít nhất đây là cách nhìn thấy nó trong Safari 4 trên Mac OS X).
Hình 2. Các phần tử ngữ nghĩa HTML5 đang hoạt động
Tiếp theo, bạn sẽ được giới thiệu về phần tử <video> và cách sử dụng nó để chứa một tệp video Theora trong trang HTML5 của bạn.
Giới thiệu phần tử <video>
Bây giờ bạn sẽ thêm một video vào trang index.html cùng với một tập các nút điều khiển phát lại được cung cấp theo trình duyệt. Xin lưu ý rằng video có trong ví dụ mẫu này là một đoạn video Theora, chỉ có thể được phát trên trình duyệt Firefox và Google Chrome. Safari hiện tại chỉ hỗ trợ các video được mã hóa H.264. Thêm đoạn mã của Liệt kê 4 vào bên dưới thẻ </section> đóng cuối cùng của Liệt kê 2, nhưng ở bên trên thẻ </article> đóng.
Liệt kê 4. Thêm một video vào trang
<section>
<header>
<h1>This is a video section</h1>
</header>
<p>
<video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
<div class="no-html5-video">
<p>This video will work in Mozilla Firefox or Google
Chrome only.</p>
</div>
</video>
</p>
</section>
|
Như bạn thấy, trước tiên bạn tạo một phần mới mà ở đó video sẽ được hiển thị trên trang này. Phần mới này có một tiêu đề tiếp theo là chính đoạn video đó. Đoạn video mà tôi đang sử dụng ở đây là một đoạn phim quảng cáo cho bộ phim Transformers đầu tiên và được tải từ một trang Web ngoài bằng cách sử dụng thuộc tính src. Thuộc tính controls ra lệnh cho trình duyệt hiển thị các nút điều khiển chuẩn của trình duyệt để phát lại video. Và thuộc tính autoplay, cũng ra lệnh cho trình duyệt bắt đầu phát đoạn video tự động.
Giữa các thẻ <video> mở và đóng tôi đã tạo ra một phần tử <div> có lớp no-html5-video, để hiển thị một thông báo tới những người dùng đang cố gắng xem video trong một trình duyệt không hỗ trợ phần tử <video> hoặc không hỗ trợ codec video của Theora.
Trước khi bạn tiếp tục và bắt đầu trang này trong trình duyệt của mình, hãy thêm một số quy tắc mới vào trang styles.css. Chỉ cần thêm các quy tắc từ Liệt kê 5 vào dưới cùng của tệp này.
Liệt kê 5. Các quy tắc CSS cho phần video
article > section video {
width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
width: 480px; height: 40px; border: 1px solid #993333;
text-align: center; color: #993333; font-size: 13px;
font-style: italic; background-color: #F7E9E9;
}
|
Các quy tắc này chỉ đơn giản định nghĩa kích thước của các phần tử thùng chứa video, cũng như thông báo lỗi cho những khách truy cập đang sử dụng các trình duyệt không hỗ trợ video HTML5 hoặc định dạng Theora. Nếu bạn mở trang Web trong Firefox hoặc Chrome, bạn sẽ thấy một video trông như sau (xem Hình 3).
Hình 3. Video HTML5 đang hoạt động
Đẹp thật? Bây giờ hãy thử mở nó trong một trình duyệt như Internet Explorer hay Opera. Bạn sẽ thấy một lỗi như thông báo được hiển thị dưới đây trong Hình 4. Lưu ý rằng nếu bạn cố gắng xem nó trong Safari thì trình duyệt này chỉ có thể hiển thị máy phát video của mình, chứ không phát đoạn video đó.
Hình 4. Lỗi không hỗ trợ video HTML5
Tiếp theo, bạn sẽ tạo một biểu mẫu có một số tính năng biểu mẫu Web mới như văn bản giữ chỗ, trọng tâm tự động, và các kiểu đầu vào mới chẳng hạn như phạm vi, datetime, và email.
Cải tiến biểu mẫu Web
Một trong những khía cạnh của HTML5 bị coi nhẹ hơn là việc đưa vào một số nút điều khiển dựa theo biểu mẫu mới để giúp các nhà phát triển thực hiện dễ dàng hơn nhiều khi tạo các ứng dụng Web dựa vào biểu mẫu. Hiện nay, sự hỗ trợ cho các nút điều khiển mới về mặt các widget và chức năng của trình duyệt còn khá mỏng, nhưng chúng làm giảm khả năng tùy chỉnh như các hộp văn bản thông thường nên bây giờ bạn có thể an toàn sử dụng chúng trong mã của bạn, và khi sự hỗ trợ cho trình duyệt được cải thiện, các tính năng này sẽ bật lên tự động.
Thêm mã từ Liệt kê 6 trực tiếp bên dưới thẻ </section> đóng cho phần video mà bạn đã tạo trong Liệt kê 4.
Liệt kê 6. Thêm một biểu mẫu Web
<section>
<header>
<h1>This is a feedback form</h1>
</header>
<p><form>
<label for="contact_name">Name:</label>
<input id="contact_name" placeholder="Enter your name"
autofocus><br />
<label for="contact_email">E-mail:</label>
<input type="email" id="contact_email" placeholder="Enter
your email address"><br />
<label for="contact_phone">Phone:</label>
<input type="tel" id="contact_phone" placeholder="Enter your
phone number"><br />
<label for="contact_callback">Callback on:</label>
<input type="datetime" id="contact_callback"><br />
<label for="contact_priority">Priority:</label>
<input type="range" min="1" max="5" value="1"
id="contact_priority"><br /><br />
<input type="submit" value="Request Call">
</form></p>
</section>
|
Phần tử biểu mẫu đầu tiên trong Liệt kê 6 không có bất kỳ thuộc tính type nào, và kết quả là nó sẽ đặt mặc định với một nút điều khiển văn bản. Bạn sẽ nhận thấy rằng biểu mẫu này có văn bản giữ chỗ "Hãy nhập tên của bạn" và được thiết lập trọng tâm tự động. Việc hỗ trợ các trình duyệt sẽ tự động chuyển trọng tâm vào phần tử này khi trang đã được biểu thị.
Phần tử tiếp theo là kiểu "email" và lại chứa một giá trị văn bản giữ chỗ. Trình duyệt duy nhất nhận ra kiểu phần tử đầu vào này là đặc trưng riêng là Opera, trong trường này phần tử này hiển thị một biểu tượng thư để nói rằng nó là một trường email.
Trường quan tâm tiếp theo là trường datetime với nhãn "Callback on:". Về hỗ trợ cho các trình duyệt, trường này sẽ hiển thị một nút chọn ngày và thời gian. Trong Opera, trường này hiển thị làm hai nút điều khiển, một hộp văn bản có một nút chọn ngày (datepicker) và một nút quay tròn cho thời gian.
Cuối cùng, bạn sẽ thấy một nút điều khiển của kiểu range (phạm vi), có giá trị thiết lập là min (tối thiểu), max (tối đa), và các thuộc tính giá trị. Safari, Chrome, và Opera biểu thị nút điều khiển này dưới dạng một thanh trượt, có giá trị tối thiểu là 1, được chọn theo mặc định, và giá trị tối đa là 5. Các trình duyệt không được hỗ trợ chỉ đơn giản hiển thị nút điều khiển này là một hộp văn bản có giá trị văn bản đặt tới 1.
Tiếp theo, chúng ta hãy thêm một số tính năng độc đáo và hấp dẫn vào để làm thay đổi một biểu mẫu khá buồn tẻ và nhàm chán. Hãy thêm các quy tắc sau đây (xem Liệt kê 7) vào tệp styles.css của bạn.
Liệt kê 7. Các quy tắc CSS của biểu mẫu Web
article > section form {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
padding: 10px; margin-bottom: 30px;
}
article > section label {
font-weight: bold; font-size: 13px;
}
article > section input {
margin-bottom: 3px; font-size: 13px;
}
|
Khi xem xét Liệt kê 7 chi tiết hơn, bạn sẽ thấy rằng bán kính đường viền đã được thêm vào thùng chứa biểu mẫu để làm tròn các góc hộp. Ngoài ra, một hình bóng hộp đã được thêm vào phần tử này cùng với một màu nền màu xám nhạt và một số vật đệm.
Trước tiên, hãy xem xét biểu mẫu này khi nó xuất hiện trong Opera, trình duyệt này có sự hỗ trợ nhiều nhất cho các kiểu đầu vào của biểu mẫu Web HTML5 mới (xem Hình 5).
Hình 5. Các cải tiến biểu mẫu Web trong Opera
Bạn có thể thấy biểu tượng thư bên cạnh trường email, và các nút điều khiển mới cho trường datetime. Việc nhấn vào trường thả xuống của nút quay tròn sẽ mở ra tiện ích (widget) lịch của Opera, như hiện thị trong Hình 6 bên dưới.
Hình 6. Widget lịch của Opera
Bạn cũng có thể thấy một nút điều khiển thanh trượt không hấp dẫn lắm như Opera đã đưa ra. Tuy nhiên, thật thất vọng, Opera không hỗ trợ các đặc tính bán kính đường viền hoặc hình bóng hộp, và kết quả là, cả hai hiệu ứng này đều đã không được đưa vào biểu mẫu này. Bây giờ chúng ta hãy mở nó trong Safari để xem các hiệu ứng CSS3 này trông thế nào (xem Hình 7).
Hình 7. Các cải tiến biểu mẫu Web trong trình duyệt Safari
Safari dựa trên WebKit đã biểu thị một cách chính xác hiệu ứng các góc tròn và hình bóng hộp, và nó có một hiệu ứng hình ảnh đẹp nhưng đơn giản. Các hiệu ứng tương tự cũng sẽ làm việc trong Mozilla Firefox và Google Chrome. Bạn có thể nhận thấy rằng Safari hỗ trợ tính năng văn bản giữ chỗ và cũng triển khai một thanh trượt (phải nói là sự thay thế đẹp hơn hẳn của Opera) hiện có của kiểu đầu vào phạm vi. Trong phần cuối cùng của hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng phần tử <canvas> và API vẽ 2D để tạo một hình ảnh bitmap mặt cười đơn giản.
Phần tử <canvas> và API vẽ 2D
Để bắt đầu với phần tử <canvas>, trước tiên bạn cần phải thêm chính phần tử này vào trang đó. Trực tiếp bên dưới đoạn mã mà bạn đã thêm vào tệp index.html cho biểu mẫu Web trong phần trước, hãy thêm đoạn mã từ Liệt kê 8 Liệt kê 8.
Ví dụ 8. Thêm phần tử <canvas> vào trang này
<section>
<header>
<h1>This is an 2D Canvas section</h1>
</header>
<p>
<canvas id="my_canvas" width="480" height="320"></canvas>
<div id="no-canvas">
<p>You need a Canvas-compatible browser to view this area.</p>
</div>
</p>
</section>
|
Đoạn mã này là tương đối đơn giản. Bạn chỉ cần khai báo phần tử canvas, cho nó một chiều rộng, chiều cao, và một thuộc tính duy nhất ID. Các trình duyệt Mozilla và WebKit có ý kiến khác nhau về việc liệu thẻ <canvas> cần có một thẻ đóng riêng biệt không, nhưng cả hai sẽ được đưa ra cùng một cách, miễn là bạn không đặt bất kỳ đoạn mã nào giữa thẻ mở và đóng. Bạn sẽ sử dụng mã JavaScript để hiển thị các thông báo lỗi no-canvas (không có canvas nào) cho những người dùng các phần tử đó, những người đang sử dụng một trình duyệt không được hỗ trợ vào lúc này.
Tiếp theo, bạn cần phải thêm mã JavaScript để khai thác các API vẽ 2D để tạo các hình ảnh trên khung nền ảnh (canvas). Trong tệp index.html, ngay trước thẻ </head> đóng gần đầu của tệp, hãy thêm đoạn mã sau (xem Liệt kê 9):
Liệt kê 9. Tạo kịch bản lệnh phần tử canvas
<script>
function loadCanvas() {
var canvas = document.getElementById('my_canvas');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(245,160,150,0,Math.PI*2,true);
ctx.fillStyle = "rgb(255,255,204)";
ctx.fill();
ctx.stroke();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(200,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(280,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(240,170,20,4,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(240,190,60,0,Math.PI,false);
ctx.stroke();
} else {
document.getElementById('my_canvas').style.display = 'none';
document.getElementById('no-canvas').style.display = 'block';
}
}
</script>
|
Liệt kê 9 thêm một khối mã JavaScript vào phần tử đầu trang này, khi định nghĩa một hàm có tên loadCanvas. Hàm này khởi tạo một biến có tên là canvas bằng cách chọn phần tử này có ID duy nhất là my_canvas. Sau đó nó sử dụng một câu lệnh if (nếu) để xác định xem nó có thể nhận được một ngữ cảnh khung nền ảnh từ phần tử này không. Nếu có thể, thì phần tử <canvas> được trình duyệt hỗ trợ; nếu không, thì không có sự hỗ trợ nào cho trình duyệt và khung nền ảnh sẽ được ẩn đi và được thay thế bằng thông báo lỗi. Việc này được nhắc đến trong khối mã khác của câu lệnh if, về phía cuối của hàm này.
Nếu phát hiện thấy có hỗ trợ canvas, hàm này nhận được một bối cảnh 2D có tên là ctx, thì ngữ cảnh 2D này được dùng để vẽ các hình trên khung nền ảnh. Trong hàm này, có 5 hình được tạo ra. Đầu tiên, gọi hàmctx.beginPath() để bắt đầu vẽ đường thẳng. Tiếp theo dùng hàm ctx.arc() để vẽ một cung tròn đầy đủ, có bán kính 150 pixels (điểm ảnh), gần trung tâm của khung nền ảnh. Kiểu dáng phủ đầy được thiết lập có màu vàng, trước khi gọi các hàm ctx.fill() và ctx.stroke(), khi tạo một vòng tròn lớn màu vàng có một đường bao màu đen. Đây là khuôn mặt chính.
Kiểu dáng phủ đầy được thiết lập với màu đen cho các hình tiếp theo được vẽ là đôi mắt. Lúc này vòng tròn khép kín được tạo bằng hàm ctx.arc() có bán kính chỉ khoảng 15 pixels, và gọi hàm ctx.fill() để vẽ chúng.
Khối mã tiếp theo tạo mũi, đó là một cung tròn không phải là một vòng tròn khép kín và được đặt ở dưới và giữa hai mắt mà chúng ta vừa tạo. Mũi không cần được phủ đầy, do đó, sử dụng hàm ctx.stroke() để thay thế.
Cuối cùng, một cung nửa vòng tròn lớn được vẽ nhẹ nhàng bên dưới mũi để tạo cái miệng. Kết quả sẽ trông giống nhau trong tất cả các trình duyệt có hỗ trợ phần tử <canvas> (hầu hết các trình duyệt hiện đại bao gồm cả Firefox, Safari, Chrome, và Opera — ngay cả Internet Explorer — có thể hỗ trợ cách vẽ này với sự giúp đỡ của một số thư viện JavaScript thông minh).
Thay đổi cuối cùng mà bạn cần thực hiện đối với tệp index.html là thay đổi phần tử <body> để gọi hàmloadCanvas() khi cửa sổ đã nạp xong. Đơn giản chỉ cần thay thế thẻ <body> mở bằng dòng sau: <body onload="loadCanvas();">.
Cuối cùng, chỉ cần thêm các quy tắc sau đây vào tệp styles.css để thêm một số hình bóng hộp đẹp mắt vào thùng chứa khung nền ảnh (xem Liệt kê 10).
Liệt kê 10. Các quy tắc CSS Canvas
article > section div#no-canvas {
display: none;
}
canvas {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
}
|
Kết quả cuối cùng trông giống như ảnh trong Hình 8.
Hình 8. Khung nền ảnh mặt cười
Hình đó đã kết thúc trang mẫu cho hướng dẫn này. Trong phần này, bạn đã sử dụng HTML5 và CSS3 để làm việc với các phần tử ngữ nghĩa HTML5 mới, đã khai thác một số hiệu ứng mới đẹp mắt của CSS3, xem đoạn video trong trình duyệt không có bất kỳ trình cắm thêm flash nào, đã thấy một số widget biểu mẫu mới, và đã tạo một ảnh đồ họa khuôn mặt cười trên một khung nền ảnh bằng cách sử dụng các JavaScript API.
Tóm tắt
Hướng dẫn này dùng như một giới thiệu thực hành về phát triển HTML5 và CSS3. HTML5 có rất nhiều ở giai đoạn đầu phát triển, và thật là thú vị để xem các tính năng mới do nó đề xuất được các nhà cung cấp trình duyệt khác nhau chấp nhận như thế nào. Hiện nay, vì các trình duyệt chủ yếu, Opera, Safari, Firefox và Chrome đang cung cấp sự hỗ trợ để cải tiến hơn nữa với mỗi bản phát hành, và người ta hy vọng sẽ thấy một lượng lớn các tính năng HTML5 được hỗ trợ vào cuối năm 2010.
Tuy nhiên, một số vấn đề có thể ngăn chặn HTML5 trở nên phổ biến rộng rãi trong tương lai gần. Vấn đề thực sự đầu tiên là thiếu sự hỗ trợ từ Microsoft Internet Explorer, trình duyệt Web được sử dụng rộng rãi nhất trên thị trường. Không chắc các nhà phát triển sẽ có thể thử nghiệm các tính năng HTML5 bất kỳ trên IE cho đến khi phiên bản beta đầu tiên của IE9 được phát hành. Ít nhất vào lúc này, các trang Web phát triển cho HTML5 làm giảm hoàn toàn khả năng tùy chỉnh trên IE8, và với một chút công việc phụ, các thay thế có thể được đưa ra để cung cấp các giải pháp cho người sử dụng IE.
Một vấn đề chính khác là vấn đề xung quanh các codec video và các thùng chứa. Cứ tình hình thế này, thì các phần tử <video> sẽ không thay thế cho Flash video làm chuẩn video cho Web. Với các trình duyệt khác nhau đang ủng hộ các codec khác nhau, nên để sử dụng Flash vẫn còn dễ dàng hơn nhiều so với mã hóa video của bạn với Theora và H.264. Ở đây hy vọng rằng có một số cách đột phá được thực hiện trong năm nay về video HTML5. Tóm lại, HTML5 và CSS3 là các chuẩn thú vị, và bạn có thể bắt đầu nâng cấp dễ dàng các trang Web của mình cho phù hợp với các đặc tả mới này ngay từ bây giờ. Sau các bước được vạch ra trong hướng dẫn này, bạn cần thành thạo hơn để tiến lên phía trước và khám phá một số tính năng thú vị khác mà HTML5 cần cung cấp.