10 phương pháp dự phòng hữu ích cho CSS và Javascript

Dự phòng mã là giải pháp hoàn hảo để thỏa hiệp với nhiều khách truy cập duy nhất của bạn. Không phải tất cả mọi người trên web đều sử dụng cùng một hệ điều hành, trình duyệt web hoặc thậm chí cả phần cứng vật lý. Tất cả những yếu tố này làm thế nào trang web của bạn sẽ thực sự hiển thị trên màn hình. Khi làm việc với các thủ thuật CSS hoặc JavaScript mới, bạn thường gặp phải các lỗi kỹ thuật như vậy.

Nhưng đừng để những cạm bẫy này làm bạn nản lòng! Trong hướng dẫn này, tôi đã kết hợp một số kỹ thuật dự phòng phổ biến nhất dành cho các nhà thiết kế web tập trung vào CSS và JavaScript / jQuery. Khi thất bại, bạn muốn cung cấp cho người dùng ít nhất chức năng trang cơ bản. Sự đơn giản ngự trị tối cao trong lĩnh vực thiết kế trải nghiệm người dùng.

Kiểm tra hướng dẫn của chúng tôi dưới đây và cho chúng tôi biết suy nghĩ và câu hỏi của bạn trong phần bình luận.

1. Góc tròn với hình ảnh

Các kỹ thuật CSS3 đã tăng vọt vào thiết kế web chính thống. Một trong những tính chất đáng chú ý nhất là bán kính biên giới cho phép các góc tròn trên đường bay. Chúng trông đẹp trên thực tế bất kỳ nút, div hoặc hộp văn bản. Vấn đề duy nhất là sự hỗ trợ hạn chế giữa các trình duyệt web.

Nhiều trình duyệt cũ hơn bao gồm Internet Explorer 7 không hỗ trợ thuộc tính này. Vì vậy, để giữ cho các góc tròn hoạt động cho tất cả các trình duyệt tiêu chuẩn, bạn sẽ cần tạo dự phòng bằng hình ảnh.

Mã tiêu chuẩn sử dụng các thuộc tính CSS3 thông thường trên div chính trong khi cung cấp hình ảnh cho mỗi góc. Bạn có thể sẽ cần phải thiết lập một số div bổ sung trong vùng chứa chính được sử dụng để hiển thị hình ảnh góc trong nền.

#mainbox -webkit-Border-radius: 5px; / * Safari * / -moz-Border-radius: 5px; / * Firefox \ Gecko Engine * / -o-Border-radius: 5px; / * Opera * / Border-radius: 5px;  #mainbox .topc nền: url ('angle-tl.png') không lặp lại trên cùng bên trái;  #mainbox .topc span nền: url ('angle-tr.png') không lặp lại trên cùng bên phải;  #mainbox .btmc nền: url ('angle-bl.png') không lặp lại phía dưới bên trái;  #mainbox .btmc span nền: url ('angle-br.png') không lặp lại phía dưới bên phải;  

Để tự cứu mình khỏi căng thẳng, tôi khuyên bạn nên sử dụng một ứng dụng như RoundedCornr. Đây là một ứng dụng web trong trình duyệt, tạo CSS góc tròn bằng cả CSS3 và hình ảnh. Điều này sẽ đặc biệt hữu ích cho các nhà thiết kế không có quyền truy cập vào phần mềm đồ họa như Photoshop hoặc GIMP.

2. Hệ thống trình đơn thả xuống jQuery

Hệ thống menu thả xuống là hoàn hảo cho Web ngày nay. Tuy nhiên, vấn đề lớn nhất là khách truy cập truy cập trang web của bạn mà không bật JavaScript. Trong trường hợp này, không có menu nào của bạn hoạt động cả! Giải pháp tốt nhất là sử dụng CSS để hiển thị / ẩn từng khối div của menu phụ và hiển thị chúng khi di chuột.

Vấn đề duy nhất với giải pháp này là Internet Explorer 6 không hỗ trợ các bộ chọn di chuột CSS này. Tuy nhiên IE7 + hoạt động rất tốt; và tất nhiên tất cả các trình duyệt sẽ hoạt động tốt nếu JavaScript được bật ở vị trí đầu tiên. Mã từ hướng dẫn này trên CSS Plus là một trong những tài nguyên tốt nhất tôi tìm thấy. Nó không chỉ cung cấp một giải pháp với jQuery mà còn là CSS cần thiết cho các vấn đề IE.

