Giới thiệu
Các phiên bản mới nhất của trình duyệt tiên tiến (như Safari 3 và Opera 9.5) thực hiện một số tờ khai trang trí từ các đặc điểm kỹ thuật được đề nghị CSS 3. Opacity, bóng và hiệu ứng hổ vằn đang có sẵn mà không cần sử dụng JavaScript, mã phía máy chủ hoặc đánh dấu thêm. Nhưng với một số trình duyệt cũ vẫn còn sử dụng hàng ngày, nó có thể được một chút bực bội khi nghĩ rằng bạn có thể không có cơ hội sử dụng chúng cho một vài năm.
Trong bài viết này tôi sẽ xem xét làm thế nào bạn có thể sử dụng các kỹ thuật cải thiện duyên dáng (hoặc, tiến bộ) để làm cho việc sử dụng của CSS3 các tính năng trong các trình duyệt có hỗ trợ chúng, trong khi đảm bảo rằng mã của bạn vẫn sẽ cung cấp một trải nghiệm người dùng thỏa đáng trong các trình duyệt cũ không hỗ trợ các tính năng đó.
Các mã đầy đủ cho các ví dụ đặc trưng trong bài viết này có thể được tìm thấy ở đây.
Tăng cường tiến bộ là gì?
Để hiểu được khái niệm của việc tăng cường tiến bộ, trước tiên bạn cần phải hiểu phương pháp suy thoái duyên dáng, được tóm tắt độc đáo bằng cách trích dẫn nội dung bài viết sau đây:
Graceful suy thoái có nghĩa là trang web của bạn tiếp tục hoạt động ngay cả khi xem với ít hơn phần mềm tối ưu, trong đó các hiệu ứng tiên tiến không làm việc.
Graceful nâng cao phương pháp tiếp cận phương pháp tương tự từ hướng ngược lại, thay vì cung cấp các trạng thái dự phòng để đảm bảo các trang web hoạt động trên ít hơn so với phần mềm tối ưu, chúng tôi tận dụng lợi thế của các tính năng trong phần mềm mới hơn để cung cấp một kinh nghiệm nâng cao, trong khi đảm bảo rằng các nhà nước cơ bản vẫn hoạt động trên các thiết bị cũ. Đây là, tất nhiên, cách lý tưởng để thực hiện CSS mới 3 tờ khai.
Một ví dụ
Đối với ví dụ này, tôi sẽ xây dựng một trình đơn menu đơn giản mà sẽ xem xét một chút đẹp hơn tùy thuộc vào sự hỗ trợ CSS trong trình duyệt ưa thích của bạn.
Tôi chú ý là trong ví dụ này tôi đang sử dụng không có đồ họa, không có hack, và trình duyệt cụ thể không có tiền tố, tất cả những cải tiến đang sử dụng ổn định, tờ khai thực hiện. Có nói rằng, một số những lựa chọn mà tôi đã thực hiện được cụ thể cho các mục đích ví dụ, và có thể không được thực hành tốt nhất cho các trang web sản xuất.
Các đánh dấu
Tôi bắt đầu với một đơn giản không có thứ tự dựa trên danh sách điều hướng menu, trong sang trọng :
< ul >
< li > < a href = "" > Lorem Ipsum </ a > </ li >
< li > < a href = "" > Lorem Ipsum </ a > </ li >
< li > < a href = "" > Lorem Ipsum </ a > </ li >
< li > < a href = "" > Lorem Ipsum </ a > </ li >
< li > < a href = "" > Lorem Ipsum </ a > < / li >
</ ulPhong cách cơ bản
Tôi sẽ áp dụng một phong cách cơ bản sử dụng chỉ đơn giản chọn hậu duệ. Điều này sẽ áp dụng một biên giới cho từng hạng mục danh sách, và thay đổi nền tảng về mouseover. Điều này nên làm việc trong các trình duyệt đồ họa được thực hiện trong năm hoặc sáu năm qua (và có lẽ thậm chí trở lên).
CSS cho điều này là đơn giản:
ul {
background-color : màu xanh ;
biên giới-dưới cùng : 1 px chấm # 999 ;
danh sách theo phong cách : không ;
lợi nhuận : 15 px ;
chiều rộng : 150 px ;
}
li {
: # fff ; biên giới : 1 px chấm # 999 ; cửa dưới chiều rộng : 0 ; phông chữ : 1,2 em / 1,333 Verdana, Arial, sans-serif ; }
li a {
color : black ;
hiển thị : block ;
chiều cao : 100 % ;
padding : 0,25 em 0 ;
text-align : trung tâm ,
trang trí văn bản : không
; }
li a : hover { background-color : # efefef ; }Các kỳ quặc duy nhất bạn có thể nhận thấy là nền màu xanh trên <ul>, điều này sẽ được giải thích sau. Với những phong cách này, chúng tôi có một hình cơ bản sẽ hiển thị trong IE6 như thể hiện trong hình 1.
Hình 1: xuất hiện ban đầu này sẽ hiển thị trong IE6 và các trình duyệt cũ hơn.
Áp dụng những cải tiến
IE7 là người đầu tiên của loạt của các trình duyệt IE để hỗ trợ tất cả các chọn thuộc tính CSS 2.1, cũng được thực hiện trong khá nhiều mỗi bản phát hành trình duyệt khác. Chúng ta có thể sử dụng một trong những bộ chọn trẻ em để bắt đầu quá trình nâng cao. IE6 không hỗ trợ bộ chọn con, nó sẽ bỏ qua các quy tắc sau đây:
body > ul { cửa chiều rộng : 0 ; }
li ul > {
biên giới : 1 px rắn # fff ; biên độ rộng : 1 px 0 0 0 ; }
li > a {
background-color : # 666 ;
màu sắc : trắng ;
font-trọng lượng : in đậm ;
}
li : đầu tiên - con { màu : màu vàng ; }
li > a : hover { background-color : # 999 ; }Với những quy tắc được thêm vào CSS, danh sách bây giờ trông giống như hình 2:
Hình 2: Danh sách này có nền màu và văn bản táo bạo hơn, và liên kết đầu tiên được đánh dấu trong một màu sắc khác nhau.
IE7, Firefox, Safari và Opera, tất cả các màn hình hiển thị như thế này.
Thêm chú trọng hơn nữa
Bước tiếp theo là để thêm sự nhấn mạnh nhiều hơn một chút, bằng cách sử dụng một tài sản mà IE không nhận ra: Opacity. Chúng tôi không cần phải sử dụng bất kỳ chọn đặc biệt cho điều này, IE chỉ đơn giản là sẽ bỏ qua bất kỳ tính chất nó không hỗ trợ:
li { opacity : 0.9 ; }
li : hover { opacity : 1 ; }Hình 3 cho thấy tài sản này làm việc trong Opera, bạn có thể thấy rằng danh sách các mục thừa hưởng một màu xanh từ nền tảng về các <ul>. Mouseover, mỗi phần tử trở nên hoàn toàn mờ đục.
Hình 3: Bổ sung thêm độ trong suốt ví dụ của chúng tôi.
, Tất nhiên bạn có thể sử dụng tài sản của IE
lọc để đạt được tác dụng tương tự trong IE. Theo mục đích của hướng dẫn, tôi sẽ dính vào tiêu chuẩn CSS, như bộ lọc không phải là tiêu chuẩn do đó nó sẽ không xác nhận.Firefox 2 hỗ trợ độ mờ đục, nhưng với các trình duyệt gần đây, chúng ta có thể đi xa hơn nữa. Với Safari và Opera, chúng tôi có thể trang trí văn bản và gợi ý ở độ sâu bằng cách sử dụng các
văn bản bóng tài sản :li a: hover {text-shadow: 2px 2px 4px # 333;}Như hình 4 cho thấy, yếu tố moused giao có được một cái bóng nhỏ và dường như nổi bật từ trang hơi.
Hình 4: Bổ sung thêm bóng văn bản với CSS3.
Cuối cùng, chúng ta có thể tận dụng lợi thế của Opera hỗ trợ đầy đủ cho CSS 3 chọn và thêm một lớp nữa của việc tăng cường màu nền xen kẽ
bằng cách sử dụng thứ n con chọn:li : thứ n-con (2n +1) { background-color : # 333 ; }
li : thứ n con (n) a : hover {
background-color : # aaa ;
màu : # 000 ;
}
Li : đầu tiên trẻ em > a : hover { color : màu vàng ; }Hình 5 cho thấy trình đơn vằn của Opera.
Hình 5: Một trình đơn vằn, tạo ra bằng
cách sử dụng thứ n con.Kết quả và tóm tắt
Hình 6 là một so sánh side-by-side cách đánh dấu ban đầu được xem trong IE6, IE7, Firefox, Safari và Opera, sau khi áp dụng các quy tắc CSS được sử dụng trong bài viết này. Như bạn có thể thấy, trình duyệt hỗ trợ CSS trở nên tinh vi hơn, menu trở nên phong cách và phức tạp hơn, và sử dụng tăng cường tiến bộ, menu vẫn có thể sử dụng ngay cả trong các trình duyệt sáu tuổi.
Hình 6: Kết quả trong IE6, IE7, Opera và Firefox.
Tất nhiên, nhiều trình duyệt có một vô số đặc tính khác mà tôi đã không được sử dụng ở đây nhưng có thể dễ dàng được thực hiện, ví dụ như RGBA màu sắc và SVG như hình ảnh nền. Opera 9.5 vẫn chỉ phát hành trước tại thời điểm này, vì vậy những người hiểu biết những gì khác là để đi?