Posts Tagged CSS3
Tìm hiểu về HTML5 – Phần III
CSS3 có gì hay?
Nếu ví HTML là gạch để xây nhà thì CSS là lớp sơn bóng bẩy! Thật vậy, cũng như nhà đẹp cần phải biết trang trí, một trang HTML mà không có CSS rất dễ trở nên đơn điệu và nhàm chán. HTML và CSS đã là một cặp đôi ăn ý từ những phiên bản trước đây, nhưng nay với HTML5, CSS cũng được nâng cấp lên một phiên bản mới: CSS3 với nhiều cải tiến đáng kể.
Sử dụng CSS là một đề tài lớn đã được nhiều cuốn sách đề cập đến. Trong phạm vi giới hạn, bài viết này không trình bày lại những khái niệm căn bản về CSS mà chỉ lướt qua những nét mới nổi bật trong CSS3.
1. Định dạng font:
Một trong những thao tác phổ biến nhất với CSS là định dạng font chữ. CSS cung cấp thuộc tính font-family để xác định kiểu font hiển thị:
font-family: Times New Roman
Thật không may là việc lựa chọn font chữ gặp rất nhiều hạn chế do bị phụ thuộc vào số font được cài đặt trên máy người dùng. Điều này có nghĩa là chúng ta phải hạn chế sử dụng các loại font “hiếm” vì nhiều khả năng chúng sẽ không hiển thị đúng trên các máy tính không có font đó. Tuy nhiên, ngay cả các font phổ biến đôi khi cũng gặp rắc rối, vì chúng có những tên khác nhau trên khác hệ điều hành khác nhau. Chẳng hạn như font Arial còn được gọi là Helvetica hay Sans Serif. Kết quả là chúng ta thường thấy các khai báo kiểu như sau:
font-family: Arial, Helvetica, sans serif
Cách viết này sẽ đảm bảo rằng font được hiển thị đúng: hệ thống chỉ việc lựa chọn loại font phù hợp nhất. Nhưng còn có một cách giải quyết tốt hơn: nhúng trực tiếp kiểu font vào file CSS. Với CSS3, việc này trở nên rất đơn giản, đoạn code sau minh họa cách nhúng một font TrueType vào CSS:
@font-face{
font-family: ‘<tên font>’;
src: url(‘<đường dẫn tới file font>’) format(‘truetype’);
}
2. Tạo hiệu ứng đổ bóng cho text:
CSS3 cho phép tạo hiệu ứng đổ bóng một cách dễ dàng. Hãy xem qua một ví dụ đơn giản:
.shadowedText {
font-family: Arial, Helvetica, sans serif;
font-size: medium;
color: #FF0000;
text-shadow: 0.25em 0.25em 2px #999;
}
Thuộc tính text-shadow trong khai báo trên cho phép kiểm soát hiệu ứng đổ bóng. Thuộc tính này có bốn tham số, trong đó hai tham số đầu tiên là bắt buộc:
- horizontal-offset: tọa độ X tương đối của bóng (so với text)
- vertical-offset: tọa độ Y tương đối của bóng (so với text)
- blur-radius: bán kính mờ của bóng. Tắt hiệu ứng mờ bằng cách truyền giá trị 0
- shadow-color: màu sắc của bóng
3. Chia nội dung thành nhiều cột:
Chia cột là một công việc khó khăn. Trước đây, các lập trình viên thường sử dụng bảng hoặc các tag <div> phức tạp để đạt được mục tiêu này. Nhưng nay thì CSS3 cũng đã hỗ trợ sẵn. Sau đây là cách chia nội dung thành hai cột trong CSS3:
.columns {
font-family: Arial, Helvetica, sans serif;
font-size: 10px;
color: #444;
text-align: justify;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
}
Một lưu ý nhỏ là hai thuộc tính column-count và column-gap có thêm tiền tố -webkit-. Các thuộc tính thử nghiệm của CSS3 được đặt tên theo kiểu này nhằm tránh xung đột trong trường hợp đặc tả thay đổi. Do đó hiện nay, cần sử dụng các tiền tố -moz- (cho Mozilla), -0- (cho Opera) và -webkit- (cho Safari và Chrome).
4. Các đường viền bo tròn góc:
Thêm đường viền (border) cho các thành phần trong trang web không phải là điều gì mới mẻ. Nhưng với CSS2, hầu như không có cách nào để tạo ra các đường viền với các góc bo tròn một cách tự nhiên (đương nhiên là vẫn có các giải pháp phức tạp hơn như sử dụng image). CSS3 mang lại cách tiếp cận hiệu quả nhất bằng cách quy định các thuộc tính để tạo hiệu ứng này:
.roundedCorner {
-webkit-border-radius: 10px;
border: 4px solid #FF0000;
}
Khai báo này sẽ tạo một đường viền với bốn góc được bo tròn. Tuy nhiên, có những trường hợp mà ta chỉ muốn áp dụng hiệu ứng này cho một góc cụ thể nào đó, may mắn là CSS3 cũng cho ta khả năng này với các thuộc tính:
-webkit-border-radius-topleft
-webkit-border-radius-topright
-webkit-border-radius-bottomleft
-webkit-border-radius-bottomright
5. Tạo hiệu ứng chuyển động:
Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép áp dụng các hiệu ứng chuyển động để làm tăng tính bắt mắt cho trang web. Sau đây là một ví dụ căn bản về tạo chuyển động:
@-webkit-keyframes topdown {
from {
top: 0px;
}
to {
top: 300px;
}
}
.animation {
-webkit-animation-name: topdown;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 5;
position: relative;
left: 0px;
}
Có thể thấy rằng đoạn CSS trên chia làm hai phần: phần đầu định nghĩa hiệu ứng chuyển động theo nhu cầu sử dụng (ví dụ trên định nghĩa một chuyển động theo phương thẳng đứng đi từ tọa độ 0 tới tọa độ 300px). Phần tiếp theo gán chuyển động này cho class .animation, trong đó có các thuộc tính quan trọng như: thời lượng (duration), số lần thực hiện chuyển động (count), chiều của chuyển động (direction – ví dụ trên sử dụng giá trị alternate để chuyển động tự động đổi chiều sau mỗi lần thực hiện)
Trên đây chỉ là vài nét mới nổi bật của CSS3, nhưng bấy nhiêu cũng đủ để chứng minh rằng đây là một công nghệ đầy tiềm năng. Không chỉ góp phần hoàn thiện HTML5, CSS3 còn đơn giản hóa đáng kể công việc của các nhà phát triển web. Đây thực sự là sự kế thừa xứng đáng của CSS. Và với sự hỗ trợ ngày càng mạnh của các trình duyệt, có thể tin rằng CSS3 sẽ nhanh chóng trở nên phổ biến vào một ngày không xa.
* Source code:
Download file source hoàn chỉnh chứa các đoạn code trong bài ở đây
* Mục lục:
Tìm hiểu về HTML5 – Phần I
Sau bài viết HTML5 và Silverlight: Những khác biệt, tôi nhận thấy có rất nhiều nguời quan tâm đến HTML5 vì đây là một công nghệ khá “nóng” mà tài liệu tiếng Việt trên mạng lại ít (đa số bài viết về HTML5 là những bài báo theo kiểu giới thiệu). Vì vậy, tôi quyết định bắt đầu viết về chủ đề này, vừa là một cách giải lao sau giờ làm việc, vừa tranh thủ học hỏi ôn lại kiến thức. Silverlight cũng hay nhưng chắc đành để khi khác, bởi Silverlight trên các diễn đàn, website nhiều quá rồi, và lâu lâu đổi gió sang HTML5 cũng cảm thấy mới mẻ thú vị hơn!
Bài viết tìm hiểu về HTML5 dự tính chia thành nhiều kì, trong đó phần đầu tiên giới thiệu về tổng quan công nghệ.
Tổng quan công nghệ
1. Từ HTML đến HTML5:
HTML ra đời từ những năm 1989, do Tim Berners-Lee phát triển, sau đó nhanh chóng phổ biến nhờ tính dễ học và dễ sử dụng. HTML sử dụng các tag để đánh dấu từng đoạn văn bản. Một ví dụ đơn giản như:
<p> This is a paragraph </p>
Phiên bản HTML đầu tiên của Tim Berners-Lee rất khác với những gì chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản. Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa lên thành chuẩn. Trong vòng tám năm (1989 – 1997), HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là HTML4. Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt.
Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi. Người sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt hơn, cũng thường xuyên đặt ra những yêu cầu phức tạp. Web hiện đại không phải chỉ là để sử dụng được, mà còn phải bắt mắt và giàu khả năng tương tác.
Trước thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5 mới đang tập tễnh những bước đi đầu tiên! Mặc dù vậy, HTML5 mang trong mình đủ sức hấp dẫn để gây nên sự chú ý (hảy thử search google để xem có bao nhiêu kết quả về HTML5). HTML5 được xây dựng để thỏa mãn bốn tiêu chí sau:
a. Khả năng tương thích: đây là một tin vui cho những ai đã quen thuộc với việc sử dụng HTML: bạn không cần phải học lại gì cả! HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ. Đương nhiên là, HTML5 không thể xóa bỏ tất cả những gì đã có suốt hơn 20 năm chỉ trong một ngày. Mặc dù điều này cũng không đồng nghĩa với việc HTML5 hỗ trợ tất cả các trình duyệt, nhưng nếu bạn có một trình duyệt đủ cũ để không tương thích với HTML5, có lẽ đã đến lúc bạn nâng cấp trình duyệt mới!
b. Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng trong các phiên bản HTML trước đây.
c. Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai báo DOCTYPE:
HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
HTML5: <!DOCTYPE html>
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
d. Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết bị và nền tảng khác nhau.
Vậy HTML5 đem lại những gì?
Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả.
Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này nữa!
Không chỉ dừng lại ở các tag, HTML5 bao gồm một tập các API hấp dẫn. Vài API thú vị có thể kể đến như:
- Canvas
- Geolocation
- WebSocket
- Web Storage
- WebWorkers
- …
Một số các API này sẽ được nói đến trong các phần tiếp theo.
2. CSS3 và JavaScript:
Sẽ là thiếu sót nếu nhắc tới HTML mà bỏ quên CSS hoặc JavaScript. Cũng như HTML5, CSS3 vẫn đang trong giai đoạn phát triển, nhưng những tính năng của nó đã làm cho nhiều người phải háo hức. CSS3 cho phép thực hiện một cách dễ dàng những điều mà trước đây phải tốn rất nhiều công sức, chẳng hạn như các đường viền (border) với các góc cạnh được bo tròn, hay thậm chí là xoay đối tượng theo các hướng khác nhau. HTML5 và CSS3 có nhiều tiềm năng sẽ trở thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng tách biệt giữa nội dung và giao diện. Trách nhiệm trình bày một trang web sẽ từ từ được nhường lại cho CSS3.
Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với bộ Selectors API mới đơn giản hơn, cung cấp nhiều phương thức truy xuất chính xác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệt qua từng phần tử như trước. Cộng với việc các trình duyệt hiện đại đã tăng tốc thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi, việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết.
3. Kết luận:
Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan tâm đến việc tương thích chuẩn này. Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều đã sẵn sàng chào đón HTML5. Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh.
HTML5 dự kiến sẽ ra mắt chính thức vào năm 2012, và đạt đến mức tương thích giữa các trình duyệt vào năm 2022. Dù chặng đường có thể còn dài, nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4 hiện nay vào một ngày không xa. Dù không thể kết luận rằng HTML5 sẽ thay thế các công nghệ hiện tại (Silverlight, Flash…) như nhiều nguồn tin đang đồn thổi, đây vẫn sẽ là một công nghệ đáng để ta học hỏi!
