Menggunakan tag <style> di <body> dengan HTML lain

195 
<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

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?

html css Gagan
sumber
2
Saya akan mengatakan itu adalah perilaku yang tidak terdefinisi karena ini bukan HTML yang valid. Untuk informasi lebih lanjut elemen mana yang valid dan mana yang tidak: en.wikipedia.org/wiki/HTML_element
Felix Kling
2
Mengesampingkan masalah ini, itu adalah praktik yang buruk untuk campur aduk CSSdan HTML.
0x2D9A3
1
@ 0x2D9A3 Belum tentu benar. Diperlukan waktu lebih lama untuk meminta halaman CSS eksternal dari pada CSS yang ditentukan dalam <head>tag
Kolob Canyon
@ KolobCanyon Setuju, tetapi sebagai aturan umum, CSS harus di file yang terpisah. Jika Anda memiliki banyak CSS, akan lebih mudah untuk mengelola (memelihara, (memposting) pemrosesan, meminimalkan, membundel) dan melayani sebagai file terpisah, dan konten Anda (HTML) mungkin dimuat lebih cepat, juga, mengarah ke UX yang lebih baik. Namun, seperti biasa dengan pengembangan, semuanya sesuai konteks, jadi YMMW :)
0x2D9A3
3
@ KolobCanyon, ini bukan masalah apakah CSS harus di file yang terpisah. Dalam hal ini pertanyaannya adalah tentang CSS di <body>daripada di <head>.
Ray Butterworth

Jawaban:

312

Seperti yang telah disebutkan orang lain, HTML 4 mengharuskan <style>tag untuk ditempatkan di <head>bagian (meskipun sebagian besar browser mengizinkan <style>tag di dalam body).

Namun, HTML 5 menyertakan scopedatribut (lihat pembaruan di bawah), yang memungkinkan Anda membuat lembar gaya yang dicakup dalam elemen induk dari <style>tag. Ini juga memungkinkan Anda untuk menempatkan <style>tag di dalam <body>elemen:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="scoped-content">
    <style type="text/css" scoped>
        h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

    <h1>
      World
    </h1>

</body>
</html>

Jika Anda merender kode di atas dalam browser yang mendukung HTML-5 scoped, Anda akan melihat lingkup terbatas dari style sheet.

Hanya ada satu peringatan utama ...

Pada saat saya sedang menulis jawaban ini (Mei, 2013) hampir tidak ada browser arus utama yang mendukung scopedatribut ini. (Meskipun tampaknya pengembang membangun Chromium mendukungnya.)

NAMUN, ada implikasi menarik dari scopedatribut yang berkaitan dengan pertanyaan ini. Ini berarti bahwa peramban masa depan dimandatkan melalui standar untuk memungkinkan <style>elemen dalam <body>(selama<style> elemen dicakup.)

Jadi, mengingat bahwa:

  • Hampir setiap browser yang ada saat ini mengabaikan scoped atributnya
  • Hampir setiap browser yang ada saat ini memungkinkan <style> tag di dalamnya<body>
  • Implementasi di masa depan akan diperlukan untuk memungkinkan (mencakup) <style> tag dalam<body>

... maka secara harfiah tidak ada salahnya * menempatkan <style>tag di dalam tubuh, selama Anda membuktikannya di masa mendatang dengan scopedatribut. Satu-satunya masalah adalah bahwa browser saat ini tidak akan benar-benar membatasi ruang lingkup stylesheet - mereka akan menerapkannya ke seluruh dokumen. Tetapi intinya adalah bahwa, untuk semua tujuan praktis, Anda dapat memasukkan<style> tag di dalam <body>ketentuan bahwa Anda:

  • Buktikan HTML Anda di masa depan dengan memasukkan scoped atribut
  • Pahami bahwa sampai sekarang, stylesheet di dalam <body> tidak akan benar-benar dicakup (karena belum ada dukungan browser utama)


* kecuali tentu saja, untuk mengecewakan validator HTML ...

