Ketika tugas dapat diselesaikan dengan Javascript atau CSS, apakah lebih baik menggunakan CSS? [Tutup]

Saya selalu memveto JavaScript dengan menggunakan CSS sebanyak mungkin.

yaitu saya membuat tab dan tombol rollover menggunakan CSS daripada JavaScript.

Saya telah melihat beberapa solusi — khususnya kerangka kerja web Wt — yang mendukung JavaScript; tapi turunkan ke CSS dengan anggun jika browser tidak mampu / js-dinonaktifkan.

Saya tahu CSS dan JavaScript memiliki tujuan berbeda, namun ada tumpang tindih; yang merupakan bourne dari pertanyaan ini.

Haruskah saya terus menggunakan CSS sebanyak mungkin melalui JavaScript?

Iya.

Tujuan CSS adalah tata letak, tampilan dan nuansa dan animasi

Tujuan JavaScript adalah interaksi.

Jika Anda melakukan tata letak, gunakan CSS, jika Anda mengatur tampilan dan nuansa menggunakan CSS, jika animasi Anda menggunakan CSS3

Jika Anda melampirkan penangan acara atau bereaksi terhadap input pengguna gunakan JavaScript.

Perhatikan bahwa orang menggunakan JavaScript alih-alih CSS untuk dukungan browser. Ada solusi lain seperti meniru fitur CSS menggunakan javascript.

Ya, itu sebenarnya pertanyaan yang cukup menarik. Saya mencoba memikirkan bagaimana Anda akan melakukan benchmark pada sesuatu seperti ini, terutama karena sebagian besar waktu baik CSS atau JavaScript tidak akan melakukan hal-hal yang sangat intensif secara komputasi pada halaman web.

Perasaan saya akan mengatakan bahwa gunakan CSS sebanyak mungkin, tetapi jangan membuatnya menjadi aturan yang keras dan cepat.

a:hover {
  background-color: green;
}

lebih baik secara semantik

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

TAPI

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

akan sulit (meskipun bukan tidak mungkin) di CSS. Anda bisa melakukannya dengan cara ini.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Ini benar-benar akan menjadi cara yang sedikit lebih canggung untuk melakukan apa yang bisa dilakukan dalam JavaScript secara langsung, tetapi saya telah memikirkannya selama beberapa menit, dan bahkan di sini, solusi yang tepat mungkin adalah CSS, misalnya jika Anda mengatur banyak atribut saat melakukan hover.

** Harap dicatat bahwa tidak ada kode ini yang diharapkan berfungsi, ini hanya untuk tujuan demonstrasi saja. **

Pertimbangkan apakah Anda akan mengikuti yang berikut dari Jaringan Pengembang Yahoo :

"Setelah menghitung angka-angka, kami menemukan tingkat yang konsisten dari permintaan yang dinonaktifkan oleh JavaScript yang berada di sekitar 1% dari lalu lintas pengunjung aktual, dengan tingkat tertinggi sekitar 2 persen di Amerika Serikat dan yang terendah sekitar 0,25 persen di Brasil. Semua negara-negara lain yang diuji menunjukkan angka yang sangat dekat dengan 1,3 persen. "

Dengan persentase yang sangat rendah (sebagai maksimum) tampaknya hampir tidak layak (kecuali jika pengguna situs web Anda berasal terutama dari 2%) untuk khawatir tentang kasus di mana pengguna dimatikan javascriptnya. Rata-rata pengguna tidak tahu cara mematikan javascript dan kemungkinan tidak peduli. Jika Anda mengembangkan situs web teknologi, Anda mungkin ingin mempertimbangkan kemungkinan bahwa mereka akan menonaktifkan javascript, namun jika mereka cenderung digunakan untuk situs web yang tidak berfungsi dengan benar karena banyak situs web banyak menggunakan javascript.

Semua yang dikatakan saya telah menemukan banyak kasus di mana pengembangan javascript membuat apa yang saya coba selesaikan lebih mudah dan kasus-kasus lain di mana css melakukan hal yang sama.

Pada akhirnya setiap "bahasa" memiliki tempat yang sesuai dalam pengembangan web dan digunakan secara bijak dapat meningkatkan pengembangan dan pengalaman pengguna. Pelajari apa manfaatnya (saya sarankan pengalaman belajar) dan terapkan dengan bijak. Dalam pengalaman saya, mengatur aturan batu seperti "Jangan pernah gunakan JS ketika ada solusi CSS" (diparafrasekan) jarang yang terbaik di dunia praktis.

JavaScript adalah bahasa komputer sungguhan, artinya ia memiliki status dan kendali pelaksanaan program. Dengan demikian, tidak ada batas atas seberapa kompleksnya itu bisa didapat, dan apa pun yang Anda tulis di dalamnya pasti memiliki kompleksitas minimum yang substansial. CSS adalah kode deskriptif; kompleksitasnya terbatas pada tingkat kerumitan yang dimiliki resep. Oleh karena itu, jika sesuatu dapat dilakukan baik dalam CSS dan JavaScript, saya lebih suka menggunakan CSS, karena itu pasti kurang kompleks.

Javascript adalah bahasa scripting, artinya memiliki kemampuan untuk menambahkan beberapa logika. CSS digunakan untuk menggambarkan tampilan dan gaya dokumen. Itu dirancang terutama untuk memisahkan struktur dokumen dari pemformatan dan tata letak (presentasi).

Anda dapat menggunakan Javascript untuk mengubah tampilan halaman web tetapi karena CSS dimaksudkan untuk melakukan itu, saya akan menggunakan CSS untuk gaya situs dan menyerahkan sisanya ke Javascript.

Wikipedia:

Penggunaan Javascript:

• Membuka atau membuka jendela baru dengan kontrol terprogram atas ukuran, posisi, dan atribut jendela baru (misalnya apakah menu, bilah alat, dll., Terlihat).
• Memvalidasi nilai input formulir web untuk memastikan bahwa mereka dapat diterima sebelum dikirim ke server.
• Mengubah gambar saat kursor mouse bergerak di atasnya: Efek ini sering digunakan untuk menarik perhatian pengguna ke tautan penting yang ditampilkan sebagai elemen grafis.

MEMPERBARUI. Adapun poin ketiga, W3C mengatakan tentang CSS:

Kelas :hoverpseudo berlaku saat pengguna menunjuk elemen dengan perangkat penunjuk, tetapi tidak harus mengaktifkannya. Sebagai contoh, agen pengguna visual dapat menerapkan kelas semu ini ketika kursor (kursor mouse) melayang di atas kotak yang dihasilkan oleh elemen.

Penggunaan CSS:

Sebelum CSS, hampir semua atribut penyajian dokumen HTML terkandung dalam markup HTML; semua warna font, gaya latar belakang, perataan elemen, batas dan ukuran harus dijelaskan secara eksplisit, sering berulang kali, dalam HTML. CSS memungkinkan penulis untuk memindahkan banyak informasi tersebut ke style sheet terpisah yang menghasilkan markup HTML yang jauh lebih sederhana.