2013-06-03 20 views
11

Tôi cần một phương pháp để tôi có thể tập hợp các tệp CSS vào một phần nhất định của trang. Về lý thuyết, ví dụ này nên làm những gì tôi cần:Bảng kiểu tạp chí không có HTML5

<html> 
<head> 
</head> 
<body> 

    <div> 
     <style scope> 
      @import url("style1.css"); 
     </style> 
     <div class="testText">Test with Style 1</div> 
    </div> 
    <div> 
     <style scope> 
      @import url("style2.css"); 
     </style> 
     <div class="testText">Test with Style 2</div> 
    </div> 
</body> 
</html> 

Tuy nhiên, tôi phát hiện ra rằng phần tử phạm vi chỉ có sẵn trong một số trình duyệt ngay bây giờ (Firefox 21+ chủ yếu). Vì vậy, tôi đang tìm một cách lười biếng hoặc một vấn đề. Tôi cần tích hợp một số nội dung với các kiểu khác nhau vào một trang web. Chúng tôi đã thử tải cả hai tập tin CSS, nhưng có một số tên kiểu xuất hiện trong cả hai bảng định kiểu, vì vậy sẽ có rất nhiều việc để đổi tên tên kiểu trong một tệp và trong nội dung html tương ứng, đặc biệt vì bạn không thể chỉ refactor với Eclipse ... :)

Có giải pháp nào khác có thể hiển thị kết quả tương thích rộng rãi không?

Trân

+0

Chrome cũng hỗ trợ kiểu được sắp xếp, quá – gustavohenke

+0

@gustavohenke Không theo mặc định, vì vậy, người ta có thể giả định rằng nó không khả dụng với Chrome. –

+1

Rob W đúng, trên Chrome, bạn cần bật chế độ thử nghiệm. Những gì tôi đang tìm kiếm là một giải pháp thay thế sẽ hoạt động với IE8 + và Firefox 17 + ... Nếu nó có nghĩa là sử dụng một số khuôn khổ css hoặc các thủ thuật khác, thì tốt, chỉ muốn xem có cách nào khác không ... – Martin

Trả lời

8

phong cách Scoped không hỗ trợ tốt vào thời điểm này và sẽ gây ra những vấn đề bạn nếu bạn đang mong bất kỳ loại bảo hiểm qua trình duyệt.

Cách duy nhất bạn có thể thực sự đạt được những gì bạn đang theo sau là sử dụng một tên lớp duy nhất (hoặc ID) cho mỗi 'phần' và sau đó sử dụng thừa kế để sắp xếp không gian tên CSS của bạn. Vì vậy, nếu bạn muốn nhắm đến một phần cụ thể của trang, cung cấp cho các bậc cha mẹ của nó một classname (ví dụ: class="testone") và sau đó hãy chắc chắn rằng bất kỳ phong cách bạn muốn áp dụng cho phần đó được nối với classname rằng:

.testone .title{...} 
.testone h1{...} 
.testone a{... 

v.v.

Nếu không, cũng có jQuery-based scope polyfill sẽ cung cấp cho bạn cách làm việc độc lập hơn với CSS có phạm vi. Nó không phải là một cái gì đó tôi đã làm việc với vì vậy không có bất kỳ kinh nghiệm để cung cấp, nhưng nó trông rất hứa hẹn từ những khoảnh khắc tôi đã dành với nó! Hãy nhớ rằng với bất kỳ giải pháp dựa trên JavaScript nào như thế này, bất kỳ ai tải trang của bạn mà không kích hoạt JavaScript sẽ không nhận được thêm nhiều tính năng bổ sung này, vì vậy điều quan trọng là phải đảm bảo rằng trang vẫn hoạt động theo cách có thể chấp nhận được ngay cả khi JS bị tắt.

+0

OK, đã thử cách tiếp cận và nó hoạt động, sẽ thêm nó vào phản hồi của bạn. Tuy nhiên, điều này có nghĩa là tôi cần phải đổi tên các kiểu trong tất cả các tệp css mà tôi đã có, thay thế HTML dễ dàng hơn vì nó có thể được kế thừa ... Có cách nào để tạo kiểu thừa kế tương thích ngược với các tệp html không được chạm không? – Martin

+1

Hi Martin, nó thực sự phụ thuộc vào cách trang web của bạn được thiết lập. Bạn không cần phải chỉnh sửa các swath lớn của CSS của bạn. Bạn thường sẽ có một tập hợp các kiểu CSS cơ bản - sẽ áp dụng trên toàn bộ trang web và sau đó sử dụng các khai báo mà tôi đã đề xuất ở trên làm ghi đè để làm cho các kiểu cụ thể hơn cho các vị trí/tình huống nhất định. Nếu không, cũng có một polyfill có sẵn, mặc dù tôi đã không làm bất cứ điều gì với nó nên không có kinh nghiệm. Tôi sẽ cập nhật câu trả lời của mình. – johnkavanagh

+0

Wow, các polyfill dựa trên jQuery có vẻ giống như những gì chúng ta cần ... Sẽ thử nó ra và xem nếu nó hoạt động. Sau khi tất cả, các trang mới sẽ chỉ sử dụng phong cách mới, và chúng tôi muốn loại bỏ các phong cách cũ cuối cùng, nó chỉ là nhu cầu giữ các công cụ tách biệt với một chi phí thấp ... – Martin

2

Tên thuộc tính trong bản nháp HTML5 là scoped, không phải scope.

Hỗ trợ cho nó đang được triển khai từ từ, nhưng có rất ít lý do để sử dụng thuộc tính hoặc trang tính kiểu tạp chí. Hầu hết các trình duyệt sẽ chỉ cần <style scoped> đơn giản là <style> và áp dụng cho toàn bộ tài liệu.

Vì vậy, cách tốt nhất là phân tích vấn đề bạn đang cố giải quyết và tìm cách tiếp cận khác với nó. Trong nhiều trường hợp, nó là tầm thường, sử dụng các bộ chọn ngữ cảnh phù hợp. Gán thuộc tính id cho một phần tử và sử dụng công cụ chọn id làm thành phần đầu tiên của bộ chọn.

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