Tôi đoán đây có thể là một vấn đề về bối cảnh hạn chế, ví dụ như các trình soạn thảo WYIWYG trên một hệ thống web được sử dụng bởi người dùng không lập trình viên , điều đó hạn chế khả năng tuân theo các tiêu chuẩn. Đôi khi (như TinyMCE), đó là một lib đặt nội dung / mã của bạn vào trong textareathẻ, được trình soạn thảo hiển thị dưới dạng lớndiv thẻ . Và đôi khi, nó có thể là một phiên bản cũ của các biên tập viên.
Tôi cho rằng:
- những người dùng không phải lập trình viên này không có kênh mở với quản trị viên hệ thống (hoặc webdevs của tổ chức), để yêu cầu bao gồm một số quy tắc CSS tại hệ thống
stylesheets . Trên thực tế, nó sẽ không thực tế đối với các quản trị viên (hoặc webdevs), xem xét số lượng yêu cầu theo nghĩa mà họ sẽ có.
- hệ thống này là di sản và vẫn không hỗ trợ các phiên bản HTML mới hơn.
Trong một số trường hợp, không có stylequy tắc sử dụng , nó có thể là một kinh nghiệm thiết kế rất kém. Vì vậy, vâng, những người dùng này cần tùy biến. Được rồi, nhưng giải pháp sẽ là gì, trong kịch bản này? Xem xét các cách khác nhau để chèn CSS vào một htmltrang, tôi cho rằng các giải pháp sau:
Lựa chọn thứ 1: hỏi hệ thống của bạn
Hỏi người quản trị hệ thống của bạn để bao gồm một số quy tắc CSS tại hệ thống stylesheets. Đây sẽ là một giải pháp CSS bên ngoài hoặc bên trong . Như đã nói, nó có thể là không thể.
Tùy chọn thứ 2: <link>bật<body>
Sử dụng biểu định kiểu bên ngoài trên bodythẻ, nghĩa là sử dụng linkthẻ bên trong khu vực bạn có quyền truy cập (đó sẽ là, trên trang web, bên trong bodythẻ chứ không phải trong headthẻ). Một số nguồn cho biết điều này không sao, nhưng "không phải là một thực hành tốt", như MDN :
Một <link>phần tử có thể xuất hiện trong phần tử <head>hoặc <body>phần tử, tùy thuộc vào việc nó có loại liên kết có thân không . Ví dụ, stylesheetloại liên kết là body-ok, và do đó <link rel="stylesheet">được cho phép trong cơ thể. Tuy nhiên, đây không phải là một thực hành tốt để làm theo; nó có ý nghĩa hơn để tách các <link>yếu tố của bạn khỏi nội dung cơ thể của bạn, đưa chúng vào <head>.
Một số người khác, giới hạn nó trong <head>phần, như w3schools :
Lưu ý: Phần tử này chỉ đi trong phần đầu, nhưng nó có thể xuất hiện bất kỳ số lần.
Kiểm tra
Tôi đã thử nghiệm nó ở đây (môi trường máy tính để bàn, trên trình duyệt) và nó hoạt động với tôi. Tạo một tệp foo.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
Và sau đó, một tệp CSS, trong cùng thư mục, được gọi là bar.css:
.test1 {
color: green;
};
Chà, điều này sẽ có vẻ khả thi nếu bạn có cách tải lên một tệp CSS ở đâu đó trong hệ thống tổ chức. Có lẽ đây sẽ là trường hợp.
Tùy chọn thứ 3: <style>bật<body>
Sử dụng biểu định kiểu internet trên bodythẻ, nghĩa là sử dụng stylethẻ bên trong khu vực bạn có quyền truy cập (đó sẽ là, trên trang web, bên trong bodythẻ chứ không phải trong headthẻ). Đây là những gì câu trả lời của Charles Salvia và Sz ở đây. Chọn tùy chọn này, xem xét mối quan tâm của họ.
Tùy chọn thứ 4, 5 và 6: Cách JS
Thông báo Những cái này có liên quan đến việc sửa đổi thành <head>phần của trang. Có lẽ điều này sẽ không được phép bởi các quản trị viên hệ thống của tổ chức. Vì vậy, bạn nên xin phép họ trước.
Được rồi, giả sử được cấp, chiến lược là truy cập vào <head> . Làm sao? Phương pháp JavaScript.
Tùy chọn thứ 4: mới <link>trên<head>
Đây là một phiên bản khác của tùy chọn thứ 2. Sử dụng biểu định kiểu bên ngoài trên <head>thẻ, nghĩa là sử dụng <link>phần tử bên ngoài khu vực bạn có quyền truy cập (đó sẽ là, trên trang web, không phải bên trong bodythẻ và có trong headthẻ). Giải pháp này tuân thủ các khuyến nghị của MDN và w3schools , như được trích dẫn ở trên, về giải pháp tùy chọn thứ 2. Một Linkđối tượng mới sẽ được tạo ra.
Để giải quyết vấn đề thông qua JS, có nhiều cách nhưng tại các bộ mã sau đây tôi chứng minh một cách đơn giản.
Kiểm tra
Tôi đã thử nghiệm nó ở đây (môi trường máy tính để bàn, trên trình duyệt) và nó hoạt động với tôi. Tạo một tệp f.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Bên trong scriptthẻ:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
Và sau đó tại tệp CSS, trong cùng thư mục, được gọi bar.css(như ở tùy chọn thứ 2):
.test1 {
color: green;
};
Như tôi đã nói: điều này sẽ có vẻ khả thi nếu bạn có cách tải lên tệp CSS ở đâu đó trong hệ thống tổ chức.
Tùy chọn thứ 5: mới <style>trên<head>
Sử dụng biểu định kiểu nội bộ mới trên <head>thẻ, nghĩa là sử dụng một <style>yếu tố mới bên ngoài khu vực bạn có quyền truy cập (đó sẽ là, trên trang web, không phải bên trong bodythẻ và có trong headthẻ). Một Styleđối tượng mới sẽ được tạo ra.
Điều này được giải quyết thông qua JS. Một cách đơn giản được thể hiện sau đây.
Kiểm tra
Tôi đã thử nghiệm nó ở đây (môi trường máy tính để bàn, trên trình duyệt) và nó hoạt động với tôi. Tạo một tệp foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Bên trong scriptthẻ:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
Tùy chọn 6: sử dụng một hiện <style>trên<head>
Sử dụng biểu định kiểu nội bộ hiện có trên <head>thẻ, nghĩa là sử dụng một <style>yếu tố bên ngoài khu vực bạn có quyền truy cập (sẽ có trên trang web, không phải bên trong bodythẻ và có trong headthẻ), nếu một số tồn tại. Một Styleđối tượng mới sẽ được tạo hoặc một CSSStyleSheetđối tượng sẽ được sử dụng (trong mã của giải pháp được thông qua ở đây).
Đây là một số quan điểm rủi ro.
Đầu tiên , bởi vì nó có thể không tồn tại một số <style> đối tượng. Tùy thuộc vào cách bạn triển khai giải pháp này, bạn có thể được undefinedtrả lại (hệ thống có thể sử dụng biểu định kiểu bên ngoài ).
Thứ hai , bởi vì bạn sẽ chỉnh sửa tác phẩm của tác giả thiết kế hệ thống (vấn đề quyền tác giả).
Thứ ba , bởi vì nó có thể không được phép tại chính trị an toàn CNTT của tổ chức bạn. Vì vậy, hãy xin phép để làm điều này (như trong các giải pháp JS khác) .
Giả sử, một lần nữa, sự cho phép đã được cấp:
Bạn sẽ cần xem xét một số hạn chế của phương pháp có sẵn theo cách này : insertRule(). Giải pháp được đề xuất sử dụng kịch bản mặc định và thao tác đầu tiên stylesheet, nếu một số tồn tại.
Kiểm tra
Tôi đã thử nghiệm nó ở đây (môi trường máy tính để bàn, trên trình duyệt) và nó hoạt động với tôi. Tạo một tệp foo_bar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
Bên trong scriptthẻ:
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
Một cách tiếp cận khác cho giải pháp này là sử dụng CSSStyleDeclarationđối tượng (tài liệu tại w3schools và MDN ). Nhưng nó có thể không thú vị, xem xét rủi ro để ghi đè các quy tắc hiện có trên CSS của hệ thống.
Tùy chọn thứ 7: CSS nội tuyến
Sử dụng CSS nội tuyến . Điều này giải quyết vấn đề, mặc dù tùy thuộc vào kích thước trang (trong các dòng mã), việc bảo trì (bởi chính tác giả hoặc người được chỉ định khác) của mã có thể rất khó khăn.
Nhưng tùy thuộc vào bối cảnh vai trò của bạn tại tổ chức hoặc chính sách bảo mật hệ thống web của nó, đây có thể là giải pháp khả dụng duy nhất cho bạn.
Kiểm tra
Tạo một tệp _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Trả lời đúng câu hỏi của Gagan
Làm thế nào là một trình duyệt được cho là để hiển thị css không liền kề?
- Có phải tạo một số cấu trúc dữ liệu bằng cách sử dụng tất cả các kiểu css trên một trang và sử dụng cấu trúc đó để hiển thị không?
- Hoặc nó kết xuất bằng cách sử dụng thông tin phong cách theo thứ tự nó nhìn thấy?
(trích dẫn thích nghi)
Để có câu trả lời chính xác hơn, tôi đề nghị Google các bài viết này:
- Cách trình duyệt hoạt động: Đằng sau hậu trường của các trình duyệt web hiện đại
- Kết xuất cây, bố cục và sơn
- Điều đó có nghĩa gì với việc Render Render một trang web?
- Cách hiển thị trình duyệt hoạt động - đằng sau hậu trường
- Kết xuất - Tiêu chuẩn HTML
- 10 Kết xuất - HTML5