Apa bedanya jika saya meletakkan file css di dalam <head> atau <body>?

155

Biasanya file css diletakkan di dalam <head></head>, bagaimana jika saya memasukkannya ke dalam <body></body>, apa bedanya?

html css Shawn
sumber

Jawaban:

116

Untuk menambahkan apa yang telah disebutkan oleh jdelStrother tentang spesifikasi w3 dan ARTstudio tentang perenderan browser.

Disarankan karena ketika Anda memiliki CSS yang dideklarasikan sebelum <body>dimulai, gaya Anda sebenarnya sudah dimuat. Jadi, sangat cepat pengguna melihat sesuatu muncul di layar mereka (misalnya warna latar belakang). Jika tidak, pengguna melihat layar kosong untuk beberapa waktu sebelum CSS mencapai pengguna.

Juga, jika Anda meninggalkan gaya di suatu tempat di <body>browser, browser harus merender ulang halaman (baru dan lama saat memuat) ketika gaya yang dinyatakan telah diuraikan.

mauris
sumber
10
Ya tentu saja di HTML5 tidak apa-apa. Tetapi dalam hal rendering, mungkin lebih lambat karena browser me-render halaman seperti yang saya sebutkan.
mauris
4
Ya, tidak diragukan lagi. Saya baru saja menambahkannya di sini agar orang yang baru saja membaca jawaban yang diterima tidak akan melewatkannya. :)
Vilx-
3
@Vilx itu informasi yang salah! linkdan styletidak boleh muncul di badan kecuali mereka dicakup (gaya) atau itempropdideklarasikan atribut (tautan).
Christoph
2
@Christoph ini tidak benar, styleadalah elemen aliran di html5 dan html4.1 (bahkan jika itu tidak dicakup) dan dapat dimasukkan ke dalam tubuh.
Kpym
1
@Kpym Anda terlambat 3 tahun ke pesta ;-) Tapi Anda benar, style sekarang menjadi elemen aliran dan scopedatributnya sudah usang.
Christoph
40

Versi terbaru dari spesifikasi HTML sekarang memungkinkan <style>tag di dalam elemen tubuh. https://www.w3.org/TR/html5/dom.html#flow-content Juga scopedatribut yang dulu merupakan prasyarat untuk memiliki styletag di bodysekarang sudah usang.

Ini berarti, bahwa Anda dapat menggunakan styletag di mana pun Anda inginkan, satu-satunya implikasi adalah penurunan kinerja halaman karena kemungkinan reflow / pengecatan ulang setelah browser menekan style lebih jauh ke bawah di pohon halaman.

Jawaban usang:

The <style>tag tidak diperbolehkan dalam <body>sesuai dengan spesifikasi w3. (Tentu saja, Anda dapat menerapkan gaya sebaris melalui <div style="color:red">jika perlu, tetapi umumnya dianggap sebagai pemisahan gaya & konten yang buruk)

Jonathan del Strother
sumber
3
Ini tidak benar, <style>adalah elemen aliran dalam html 5 dan 4.1 dan dapat dimasukkan ke dalam tubuh (seperti semua elemen aliran lainnya).
Kpym
1
+1 saya untuk menjaga agar jawaban Anda selalu terbarui!
Benjamin
14

Menempatkan CSS di badan berarti dimuat nanti. Ini adalah teknik yang digunakan beberapa orang untuk membuat browser mulai menggambar antarmuka lebih cepat (yaitu, menghapus langkah pemblokiran). Ini penting untuk pengalaman pengguna di SmartPhones.

Saya melakukan yang terbaik untuk menjaga satu css kecil di <head>dan saya memindahkan sisanya di bagian bawah. Misalnya, jika sebuah halaman menggunakan JQuery UI CSS, saya selalu memindahkannya di bagian bawah <body>, tepat sebelum tautan ke javascript JQuery. Setidaknya, semua item non Jquery sudah bisa ditarik.

Jérôme Verstrynge
sumber
7

