Apakah itu ide yang salah untuk memiliki <style> di <body>?


12

Dalam kode di bawah ini saya menempatkan style sheet internal dengan in body tag, bukannya di kepala. Untuk Aplikasi Satu Halaman, saya mempertimbangkan untuk melakukan ini untuk gaya yang hanya berlaku untuk halaman itu saja, daripada memiliki file halamanpecific.css terpisah.

Apakah ada skenario di mana ini memiliki kelemahan karena saya tidak meletakkan yang sama di bagian kepala?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here --> 

Jawaban:


18

Sebuah styleelemen di dalam bodyelemen melanggar aturan HTML sintaks. (Kecuali bahwa menurut konsep HTML5, diizinkan dalam beberapa kondisi, jika scopedatribut ada; atribut ini didukung oleh beberapa browser.) Di sisi lain, browser tidak peduli. Pembagian menjadi headdan bodyunsur - unsurnya teoretis.

Namun, Anda tidak mendapatkan apa-apa dengan menggunakan sintaks yang tidak valid, sebagai kebalikan dari menempatkan styledi dalam head. Satu-satunya alasan adalah keterbatasan teknis, di beberapa lingkungan penulisan, yang mungkin mencegah Anda memasukkan apa pun ke dalam headbagian.

Masalah menggunakan styleelemen vs. stylesheet eksternal via linksepenuhnya ortogonal untuk pertanyaan ini.


1
Bagian pertama dari jawaban Anda belum tentu benar .
patricksweeney

1
@ Patricksweeney, saya pikir ini agak teoritis dalam konteks ini, tetapi pengamatan yang benar; jawaban diperbarui.
Jukka K. Korpela

Saya menganggap "browser tidak peduli" sebagai positif untuk pendekatan saya. Karena halaman saya sebagian (Aplikasi Satu Halaman), saya tidak dapat memiliki bagian <head>, alasan mengapa saya mencoba untuk memasukkan ke dalam <body> atau elemen di dalam tubuh.
Saran

2
@Galaxy, saya tidak melihat mengapa aplikasi satu halaman akan kekurangan headelemen. Halaman HTML selalu memiliki satu.
Jukka K. Korpela

@ JukkaK.Korpela, saya memperbarui bagian kode dalam pertanyaan saya untuk menjawab pertanyaan Anda.
Saran

6

(Karena kita di sini di SE.SX, pendekatan yang lebih strategis mungkin merupakan tambahan yang berharga untuk pertimbangan teknis yang biasa.)

[mukadimah] Spesifikasi HTML5 adalah target yang terus bergerak, dan mereka memiliki kebijakan untuk menindaklanjuti praktik umum yang telah ditetapkan. Mereka kuno dan membangkitkan fitur di masa lalu, mengubah makna orang lain, menggeser fokus rekomendasi metodis dll. Ini tidak ditulis untuk selamanya dengan semua kebijaksanaan umat manusia yang tersedia sekaligus. Spek ini bukanlah sumber kebenaran yang sakral. Wajar jika terkadang browser itu benar. [/pembukaan]

Situasi OP sangat umum dan valid.

Anda memiliki CMS, dengan tema yang dirancang dan diinstal, semua CSS dimuat dengan benar dari HEAD, lalu di sana Anda, editor halaman, dibiarkan dengan kotak WYSIWYG yang modis yang Anda dapat (terima kasih Tuhan!) Beralih ke "mode sumber" dan ketik (tempel) di markup HTML (sebelumnya dibuat di tempat lain, dengan alat yang lebih cocok). Untungnya Anda bahkan dapat memasukkan STYLEtag (mungkin karena kelalaian kebetulan dalam filter tag) ... Hari ini disimpan, dari banyak pekerjaan kasar yang menghancurkan jiwa yang berulang-ulang. Tetapi Anda masih tidak memiliki sarana, apa pun, untuk mengganggu elemen HEAD sistem dari skenario edit halaman.

Haruskah itu merobek Anda dari menggunakan CSS Anda secara langsung dengan fragmen HTML Anda, hanya karena spec mengatakan demikian?

Atau, Anda memiliki aplikasi AJAX satu halaman.

Ini berjalan tanpa memuat ulang untuk sesi yang panjang, dan ada konten sindikasi yang berasal dari berbagai sumber acak, semua gaya sewenang-wenang dan mandiri. Membutuhkannya dikonversi terlebih dahulu untuk hanya menggunakan STYLEatribut inline alih-alih hanya datang dengan STYLEelemen tertanam akan menjadi tidak masuk akal.

Selain itu: Anda dapat a) sudah menyematkan CSS apa pun di mana saja di BODY, melalui STYLEatribut, jadi CSS "secara teoritis" sah di sana; dan b) Anda sudah dapat melakukan apa pun yang Anda inginkan dengan gaya apa pun, kapan pun Anda mau (dan lebih banyak lagi) dari Javascript, jadi CSS juga sudah mungkin untuk disalahgunakan dengan cara patologis non-performan. Dan tidak ada dari kita yang akan menolak fitur-fitur itu. W3C juga tidak.

