Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS

CSS merupakan salah satu bagian pengatur komponen penting yang harus ada dalam sebuah blog/website berbasis HTML atau XHTML, jika Html berfungsi sebagai pemanggil maka CSS adalah penyusun tampilan layoutnya.

Semua elemen yang ada dalam blog/website ditentukan oleh CSS dari segi warna, background, posisi, ukuran, jenis font dan sebagainya. Bisa dikatakan keduanya (Html + CSS) memiliki keterkaitan satu sama lain.

Jika hanya Html saja tidak akan cukup untuk menampilkan halaman web, dibutuhkan CSS untuk memperbaiki tampilan dari Html tersebut. Sebaliknya jika hanya menggunakan CSS tanpa (Html sebagai pemanggil) sebuah halaman tidak akan bisa ditampilkan.

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemorgraman. id.wikipedia.org

Alasan Kenapa Harus Meninggalkan Jquery

Lain halnya dengan Jquery, adalah sebuah library javascript yang berisi kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan penulisan kode JavaScript.

Tentu sajsa Jquery sangat berguna tapi jika dibandingkan dengan User Experience (UX) dari sebuah web maka alangkah baiknya jika Anda harus meninggalkan Jquery karena berpengaruh buruk terhadap UX dan SEO, dari segi UX Jquery memperlambat loading blog/website dan dari segi SEO menghambat proses rendering oleh robot search enggine.

Walaupun ada cara untuk membuat Jquery tidak menghambat SEO namun terkadang hal ini membuat Jquery tidak bekerja sepenuhnya pada sebuah halaman web dan berimbas pada UX dari web tersebut. No more Jquery!

CSS Setara Jquery

Bagaimana cara membuat tampilan (fungsi/efek keren) tanpa Jquery?

Setelah dirilisnya CSS3 bisa kami katakan CSS hampir setara dengan Jquery untuk menampilkan efek Show Hide, Pop Up, Smooth Scroll dan sebagainya.

Banyak yang belum mengetahui bahwa CSS sudah melebihi ekspektas dari yang awalnya hanya mengatur layout, background dan sebagainya, sampai sekarang sudah menjadi sebuah komponen yang serbaguna.

Jika ditangan yang tepat dengan bantuan HTML sebagai pemanggil, CSS bisa membuat berbagai fungsi dan efek khusus untuk memaksimalkan tampilan blog/website. Percaya atau tidak, tampilan dan beberapa fungsi dari web blog ini hanya dibangun dengan CSS.

Lantas Bagaimana Caranya?

Hal inilah yang akan dibahas dan kami beberkan caranya di artikel ini dan artikel-artikel selanjutnya.

Memaksimalkan penggunaan CSS

1. Compress CSS

Pertama perkecil ukuran CSS pada blog/websie Anda dengan cara menyatukan semuanya dalam satu baris seperti contoh dibawah:

 div {   display: table;   position: relative;   padding: 20px 0; } h1 {   display: block;   margin-bottom: 20px;   font-size: 25px; } 

Gabung semua artibut CSS kedalam satu baris menjadi:

 div {display: table;position: relative;padding: 20px 0;} h1 {display: block;margin-bottom: 20px;font-size: 25px;} 

Jika Anda sudah expert atau mahir menggunakan CSS bisa menggabungkan semua kode dalam satu baris seperti dibawah ini:

 div{display:table;position:relative;padding:20px 0;}h1{display:block;margin-bottom:20px;font-size:25px;} 

2. Gunakan CSS Selector

Bagian kedua inilah yang menjadi kunci untuk membuat fungsi khusus yang setara dengan Javascript hanya dengan menggunakan CSS. Pada artikel W3Schools.com terdapat sekitar 55 Selector CSS, namun yang akan dijelaskan disini hanya beberapa Selector penting yang jarang digunakan namun punya peran penting dalam CSS:

1. div > p - Berfungsi untuk memilih semua elemen <p> yang hanya turunan langsung dari <div>. Berbeda dengan penulisan div p, penulisan seperti ini memilih semua elemen <p> yang terdapat dalam <div> tanpa perduli baik itu turunan langsung atau bukan, silahkan perhatikan contohnya pada laman ini
2. div + p - Digunakan untuk memilih elemen <p> yang ditempatkan tepat setelah kode <div>, tidak akan berfungsi jika diantara <div> dan <p> terdapat kode Html lain, contoh penempatan yang memenuhi syarat adalah sebagai berikut:
   
   

    <div></div> <p>Isi teks halaman</p> <!-- Elemen <p> tepat berada di bawah <div> --> 

   
   div + p Tidak akan berfungsi jika penulisannya seperti ini:
   
   

    <div></div> <h2>Contoh Heading</h2> <p>Isi teks halaman</p> 

   
   
3. [attribute=value] - Hanya memilih elemen dengan atribut yang sudah ditentukan, sebagai contoh Kami menuliskan kode CSS dan html dibawah ini:
   
   

    <style> p[style='display:block'] {background: #ea6d23;} </style>  <p>Isi teks halaman</p> <p style='display:block'>Kode CSS diatas hanya akan bekerja pada <p> baris ini yang di beri atribut style='display:block' </p>   

   
   
4. :checked - Kode ini berfungsi untuk input tipe Checkbox atau Radio, dimana jika input tersebut diklik atau dipilih maka kode CSS akan berfungsi. Untuk contoh akan ditulis di artikel terpisah
5. :focus - Biasa digunakan untuk input tipe textbox atau textarea dengan fungsi yang sama yaitu ketika input di klik(pengguna menuliskan sesuatu didalam input) barulah kode CSS aktif. contoh juga akan menyusul diartikel terpisah
   
   Penerapan CSS :focus
   
   • Cara Membuat Search Bar Melayang Responsive Pure CSS
   
   
6. :target - Kode ini ditunjukkan untuk link yang tertarget. contoh jagodesan.com/#header, artinya jika link semisal (dengan akhiran #header dan sebagainya) di klik makan kode CSS akan aktif
7. :first-of-type - Ditujukan untuk elemen turunan pertama dari jenis yang sama, contoh:
   
   

    <style> p:first-of-type {background: #ea6d23;} </style>  <div>   <p>CSS diatas hanya akan berfungsi pada bagian ini yang merupakan elemen turunan pertama dari jenisnya, jika kode CSS diubah menjadi p:last-of-type maka kode CSS hanya aktif pada <p> paragraf ketiga atau elemen terakhir.</p>   <p>Contoh paragraf kedua</p>   <p>Contoh paragraf ketiga</p> </div> 

   
   

Dengan bermodal beberapa selector diataslah kami akan membuat berbagai tutorial membuat fungsi web keren hanya dengan CSS. Pada artikel berikutnya kami akan menuliskan tutorial penggunaan Selector CSS untuk menghasilkan fungsi atau efek keren dengan penjelasan yang lebih detail.

Referensi : w3schools.com

Sumber https://www.jagodesain.com/

Bagikan Artikel ini