Head dirancang untuk (Mengutip W3C):

"informasi tentang dokumen saat ini, seperti judulnya, kata kunci yang mungkin berguna untuk mesin pencari, dan data lain yang tidak dianggap sebagai konten dokumen "

Lihat struktur Global dokumen HTML . Karena CSS bukan konten dokumen, itu harus di kepala.

Juga setiap pengembang Web lain akan berharap untuk melihatnya di sana, jadi jangan bingung dengan meletakkannya di dalam tubuh, bahkan jika itu berfungsi!

Satu-satunya CSS yang harus Anda masukkan ke dalam tubuh adalah inline CSS , meskipun saya biasanya menghindari gaya inline.

RichardOD
sumber
3
Saya sepenuhnya mengikuti apa yang Anda katakan. Tetapi bagaimana Anda menangani situasi di mana Anda memiliki banyak halaman, beberapa di antaranya menyertakan konten dari file terpisah (dalam kasus saya, sebagian halaman .NET Razor) dan setiap kali file itu dimasukkan, stylesheet tertentu juga harus ditautkan? Entah tautan di tajuk dari setiap halaman Included_ing_, atau tautan di badan halaman Included_ed_. Yang pertama sesuai dengan "css di header", sedangkan yang terakhir sesuai dengan "menulis sekali".
OutstandingBill
4

Standar ( HTML 4.01: elemen gaya ) dengan jelas menetapkan bahwa tag gaya hanya diperbolehkan di dalam tag kepala. Jika Anda memasukkan tag gaya ke dalam tag body, browser akan tetap berusaha melakukan yang terbaik, jika memungkinkan.

Mungkin saja peramban akan mengabaikan tag gaya di badan jika Anda menentukan jenis dokumen yang ketat. Saya tidak tahu apakah ada peramban saat ini melakukan ini, tapi saya tidak akan mengandalkan semua versi di masa depan untuk begitu santai tentang di mana Anda menempatkan elemen gaya.

Guffa
sumber
1
@Pacerier: Dalam HTML5, styletag diizinkan di dalam tubuh jika memiliki scopedatribut.
Guffa
Astaga, semua orang memberikan jawaban yang bertentangan: stackoverflow.com/questions/4957446/…
Pacerier
2
@Pacerier: Itu karena informasi dalam komentar itu tidak lengkap. Anda dapat memiliki tag gaya dalam tag tubuh, tetapi hanya jika mereka memiliki atribut cakupan. Berikut adalah dokumen standar yang menentukan tag gaya: dev.w3.org/html5/spec-preview/the-style-element.html
Guffa
menurut W3 scope atribut hanya didukung oleh firefox jadi apa intinya?
JSON
1

Selain jawaban sebelumnya, meskipun menempatkan blok kode gaya di dalam elemen dapat bekerja di browser modern (meskipun itu masih tidak membuatnya benar), selalu ada bahaya, terutama dengan browser lama bahwa browser akan membuat kode sebagai teks kecuali bagian gaya termasuk dalam bagian CDATA.

Tentu saja hal lain dengan meletakkannya di dalam elemen, selain gaya inline, adalah karena tidak memenuhi spesifikasi W3C HTML / XHTML adalah bahwa setiap halaman dengan itu di dalam tubuh akan gagal pada validator W3C. Selalu lebih mudah untuk mengatasi masalah tampilan yang tidak terduga jika semua kode Anda valid, membuatnya lebih mudah untuk menemukan kesalahan. Elemen HTML yang tidak valid dapat berdampak buruk terhadap penguraian setiap dan semua elemen di luar tempat kode itu muncul, sehingga Anda bisa mendapatkan efek yang tidak terduga memiliki elemen di tempat-tempat di mana seharusnya tidak, karena ketika browser menemukan elemen yang tidak valid, itu hanya membuat tebakan terbaik untuk menampilkannya, dan peramban yang berbeda dapat membuat keputusan yang berbeda tentang bagaimana mereka membuatnya.

