áp dụng css vào html nhưng không phải iframe html

Tôi đang tạo biểu định kiểu người dùng cho tiện ích bổ sung 'thời trang'.áp dụng css vào html nhưng không phải iframe html

Áp dụng hộp tối trong suốt trên toàn bộ trang để duyệt qua đêm.

Tôi đang sử dụng:

html:before { 
    content:url()!important; 
    position:fixed!important; 
    width:100%!important; 
    height:100%!important; 
    top:0!important; 
    left:0!important; 
    background:rgba(2,3,3,.35)!important; 
    z-index:99999999999999999!important; 
    pointer-events:none!important; 
}

để tạo ra cố định, nằm phía div.

này hoạt động tốt, tuy nhiên, nếu có bất kỳ iframe trong trang web, nó sẽ áp dụng mã này vào HTML của iframe cũng như bạn có thể xem tại đây:

bởi vì những xã hội các tiện ích mạng dựa trên IFRAME, nó lặp lại mã vào các trang đó, tạo ra một lớp phủ đôi của hộp tối bán trong suốt mà tôi đã tạo.

các mong muốn nhìn sẽ là:

Tôi đã thử mọi thứ hack-ish, như áp dụng một z-index nhiều-cao hơn để iframe và xác định background-color và nền * của bất kỳ thứ gì trong iframe to 'trắng' và 'mờ' để nó 'nổi' trên đầu trang của trang mẹ HTML, nhưng điều này không hoạt động hoàn hảo. Tôi cũng đã thử một cái gì đó như:

html:not(iframe):before{}

nhưng điều này cũng không hiệu quả. Tôi tự hỏi nếu có một cách để làm những gì tôi đang cố gắng làm theo một cách mà không dựa vào 'html: trước' để tạo ra hiệu ứng tương tự, hoặc nếu có một cách để làm điều đó nhưng không có nó lặp lại bên trong html của iframe trên một trang.

Tôi đã hết sức nỗ lực để cố gắng làm việc này, vì vậy mọi trợ giúp sẽ thực sự được đánh giá cao. Cảm ơn bạn.

Nguồn

2013-05-07 fanfare

Đây là lần đầu tiên tôi nghe thuật ngữ duyệt qua đêm – Huangism

'iframe html: trước {display: none; } '? –

'html: not (iframe)' luôn khớp hoàn toàn đơn giản vì 'html' không phải là' iframe'. – BoltClock

Thật không may, không có cách nào sử dụng CSS để chỉ nhắm mục tiêu nội dung của một iframe từ bên trong nguồn của iframe, tức là trang chứa phần tử iframe.

Tôi giả sử, vì bạn đang sử dụng Stylish, nên CSS của bạn nằm trong biểu định kiểu người dùng Firefox. Nếu vậy, bạn có thể phải xem xét URL nguồn của các URL iframe đó, tạo quy tắc @-moz-document nhắm mục tiêu các URL đó tại miền của chúng và xóa phần tử giả html:before tương ứng.

Something như thế này, mà nên đi bên dưới những gì bạn đã có:

@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */) 
{ 
    html:before 
    { 
     content: none !important; 
    } 
}

Việc kê khai content: none vô hiệu hóa các phần tử giả, ngăn ngừa nó khỏi bị trả lại.

Có để loại trừ các miền cụ thể theo cách này có nghĩa là phương pháp này là rất hạn chế và không phải là rất linh hoạt ở tất cả, nhưng đó là tốt nhất tôi có thể nghĩ đến.

Nguồn

2013-05-07 20:55:53 BoltClock

Tôi đã thử nhắm mục tiêu theo tên miền cụ thể cho twitter, fb, v.v. nhưng vì một số lý do khiến nó không hoạt động đúng. Tuy nhiên, mã của bạn hoạt động hoàn hảo. Tôi nghĩ điều này sẽ phải làm. Tôi rất trân trọng điều này. :) – fanfare

@ user1975224: Không sao cả, tôi rất vui được giúp! Thành thật mà nói, đó là một cái gì đó nhanh chóng mà tôi whipped lên như tôi phải (và về) đầu giường - đó là gần như buổi sáng ngay bây giờ mà tôi! – BoltClock

Edit:

Tôi không biết về điều addon nhưng bạn có thể cung cấp cho thẻ HTML của bạn một ID và nhắm mục tiêu nó như vậy, mặc dù nếu bạn muốn điều này để áp dụng cho tất cả các trang thì đó là một vấn đề

hoặc có thể sử dụng html: first-child? Thực sự tôi không biết điều gì sẽ xảy ra, bạn có thể cung cấp cho nó một thử dù

Nguồn

2013-05-07 20:39:28 Huangism

Không, tất nhiên là không - 'html' là phần tử gốc nên nó sẽ không bao giờ khớp với nhau trong cả hai trường hợp. – BoltClock

css của anh ảnh hưởng đến tệp trong khung nội tuyến như thế nào, tôi không hiểu – Huangism

Tôi đoán nó có liên quan đến add-on mà anh ta đang sử dụng, đó là trình quản lý biểu định kiểu người dùng cho Firefox. – BoltClock

Bạn có thể muốn thử một con đường khác nhau:

html { 
    box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important; 
}

Demo

Bằng cách này, trang web vẫn là có thể sử dụng được khi trình duyệt của người dùng không hỗ trợ pointer-events.

Bạn cũng có thể muốn kiểm câu hỏi này: CSS - max z-index value

Để áp dụng những kiểu để chỉ yếu tố <html> tài liệu gốc, và không để iframe, bạn chỉ cần áp dụng các box-shadow để document.documentElement với JS:

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";

Nguồn

2013-05-07 20:53:53

Điều này là tốt. Cảm ơn gợi ý .. bây giờ vào việc tìm kiếm một cách để làm cho nó không hoạt động cho iframe: [. – fanfare

@ user1975224 Câu trả lời được cập nhật với giải pháp. –

CSS không cho phép bạn tạo kiểu HTML bên trong iframe. Vì bạn đang sử dụng một add-on, đây là một triển khai CSS không chuẩn. Kiểu dáng không được kế thừa bởi iframe vì khung nội tuyến về cơ bản là cửa sổ trình duyệt mới. Tiện ích bổ sung này đang thêm kiểu vào mọi trang HTML trong cửa sổ trình duyệt. Không có cách nào để trình duyệt biết rằng một trang nằm bên trong khung nội tuyến (ít nhất là không theo cách có thể truy cập qua CSS).

Nguồn

2013-05-07 20:55:29 aaronburrows

Đúng, mặc dù tiện ích bổ sung được đề cập chỉ là giao diện người dùng đối với các bảng định kiểu người dùng của Firefox, phần này là không thể thiếu đối với [cascade] (http://www.w3.org/TR/CSS21/cascade.html#cascading-order) và chắc chắn là một phần của tiêu chuẩn. – BoltClock

Phải, nhưng Firefox đang áp dụng kiểu cho mỗi phần tử html. CSS không xếp tầng từ một phần tử html vào phần tử html trong [khung nội tuyến] (http://stackoverflow.com/questions/6494721/css-overide-body-style-for-content-in-iframe). Nó áp dụng biểu định kiểu người dùng cho cả hai, riêng biệt. – aaronburrows

áp dụng css vào html nhưng không phải iframe html

Trả lời

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