Cara Optimalkan Inline CSS Atribute Agar Blog Valid HTML5

Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mungkin jangan inline css atribut dalam elemen html. Dampak yang mungkin ditimbulkan jika kita melakukan ini adalah blog menjadi tidak valid HTML. Karena 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.

Ketentuan tentang 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 berdampak pada speed loading Blog kita. Karena  browser memerlukan waktu tambahan untuk membaca atribut CSS yang terdapat di dalam dokumen HTML blog kita atau 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 >, atau < p style='...' >pernyataan/kalimat ini itulah< /p >.

Berikut ini adalah contoh inline CSS atribute dalam elemen HTML

Contoh paling sederhana dan hampir bisa dipastikan ada di setiap html template blogger kita.

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 atribute 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 umum digunakan blogger 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/ >.

Menurut BLOGGINGPASURUAN kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog kita sama saja dengan inline CSS Atribute di elemen HTML.

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

Untuk membuat kode ini valid html5, 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.

Masih banyak contoh tentang bentuk inline CSS dalam dalam elemen HTML. Bagaimana cara mengetahui berapa jumlah CSS Atribute yang sudah kita inline di elemen HTML. Untuk cek CSS Blog Anda silahkan masuk ke  situs milik Patrick Sexton yang menyediakan Tools Check CSSDelivery

Semoga bermanfaat………..

Facebook

Twitter

Pinterest

More

Less

Tumblr

Mix

E-Mail

GMail

LinkedIn

Reddit

XING

WhatsApp

Hacker News

VK

Telegram

OK

Messenger

Line

Copy Link