Apakah Anda menggunakan doctype transisi atau ketat, itu masih akan tidak valid sesuai dengan spesifikasi (X) HTML.

Malcolm
sumber
0

Anda benar-benar akan mengalahkan tujuan menggunakan CSS dengan meletakkan gaya di dalam tubuh. Intinya adalah untuk memisahkan konten dari presentasi (dan fungsi). Dengan cara ini, perubahan apa pun pada gaya dapat dilakukan dalam lembar gaya, bukan dalam konten. Setelah Anda menggunakan metode gaya sebaris, setiap halaman yang memiliki gaya sebaris perlu diubah satu per satu. Membosankan, dan berisiko karena Anda bisa melewatkan satu atau tiga halaman, atau sepuluh.

Menggunakan stylesheet, Anda hanya perlu mengubah stylesheet; perubahan menyebar secara otomatis ke setiap halaman HTML yang tertaut ke stylesheet.

titik neonble juga merupakan alasan bagus lainnya; jika Anda mengacaukan HTML dengan menambahkan CSS inline, rendering menjadi masalah. HTML tidak melempar pengecualian ke kode Anda. Alih-alih itu keluar dan menjadikannya cara terbaik yang bisa, dan bergerak.

Mengikuti standar web dengan menggunakan stylesheet membuat situs web menjadi lebih baik. Dan ketika Anda membutuhkan bantuan karena hal-hal di halaman Anda tidak persis seperti yang Anda inginkan, menempatkan CSS di kepala sebagai lawan dari badan membuat pemecahan masalah yang lebih baik sendiri dan bagi siapa pun yang Anda minta bantuan.

tahdhaze09
sumber
2
Saya tidak mengerti apa yang Anda bicarakan. " Setelah Anda menggunakan metode gaya sebaris" - siapa yang berbicara tentang penggunaan gaya sebaris di sini? Pertanyaannya mengatakan file css .
TJ
0

Dua jawaban yang bertentangan:

Dari halaman MDN pada tag tautan:

Sebuah <link>elemen dapat terjadi baik dalam <head>atau <body> elemen, tergantung pada apakah ia memiliki jenis link yang tubuh-ok. Misalnya, tipe tautan stylesheet adalah body-ok, dan karenanya a <link rel="stylesheet">diizinkan di dalam body. Namun ini bukan praktik terbaik; lebih masuk akal untuk memisahkan <link>elemen Anda dari konten tubuh Anda, menempatkannya di kepala Anda.

Dari CSS The Definitive Guide (Edisi ke-4/2017) halaman 10

Agar berhasil memuat stylesheet eksternal, tautan harus ditempatkan di dalam elemen head tetapi tidak boleh ditempatkan di elemen lain.

Gangguan
sumber
-1

Perbedaannya adalah. Pemuatan halaman tidak sinkron, jadi jika Anda memiliki stylesheet eksternal, ia akan memuat file css segera ketika mencapai tag tautan, itu sebabnya baik ada di bagian atas dalam kepala.

Tameshwar
sumber
-1

Apa bedanya?

Pro: Terkadang lebih mudah untuk menerapkan atribut tertentu di tempat-tempat tertentu, terutama jika kode dihasilkan dengan cepat (seperti membangun melalui php dan masing-masing daftar berukuran dinamis membutuhkan kelasnya sendiri ... seperti untuk penentuan waktu item untuk transformasi).

Cons: Sedikit lebih lambat, mungkin tidak bekerja suatu hari nanti di masa depan yang jauh.

Pendapat umum saya tentang itu: Jangan lakukan itu, Anda tidak harus melakukannya, tetapi jika Anda harus melakukannya, jangan kehilangan waktu tidur karenanya.

liljoshu
sumber
-3

Menempatkan <style>di dalam tubuh berfungsi baik dengan semua browser modern.

Saya telah menggunakan ini di eBay.

Jika berhasil, jangan tendang.

Randall Glass
sumber