/ * Một lớp hiện tại sẽ được thêm thông qua jQuery * / #nav li.cản> a nền: # f7f7f7;  / * CSS dự phòng * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Nguồn

Một giải pháp thay thế khác bạn có thể thử là chỉ hiển thị công khai từng menu trong IE6. Bạn có thể sử dụng các nhận xét có điều kiện của Internet Explorer để áp dụng các bảng định kiểu dựa trên phiên bản trình duyệt. Tất nhiên, đây sẽ không phải là giải pháp đẹp nhất, nhưng nó sẽ đơn giản hoạt động.

Nếu bạn không cảm thấy Internet Explorer 6 đáng lo ngại thì thậm chí đừng bận tâm với dự phòng thay thế này. Hướng dẫn và mã tiếp theo ở trên là đủ để tải menu JavaScript của bạn ngay cả với CSS nghiêm ngặt trong tất cả các trình duyệt chính.

3. Các kiểu Internet Explorer được nhắm mục tiêu

Tôi chắc rằng tất cả chúng ta đều biết về các vấn đề kết xuất từ ​​Internet Explorer của Microsoft. Tôi có thể cung cấp một chút tín dụng cho IE8 mới nhất của họ và triển vọng trong tương lai với IE9. Tuy nhiên, vẫn còn một lượng nhỏ khán giả chạy IE6 / IE7 và bạn thực sự không thể bỏ qua chúng.

(Nguồn hình ảnh: github)

Nhận xét có điều kiện như được đề cập trong phần cuối có thể hữu ích cho việc định dạng lại các khu vực của trang. Ví dụ: nếu bạn có menu thả xuống với điều hướng phụ trong IE6 sẽ chỉ hiển thị bằng JavaScript, bạn sẽ không gặp may khi thử CSS như một phương pháp dự phòng. Thay vào đó, giải pháp tốt nhất là hiển thị mỗi danh sách phụ dưới dạng khối điều hướng.

Thêm mã ở trên vào tiêu đề tài liệu của bạn, sau đó bạn có thể chỉ định loại hiển thị cho mỗi điều hướng phụ. Phần tốt nhất về dự phòng này là bạn có thể ghi đè CSS và vẫn tự động hiển thị / ẩn các menu khi bật JavaScript. Nếu không, bạn sẽ chỉ hiển thị một danh sách mở các liên kết. Bạn có thể sử dụng một mã tương tự như những gì tôi đã thêm bên dưới.

#nav li vị trí: tương đối; chiều rộng: 150px; / * phải đặt chiều rộng hữu hạn cho IE * / #nav li ul / * mã điều hướng phụ * / display: block; vị trí: tuyệt đối; chiều rộng: tự động; / * xác định chiều rộng của riêng bạn hoặc đặt trong phần tử li * / #nav li ul li width: 100%;  

4. Độ mờ / Độ trong suốt của IE

Một trong nhiều lỗi khó chịu với Internet Explorer là thỏa thuận với độ mờ đục. Cài đặt độ trong suốt alpha trong CSS3 có thể được thay đổi thông qua thuộc tính độ mờ. Tuy nhiên, theo cách của Microsoft, chỉ có Internet Explorer 9 hiện hỗ trợ tính năng này.

Giải pháp tốt nhất để nhắm mục tiêu IE6 + là thông qua bộ lọc, một thiết lập độc quyền chỉ được IE công nhận. Kiểm tra ví dụ mã ngắn gọn dưới đây:

.mydiv độ mờ đục: 0,55; / * CSS3 * / bộ lọc: alpha (opacity = 55); / * IE6 + * / 

Tất cả những gì bạn cần làm là bao gồm dòng trên trong bất kỳ yếu tố nào yêu cầu độ trong suốt. Lưu ý rằng tương tự như thuộc tính CSS3, tất cả các phần tử con cũng sẽ kế thừa thay đổi độ mờ này. Nếu bạn đang tìm kiếm một phương pháp mới hơn nhắm mục tiêu cụ thể vào IE8, hãy xem mã bên dưới. Nó hoạt động theo cách tương tự như thuộc tính bộ lọc của chúng tôi chỉ được trình phân tích cú pháp Microsoft IE8 nhận ra.

