Beranda» CSS » Web Design »Pengertian Inline Css Dan Cara Mengatasinya
- Oktober 13, 2019
A+ A-

Pengertian Inline Css Dan Cara Mengatasinya

Pengertian Inline Css Dan Cara Mengatasinya - Ketika menguji situs di Google PageSpeed Insights mungkin kamu akan melihat peluang untuk menambah kecepatan pemuatan (loading) situs yaitu dengan mengurangi atau menghilangkan Inline Css dari dalam template situs. Sebenarnya apa sih yang dimaksud dengan inline css itu? Inline Css adalah style css yang ditanamkan pada line/baris HTML, Sederhananya Inline Css merupakan style css yang berada di area tag pembuka <body> dan tag penutup </body> "tidak berada ditempat yang seharusnya yaitu <head>". Untuk lebih jelasnya mari kita simak contoh gambar dibawah ini;
Pengertian Inline Css Dan Cara Mengatasinya
Penjelasan: CSS (Cascading Style Sheets) sepatutnya dikumpulkan "berada" diantara tag pembuka <head> dan </head>, jika style css berada di bagian body atau berada pada line html maka style css tersebut disebut sebagai inline css.

Cara Mengatasi Inline Css

Sebagian kecil inline css dapat dihapus begitu saja namun sebagian lagi tidak, harus ditambahkan property (id='...' atau class='...') pada elemen html yang di dalamnya terdapat inline css, kemudian memindahkan style css pada properti baru dan menempatkan nya di <head>. Contoh;
[code type="HTML"]<textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>[/code]
Pada baris html textarea tersebut, style='display:none;' dikatakan sebagai inline css, karena berada pada baris atau line html, jadi untuk menghilangkan inline css dari baris html tersebut kita tambahkan property baru sehingga menjadi seperti dibawah ini;
[code type="HTML"]<textarea class='hide-textarea' expr:id='&quot;postData-&quot; + data:post.id'><data:post.body/></textarea>[/code]
Kemudian css style='display:none;' diganti menjadi .hide-textarea{display:none} kemudian ditempatkan pada kumpulan css yang berada diantara tag <head> dan </head>, atau di atas kode ]]></b:skin> jika kamu pengguna blogger.

Contoh Inline Css lainnya

Pada template web (blogger) kamu mungkin sering melihat kode ini <div style='clear: both;'/>, kode tersebut juga merupakan inline css karena terdapat property style css di dalam kode html, untuk merubahnya agar tidak menjadi inline css ganti kode tersebut dengan <div class='clear'/> kemudian tambahkan style css ini; .clear{display:block;clear:both;height:0} ke bagian kumpulan css yang berada di tag head.

Contoh inline css lainnya adalah; kode <div style='text-align: center; margin:10px 0'>Element Lain</div> kode ini biasanya digunakan untuk memposisikan suatu elemen menjadi center (ditengah-tengah), sebaiknya tidak seperti itu, silahkan ganti <div style='text-align: center; margin:10px 0'> dengan kode <div id='middle-ad'> misalnya, kemudian css nya menjadi;
#middle-ad{clear:both;display:block;text-align:center;margin:10px 0;}
Dan ditempatkan pada kumpulan css yang seharusnya yaitu di area <head>.

Catatan: Sebelum menambahkan id atau property 'class' baru misalnya: middle-ad pastikan nama id atau class baru tersebut belum ada pada elemen yang lain, agar style CSS tidak bercampur antara satu dengan yang lain.

Masih banyak lagi bentuk-bentuk inline css yang bisa kamu temui pada html template web kamu khusus nya template blogger, seperti properti "width" dan "height" ,biasanya inline css terdapat pada widget-widget blogger seperti widget header, followbyemail, popular post dan sebagainya.

Lakukan perubahan secara perlahan dan jangan lupa backup template anda sebelum merubah atau mengedit sesuatu di dalamnya guna menghindari kesalahan.

Tips: Pada prinsipnya inline css merupakan hal yang wajar, namun jika halaman web memuat terlalu banyak inline css maka akan menyulitkan browser dalam menguraikan situs web. Menghilangkan inline css hingga 100% memang sangat sulit dilakukan.
,