Sebenarnya, apakah styletag harus berada di dalam headdokumen HTML? Standar 4.01 menyiratkan itu, tetapi tidak secara eksplisit dinyatakan:
Elemen STYLE memungkinkan penulis untuk meletakkan aturan style sheet di bagian kepala dokumen. HTML mengizinkan sejumlah elemen STYLE di bagian HEAD dokumen.
Saya mengatakan "secara tegas" karena saya memiliki aplikasi yang menempatkan elemen gaya di dalam tubuh, dan semua browser yang telah saya uji tampaknya menggunakan elemen gaya. Saya hanya ingin tahu apakah itu benar-benar legal.
html
coding-style
html-head
eaolson
sumber
sumber
styledalambody, jadi itu cukup baik bagi saya, terlepas dari apa yang tersirat oleh bagian penulis pedoman.Jawaban:
styleseharusnya dimasukkan hanya padaheaddokumen.Selain titik validasi, satu peringatan yang mungkin menarik bagi Anda saat menggunakan
styledibodyadalah kilatan konten unstyled . Browser akan mendapatkan elemen yang akan diberi gaya setelah ditampilkan, membuatnya bergeser pada ukuran / bentuk / font dan / atau flicker. Ini umumnya merupakan tanda pengerjaan yang buruk. Umumnya Anda bisa lolos dengan meletakkan distylemana saja Anda inginkan, tetapi cobalah untuk menghindarinya kapan pun memungkinkan.HTML 5 memperkenalkan
scopedatribut yang memungkinkanstyletag disertakan di mana pun di badan, tetapi kemudian mereka menghapusnya lagi.sumber
scopedatribut tersebut, lihat caniuse.com/#feat=style-scoped .styletagbodysehingga, terlepas dari spesifikasi pembuatnya, saya menganggap gaya tubuh valid. github.com/whatwg/html/issues/1605#issuecomment-235961103Jawaban singkat
Menurut spesifikasi saat ini, ya,
styleelemen harus selalu ada dihead. Tidak ada pengecualian (kecualistyleelemen di dalamtemplateelemen , jika Anda ingin menghitungnya).Ini tidak selalu terjadi secara historis. Jika Anda peduli dengan detail spesifikasi dan riwayatnya, teruslah membaca.
Apa pun spesifikasi yang disebutkan, menggunakan
styleelemen di dalambodymelakukan lebih banyak atau lebih sedikit pekerjaan di semua browser utama. Namun, ini dianggap sebagai praktik yang buruk karena melanggar spesifikasi dan karena dapat menyebabkan konsekuensi yang tidak diinginkan seperti performa rendering yang lebih buruk atau "kilatan konten tanpa gaya".Sejarah spesifikasi
styleelemen tidak ada di HTML 2 . Mereka diperkenalkan di HTML 3.0, di mana mereka dimasukkan dalam daftar elemen yang dapat dimasukkan dalam Elemen Kepala , tetapi tidak termasuk dalam daftar elemen yang mungkin ada di Elemen Tubuh . Jadi, pada saat elemen pertama kali dispesifikasi, itu hanya dapat dimasukkan dalamhead.Ini tetap terjadi (meskipun diekspresikan menggunakan kata-kata yang berbeda) sampai HTML 5, yang memperkenalkan
scopedatribut (sejak dihapus) untukstyleelemen. Atribut ini, jika ada, dimaksudkan untuk memungkinkan sebuahstyleelemen ditempatkan di dalam sebuah elemen dalam body untuk hanya mendesain turunan elemen tersebut. Akan tetapi, fitur itu tidak pernah sampai ke browser asli mana pun (setidaknya tidak perlu diaktifkan melalui bendera pengembang) dan telah dihapus dari spesifikasi W3C dan WhatWG "karena kurangnya minat pelaksana" . Setelah itu,styleelemen hanya diizinkan dalam konteks yang mengizinkan konten metadata, yaitu hanya kepala. Jadi kami kembali ke aturan yang sama seperti sebelumnya HTML 5.Namun, karena kesalahan yang dibuat oleh kedua organisasi spesifikasi, indeks elemen non-normatif yang disertakan sebagai lampiran di kedua spesifikasi tidak diperbarui dengan benar untuk mencerminkan penghapusan
scoped, menjadikannya tidak konsisten dengan spesifikasi normatif. Saya menunjukkan ini baik ke WhatWG dan ke W3C , dan dengan melakukan itu tanpa disadari mengatur peristiwa yang menyebabkan dua spesifikasi berbeda.Solusi WhatWG untuk ketidakkonsistenan antara spesifikasi normatif dan indeks non-normatif adalah menerima tambalan saya yang mengoreksi indeks non-normatif.
W3C, di sisi lain, menolak tambalan setara saya alih-alih memperbarui spesifikasi normatif untuk memungkinkan penggunaan
styleelemen dalambody, sementara peringatan ini dengan catatan bahwa itu dapat menyebabkan masalah dan harus dilakukan "dengan hati-hati". Alasan di balik perubahan ini adalah untuk membuat spesifikasi selaras dengan perilaku browser di kehidupan nyata.Jadi, mulai Maret 2017, jawaban resmi untuk pertanyaan ini bergantung pada organisasi standar mana yang Anda pilih untuk didengarkan. Jika Anda mendaftar ke spesifikasi WhatWG (umumnya lebih dihormati), maka
styleelemen tidak diizinkan dibody. Jika Anda mendaftar ke spesifikasi W3C, maka itu diizinkan, tetapi tidak disarankan.Keadaan konyol ini diakhiri (mungkin seperti banyak inkonsistensi lainnya) dengan perjanjian damai April 2019 antara W3C dan WhatWG , yang setuju bahwa spesifikasi WhatWG akan menjadi satu-satunya standar HTML yang hidup, dengan W3C hanya merilis snapshot dari itu sebagai bernomor Spesifikasi HTML alih-alih mengembangkan spesifikasi pesaing secara paralel. Dengan demikian, perubahan dari 2017 ke fork W3C yang mengizinkan
styleelemen dibodytidak lagi menjadi bagian dari spesifikasi saat ini; itu hanyalah keingintahuan akan sejarah.Jadi, hari ini, kita hanya perlu melihat spesifikasi WhatWG untuk menentukan apa yang diizinkan secara resmi. Ini mengatakan:
CTRL-Fing melalui spesifikasi halaman tunggal mengungkapkan bahwa satu-satunya elemen yang model kontennya menyertakan konten metadata adalah
headelemen tersebut.Indeks non-normatif dari elemen yang saya sebutkan sebelumnya juga menegaskan bahwa satu-satunya orang tua yang diizinkan untuk suatu
styleelemen adalah aheadataunoscriptelemen.sumber
Sementara jawaban lain benar, saya terkejut tidak ada yang menjelaskan di mana standar melarang gaya di luar
head.Ini sebenarnya ada di bagian The
headElement (dan di DTD ):<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" --> <!ENTITY % head.content "TITLE & BASE?"> <!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->Ya saya tahu. DTD sulit dibaca.
Ini adalah satu-satunya tempat
STYLEelemen muncul, jadi secara implisit tidak valid di tempat lain.sumber
Mereka tidak seharusnya keluar dari pikiran, tetapi mereka tetap bekerja; meskipun Anda mungkin melihat kedipan cepat. Situs tidak boleh memvalidasi dengan tag gaya di luar kepala, tetapi apakah itu penting? Selain itu, tag tautan juga berfungsi di luar kepala, meskipun seharusnya tidak demikian.
sumber
styles menendang.Seperti yang telah dinyatakan oleh balasan lain, sebenarnya tidak perlu ada di sana. Namun, itu tidak akan divalidasi. Ini mungkin atau mungkin tidak masalah dalam hal ini, tapi harap diingat bahwa rendering html sepenuhnya tergantung pada browser. Dari apa yang saya tahu semua browser yang digunakan saat ini akan mendukung meletakkannya di luar kepala, tetapi Anda tidak dapat menjaminnya untuk browser masa depan dan rilis browser di masa mendatang.
Tetaplah pada standar dan Anda lebih aman. Seberapa aman untuk banyak perdebatan.
sumber
The HTML5.2 W3C Rekomendasi, 14 Desember 2017 (tidak draft sebelumnya disebut di atas) sekarang mengatakan Anda dapat menyertakan
<style>.sumber
styledalambody, jadi kita kembali ke ini sedang jelas dilarang. Lihat jawaban saya jika Anda tertarik dengan jalan berkelok-kelok yang kami lalui di sini.Tag gaya di mana saja kecuali di dalam
<head>tidak akan divalidasi dengan aturan W3C.sumber
Menurut situs ini, HTML5.1 (dalam draf) dan WHATWG memungkinkan
<style>tag diletakkan di badan:http://www.html.am/tags/html-style-tag.cfm
Tampaknya juga telah didukung oleh browser cukup lama. Menurut jawaban StackOverflow ini, Firefox 3+, IE6 +, Safari 2+ dan Chrome 12+ mendukungnya:
https://stackoverflow.com/a/10989663/297793
sumber
Menurut spesifikasi HTML 5.2 (dalam draf), tag gaya hanya diperbolehkan di bagian kepala dokumen.
Draf HTML 5.2 pada Tag Gaya (18 Agustus 2016)
sumber
Anda dapat menggunakan tag gaya di dalam bagian kepala atau bagian tubuh atau juga di luar tag html (html sisi luar tidak disarankan). Dalam proyek waktu nyata banyak waktu Anda dapat melihat mereka menggunakan tag gaya di luar tag html
sumber