-bộ lọc ms: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * / 

5. Tạo các nút CSS3 với hình ảnh dự phòng

Các nút là một yếu tố web tuyệt vời cho tất cả các loại giao diện. Chúng có thể hoạt động như đầu vào mẫu, mục điều hướng hoặc thậm chí liên kết trang trực tiếp. Với CSS3 giờ đây có thể định dạng các nút với nhiều kiểu độc đáo như độ dốc nền, bóng hộp, góc tròn, v.v..

Tuy nhiên, bạn không thể tin tưởng rằng tất cả khách truy cập của bạn sẽ có thể hiển thị các thuộc tính mới hơn này. Khi xây dựng một thiết kế dự phòng cho các nút (hoặc thậm chí các thành phần UI tương tự), có hai tùy chọn riêng biệt. Đầu tiên là bao gồm một hình ảnh nền được thiết kế chính xác như CSS sẽ nhìn. Điều này có thể dễ dàng thực hiện trong Photoshop. Tuy nhiên nếu bạn không phải là chuyên gia về phần mềm thì điều này có thể gây rắc rối.

Cách khác là chuyển sang màu nền đơn giản và các kiểu CSS đơn giản hơn. Tôi đang sử dụng một số ví dụ mã từ CSS-Tricks bài đăng tuyệt vời về độ dốc CSS3. Tất cả các trình duyệt chính bao gồm Safari, Firefox, Chrome và thậm chí Opera đều hỗ trợ các thuộc tính này. Khu vực mà bạn sẽ gặp vấn đề là sự hỗ trợ của các trình duyệt cũ: các công cụ Mozilla cũ hơn, IE6 / 7, thậm chí có thể là Mobile Safari.

.gradient-bg màu nền: # 1a82f7; / * sử dụng màu đơn sắc ở mức tồi tệ nhất * / hình nền: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); hình nền: -webkit-gradient (tuyến tính, 0% 0%, 0% 100%, từ (# 2F2727), đến (# 1a82f7)); hình nền: -webkit-linear-gradient (trên cùng, # 2F2727, # 1a82f7); hình nền: -moz-linear-gradient (trên cùng, # 2F2727, # 1a82f7); hình nền: -ms-linear-gradient (trên cùng, # 2F2727, # 1a82f7); hình nền: -o-linear-gradient (trên cùng, # 2F2727, # 1a82f7);  

Nguồn

Vấn đề nhỏ duy nhất khi chỉ sử dụng hình ảnh làm phương pháp dự phòng là bạn sẽ không có thay đổi trạng thái hoạt động khi người dùng nhấp vào nút. Bạn có thể xây dựng hai hình ảnh khác nhau cho các trạng thái hoạt động thường xuyên và hoạt động này, mặc dù nó sẽ mất thêm một số công việc. Chỉ riêng lý do này có thể thúc đẩy bạn sử dụng màu nền thay vì hình ảnh dự phòng. Hãy thử một vài giải pháp khác nhau để xem cái nào trông đẹp nhất trong bố cục của bạn.

6. Kiểm tra nội dung di động

Một xu hướng lớn khác trong năm 2012 là sự phổ biến của trình duyệt Internet di động. Điện thoại thông minh ở khắp mọi nơi và dữ liệu qua 3G / Wi-Fi ngày càng dễ truy cập hơn. Do đó, nhiều nhà thiết kế sẽ tìm cách cung cấp bố cục dự phòng cho người dùng di động.

Một vài trình duyệt web di động phổ biến sẽ kết xuất các trang tương tự như môi trường máy tính để bàn. Mobile Safari và Opera được biết đến nhiều nhất vì điều này, thậm chí còn hỗ trợ nhiều tập lệnh jQuery phổ biến. Nhưng những trang này không phải lúc nào cũng thân thiện với thiết bị di động và có chỗ để mở rộng trên UX.

Có hai cách bạn có thể phát hiện trình duyệt di động và hiển thị bố cục hoặc biểu định kiểu thay thế. Đầu tiên là thông qua JavaScript hoạt động tuyệt vời như một công cụ frontend. Kịch bản tôi đã thêm bên dưới rất đơn giản và chỉ kiểm tra người dùng iPhone / iPod Touch. Phát hiện trình duyệt di động là một trang web tuyệt vời cung cấp một kịch bản chi tiết hơn mà bạn có thể chạy thay thế.

