ฉันเดาว่านี่อาจเป็นปัญหาเกี่ยวกับบริบทที่ จำกัด เช่นบรรณาธิการ WYIWYG บนระบบเว็บที่ใช้โดยผู้ใช้ที่ไม่ใช่โปรแกรมเมอร์ซึ่งจำกัดความเป็นไปได้ของการปฏิบัติตามมาตรฐาน บางครั้ง (เช่น TinyMCE) มันเป็น lib ที่วางเนื้อหา / รหัสของคุณไว้ในtextareaแท็กซึ่งถูกแสดงผลโดยตัวแก้ไขเป็นdivแท็กขนาดใหญ่ และบางครั้งก็อาจเป็นบรรณาธิการรุ่นเก่า
ฉันคิดว่า:
- เหล่านี้ไม่โปรแกรมเมอร์ผู้ใช้ไม่ได้มีการเปิดช่องทางกับผู้ดูแลระบบ (หรือ webdevs สถาบัน) ที่จะขอรวมทั้งกฎระเบียบบาง CSS
stylesheetsที่ระบบ ที่จริงแล้วมันจะเป็นไปไม่ได้สำหรับผู้ดูแลระบบ (หรือ webdevs) โดยพิจารณาจำนวนคำขอในแง่ที่ว่าพวกเขาจะมี
- ระบบนี้เป็นระบบดั้งเดิมและยังไม่รองรับ HTML เวอร์ชันใหม่กว่า
ในบางกรณีหากไม่มีstyleกฎการใช้งานอาจเป็นประสบการณ์การออกแบบที่แย่มาก ดังนั้นใช่ผู้ใช้เหล่านี้ต้องการการปรับแต่ง ตกลง แต่สิ่งที่จะแก้ปัญหาในสถานการณ์นี้? เมื่อพิจารณาถึงวิธีต่างๆในการแทรก CSS ในhtmlหน้าเว็บฉันคิดว่าโซลูชันเหล่านี้:
ตัวเลือกที่หนึ่ง: ถาม sysadm ของคุณ
ขอ ADM ระบบของคุณสำหรับรวมทั้งกฎระเบียบบาง CSS stylesheetsที่เป็นระบบ นี่จะเป็นโซลูชันCSS ภายนอกหรือภายใน อย่างที่บอกไปแล้วว่ามันอาจเป็นไปไม่ได้
ตัวเลือกที่ 2: <link>เปิด<body>
ใช้สไตล์ชีตภายนอกบนbodyแท็กเช่นการใช้linkแท็กภายในพื้นที่ที่คุณมีสิทธิ์เข้าถึง (ซึ่งจะเป็นบนไซต์ภายในbodyแท็กไม่ใช่ในheadแท็ก) บางแหล่งกล่าวว่าสิ่งนี้ใช้ได้ แต่ "ไม่ใช่วิธีปฏิบัติที่ดี" เช่นMDN :
<link>องค์ประกอบสามารถเกิดขึ้นได้ทั้งใน<head>หรือ<body>องค์ประกอบขึ้นอยู่กับว่ามันมีประเภทการเชื่อมโยงที่เป็นร่างกาย ok ตัวอย่างเช่นstylesheetประเภทลิงก์คือ body-ok และ<link rel="stylesheet">อนุญาตในเนื้อหา อย่างไรก็ตามนี่ไม่ใช่วิธีปฏิบัติที่ดีในการติดตาม มันทำให้รู้สึกมากขึ้นในการแยกขององค์ประกอบจากเนื้อหาที่ร่างกายของคุณวางพวกเขาใน<link><head>
บางคน จำกัด ไว้เฉพาะใน<head>ส่วนเช่นw3schools :
หมายเหตุ:องค์ประกอบนี้ไปเฉพาะในส่วนหัว แต่สามารถปรากฏได้หลายครั้ง
การทดสอบ
ฉันทดสอบที่นี่ (สภาพแวดล้อมเดสก์ท็อปบนเบราว์เซอร์) และใช้งานได้สำหรับฉัน สร้างไฟล์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>
จากนั้นไฟล์ CSS ที่ไดเรกทอรีเดียวกันเรียกว่าbar.css:
.test1 {
color: green;
};
นี่จะดูเป็นไปได้ถ้าคุณมีวิธีอัปโหลดไฟล์ CSS บางแห่งในระบบของสถาบัน อาจจะเป็นกรณีนี้
ตัวเลือกที่ 3: <style>เปิด<body>
ใช้สไตล์ชีตอินเทอร์เน็ตบนbodyแท็กเช่นการใช้styleแท็กภายในพื้นที่ที่คุณเข้าถึง (ซึ่งจะเป็นบนไซต์ภายในbodyแท็กและไม่อยู่ในheadแท็ก) นี่คือคำตอบของCharles SalviaและSzที่นี่เกี่ยวกับ เลือกตัวเลือกนี้พิจารณาข้อกังวลของพวกเขา
ตัวเลือกที่ 4, 5 และ 6: วิธีของ JS
การแจ้งเตือนสิ่งเหล่านี้เกี่ยวข้องกับการปรับเปลี่ยน<head>องค์ประกอบของหน้า อาจจะไม่ได้รับอนุญาตจากผู้ดูแลระบบของสถาบัน ดังนั้นจึงขอแนะนำให้ขออนุญาตก่อน
เอาล่ะสมมติว่าได้รับอนุญาต, <head>กลยุทธ์การเข้าถึง อย่างไร? วิธีการจาวาสคริปต์
ตัวเลือกที่ 4: ใหม่<link>ใน<head>
นี่เป็นอีกรุ่นหนึ่งของตัวเลือกที่ 2 ใช้สไตล์ชีตภายนอกบน<head>แท็กเช่นการใช้งาน<link>องค์ประกอบนอกพื้นที่ที่คุณมีการเข้าถึง (ซึ่งจะเป็นบนไซต์ไม่ใช่ภายในbodyแท็กและใช่ภายในheadแท็ก) วิธีการแก้ปัญหานี้เป็นไปตามคำแนะนำของMDNและw3schoolsตามที่กล่าวไว้ข้างต้นในโซลูชันตัวเลือกที่ 2 Linkวัตถุใหม่จะถูกสร้างขึ้น
เพื่อแก้ปัญหาผ่านทาง JS มีหลายวิธี แต่ใน codelines ต่อไปนี้ฉันแสดงให้เห็นถึงวิธีง่าย ๆ
การทดสอบ
ฉันทดสอบที่นี่ (สภาพแวดล้อมเดสก์ท็อปบนเบราว์เซอร์) และใช้งานได้สำหรับฉัน สร้างไฟล์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>
ภายในscriptแท็ก:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
จากนั้นที่ไฟล์ CSS ที่ไดเรกทอรีเดียวกันชื่อbar.css(ตามตัวเลือกที่ 2):
.test1 {
color: green;
};
ดังที่ฉันได้กล่าวไปแล้ว: สิ่งนี้จะดูเป็นไปได้ถ้าคุณมีวิธีอัปโหลดไฟล์ CSS บางแห่งในระบบของสถาบัน
ตัวเลือกที่ 5: ใหม่<style>ใน<head>
ใช้สไตล์ชีตภายในใหม่บน<head>แท็กเช่นการใช้<style>องค์ประกอบใหม่นอกพื้นที่ที่คุณมีการเข้าถึง (ซึ่งจะเป็นบนไซต์ไม่ใช่ภายในbodyแท็กและใช่ภายในheadแท็ก) Styleวัตถุใหม่จะถูกสร้างขึ้น
นี่คือการแก้ไขผ่าน JS วิธีง่าย ๆ อย่างหนึ่งคือการสาธิต
การทดสอบ
ฉันทดสอบที่นี่ (สภาพแวดล้อมเดสก์ท็อปบนเบราว์เซอร์) และใช้งานได้สำหรับฉัน สร้างไฟล์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>
ภายในscriptแท็ก:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
ตัวเลือกที่ 6: การใช้ที่มีอยู่<style>บน<head>
ใช้สไตล์ชีตภายในที่มีอยู่บน<head>แท็กเช่นการใช้<style>องค์ประกอบนอกพื้นที่ที่คุณมีการเข้าถึง (ซึ่งจะเป็นบนไซต์ไม่ใช่ภายในbodyแท็กและใช่ภายในheadแท็ก) หากมีอยู่ Styleวัตถุใหม่จะถูกสร้างขึ้นหรือCSSStyleSheetวัตถุจะถูกนำมาใช้ (ในรหัสของการแก้ปัญหาที่นำมาใช้ที่นี่)
นี่คือบางมุมมองที่มีความเสี่ยง
ครั้งแรกเนื่องจากอาจไม่มี<style> วัตถุบางอย่าง ขึ้นอยู่กับวิธีที่คุณใช้โซลูชันนี้คุณอาจได้รับundefinedผลตอบแทน (ระบบอาจใช้สไตล์ชีทภายนอก )
ประการที่สองเพราะคุณจะแก้ไขงานของผู้ออกแบบระบบ (ประเด็นการประพันธ์)
ประการที่สามเพราะอาจไม่ได้รับอนุญาตในเรื่องความปลอดภัยด้านไอทีของสถาบันของคุณ ดังนั้นจะขออนุญาตที่จะทำนี้( ณ วันที่ในการแก้ปัญหา JS อื่น ๆ )
หากว่าได้รับอนุญาตอีกครั้ง:
คุณจะต้องพิจารณาข้อ จำกัด insertRule()บางอย่างของวิธีการที่สามารถใช้ได้กับวิธีนี้: โซลูชันที่เสนอใช้สถานการณ์เริ่มต้นและการดำเนินการในตอนแรกstylesheetถ้ามีอยู่
การทดสอบ
ฉันทดสอบที่นี่ (สภาพแวดล้อมเดสก์ท็อปบนเบราว์เซอร์) และใช้งานได้สำหรับฉัน สร้างไฟล์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>
ภายในscriptแท็ก:
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
อีกวิธีหนึ่งในการแก้ปัญหานี้คือการใช้CSSStyleDeclarationวัตถุ (เอกสารที่w3schoolsและMDN ) แต่อาจไม่น่าสนใจเมื่อพิจารณาถึงความเสี่ยงในการแทนที่กฎที่มีอยู่ใน CSS ของระบบ
ตัวเลือกที่ 7: CSS แบบอินไลน์
ใช้CSS แบบอินไลน์ วิธีนี้จะช่วยแก้ปัญหาได้แม้ว่าจะขึ้นอยู่กับขนาดหน้ากระดาษ (ในบรรทัดรหัส) การบำรุงรักษา (โดยผู้เขียนเองหรือบุคคลที่ได้รับมอบหมายอื่น ๆ ) ของรหัสอาจเป็นเรื่องยากมาก
แต่ขึ้นอยู่กับบริบทของบทบาทของคุณที่สถาบันหรือนโยบายความปลอดภัยของระบบเว็บนี่อาจเป็นโซลูชันที่ไม่ซ้ำใครสำหรับคุณ
การทดสอบ
สร้างไฟล์_foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
ตอบคำถามที่ถามโดยกาแกนอย่างเคร่งครัด
เบราว์เซอร์ควรจะแสดง css ที่ไม่ต่อเนื่องกันอย่างไร
- มันควรจะสร้างโครงสร้างข้อมูลบางอย่างโดยใช้สไตล์ CSS ทั้งหมดในหน้าและใช้สำหรับการแสดงผล?
- หรือแสดงโดยใช้ข้อมูลสไตล์ตามลำดับที่เห็น
(ดัดแปลงคำพูด)
สำหรับคำตอบที่แม่นยำยิ่งขึ้นฉันขอแนะนำ Google บทความเหล่านี้:
- เบราว์เซอร์ทำงานอย่างไร: เบื้องหลังเบราว์เซอร์สมัยใหม่
- Render-tree Construction, Layout และ Paint
- การแสดงผลหน้าเว็บหมายถึงอะไร
- การแสดงผลของเบราว์เซอร์ทำงานอย่างไร - เบื้องหลัง
- การแสดงผล - มาตรฐาน HTML
- 10 การแสดงผล - HTML5