Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / Developer

Percepat Loading Blog Dengan Memaksimalkan Penggunaan Css

CSS merupakan salah satu bab pengatur komponen penting yang harus ada dalam sebuah blog Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS

CSS merupakan salah satu bab pengatur komponen penting yang harus ada dalam sebuah blog/website berbasis HTML atau XHTML, jikalau Html berfungsi sebagai pemanggil maka CSS yaitu 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) mempunyai keterkaitan satu sama lain.

Jika hanya Html saja tidak akan cukup untuk menampilkan halaman web, diharapkan CSS untuk memperbaiki tampilan dari Html tersebut. Sebaliknya jikalau hanya memakai CSS tanpa (Html sebagai pemanggil) sebuah halaman tidak akan sanggup ditampilkan.
Cascading Style Sheet (CSS) merupakan hukum 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, yaitu sebuah library javascript yang berisi kumpulan dari banyak sekali fungsi 'siap pakai' untuk memudahkan penulisan isyarat JavaScript.

Tentu sajsa Jquery sangat berkhasiat tapi jikalau dibandingkan dengan User Experience (UX) dari sebuah web maka alangkah baiknya jikalau Anda harus meninggalkan Jquery alasannya besar lengan berkuasa jelek 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 menciptakan Jquery tidak menghambat SEO namun terkadang hal ini menciptakan Jquery tidak bekerja sepenuhnya pada sebuah halaman web dan berimbas pada UX dari web tersebut. No more Jquery!

CSS Setara Jquery

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

Setelah dirilisnya CSS3 sanggup kami katakan CSS hampir setara dengan Jquery untuk menampilkan pengaruh 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, hingga kini sudah menjadi sebuah komponen yang serbaguna.

Jika ditangan yang sempurna dengan pemberian HTML sebagai pemanggil, CSS sanggup menciptakan banyak sekali fungsi dan pengaruh 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 menyerupai rujukan 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 memakai CSS sanggup menggabungkan semua isyarat dalam satu baris menyerupai 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 menciptakan fungsi khusus yang setara dengan Javascript hanya dengan memakai CSS. Pada artikel W3Schools.com terdapat sekitar 55 Selector CSS, namun yang akan dijelaskan disini hanya beberapa Selector penting yang jarang dipakai namun punya tugas penting dalam CSS:

  1. div > p - Berfungsi untuk menentukan semua elemen <p> yang hanya turunan pribadi dari <div>. Berbeda dengan penulisan div p, penulisan menyerupai ini menentukan semua elemen <p> yang terdapat dalam <div> tanpa perduli baik itu turunan pribadi atau bukan, silahkan perhatikan misalnya pada laman ini
  2. div + p - Digunakan untuk menentukan elemen <p> yang ditempatkan sempurna sesudah isyarat <div>, tidak akan berfungsi jikalau diantara <div> dan <p> terdapat isyarat Html lain, rujukan penempatan yang memenuhi syarat yaitu sebagai berikut:

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

    div + p Tidak akan berfungsi jikalau penulisannya menyerupai ini:

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

  3. [attribute=value] - Hanya menentukan elemen dengan atribut yang sudah ditentukan, sebagai rujukan Kami menuliskan isyarat 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 jikalau input tersebut diklik atau dipilih maka isyarat CSS akan berfungsi. Untuk rujukan akan ditulis di artikel terpisah
  5. :focus - Biasa dipakai untuk input tipe textbox atau textarea dengan fungsi yang sama yaitu dikala input di klik(pengguna menuliskan sesuatu didalam input) barulah isyarat CSS aktif. contoh juga akan menyusul diartikel terpisah

    Penerapan CSS :focus

  6. :target - Kode ini ditunjukkan untuk link yang tertarget. rujukan jagodesan.com/#header, artinya jikalau link semisal (dengan akhiran #header dan sebagainya) di klik makan isyarat 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 bab ini yang merupakan elemen turunan pertama dari jenisnya, jikalau isyarat CSS diubah menjadi p:last-of-type maka isyarat 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 menciptakan banyak sekali tutorial menciptakan fungsi web keren hanya dengan CSS. Pada artikel berikutnya kami akan menuliskan tutorial penggunaan Selector CSS untuk menghasilkan fungsi atau pengaruh keren dengan klarifikasi yang lebih detail.

Referensi : w3schools.com