10 Editor CSS Online dan Realtime Terbaik

Sebagai seseorang yang belajar CSS, pasti butuh Editor CSS yang realtime agar bisa mengetahui perubahan yang signifikan dari kode yang ditulisnya. Untuk beberapa orang yang sudah mahir, mungkin masih bisa mengira-ngira hasil yang akan didapat dengan menuliskan kode tertentu. Namun, berbeda dengan orang yang baru mengenal dan belajar CSS. CSS Editor yang realtime sangat dibutuhkan untuk mempermudah memahami kode CSS yang ditulis. Berikut ini adalah 10 Editor CSS Online dan Realtime Terbaik menurut Iskael.com.

1. JSFIDDLE

JSFIDDLE ini merupakan editor JavaScript sekaligus CSS yang sangat bersahabat. JSFIDDLE ini realtime menghasilkan tampilan dari hasil kode HTML, JavaScript, dan CSS yang kita masukkan.

JSFIDDLE

2. CODEPEN

Berbeda dengan yang lainnya CODEPEN lebih banyak dihuni oleh kreator CSS yang kreatif. Banyak hasil-hasil yang mencengangkan yang semua itu dibuat dengan CSS.

CODEPEN

3. DABBLET

DABBLET ini sangat unik. Banyak preferensi yang bisa dipilih. Dan perlu diketahui, Dabblet ini dibuat oleh seorang perempuan yang sangat ahli dengan CSS, dia bernama Lea Verou.

DABBLET

4. CSSIZER

CSSIZER lebih mengedepankan tampilan yang sederhana layaknya DABBLET. Tampilan yang putih dengan campuran abu-abu membuat mata tidak bosan saat melakukan pengkodean CSS.

CSSIZER

5. BLUEPEN

BLUEPEN lebih kompleks dari yang lainnya, dia berupa aplikasi yang dipasang di PC dan secara realtime terhubung dengan server BLUEPEN dan hosting kita.

BLUEPEN

6. CSSDESK

CSSDESK ini hampir mirip dengan JSFIDDLE. Hanya saja CSSDESK hanya menangani HTML dan CSS saja, berbeda dengan JSFIDDLE yang menangani JavaScript juga.

CSSDESK

7. SCRATCHPAD

SCRATCHPAD hampir sama dengan DABBLET. Namun lebih cocok untuk orang yang menyukai editor berlatar nuansa gelap.

SCRATCHPAD

8. HTMLINSTANT

HTMLINSTANT ini lebih sederhana daripada editor lainnya.

HTMLINSTANT

9. RENDERA

RENDERA mirip dengan JSFIDDLE yang juga menangani JavaScript.

RENDERA

10. RENDUR

RENDUR ini unik dibandingkan dengan editor yang telah aku sebutkan sebelumnya. Bedanya adalah pengunjung diberikan tampilan awal dan juga popup window yang berisi kode. Saat kode di dalam popup window tersebut diganti, maka tampilan yang ada di belakangnya ikut berubah juga.

RENDUR

Itulah 10 Editor CSS Online dan Realtime Terbaik versi Iskael.com. Kamu bisa mencobanya dan memilih mana yang lebih cocok untukmu. Ayo belajar CSS, CSS itu mudah loh :)

Membangun Website dengan CSS (Bagian 3)

Sebelumnya: Membangun Website dengan CSS (Bagian 2)

Kali ini aku akan membahas tentang sintaks pada CSS yang dibagi menjadi 3 bagian, yaitu: selektor, properti, dan nilai. Selektor adalah elemen HTML yang akan diubahsesuaikan gayanya. Contoh selektor antara lain: body, h1 hingga h6, a, ul, li, dan sebagainya. Sedangkan properti adalah atribut dari selektor yang akan diubah sesuaikan, misalnya: tinggi, lebar, warna latar, dan lain-lain. Begitu juga dengan nilai; nilai adalah isi dari properti. Contoh dari nilai adalah: satuan px untuk tinggi dan lebar; kode heksadesimal untuk warna RGB, dan lain-lain.

Selektor

