Mục tiêu của các nhà thiết kế là phải tạo ra những sản phẩm trực quan, sinh động, tương tác trong mọi trình duyệt. Nhưng cho đến này, mục tiêu đó vẫn chưa thực hiện được.
Tôi biết rằng việc tạo ra một sản phẩm phù hợp với mọi trình duyệt là điều không bao giờ xảy ra, nhưng tôi tin chúng ta sẽ cải thiện sản phẩm của chúng ta đến một mức độ tốt nhất Đối với các nhà phát triển, mục tiêu của họ là tạo ra một sản phẩm có thể hoạt động trong mọi trình duyệt với số lượng code tối thiểu, và đảm bảo website chạy thông suốt.
Trong bài viết này, tôi sẽ giới thiệu tới các bạn một số nguyên tắc và lời khuyên về kỹ thuật CSS mà tôi nghĩ rằng nó rất quan trọng..
Mô hình CSS Box
Nếu bạn muốn tạo nêncác layout tương thích rộng (layout cross-browser) và các giải pháp thay thế. đây là một trong những điều đầu tiên bạn nên nắm bắt. Rất may, mô hình Box không quá khó hiểu, nó có thể hoạt động trong tất cả các trình duyệt, trừ trường hợp liên quan đến một số phiên bản của Internet Exploser.
Mô hình CSS
- Một mặt của Block thành phần chiếm bao nhiêu diện tích?
- Border/ Margin có bị chồng chéo lên nhau hay bị gãy không?
- Các kích thước của Box
- Quy mô và vị trí của Box ảnh hưởng đến nội dung khác trên trang
Quy tắc cơ bản của mô hình CSS Box
- Mặt của Block thành phần chủ yếu là hình chữ nhật
- Kích thước của Block thành phần được tính bằng chiều rộng, chiều cao, khoảng cách với Padding, Border, Margin.
- Nếu không quy định kích thước chiều cao, một Block thành phần sẽ cao như nội dung mà nó chứa + Padding.
- Nếu không quy định chiều rộng, một số Box không nổi sẽ mở rộng phù hợp với độ rộng của nội dung và trừ Padding của nó.
Một số nguyên tắc quan trọng cần ghi nhớ để đối phó với các mặt của Block thành phần:
- Một Box có chiều rộng được thiết lập 100%, không nên có bất kỳ một Border, Padding hay Margin nào nữa, nếu không nó bị tràn ra bề mặt của nó.
- Các Border liền kề theo chiều dọc có thể có một vài vấn đề như bị gãy hoặc có thể gây nên vấn đề với layout.
- Các thành phần được xác định vị trí tương đối hay tuyệt đối sẽ vận hành một cách khác nhau, bài viết này không đề cập đến chi tiết này.
Mô hình box được hiển thị sử dụng Firebug trong Firefox
Sự khác biệt giữa Block và Inline
Hình ảnh dưới đây minh hoạ sự khác biệt giữa block thành phần và inline thành phần:
Đây là một số quy tắc cơ bản để phân biệt giữa các block với các inline:
- Theo mặc định, các Block thành phần sẽ mở rộng một cách tự nhiên theo chiều ngang để phù hợp với bề mặt của thành phần mà nó chứa đựng (container), như vậy, không cần thiết phải thiết lập chiều rộng tới “100%”
- Theo mặc định, các Block thành phần sẽ bắt đầu từ phía bên trái Edge của hộp chứa nó và phía dưới bất kỳ Block thành phần nào nằm trước nó (trừ các thành phần nổi hay các thành phần đã được định vị như hiển thị bên dưới).
- Các Inline thành phần sẽ bỏ qua các thiết lập chiều rộng hoặc chiều dài.
- Các Inline thành phần đi cùng với Text và các đối tượng thể hiện các đặc điểm Typographical như
Không gian trắng,kích thước phông chữ, vàletter-spacing - Các Inline thành phần có thể căn chỉnh bằng cách sử dụng
vertical-align(căn chỉnh dọc), nhưng Block thành phần thì không thể - Inline thành phần sẽ có một ít không gian tự nhiên bên dưới, chẳng hạn, chữ G.
- Một Inline thành phần sẽ trở thành Bock thành phần nếu nó di động.
Floating và Clearing
Để duy trì các layout đa cột, phương pháp dễ dàng và tốt nhất là sử dụng “Float”. Do đó, có một kiến thức vững chắc về cách hoạt động của “Float” là yếu tố quan trọng để tạo nên một sản phẩm tương thích cross-browser (tương thích nhiều trình duyệt).
Một Float thành phần có thể được nổi (Float) bên trái hoặc bên phải, Float thành phần này sẽ thay đổi theo hướng quy định cho đến khi nó tiếp cận với Edge của Parent Conainer, hay Edge của một Float thành phần khác. Khác với Float thành phần, Inline thành phần không linh hoạt và luôn nằm bên dưới các Foat thành phần.
Một số nguyên tắc quan trọng cần lưu ý khi dùng Float và Clear:
- Float thành phần di chuyển bên trên các Block thành phần khác.
- Để có nội dung xoay quanh Foat thành phần, cần phải có Inline hoặc các thành phần Float khác nằm trong cùng một hướng
- Một Float thành phần không quy định chiều rộng, nó sẽ được thu nhỏ bằng độ rộng của nội dung. Do đó nên thiết lập chiều rộng.
- Nếu một Block thành phần có chứa các Float thành phần, nó sẽ bị gãy và đòi hỏi phải chỉnh sửa.
- Một thành phần được “cleared – làm sạch” sẽ tránh được các Float thành phần lộn xộn theo xung quanh trong document.
- Nếu một thành phần được cả Float và Clear, sẽ chỉ clear các thành phần đằng trước nó.
Sử dụng Internet Explorer
Xin lưu ý, một nhóm có quyền lực của Smashing Magazine khuyên rằng việc đầu tiên, chúng ta phải phản đối việc phát triển các trang web trong Internet Explorer. Theo ý kiến của nhóm này, các trang Web phải được phát triển trong các trình duyệt web “hiện đại”, với các tiêu chuẩn cơ bản và sau đó, chỉnh sửa để phù hợp với các phiên bản Buggy của Internet Explorer. Đây không phải là ý kiến của nhóm biên tập Smashing. Đồng ý hay không, xin bạn vui lòng cho biết trong phần bình luận của bài viết này.
Phần lớn những gì tôi đã tranh luận cho đến giờ là phải thực hiện với CSS đang được mã hóa và các nguyên tắc về Layout. Các nguyên tắc này liên quan đến thói quen và sở thích của các nhà thiết kế. Mặc dù, có thể chúng ta ghét sử dụng IE6 và IE7 trong các hoạt động internet hàng ngày, nhưng khi xây dựng một dự án hỗn hợp cho khách hàng, một trong những điều tốt nhất bạn có thể thực hiện đó là thử nghiệm Layout của bạn trong các trình duyệt đang phát triển gần đây. Thậm chí, bạn có thể mở một phiên bản độc lập của IE6 hoặc IE7 và bắt đầu dự án phát triển của bạn trong trình duyệt đó. .
Tất nhiên, bạn sẽ không có quyền truy cập vào các công cụ như Firebug, nhưng nói chung đối với CSS (đặc biệt là trong sự phát triển gần đây) bạn sẽ không cần Firebug. Bạn sẽ rất dễ dàng tìm ra một Layout đang hoạt động trong IE6 và IE7, sau đó, chỉnh sửa cho phù hợp với các trình duyệt khác. Bạn đợi tới phần cuối cùng của dự án mới mở IE6 và IE7 sẽ có thể gây ra một số vấn đề sau, nếu không nói là tất cả:
- Rất nhiều Hack phải được nghiên cứu, cần các stylesheet riêng cho các phiên bản khác nhau của IE, làm cho code bị phồng lên, khó quản lý và làm cho web chạy chậm hơn.
- Layout ở một số điểm có thể phải được làm lại, gia tăng thời gian phát triển.
- Thời gian thử nghiệm sẽ tăng lên, hãy dừng lại một chút để dành thời gian cho các nhiệm vụ quan trọng hơn.
- Layout trong các trình duyệt khác sẽ không được giống như trong IE6 và IE7
Tôi khuyên các nhà phát triển không nên sử dụng Internet Explorer cho các dự án cá nhân, các ứng dụng web, hoặc những sản phẩm không dành cho khách hàng khác. Nhưng đối với khách hàng doanh nghiệp những người sử dụng Internet Explorer chủ yếu nhất, lời khuyên này có thể ngăn chặn được rất nhiều vấn đề hóc búa, trong khi tìm kiếm một điều gì đó làm việc một cách chính xác, và tạo ra một sản phẩm tương thích với nhiều trình duyệt (cross-browser).
Đôi khi, việc xem xét các “bug phiền nhiễu” có thể taọ ra tính chất tiêu cực không cần thiết, và có thể cản trở thời gian phát triển và việc bảo trì trong tương lai. Giải quyết các vấn đề của IE là một công việc thực sự của các nhà phát triển, do đó, hãy xem xét các vấn đề của nó.
Các vấn đề phổ biến nhất của Internet Explorer
Nếu bạn muốn bắt đầu với IE thì bạn cần phải hiểu các vấn đề hạn chế của nó là gì (thường là phiên bản IE6 và IE7).
Một cuộc thảo luận chi tiết về các vấn đề có thể xảy ra trong Internet Explore đã diễn ra và người ta đã tìm thấy một số mâu thuẫn khá quan trọng và các vấn đề liên quan tới IE mà tất cả các nhà phát triển CSS nên biết.
Đây là bản tóm tắt những vấn đề phổ biến nhất sẽ cần được giải quyết:
- IE6 sẽ có vấn đề nếu các Float thành phần bị lạm dụng – nó sẽ gây ra việc nội dung bị sao chép hoặc mất đi.
- IE6 sẽ gấp đôi Margin cùng hướng trên các Float thành phần bên cạnh như Float, các cài đặt
display: inlinesẽ thường xuyên cài đặt cố định. - Trong IE6 và IE7, nếu một thành phần không có Layout, nó có thể gây ra một số vấn đề: Background không được hiển thị, Margin bị gãy, và một số lỗi khác có thể phát sinh.
- IE6 không hỗ trợ các đặc tính min và max như
min-height, hoặcmax-width - IE6 không hỗ trợ việc xác định vị trí cố định của các hình ảnh Background.
- IE6 và IE7 không hỗ trợ nhiều giá trị cho
display(e.g.inline-table,table-cell,table-row, vv.) - Bạn không thể sử dụng
:hovercho cáccho các pseudo-class trên bất cứ thành phần nào trong IE6, trừ thẻ (<a>)
Có rất nhiều lỗi, các vấn đề, và sự không nhất quán có thể phát sinh trong Internet Explorer, nhưng có lẽ đây là những quy tắc phổ biến nhất và quan trọng nhất cần phải ghi nhớ. Tôi khuyến khích tất cả các nhà phát triển nghiên cứu sâu hơn về những vấn đề mà tôi đã đề cập ở trên, để có một sự hiểu biết chính xác hơn về việc các sản phẩm này có thể gặp những vấn đề gì, và làm thế nào để xử lý chúng.
Một số sản phẩm sẽ không bao giờ giống nhau
Như đã đề cập, tạo ra sản phẩm tương tự nhau vừa mang tính trực quan và vừa hoạt động trong mọi trình duyệt là có thể, nhưng không giống nhau. Bạn có thể có một Layout tốt, các thành phần được xác định tại các vị trí với một kích thước hoàn hảo, nhưng vẫn còn một số vấn đề nằm ngoài tầm kiểm soát của các nhà phát triển. .
Các form sẽ rất khác nhau
Có thể có những tranh luận về sự khác biệt của các Form tại các trình duyệt và các Platform khác nhau. Ở đây tôi không đi vào chi tiết, tuy nhiên, tôi sẽ đưa ra một minh chứng đơn giản.
Hãy xem hình ảnh dưới đây, trong đó hiển thị thành phần <select> trên trang chủ Facebook, trong 5 phiên bản trình duyệt khác nhau (các hình này được chụp từ Browserlab của Adobe):
Các thành phần<select> xuất hiện một cách khác nhau trong các trình duyệt khác nhau
Một số Form có thể được điều khiển một cách trực quan. Ví dụ: khi khách hàng yêu cầu Button đăng ký nhìn giống nhau trong mọi trình duyệt, không thành vấn đề, bạn chỉ cần sử dụng một hình ảnh, thay vì mặc định <input type="submit">, tương tự như các thành phần <select>, bạn sẽ thấy khác nhau.
Nhưng các thành phần của Form thì khác, các Button như Radio, các phạm vi của text, các thành phần <select>, là không thể tạo kiểu dáng theo một cross-browser thời trang mà không làm phức tạp các vấn đề về sử dụng JavaScript plugins(trong đó, một số nhà phát triển cảm thấy có những điều gây hại tới User Experience).
Typography sẽ luôn khác nhau
Một lĩnh vực khác mà chúng ta không thể mong đợi các nhà thiết kế tạo ra một kích thước hoàn hảo, đó là vấn đề với các phông chữ, đặc biệt là các phông chữ trên Body Copy (nội dung văn bản). Các giải pháp hỗ trợ các phông chữ xuất hiện, và gần đây có Google Font API tiếp tục góp phần cải thiện vấn đề này. Nhưng body copy (nội dung văn bản) có lẽ sẽ luôn khác nhau trong các trình duyệt khác nhau.
Với Typography, chúng ta không chỉ đối mặt với vấn đề nó có tồn tại trên máy tính người dùng hay không, mà còn xuất hiện vấn đề là kiểu chữ sẽ không giống nhau.Windows ClearType, được hỗ trợ trên IE7, không có trên IE6, lại làm nảy sinh một vần đề: cùng một phông chữ lại trở nên khác nhau trong hai phiên bản của IE.
Đồ họa dưới đây hiển thị các hình chụp từ IE6 và IE7. Trong IE6, phần tiêu đề rõ ràng hơn so với phần nội dung (body copy), nhưng toàn bộ văn bản hiển thị đánh dấu một sự khác biệt giữa hai trình duyệt (dĩ nhiên trừ khi văn bản đó là một hình ảnh):
So sánh typography trong IE6 và IE7
Sử dụng CSS Reset
Kể từ khi tôi bắt đầu sử dụng CSS reset cho các dự án, khả năng tạo ra một cross-browser đã tăng lên rất nhiều. Sự thật là, hầu hết các mã reset sẽ bổ sung những code không cần thiết cho CSS của bạn, nhưng bạn sẽ loại bỏ những thuộc tính không được sử dụng (ví dụ bạn sẽ không sử dụng thẻ <blockquote>,bạn sẽ loại bỏ thuộc tính của nó).
Việc Margin và Padding gây ra các khác biệt trên các trình duyệt khác nhau sẽ được giảm tối thiểu (kể cả các form HTML rắc rối) một khi bạn ứng dụng CSS reset. Bởi vì reset sẽ khiến toàn bộ các thành phần bắt đầu từ số không, bạn có nhiều sự kiểm soát hơn, vì lúc này tất cả các trình duyệt bắt đầu cơ bản là giống nhau.
Một CSS reset như thể hiện trên thanh công cụ của nhà phát triển Firefox
Bên cạnh những lợi ích là tạo ra được một cross-browser, một reset còn có những lợi ích khác như bạn sẽ không phải sử dụng nhiều hacks (phương thức sửa lỗi hiển thị), code của bạn sẽ ít cồng kềnh, và bạn sẽ dễ duy trì hơn. Đây là CSS reset của Eric Meyer, mà tôi đã sử dụng cho tới bây giờ.
Sử dụng CSS Reference của SitePoint
Nếu bạn đang gặp sự cố khi dùng một tính năng đặc biệt của CSS để hiển thị chính xác trên tất cả các trình duyệt, hãy tìm kiếm tính năng này trong SitePoint CSS Reference để xem nó có bất kỳ các hạn chế về khả năng tương thích nào không. Tài liệu tham khảo của SitePoint là một biểu đồ tương thích hữu ích hiển thị trình duyệt hỗ trợ cho mỗi tính năng tiêu chuẩn của CSS.
Biểu đồ khả năng tương thích của SitePoint dành cho các tính năng CSS
Mỗi biểu đồ tương thích được đi kèm với một mô tả khá chi tiết về các lỗi xảy ra trong các trình duyệt khác nhau, và người dùng được phép bổ sung các góp ý vào tài liệu khi có những lỗi mới và đưa ra các giải thích sâu sắc về các vấn đề CSS phức tạp.
Sử dụng bài viết này như một tài liệu hướng dẫn, bạn có thể làm giảm những điều có thể, và thường có thể xác định vấn đề CSS, nó có lỗi trong trình duyệt hay không, hoặc có áp dụng sai hoặc có sự hiểu lầm nào của bạn về tính năng của CSS hay không.
Kết luận
Trong khi còn nhiều điều tranh luận về chủ đề của CSS cross-browser, các nguyên tắc và các hướng dẫn tôi đã giới thiệu ở đây có thể cung cấp một nền tảng để hỗ trợ các nhà phát triển CSS trong việc tạo một sản phẩm phù hợp và đạt được khả năng cross-browser tốt đến mức có thể. Cross-browser CSS là một mục tiêu có thể đạt được, trong các giới hạn hợp lý.
Thay cho lời kết của bài viêt, tôi đồng tình với việc thúc đẩy sử dụng CSS3, và khuyến khích các nhà phát triển đẩy mạnh các kỹ thuật CSS mới ra khỏi các giới hạn trên các dự án dành cho khách hàng.
Các nguyên tắc tôi đã giới thiệu ở đây sẽ giúp các nhà phát triển tạo ra một sản phẩm đẹp và trực quan trên IE, trong khi cung cấp một sản phẩm bổ sung-xinh đẹp và siêu-trực quan trong nhiều trình duyệt mới hơn. Đó là một mục tiêu cross-browser và chắc chắn phải phấn đấu để đạt được.