Akhirnya, mengenai klaim umum (tetapi subyektif) bahwa menanamkan CSS ke dalam HTML adalah praktik yang buruk, harus dicatat bahwa seluruh poin dari scopedatribut ini adalah untuk mengakomodasi kerangka kerja pembangunan modern khas yang memungkinkan pengembang untuk mengimpor potongan HTML sebagai modul atau konten sindikasi . Sangat mudah untuk menyematkan CSS yang hanya berlaku untuk sebagian HTML tertentu, untuk mengembangkan komponen modular yang dienkapsulasi dengan stylings tertentu.

Pembaruan pada Februari 2019, menurut dokumentasi Mozilla , scopedatributnya sudah usang. Chrome berhenti mendukungnya di versi 36 (2014) dan Firefox di versi 62 (2018). Dalam kedua kasus, fitur tersebut harus diaktifkan secara eksplisit oleh pengguna di pengaturan browser. Tidak ada browser utama lain yang pernah mendukungnya.

Charles Salvia
sumber
3
@RobertMcKee: apakah Anda benar-benar mengujinya? Saya berharap bahwa biasanya seluruh halaman html (termasuk semua gaya inline) diuraikan sebelum rendering, karena biasanya itu tidak besar dan browser menunggu (sangat singkat) sementara sebelum rendering tepat untuk menghindari konten flash-of-unstyled yang mungkin terjadi karena css tertaut dalam head. Jika ini adalah satu-satunya css Anda, dan jika halamannya besar dan jika koneksi jaringannya tidak terlalu cepat, maka mungkin Anda akan melihat sekilas konten yang tidak distyle, tetapi itu akan mengejutkan saya dalam sebagian besar situasi praktis.
Eamon Nerbonne
4
Sampai hari ini, hanya Firefox yang mendukung elemen gaya cakupan (menurut caniuse.com/#feat=style-scoped ). Dan karena browser umum hanya mendukung elemen GAYA di dalam BODY, saya hanya akan menggunakannya, jika perlu. Jika CSS harus diterapkan dalam lingkup, Anda bisa mengawali setiap pemilih di sumber CSS dengan ID / kelas pembungkus. Saya benar-benar melakukan ini di aplikasi web yang memuat laporan HTML sisi server dan menerjemahkannya melalui AJAX. CSS kemudian dapat diawali dengan regex sederhana dalam JavaScript: cssString.replace (/ (^ | \}) ([^ {] +) (\ {) / g, '$ 1' + awalan + '$ 2 $ 3')
Adam Hošek
5
Dukungan untuk @scoped, atau scopednampaknya sedang sekarat: di sini dan di sini
Kiran Subbaraman
51
Mendukung @KiranSubbaraman: Saya baru saja (Juli 2016) membaca di mozilla dev: " Atribut cakupan telah dihapus dari spesifikasi setelah hanya adopsi terbatas dan eksperimental oleh Chrome dan Firefox. Anda harus menghindari menggunakannya , karena hampir pasti akan menjadi segera dihapus dari peramban ini. " >> developer.mozilla.org/en-US/docs/Web/HTML/Element/…
jave.web
9
The scopedatribut telah dihapus dari spesifikasi HTML5 saat ini.
Albert Wiersch
61

BREAKING BAD NEWS untuk "gaya dalam tubuh" pecinta: W3C baru-baru ini kalah perang HTML melawan WHATWG, yang versionless HTML "Hidup Standard" kini telah menjadi satu resmi, yang, sayangnya, tidak tidak memungkinkan STYLE dalam BODY. Hari-hari bahagia yang berumur pendek berakhir. ;) Validator W3C juga bekerja dengan spesifikasi WHATWG sekarang. (Terima kasih @ FrankConijn untuk informasi lebih lanjut!)

(Catatan: ini adalah kasus "pada hari ini", tetapi karena tidak ada versi, tautan dapat menjadi tidak valid setiap saat tanpa pemberitahuan atau kontrol. Kecuali jika Anda bersedia untuk menautkan ke masing-masing sumber yang dilakukan di GitHub, pada dasarnya Anda tidak dapat lagi buat referensi stabil ke standar HTML resmi baru , AFAIK. Harap perbaiki saya jika ada cara kanonik untuk melakukan ini dengan benar.)

BERITA TERKAIT:

Yay, STYLEakhirnya valid dalam BODY, pada HTML5.2! (Dan scopedsudah pergi juga.)

Dari spesifikasi W3C ( nikmati baris terakhir! ):