// Chuyển hướng chức năng iPhone / iPod Touch isiPhone () return ((navigator.pl platform.indexOf ("iPhone")! = -1) || (navigator.pl platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

Bây giờ, sự thay thế khác là kiểm tra thông qua một ngôn ngữ phụ trợ như PHP. Bạn có thể kiểm tra một biến được gọi là HTTP_USER_AGENT. Hàng chục trang web sẽ bật lên nếu bạn google các điều khoản này. Tuy nhiên tôi vẫn đề xuất liên kết Phát hiện Trình duyệt Di động tôi đã thêm trong đoạn trước.

Trang web có các tập lệnh có thể tải xuống miễn phí để phân tích cú pháp không chỉ trong PHP mà còn có rất nhiều ngôn ngữ phụ trợ phổ biến khác. Chúng bao gồm ASP.NET, ColdFusion, Rails, Perl, Python và thậm chí mã dựa trên máy chủ như IIS và Apache.

7. Slicebox Slider với dự phòng duyên dáng

Phần mềm miễn phí CSS3 yêu thích của tôi từ năm 2011 có lẽ phải là Slicebox 3D Image Slider do Codrops phát hành. Nó sử dụng các hiệu ứng chuyển cảnh CSS đẹp mắt trong các trình duyệt hỗ trợ chúng, hiện có trong Google Chrome và mới nhất trong Safari. Thật kỳ lạ khi ngay cả phiên bản Firefox hoặc IE9 gần đây nhất vẫn không thể sử dụng các chuyển đổi này.

Phần tốt nhất về mã này là nó vẫn sẽ dự phòng để cung cấp các hiệu ứng chuyển tiếp cơ bản giữa các hình ảnh. Được cấp nhiều hoạt hình được thực hiện thông qua jQuery, nhưng tùy chọn dự phòng CSS tiêu chuẩn vẫn rất đáng tin cậy khi xem xét có bao nhiêu trình duyệt không thể hỗ trợ hoạt ảnh CSS3 hào nhoáng.

Ngoài ra, Codrops cũng vừa mới phát hành một bảng điều khiển hình ảnh trượt khác sử dụng các kỹ thuật CSS3 sáng tạo hơn nữa. Thanh trượt hình ảnh này được tạo bằng hình ảnh nền trong CSS, vì vậy ngay cả khi không có hiệu ứng chuyển tiếp, nó vẫn hoạt động rất trơn tru.

8. Phương pháp Failsafe CDN của Script Script

Thư viện jQuery đã trở nên gần như cần thiết để phát triển JavaScript trên web. Nhiều nhà cung cấp CDN thay thế đã tạo các URL tĩnh nơi họ lưu trữ tất cả các phiên bản phát hành của jQuery. Chính Google, Microsoft và thậm chí jQuery đã tạo ra một cổng thông tin CDN cho các nhà phát triển, trong số một vài trang web ít được biết đến khác.

Có thể có hàng trăm ngàn nhà phát triển phụ thuộc vào các nhà cung cấp này. Điều gì sẽ xảy ra nếu bất kỳ liên kết nào bị hỏng vì bất kỳ lý do gì hoặc các máy chủ không hoạt động? Nó sẽ là một ý tưởng tốt để lưu trữ một bản sao địa phương và thực hiện điều này chỉ khi bạn cần nó. Chà đoạn mã dự phòng tuyệt vời này từ CSS-Tricks cho phép bạn làm điều đó!

Nguồn

9. Hộp kiểm HTML5 độc đáo

HTML5 đã mở ra cơ hội cho một số phong cách mới mẻ để xây dựng trang web. Một phần của trải nghiệm web nâng cao này là thông qua các biểu mẫu và các yếu tố đầu vào. Hộp kiểm chỉ là một ví dụ có thể được tùy chỉnh rất nhiều để phù hợp với nhu cầu của bạn.

Tôi đã xem hướng dẫn CSS / jQuery tuyệt vời này được đăng lại vào đầu mùa xuân năm 2011. Nó cung cấp một phương pháp đơn giản để tạo các công tắc kiểu Apple cho các hộp kiểm của bạn làm giảm duyên dáng trong các trình duyệt cũ. Mã sử ​​dụng hình ảnh nền để thay thế kiểu bật / tắt giữa các tương tác của người dùng.

