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
foocủa nó bắt đầu chính xác bằng chuỗibar - E[foo$="bar"]
- Chọn một phần tử, E, mà thuộc tính
foocủa nó kết thúc chính xác bằng chuỗibar - E[foo*="bar"]
- Chọn một phần tử, E, mà thuộc tính
foocủa nó chứa chuỗibar
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 đề)
- hgroup
- nav (chuyển hướng)
- article (bài viết)
- header (tiêu đề)
- section (phần)
- header (tiêu đề)
- 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àm
ctx.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àm
loadCanvas() 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.
Tải về
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.
Tải về
| Mô tả | Tên | Kích thước | Phương thức tải |
|---|---|---|---|
| HTML5 examples | html5.examples.zip | 3KB | HTTP |
0 comments:
Post a Comment