it-swarm-vi.com

Các cách tốt nhất để thực hiện css trình duyệt chéo là gì?

Các cách tốt nhất để thực hiện css trình duyệt chéo là gì?

Quy tắc: một cách tiếp cận cho một câu trả lời.

4
stacker

Bạn có thể sử dụng nhận xét có điều kiện để khắc phục sự cố với Internet Explorer. Ngoài ra, bạn không cần phải nhắm mục tiêu riêng biệt Firefox/Chrome/Opera với nhau, tất cả đều hỗ trợ các tiêu chuẩn.

Bộ nhớ đệm không nên nhập vào nó; bạn nên phục vụ cùng một mã cho tất cả các trình duyệt.

4
DisgruntledGoat

Cách tốt nhất, dễ nhất là sử dụng thư viện. Các thư viện như OOCSS, Blueprint hoặc 960s đã được thiết kế để sao chép màn hình của họ trên các trình duyệt chính. Hầu hết thời gian bạn còn lại sau đó, hầu hết thời gian, là đảm bảo các kiểu tùy chỉnh của bạn tuân thủ nhiều trình duyệt và việc đánh dấu của bạn không gây ra bất kỳ vấn đề nào.

Tránh hack như bệnh dịch hạch nếu có thể (có, sử dụng điều kiện).

2
Kenneth Love

Khi tôi đọc câu hỏi và câu trả lời như thế này, tôi bắt đầu nghĩ rằng mình có thể bị điên, nhưng tôi đã viết các trang web khá phức tạp bằng cách sử dụng khá nhiều css, bao gồm cả css3 và các mánh khóe khác, và tôi chưa bao giờ phải dùng đến những bình luận có điều kiện.

Tuy nhiên, tôi liên tục kiểm tra công việc của mình trên nhiều trình duyệt (tôi chủ yếu viết mã trong Chrome và kiểm tra trong firefox và eg7) trong quá trình mã hóa. Khi tôi thấy các vấn đề xuất hiện, tôi chỉ lùi lại một bước, tìm hiểu tại sao mọi thứ lại hiển thị khác đi và thường chọn một cách tiếp cận hơi khác.

Điều đó đang được nói, tôi có một lợi ích trí tuệ đó ​​là những cách hack và phương pháp khác nhau. Tôi đặc biệt thích đọc về các kỹ thuật được sử dụng bởi CSS3 PIE và Modernizr.

Cách tốt nhất để tiếp cận mã hóa trình duyệt chéo là nhận thức được các cách khác nhau mà các trình duyệt khác nhau sẽ diễn giải mã của bạn và viết mã theo cách mà họ không thể giúp nhưng làm cho đúng.

1
Zach Lysobey

thiết kế và phát triển với các tiêu chuẩn web
[.___.] Xác thực tài liệu của bạn và các biểu định kiểu liên tục!
[.__.] kiểm tra đa trình duyệt/đa nền tảng hàng ngày!
[.__.] ít nhất trước khi bạn gửi yêu cầu kéo hoặc thực hiện cam kết với kho lưu trữ.

dù sao bạn cũng nên viết tài liệu tuân thủ, nhưng điều này rất quan trọng để viết css đa trình duyệt/đa nền tảng.

lưu ý: sức mạnh thực sự của xác nhận không tuân thủ 100% thời gian; bạn sẽ nhận được siêu năng lực một khi bạn hiểu những gì không cần phải xác nhận, có thể bị loại bỏ và cần được sửa chữa ngay lập tức.
[.__.] và đó là sức mạnh: xác nhận liên tục củng cố các quy tắc của thông số kỹ thuật và bạn sẽ thành thạo. liên tục kiểm tra đa trình duyệt/đa nền tảng giúp bạn quan tâm đến các trang mẫu tác nhân người dùng của trình duyệt mà bạn đang chiến đấu nhiều nhất. phù hợp với phong cách của bạn như vậy, bạn thậm chí có ít vấn đề hơn.

bạn có thể sử dụng các thư viện và khung nếu bạn thích, nhưng bạn đang trừu tượng hóa tất cả những tổn thương và đau đớn ra khỏi quy trình công việc của mình và bạn sẽ không bao giờ có được con mắt chi tiết tốt cho các phong cách mà bạn đang yêu cầu ở đây. tuy nhiên, libs/framework làm rất tốt việc cấp cho bạn sức mạnh đó, mặc dù thường đi kèm với sự phình to của trang.

reset.css, normalizr.css và thậm chí là *{border:none; margin:0; padding:0) reset là vũ khí trong kho vũ khí của bạn để cân bằng sân chơi giữa trình duyệt điều khiển phong cách của bạn hoặc của chính nó.

vâng, tôi đã giới thiệu * "hack", với hai tùy chọn khác. mỗi người có vị trí riêng khi chiến đấu với các tác nhân người dùng.