4.2.6. Elemen gaya

...

Konteks di mana elemen ini dapat digunakan:

Di mana konten metadata diharapkan.

Dalam elemen noscript itu adalah anak dari elemen kepala.

Di dalam tubuh, tempat konten mengalir diharapkan.

META SIDE-NOTE:

Fakta bahwa meskipun ada kerusakan "perang browser" kami masih harus terus berkembang melawan dua standar "resmi" HTML "yang bersaing " (kutipan untuk 1 standard + 1 standard < 1 standard) berarti bahwa pendekatan "masuk akal ke dalam parit akal sehat" pendekatan untuk pengembangan web tidak pernah benar-benar berhenti berlaku.

Ini akhirnya dapat berubah sekarang, tetapi mengutip kebijaksanaan konvensional: pembuat / pengembang web dan dengan demikian, browser pada akhirnya harus memutuskan apa yang harus (dan tidak seharusnya) dalam spesifikasi, ketika tidak ada alasan yang baik terhadap apa yang telah dilakukan di realitas. Dan kebanyakan browser telah lama mendukung STYLEdi BODY(dalam satu atau lain cara, lihat misalnya scoped. Attr) (yang, meskipun kinerja yang melekat (dan mungkin lainnya) hukuman kita . Harus memutuskan untuk membayar atau tidak, tidak spesifikasi). Jadi, untuk satu, saya akan terus bertaruh pada mereka, dan tidak akan menyerah. ;) Jika WHATWG memiliki rasa hormat yang sama terhadap kenyataan / penulis seperti yang mereka klaim, mereka mungkin hanya melakukan di sini apa yang W3C lakukan.

Sz.
sumber
3
Saya membaca spesifikasi, tetapi tidak mengerti. Bisakah Anda memberikan contoh kode styleblok di bodyyang memvalidasi?
Frank Conijn
3
@ FrankConijn: Poin bagus, banyak hal berubah, memperbarui jawabannya! Sangat membingungkan. Baik spesifikasi 5,2 dan 5,3 W3C memperlakukan STYLEsebagai konten metadata & aliran, tetapi spesifikasi "hidup" WHATWG terbaru menceritakan kisah "metadata" lama yang membosankan dan membosankan (hanya mengizinkannya di HEAD). Dan, untuk menambah penghinaan pada cedera, validator W3C tampaknya mengikuti rasa WHATWG. Saya belum memutuskan apakah akan tertawa atau menangis, tetapi tentu saja memutuskan, secara pribadi, untuk "berbuat salah" dengan kasus "browser + W3C - validator", dan memungkinkan GAYA di BODY. (BTW, jangan lupa: kita harus menjadi sumber utama standar , sebenarnya.)
Sz.
Saya benar-benar berpikir mereka melompati hiu dengan omong kosong ini, mereka pada dasarnya tidak meninggalkan pilihan selain menggunakan gaya garis jika Anda ingin mengatur properti gambar latar belakang secara dinamis dalam sistem templated. Itu jauh lebih tidak invasif untuk menjatuhkan blok gaya yang dihasilkan secara programatik tepat di atas output html Anda.
GovCoder
32

Ketika saya melihat bahwa Sistem Manajemen Konten situs-besar secara rutin menempatkan beberapa elemen <style> (beberapa, tidak semua) dekat dengan konten yang bergantung pada kelas-kelas itu, saya menyimpulkan bahwa kuda itu keluar dari gudang.

Lihatlah sumber halaman dari cnn.com, nytimes.com, huffingtonpost.com, koran kota besar terdekat, dll. Semuanya melakukannya.

Jika ada alasan bagus untuk menempatkan bagian <style> tambahan di suatu tempat di badan - misalnya jika Anda menyertakan () elemen halaman yang beragam dan independen secara waktu nyata dan masing-masing memiliki <style> yang disematkan sendiri, dan organisasi akan menjadi lebih bersih, lebih modular, lebih mudah dimengerti, dan lebih dapat dipelihara - saya katakan cukup gigit saja. Tentu akan lebih baik jika kita dapat memiliki gaya "lokal" dengan cakupan terbatas, seperti variabel lokal, tetapi Anda bekerja dengan HTML yang Anda miliki, bukan HTML yang Anda inginkan atau ingin miliki di lain waktu.