Ada 3 macam jenis selektor, yaitu: selektor yang berasal dari elemen HTML, selektor yang berasal dari class atau id, dan selektor yang berasal dari pseudo-class. Selektor yang berasal dari elemen HTML, misalnya: body, h1 hingga h6, a, ul, dan sebagainya. Selektor yang berasal dari class biasanya dimulai dengan titik (.) dan selektor yang berasal dari id dimulai dengan pagar (#), misalnya: .button, .clear, #wrapper, #sidebar, dan sebagainya. Sedangkan selektor yang berasal dari pseudo-class dimulai dengan titik dua (:), misalnya: :hover, :visited, dan sebagainya.

Boleh menggabungkan dua atau lebih dari dua selektor agar lebih spesifik target yang akan di-styling, contohnya: #wrapper a:hover { }. Selain itu juga bisa menggabungkan dua selektor atau lebih yang memiliki properti dan nilai yang sama, contohnya: #satu, #dua, #tiga { }.

Properti & Nilai

Banyak macam properti pada CSS. Setiap properti memiliki macam nilai yang berbeda. Misalkan properti width dan display. Properti width memiliki nilai dengan besaran px, %, dan em. Sedangkan properti display memiliki nilai none, block, inline, dan lainnya. Selain itu juga terdapat properti yang khusus digunakan dan berfungsi pada browser tertentu saja. Misalkan prefiks -webkit- bekerja di Safari dan Chrome, -moz- bekerja di Mozzila Firefox, dan -o- bekerja di Opera. Tidak semua properti bisa didukung oleh semua browser, oleh karena itu kita harus bijak dalam menggunakan properti yang disediakan. Untuk lebih jelasnya kamu bisa mengenal banyak properti dan nilai CSS di website W3Schools di bagian yang membahas CSS dan CSS3.

Selanjutnya: Membangun Website dengan CSS (Bagian 4)

Dilema Komentar Google+ Ditinjau dari Beberapa Aspek

Menggunakan fitur baru terkadang harus siap dengan berbagai kemungkinan bug yang akan terjadi. Begitu juga menggunakan komentar Google+, tentunya banyak hal-hal di luar kehendak kita. Memang, memakai jasa gratis dari Google haruslah mematuhi kebijakannya juga.

Awalnya aku beranggapan baik dengan adanya komentar Google+ yang secara otomatis membagikan entri kita ke timeline Google+ komentator. Namun, bagi beberapa orang termasuk aku; kehilangan komentar-komentar yang dahulu adalah bukan hal yang remeh. Google sepertinya memaksa pengguna agar merelakan itu jika ingin menikmati fitur ini. Berikut ini adalah beberapa aspek yang harus siap diterima oleh blogger yang menggunakan komentar Google+.

Tab Komentar Hilang dari Dasbor

Untuk pengguna yang kurang aktif di Google+ akan kesulitan untuk melakukan cek komentar. Hal ini dikarenakan tidak ada notifikasi khusus ataupun tab komentar di dasbor. Bisa kamu liat di bawah ini cuplikan perbedaan antara menggunakan komentar biasa dan komentar Google+.

Komentar biasa

Komentar Google+

Perbedaan Jumlah Komentar di Browser Lain

Hal ini mengagetkanku saat aku mencoba melakukan cek di berbagai browser yang ada di Mac OS-ku. Aku mencobanya di tiga browser, yaitu: Google Chrome, Mozilla Firefox, dan Safari. Anehnya di Safari memunculkan tampilan komentar yang berbeda.

Tampilan di Google Chrome dan Mozilla Firefox

Tampilan di Safari

Tampilan tanpa menggunakan komentar Google+

Lantas, manakah yang bisa aku percaya?

Kegunaan Nilai !important pada Properti CSS

Sering kali kita menjumpai penulisan CSS secara inline di sebuah halaman web. Apalagi ketika kamu mendapat tugas untuk mengubah sebuah style dari beberapa elemen yang ditulis inline.

Prioritas inline adalah yang paling tinggi jika dibandingkan dengan penulisan CSS secara internal maupun eksternal. Hal itu menjadi dilema yang tak kunjung habisnya saat kita hanya mengubah style berdasarkan selektor dengan eksternal CSS.Bagaimana menyelesaikan kasus ini?

Solusi

Cara menyelesaikan kasus ini adalah dengan memahami nilai !important dari properti selektor yang ditulis inline. Berikut adalah kode dan hasil dari penggunaan !important. Amati dan pahami, kamu akan tahu bagaimana !important bekerja.

html-important.html

css-important.css

Hasil render menggunakan !important

Kesimpulan

Browser melakukan render dengan prioritas CSS penulisan inline di atas CSS penulisan internal dan eksternal. Namun, dengan adanya !important, browser mengubah prioritasnya.