Ngăn không cho CSS hiện có tạo kiểu HTML/CSS được tiêm HTML

Tôi đang làm việc trên một dự án đưa JS + CSS + HTML lên các trang web mà tôi không có quyền kiểm soát.Ngăn không cho CSS hiện có tạo kiểu HTML/CSS được tiêm HTML

Tôi lo lắng về việc tạo kiểu trang máy chủ mã được chèn của tôi - Tôi muốn mã được tiêm của mình chỉ tuân theo kiểu dáng của tôi chứ không phải của chúng.

Hiện tại, phương pháp duy nhất để thực hiện điều này tôi có thể nghĩ đến việc chỉ định rõ ràng mọi thẻ có thể cho lớp chứa của lớp đó (sử dụng các giá trị mặc định của trình duyệt đã biết) và dựa vào thừa kế cho các quy tắc đó cho phần còn lại của HTML được tiêm của tôi. CSS này sẽ cần xuất hiện ở cuối thẻ <head> của trang.

Tôi không nghĩ đó là giải pháp tốt nhất, tuy nhiên, và tôi không mong muốn triển khai nó. Chắc chắn có những cách tốt hơn.

Nguồn

2009-04-09 Tom Corelis

Những người khác đã gợi ý những cách rất tốt để ngăn chặn CSS của bạn từ ảnh hưởng của trang, cũng như làm chắc chắn rằng CSS của bạn được ưu tiên, nhưng dường như bạn quan tâm nhất đến CSS của trang ảnh hưởng đến bạn - tức là thêm một phong cách sôi nổi, bất ngờ (giống như làm cho tất cả các div có nền màu hồng).

Cách duy nhất tôi có thể nghĩ để ngăn chặn kiểu dáng của chúng ảnh hưởng đến mã được tiêm của bạn sẽ là để bạn sandbox những gì bạn đã tiêm, như trong iframe. Nếu không, có quá nhiều thứ bạn phải xác định - bạn phải xác định mọi kiểu đơn (padding, border, margin, background ... danh sách tiếp tục bật) trên bộ chọn "*" (hoặc tốt hơn) Tuy nhiên, "#yourid *", vì vậy bạn chỉ cần ghi đè nội dung của riêng bạn), chỉ để bạn có thể đảm bảo kiểm soát tuyệt đối đối với CSS của mình.

Edit: Tôi nhận ra rằng giải pháp sau này sẽ không nhất thiết phải quá đau đớn, nếu bạn đang sử dụng omni-selector để thiết lập lại tất cả mọi thứ với phạm vi giới:

#myid * { 
    somestyle1: default; 
    somestyle2: default; 
    ... 
}

tôi đã tìm thấy someone who has written up such a solution. Nếu bạn di chuyển xuống đủ xa trên trang, bạn sẽ thấy nó (từ SuzyUK). Nó không nhìn hoàn chỉnh, nhưng là một khởi đầu tốt cho chắc chắn.

(Tôi cũng muốn biết nếu có cách nào tốt để ngăn chặn điều này. Tôi đã viết kịch bản Greasemonkey trước khi chèn mã lên trang và phải viết CSS để ghi đè CSS của trang, nhưng trong những trường hợp đó, tôi biết mục tiêu của mình là ai và có thể điều chỉnh CSS của tôi trực tiếp về phía trang.)

Nguồn

2009-04-09 04:17:55

Đây là cài đặt lại CSS nhắm mục tiêu theo phần tử mới nhất: https://github.com/premasagar/cleanslate – Griffin

Bạn sẽ chỉ phải rất specific với bộ chọn CSS của mình. Đó là, cụ thể hơn nhiều so với các quy tắc CSS của trang chủ. Bạn cũng có thể muốn thêm một loại thiết lập lại CSS toàn cầu được sửa đổi để chỉ đặt lại HTML của bạn. Bằng cách đó, tôi có nghĩa là một cái gì đó mà resets tất cả các màu sắc, hình nền, phông chữ, padding, vv, trở lại một tiêu chuẩn duy nhất. Từ đó bạn có thể xây dựng phong cách của riêng bạn.

Nguồn

2009-04-09 04:12:17 nickf

+1 để đặt lại Eric Meyer và không phải là sợ hãi * {padding: 0; lề: 0} – alex

Đặt lại CSS là để chuẩn hóa trên các trình duyệt, không phải trên các biểu định kiểu CSS. –

có, nhưng đặt lại CSS (với độ đặc hiệu cao hơn CSS chủ) sẽ ghi đè các quy tắc đã đặt trước đó (xóa nền màu hồng vui nhộn và những thứ tương tự) – nickf

Quấn HTML tiêm của bạn với một đặc biệt-xếp <div>, chẳng hạn như

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

