Saya kira ini mungkin masalah tentang konteks terbatas, mis. Editor WYIWYG pada sistem web yang digunakan oleh pengguna yang bukan pemrogram , yang membatasi kemungkinan mengikuti standar. Terkadang (seperti TinyMCE), itu adalah lib yang menempatkan konten / kode Anda di dalam textareatag, yang diberikan oleh editor sebagai divtag besar . Dan kadang-kadang, itu mungkin versi lama dari editor ini.
Saya kira itu:
- ini tidak-programmer pengguna tidak memiliki saluran terbuka dengan admin sistem (atau webdevs lembaga), untuk meminta termasuk beberapa aturan CSS di sistem
stylesheets . Sebenarnya, itu tidak praktis untuk admin (atau webdevs), mengingat jumlah permintaan yang mereka inginkan.
- sistem ini adalah warisan dan masih tidak mendukung versi HTML yang lebih baru.
Dalam beberapa kasus, tanpa styleaturan penggunaan , ini mungkin merupakan pengalaman desain yang sangat buruk. Jadi, ya, pengguna ini perlu penyesuaian. Oke, tapi apa solusinya, dalam skenario ini? Mempertimbangkan berbagai cara untuk menyisipkan CSS dalam sebuah htmlhalaman, saya kira solusi ini:
Opsi 1: tanyakan sysadm Anda
Mintalah kepada admin sistem Anda untuk memasukkan beberapa aturan CSS di sistem stylesheets. Ini akan menjadi solusi CSS eksternal atau internal . Seperti yang sudah dikatakan, itu tidak mungkin.
Opsi 2: <link>aktif<body>
Gunakan style sheet eksternal pada bodytag, yaitu penggunaan linktag di dalam area yang Anda akses (yaitu di situs, di dalam bodytag, dan bukan di headtag). Beberapa sumber mengatakan ini baik-baik saja, tetapi "bukan praktik yang baik", seperti MDN :
Sebuah <link>elemen dapat terjadi baik dalam <head>atau <body>elemen, tergantung pada apakah ia memiliki jenis link yang tubuh-ok . Misalnya, stylesheetjenis tautannya adalah ok-bodi, dan oleh karena <link rel="stylesheet">itu diizinkan di dalam badan. Namun, ini bukan praktik yang baik untuk diikuti; lebih masuk akal untuk memisahkan <link>elemen Anda dari konten tubuh Anda, menempatkannya di <head>.
Beberapa yang lain, membatasi ke <head>bagian, seperti w3sekolah :
Catatan: Elemen ini hanya ada di bagian kepala, tetapi dapat muncul beberapa kali.
Pengujian
Saya mengujinya di sini (lingkungan desktop, pada browser) dan itu berfungsi untuk saya. Buat file 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>
Dan kemudian file CSS, pada direktori yang sama, disebut bar.css:
.test1 {
color: green;
};
Nah, ini hanya akan terlihat mungkin jika Anda memiliki cara mengunggah file CSS di suatu tempat di sistem institusi. Mungkin ini masalahnya.
Pilihan 3: <style>aktif<body>
Gunakan lembar gaya internet pada bodytag, yaitu, penggunaan styletag di dalam area yang Anda akses (yaitu, di situs, di dalam bodytag, dan bukan di headtag). Inilah yang menjadi jawaban Charles Salvia dan Sz di sini. Memilih opsi ini, pertimbangkan kekhawatiran mereka.
Opsi 4, 5 dan 6: Cara JS
Peringatan Ini terkait dengan memodifikasi <head>elemen halaman. Mungkin ini tidak akan terjadi akan diizinkan oleh administrator sistem institusi. Jadi, disarankan untuk meminta izin terlebih dahulu kepada mereka.
Oke, seandainya izin diberikan, strateginya adalah mengakses <head> . Bagaimana? Metode JavaScript.
Opsi ke-4: <link>aktif baru<head>
Ini adalah versi lain dari opsi ke-2. Gunakan style sheet eksternal pada <head>tag, yaitu penggunaan <link>elemen di luar area yang Anda akses (yaitu, di situs, bukan di dalambody tag dan ya di dalam headtag). Solusi ini sesuai dengan rekomendasi MDN dan w3sekolah , sebagaimana dikutip di atas, pada solusi opsi ke-2. LinkObjek baru akan dibuat.
Untuk mengatasi masalah ini melalui JS, ada banyak cara tetapi pada kode berikut saya menunjukkan satu cara sederhana.
Pengujian
Saya mengujinya di sini (lingkungan desktop, pada browser) dan itu berfungsi untuk saya. Buat file 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>
Di dalam scripttag:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
Dan kemudian pada file CSS, pada direktori yang sama, dipanggil bar.css (seperti pada opsi ke-2):
.test1 {
color: green;
};
Seperti yang sudah saya katakan: ini hanya akan terlihat mungkin jika Anda memiliki cara mengunggah file CSS di suatu tempat di sistem institusi.
Opsi ke-5: baru <style> aktif<head>
Gunakan style sheet internal baru pada <head>tag, yaitu, penggunaan <style>elemen baru di luar area yang Anda akses (yaitu, di situs, tidak di dalam bodytag dan ya di dalam headtag). BaruStyleObjek akan dibuat.
Ini diselesaikan melalui JS. Satu cara sederhana ditunjukkan berikut ini.
Pengujian
Saya mengujinya di sini (lingkungan desktop, pada browser) dan itu berfungsi untuk saya. Buat file 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>
Di dalam scripttag:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
Opsi 6: menggunakan yang ada <style>pada<head>
Gunakan lembar gaya internal yang ada pada <head>tag, yaitu penggunaan <style>elemen di luar area yang Anda miliki aksesnya (yaitu, di situs, tidak di dalam bodytag dan ya di dalam taghead tag), jika ada. StyleObjek baru akan dibuat atau CSSStyleSheetobjek akan digunakan (dalam kode solusi yang diadopsi di sini).
Ini pada beberapa sudut pandang berisiko.
Pertama , karena mungkin tidak ada beberapa <style> objek. Bergantung pada cara Anda menerapkan solusi ini, Anda mungkin akan undefinedkembali (sistem mungkin menggunakan style sheet eksternal ).
Kedua , karena Anda akan mengedit karya penulis perancangan sistem (masalah kepengarangan).
Ketiga , karena itu mungkin tidak diizinkan di politik keselamatan TI institusi Anda. Jadi, mintalah izin untuk melakukan ini (seperti pada solusi JS lainnya) .
Seandainya, sekali lagi, izin diberikan:
Anda perlu mempertimbangkan beberapa batasan metode yang tersedia dengan cara ini: insertRule() . Solusi yang diajukan menggunakan skenario default, dan operasi pada awalnyastylesheet , jika ada.
Pengujian
Saya mengujinya di sini (lingkungan desktop, pada browser) dan itu berfungsi untuk saya. Buat file 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>
Di dalam scripttag:
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
Pendekatan lain untuk solusi ini menggunakan CSSStyleDeclarationobjek (docs di w3schools dan MDN ). Tapi itu mungkin tidak menarik, mengingat risiko untuk mengesampingkan aturan yang ada pada CSS sistem.
Opsi 7: CSS sebaris
Gunakan CSS sebaris . Ini menyelesaikan masalah, meskipun tergantung pada ukuran halaman (dalam baris kode), pemeliharaan (oleh penulis itu sendiri atau orang yang ditugaskan lainnya) kode bisa sangat sulit.
Tetapi tergantung pada konteks peran Anda di institusi, atau kebijakan keamanan sistem webnya, ini mungkin solusi unik yang tersedia untuk Anda.
Pengujian
Buat file _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Menjawab dengan ketat pertanyaan yang diajukan oleh Gagan
Bagaimana cara browser merender css yang tidak berdekatan?
- Apakah seharusnya menghasilkan beberapa struktur data menggunakan semua gaya css pada halaman dan menggunakannya untuk rendering?
- Atau apakah itu dibuat menggunakan informasi gaya dalam urutan yang dilihatnya?
(kutipan diadaptasi)
Untuk jawaban yang lebih akurat, saya sarankan Google artikel ini:
- Cara Kerja Peramban: Di balik layar peramban web modern
- Konstruksi, Tata Letak Pohon Render, dan Cat
- Apa Artinya Untuk "Membuat" Halaman Web?
- Cara kerja perenderan browser - di belakang layar
- Rendering - Standar HTML
- 10 Rendering - HTML5