Jadi, apa sebenarnya yang jahat dari STYLEunsur - unsur di dalamnya BODY? Apa implikasi tambahan yang merugikan yang akan menambah gudang penyalahgunaan kami yang luas terhadap konstruksi HTML? Kinerja lebih buruk? Mungkin. Terkadang.

Apakah itu alasan yang sah untuk menghapus praktik yang sangat berguna ini, didukung oleh setiap browser karena suatu alasan? Tidak dalam sejuta mil!

Kami bukan idiot. Yah, tidak semua, atau tidak selalu ...;) Teknik dengan risiko kinerja yang buruk bisa didokumentasikan , bukan hanya dilarang. Kami dulu memiliki applet Java di awal-awal web, dan bertahan. Mobil dapat disalahgunakan, menyebabkan kesengsaraan, bahkan makanan dapat digunakan dengan cara yang mengganggu, tidak efisien, dan pengemudi yang dapat makan mungkin, rata-rata, bahkan lebih bodoh daripada perancang web rata-rata. Selain itu, W3C yang terhormat, tidak perlu khawatir: kawanan tinkerer HTML yang kesal karena kaki mereka ditembak mati dengan STYLEelemen - elemen BODYmasih belum bisa mengejar W3C dan membalas dendam. Mereka tidak tahu alamatnya. Dan mereka tidak memiliki kaki.

Jadi, tolong: jangan membuat suara Anda didengar karena STYLEmenjadi legal BODY! Dengan patuh mengutip teks, tetapi gagal memberikan alternatif yang lebih baik daripada situasi saat ini tidak membantu. Ini sebenarnya ancaman bagi teknik solusi terakhir ini.

Ingat: spesifikasi HTML5 disebut rekomendasi .


Update: spesifikasi akhirnya tertangkap: STYLEini sekarang berlaku di BODY! ;)
lunakid

1
Pembaruan 2: Spesifikasi tidak tertangkap karena mereka berubah pikiran (mengklik tautan lunakid, sudah diperbarui).
Maximillian Laumeister

2

The spesifikasi html menyatakan bahwa

Elemen gaya tanpa atribut yang dibatasi dibatasi untuk muncul di kepala dokumen.

Atribut scoped adalah nilai boolean yang menunjukkan bahwa itu harus diterapkan hanya sub pohon yang di-root pada elemen induk elemen style.

Saat ini hanya Firefox yang mendukung atribut yang tercakup. http://www.w3schools.com/tags/att_style_scoped.asp


5
Situs w3schools tidak boleh dikutip sebagai referensi, atau tidak sama sekali; lihat w3fools.com
Jukka K. Korpela

2
Dan ini tidak menjawab pertanyaan.
Jukka K. Korpela

1
Terima kasih @ JukkaK.Korpela itu adalah tautan pertama yang saya temukan mengutip dukungan peramban atribut cakupan. Komentar lain memberikan kutipan yang jauh lebih baik. Memberi +1 jawaban Anda -1 komentar Anda yang kurang konstruktif.
crad

+1 untuk menunjuk pada spesifikasi serta mencatat kurangnya dukungan untuk pelingkupan (yang diperlukan untuk mematuhi spesifikasi). Saya pikir Anda harus membaca jawabannya sebelum melompat pistol di sana @ JukkaK.Korpela, sangat miskin. Anda tidak bisa benar-benar mendapatkan lebih dapat dipercaya daripada spesifikasi, dan itu menjawab pertanyaan dengan sempurna. " Apakah itu ide yang salah untuk memiliki gaya dalam tubuh " - sesuai dengan spesifikasi " Ya itu akan menjadi. "
Fergus In London

1

Ada beberapa alasan teknis untuk membuat css Anda dalam file vs tag gaya:

  • Kemampuan untuk menggunakan minifier css (Saya tidak percaya minifiers bekerja pada tag gaya)
  • Agar file css dapat di-cache oleh browser.

Beberapa alasan berdasarkan pendapat untuk menggunakan file:

  • Anda dapat menggunakan preprosesor css yang luar biasa seperti Sass (Kompas) atau Kurang.
  • Anda mempertahankan dua cara untuk menambahkan css ke aplikasi Anda.

Preferensi pribadi saya adalah menggunakan Kompas untuk menyimpan file terpisah untuk setiap halaman dan kemudian menggunakannya untuk mengkompilasi semuanya menjadi satu file. File tunggal itu akan dimasukkan oleh setiap halaman. Jika di ujung jalan file harus dipisahkan untuk alasan apa pun mereka selalu bisa tetapi tidak sebanding dengan kerumitan sementara itu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.