Sau đó, trong CSS của bạn, tiền tố tất cả các quy tắc với .my-super-specialized-unique-wrapper và sử dụng !important trên tất cả các quy tắc. Điều đó sẽ hướng dẫn trình duyệt của khách hàng xem quy tắc của bạn là tối cao đối với bất kỳ yếu tố nào phù hợp, bất kể các kiểu nào khác có thể nhắm mục tiêu chúng - ngay cả khi các quy tắc khác ngoài tầm kiểm soát của bạn cụ thể hơn.

Nguồn

2009-04-09 04:12:37

Cảm ơn bạn đã trả lời! Tôi đã sử dụng tên lớp siêu cụ thể cho mọi thứ, vậy là xong rồi. :-) Tôi có một số câu hỏi mặc dù: - Quy tắc CSS sẽ chỉ định tên phần tử (ví dụ: 'lớp bảng div {}', v.v.) ghi đè quan trọng - Tôi có cần chỉ định không? –

! Ghi đè quan trọng * mọi thứ * khác, bất kể khi nào, ở đâu hoặc cách được chỉ định. Bạn cần phải xác định nó cho mỗi kiểu trên mỗi quy tắc mà bạn có quan tâm rằng phong cách có thể bị ghi đè bởi một kiểu khác ngoài tầm kiểm soát của bạn. –

Tất nhiên, có khả năng một mối quan tâm thêm nếu các bảng định kiểu bạn không kiểm soát cũng sử dụng! Sau đó, tôi tin rằng đó là một vấn đề mà quan trọng được tuyên bố cuối cùng. –

yếu tố html Tại sao không tiêm với inline định dạng như thế này:

<p style="color:red">This to be injected</p>

inline phong cách được ưu tiên hơn bất kỳ quy tắc khác, và bạn đã tạo đánh dấu để chèn nó.

giải pháp khác sẽ được sử dụng rất cụ thể của id DOM trên các yếu tố của bạn và sau đó tạo kiểu cho chúng về CSS được trang bị

Nguồn

2009-04-09 04:14:06

điều này sẽ không giúp ích nếu máy chủ lưu trữ CSS thay đổi kiểu theo các cách khác, ví dụ: p {font-weight: bold} ... bạn sẽ kết thúc với các đoạn màu đỏ và đậm. – nickf

Đúng. Tôi cho rằng anh ta đã phác họa tất cả các thuộc tính phong cách mà anh ta muốn, không chỉ màu sắc. Đó chỉ là một ví dụ. –

Nếu bạn đang sử dụng trình duyệt Mozilla, bạn có thể thực sự (nếu bất hợp pháp) thêm nội dung DOM hiển thị vào phần tử < html> phần tử < body>. Điều này sẽ tránh bất kỳ kiểu nào khớp với nội dung và được thừa kế bởi nội dung của bạn. Có thể một số kiểu phù hợp trên html, điều này sẽ đánh bại kỹ thuật này, nhưng tôi thấy nó có ích.

ví dụ: sử dụng jquery: $ ('html'). append ('< div id = "mycontent"> blah blah blah </div>');

Sử dụng thư viện phổ biến cũng là một thách thức khi bạn không muốn thể hiện thư viện ảnh hưởng đến việc sử dụng thư viện được xác định bởi các trang bạn đang sửa đổi. '@require' của Greasemonkey không có tác dụng với tôi. Tôi tìm thấy nó cần thiết (nhưng có thể!) Để lưu bất kỳ giá trị hiện tại nào của hai hoặc ba tên toàn cầu được gán bởi kịch bản lệnh jquery, chèn cá thể của thư viện vào DOM, đợi cho nó được nạp (phải sử dụng bộ đếm thời gian, đó là gây phiền nhiễu nhưng tôi không thể nhìn thấy một cách xung quanh nó), bộ nhớ cache các giá trị được giao cho các globals trong không gian tên của riêng tôi để sử dụng riêng của tôi, và khôi phục lại những cái đã lưu.

Nguồn

2009-04-23 06:57:26

Tôi không chắc chắn làm thế nào nó nên được sử dụng, các trình duyệt hỗ trợ cho điều này, nhưng nó là một trong những nguyên nhân chính để sử dụng http://www.w3.org/TR/shadow-dom/

Ý tưởng là bạn có thể chèn một trang web thành phần, mà có thể được tạo kiểu đầy đủ và có các sự kiện cụ thể chỉ ảnh hưởng đến shadow-DOM (vì vậy mô-đun của bạn sẽ không ảnh hưởng đến phần còn lại của trang).

Nguồn

2015-05-03 21:38:57 eloyesp

Ngăn không cho CSS hiện có tạo kiểu HTML/CSS được tiêm HTML

Trả lời

Các vấn đề liên quan