Tentu saja ada kelemahan potensial dan alasan yang baik (jika tidak selalu memaksa) untuk mengikuti ortodoksi, seperti yang telah dijelaskan orang lain. Tetapi bagi saya itu terlihat lebih dan lebih seperti penggunaan <style> secara bijaksana dalam <body> telah menjadi arus utama.

Timberline
sumber
1
Pragmatisme FTW!
Waruyama
1
Ya kau benar. Sebagai contoh saya menggunakan tag <style> di <body> di dalam plugin saya. Kenapa, karena itu cara termudah untuk bergaya konten plugin. Tapi suatu saat, semua kelas css unik untuk data plugin saya.
Avirtum
7

Tidak HTML yang valid, lagi pula hampir semua browser tampaknya hanya mempertimbangkan contoh kedua.

Diuji di bawah FF dan Google Chrome versi terakhir di bawah Fedora, dan FF, Opera, IE, dan Chrome di bawah XP.

nico
sumber
6

Saya kira ini akan bervariasi dari peramban ke peramban: Aturan tampilan global mungkin akan diperbarui saat peramban menelusuri kode.

Anda dapat melihat perubahan seperti itu dalam aturan tampilan global kadang-kadang ketika lembar gaya eksternal dimuat dengan penundaan. Sesuatu yang serupa mungkin terjadi di sini tetapi dalam suksesi singkat sehingga tidak benar-benar diterjemahkan.

Lagipula itu bukan HTML yang valid, jadi saya akan mengatakan itu adalah hal yang sia-sia untuk dipikirkan. <style>tag termasuk di headbagian halaman.

Pekka
sumber
5

Seperti yang dikatakan orang lain, ini bukan html yang valid karena tag gaya ada di kepala.

Namun, sebagian besar browser tidak benar-benar menerapkan validasi itu. Sebagai gantinya, setelah dokumen dimuat maka gaya digabungkan dan diterapkan. Dalam hal ini set gaya kedua akan selalu menimpa yang pertama karena mereka adalah definisi terakhir yang ditemui.

Bukan saya
sumber
5

The <style>tag termasuk dalam<head> bagian, terpisah dari semua konten.

Referensi: Spesifikasi W3C dan W3Schools

Josh Stodola
sumber
52
Tidak menjawab pertanyaan. Dan pedoman kaku itu dibanjiri oleh kenyataan. Ada banyak BANYAK kasus di mana tidak mungkin bagi penulis untuk mendefinisikan / memasukkan gaya mereka di kepala html.
Javier
3
Ini mungkin benar pada 2010, tetapi jauh dari jawaban yang dapat diterima saat ini.
Isaac Lubow
3

Dalam contoh Anda, browser tidak "seharusnya" melakukan apa pun. HTML tidak valid. Pemulihan kesalahan dipicu, atau pengurai membuatnya seperti itu akan terjadi.

Dalam contoh yang valid, beberapa stylesheet diperlakukan hanya muncul satu demi satu, kaskade dihitung sebagai normal.

Quentin
sumber
2

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:

  1. ini tidak-programmer pengguna tidak memiliki saluran terbuka dengan admin sistem (atau webdevs lembaga), untuk meminta termasuk beberapa aturan CSS di sistemstylesheets . Sebenarnya, itu tidak praktis untuk admin (atau webdevs), mengingat jumlah permintaan yang mereka inginkan.
  2. 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?

  1. Apakah seharusnya menghasilkan beberapa struktur data menggunakan semua gaya css pada halaman dan menggunakannya untuk rendering?
  2. 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
Igor Santos
sumber
+1 Ide bagus termasuk tag skrip dan gunakan javascript untuk menambahkan css, HTML legal sempurna untuk editor WYSIWYG CMS
djolf
1

Karena ini adalah HTML yang tidak valid, tidak memiliki dampak pada hasilnya ... itu hanya berarti bahwa HTML mematuhi standar (hanya untuk tujuan organisasi). Demi menjadi valid itu bisa ditulis dengan cara ini:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

Dugaan saya adalah bahwa browser menerapkan gaya terakhir yang ditemui.

G. Bickham
sumber