Các thành phần hộp kiểm đầu vào ban đầu được ẩn theo mặc định và giá trị của chúng được xác định thông qua các lệnh gọi JavaScript. Điều này có nghĩa là bạn có thể tự động kéo giá trị tại bất kỳ điểm nào thông qua jQuery, nhưng nó cũng sẽ được chuyển vào biểu mẫu khi nhấn “Gửi đi” nút.

Giả sử rằng JavaScript bị tắt hoặc không được hỗ trợ trong các trình duyệt cũ hơn, tập lệnh sẽ mặc định là các đầu vào HTML thông thường. Điều này cũng sẽ vô hiệu hóa CSS cho các kiểu hộp kiểm mới hơn để nó xuất hiện như thể không có gì thay đổi. Kịch bản hành xử giống như một người đi trước thẩm mỹ với một dự phòng sạch hơn bất cứ điều gì khác. Nhưng các thanh trượt này trông tuyệt vời và các kỹ thuật tương tự có thể được áp dụng cho các trường nhập mẫu khác như chọn menu và nút radio.

10. Video được hỗ trợ HTML5

Thông số kỹ thuật HTML5 mới đã rất tiến bộ trong nhiều lĩnh vực. Cả hai yếu tố video và âm thanh đều tăng cường hỗ trợ riêng cho một số lượng lớn tệp phương tiện. Tuy nhiên, hóa ra là giữa các trình duyệt hỗ trợ HTML5, tất cả chúng không đồng ý về các loại tệp.

Mozilla Firefox thường hỗ trợ video .OGG mà bạn có thể sử dụng VLC làm công cụ chuyển đổi. Google Chrome & Safari tìm kiếm các tệp .MOV được mã hóa .MP4 hoặc H.264. Vì những khác biệt này, bạn thường phải bao gồm số ba các định dạng video khác nhau - hai định dạng được liệt kê ở trên cùng với một dự phòng..

Rất may, một số kẻ thực sự thông minh đã tạo ra một thư viện có tên VideoJS. Đây là một bản dựng JavaScript cực kỳ nhỏ cho phép thực hiện một video Flash và HTML5 trong một thẻ. Tải xuống miễn phí và nguồn mở, vì vậy các nhà phát triển cũng được hoan nghênh đóng góp. Cả trình phát video Flash và HTML5 đều được tùy chỉnh giống hệt nhau để tất cả người dùng sẽ có cùng trải nghiệm. Kiểm tra ví dụ mã nhúng video HTML5 của họ:

Nguồn

Theo một lộ trình tương tự, dự án html5media cung cấp một phương pháp để hợp nhất tất cả các phương tiện truyền phát trực tuyến thành một kiểu tệp. Thật không may, ngay cả VideoJS cũng không hoàn hảo với mọi trình duyệt. Điều mà dự án html5media đã cố gắng làm là xoay quanh sự không tương thích của trình duyệt để hỗ trợ bất kỳ loại tệp video nào trong số tất cả các nền tảng. Và nó thực sự hoạt động khá tốt!

Phần kết luận

Tôi hy vọng hướng dẫn này về các phương pháp dự phòng hữu ích sẽ có ích cho các nhà phát triển web trên toàn thế giới. Nó có thể là các trang web xây dựng khó khăn để thích ứng với một loạt các thông số kỹ thuật phần mềm. Điều này đặc biệt đúng khi bạn làm việc với nhiều ngôn ngữ khác nhau như CSS và JavaScript.

Nhưng xu hướng đang chỉ ra rằng chúng ta đang tiếp cận một kỷ nguyên hỗ trợ nhiều hơn trong thiết kế web. Chưa bao giờ có nhiều trình duyệt và tiêu chuẩn web được thỏa thuận, đặc biệt là trong CSS3 & HTML5. Những kỹ thuật này chỉ là một số trong nhiều kỹ thuật cần xem xét khi xây dựng các trang web tuân thủ tiêu chuẩn. Là một nhà phát triển web, bạn sẽ luôn muốn theo xu hướng thiết kế mới nhất và thích nghi để phù hợp nhất với đối tượng của bạn.