hơn nữa, thật phi lý khi không tận dụng các lỗ hổng mà một số tác nhân người dùng có, bởi vì các lỗ hổng nói trên sẽ không hiển thị với 100% liên tục và cần được xử lý. khi làm như vậy, chính các lỗ hổng cung cấp cho bạn một cái móc hoàn hảo để phát hiện tính năng, hoặc thậm chí đánh hơi chúng ra, để chúng có thể được xử lý phù hợp!

sử dụng mọi hack, lỗ hổng, tính năng, phi tính năng mà bạn có thể dùng tay để bẻ cong dom và buộc các trình duyệt nội tuyến.

......tôi muốn có nó. nhưng nếu bạn đang phát triển với các tiêu chuẩn web, bạn sẽ thấy rằng bạn sẽ không cần chúng nhiều như trước đây.

và vì bạn đang dựa vào chúng ít hơn, khi bạn có cơ hội sử dụng nó để giải quyết vấn đề, hãy sử dụng nó một cách nhanh chóng! bạn đã biết vấn đề là gì và bạn cũng có một giải pháp nhắm vào vấn đề và không có gì khác.

mỗi trình duyệt có cách riêng để được nhắm mục tiêu, rõ ràng nhất là nhận xét có điều kiện.
[.___.] sử dụng các nhận xét có điều kiện cho eg6-9 và sử dụng biên dịch có điều kiện để hiển thị các kiểu cho eg10 và eg11.
[.__.] nhưng một lần nữa, nếu bạn là dwws và dvwws, bạn có thể đưa chúng vào mọi tài liệu bạn tạo, nhưng tìm các biểu định kiểu là cằn cỗi, lưu trữ một số kiểu chỉ nhắm mục tiêu chênh lệch 1-3 pixel hoặc lấy nền -Màu sắc để kéo dài (hoặc không) 100%, v.v.

1
albert

Những gì tôi làm là sử dụng CSS thiết lập lại và sau đó là các câu điều kiện. CSS thiết lập lại khắc phục gần như tất cả các vấn đề và sửa chữa có điều kiện bất kỳ vấn đề nào trong IE. Nếu có sự khác biệt giữa các trình duyệt khác, tôi thường cố gắng làm việc xung quanh chúng, chẳng hạn như tăng chiều rộng cho tất cả các trình duyệt hoặc kích thước phông chữ.

Cá nhân tôi sử dụng CSS YUI reset.

0
Darryl Hein

CSS3 PIE trông khá hứa hẹn là lớp tương thích CSS3. Tất nhiên, có những lo ngại về trình duyệt chéo khác cho các phiên bản CSS trước đó.

Câu hỏi liên quan đến IE6, rất nhiều thông tin hữu ích: Tôi có nên hỗ trợ IE6 không?

0
JasonBirch

Đặt trước điều này với cảnh báo không sử dụng hack CSS.

Từ quan điểm hiệu suất thuần túy, bộ nhớ đệm sẽ hiệu quả hơn với một tệp duy nhất nếu không vì lý do nào khác ngoài việc nó đáp ứng một lần với một yêu cầu HTTP từ máy khách. Ngoài việc phục vụ cùng một tệp cho mọi người dùng bất kể trình duyệt, Tải xuống chặn nhận xét có điều kiện trong một số trường hợp.

Để nhắm mục tiêu tất cả các phiên bản Internet Explorer khác nhau của bạn trong một tệp có nhiều bản hack CSS khác nhau. Hãy nhớ rằng những điều này sẽ khiến CSS của bạn không hợp lệ (nếu xác thực là mối quan tâm của bạn).

cơ thể {[.__.] màu: đỏ;/* tất cả các trình duyệt */[.__.] màu: xanh\9;/* IE8 trở xuống */[.__.] * Màu: vàng;/* IE7 trở xuống */[.__.] _Màu: màu cam;/* IE6 */[.__.]}

Việc chặn nhận xét có điều kiện thực sự chỉ là một vấn đề trong một số trường hợp trong IE8 khi có nhận xét có điều kiện. Tùy thuộc vào những gì bạn nghĩ về việc hỗ trợ Internet Explorer, điều này có thể hoặc không phải là một vấn đề.

Cá nhân tôi sử dụng ý kiến ​​có điều kiện. Cá nhân tôi tin rằng các vụ hack CSS là khủng khiếp và bất kỳ hiệu suất nào đạt được từ các nhận xét có điều kiện là thật hoặc tưởng tượng là không đáng để gặp rắc rối mà CSS bị hack thường gây ra.

Nhận xét có điều kiện tương đối dễ thực hiện và có bài viết tuyệt vời về việc sử dụng chúng trên Quirksmode. Sau đây sẽ chỉ giải quyết IE6:

<! - [if IE 6]> [.__.] <Link rel = "styleheet" type = "text/css" href = "/ media/css/eg6.css" /> [ .__.] <! [endif] ->

Có cú pháp cho phép bạn nhắm mục tiêu Internet Explorer phiên bản bằng, nhỏ hơn, lớn hơn, nhỏ hơn hoặc bằng, lớn hơn hoặc bằng một số phiên bản đã cho. Ví dụ trên là một trong những bằng.

0
Bryson