Jangan inline css atribut di elemen html

Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mungkin jangan inline css atribut dalam elemen html. Beberapa dampak yang mungkin akan ditimbulkan jika anda melakukan ini adalah blog menjadi tidak valid html (karena adanya duplikasi atribut seperti yang telah saya sebutkan di atas). Selain itu inline css atribut dalam elemen html akan membuat css atribut yang telah di inline akan di blokir karena hal ini tidak sesuai dengan kebijakan keamanan konten. Untuk lebih jelasnya tentang kebijakan keamanan konten anda bisa membaca di http://www.w3.org/TR/CSP/.

Selain itu inline css atribut ke dalam elemen html tidak sesuai dengan pagespeed rules developer google insights tentang Optimize CSS Delivery. Inline CSS atribut ke dalam elemen html hanya akan menambah waktu loading blog anda. Hal ini terjadi karena browser memerlukan waktu tambahan untuk membaca atribut css yang terdapat di dalam dokumen html blog anda (secara umum dokumen html di artikan sebagai halaman suatu blog atau situs). Bentuk yang umum di jumpai seperti berikut ini: < div style=' ini atau itu' > kode js atau kode lain< /div >, ataupun < p style='...' >Kalimat ini atau kalimat itu< /p >.

Contoh inline css atribut dalam elemen html

Beberapa contoh paling sederhana yang saya ketahui dan hampir bisa saya pastikan ada di setiap html template blogger anda.

1. < div style='clear: both;' / >
Jika anda temukan kode ini di html template anda. Hampir bisa saya pastikan akan muncul errors untuk kode diatas saat anda cek blog anda di http://validator.w3.org/. Hal ini terjadi karena terdapat atribut css di dalam tag html (div).

Cara agar kode < div style='clear: both;' / > valid html5

Lantas bagaimana cara membuat kode diatas valid html5 dan tidak lagi terdapat atribut css dalam tag html template. Ganti kode di atas dengan kode < div class='clear'/ > serta tambahkan kode css .clear{clear:both} ini sebelum kode ]] >< /b:skin > di dalam html template anda.

2. < div style='float:left atau right atau none' >< /div >
Kode ini paling banyak digunakan blogger indonesia untuk memasang iklan (dibawah judul postingan). Padahal fungsi kode ini secara umumnya bisa lebih banyak dari hanya sekedar memasang iklan. Sebagai contoh anda bisa memasang iklan di bawah postingan blog anda dengan memasang kode:

< div style='float:left atau right atau none' > (pilih salah satu antara left, right atau none)
Kode iklan yang sudah di parse
< /div >
sebelum kode < data:post.body/ >.

Saya sendiri sangat menghargai para blogger yang telah membagikan pengalamannya untuk pengguna internet perihal kode ini dan manfaatnya. Hanya saja menurut saya kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog anda sama dengan anda inline css atribut di elemen html.

Cara agar kode < div style='float:left atau right atau none' >< /div > valid html5

Untuk membuat kode ini valid html, ganti kode di atas dengan < div class='tentukan-nama-untuk-elemen-ini' >...< /div >. Serta jangan lupa untuk menambahkan kode css .tentukan-nama-untuk-elemen-ini{float:left atau right atau none} sebelum kode ]] >< /b:skin > di html template anda.

Pastinya masih lebih banyak contoh lagi tentang bentuk inline css dalam dalam elemen html. Lantas bagaimana cara mengetahui berapa jumlah css atribut yang telah kita inline di elemen html. Tidak banyak situs yang saya ketahui untuk cek masalah ini. Tapi setidaknya saya tahu satu situs milik Patrick Sexton (terima kasih Patrick, berkat artikel anda tentang pagespeed rule yang membuat blog ini loading lebih cepat dari sebelumnya) yang menyediakan tools cek css delivery.