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


11

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?

Jawaban:


10

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.


1
Saya suka banyak fitur yang diterapkan di CSS3, namun dukungan browser lambat, dan saya masih perlu memfasilitasi browser lawas. Kalau tidak, saya akan menggunakan HTML5 untuk validasi input juga: P
AT

javascript tidak hanya digunakan untuk interaksi. Itu juga dapat digunakan untuk mengirim data kembali ke server web, dan banyak hal lainnya.
eriawan

Interaksi @eriawan mungkin istilah yang tidak jelas. tetapi javascript terutama dilakukan x ketika berinteraksi dengan pengguna, di mana x adalah
arbiter

12

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. **


3
Kata bagus, tetapi untuk contoh kedua Anda, saya juga tidak akan ragu untuk menggunakan (lebih baik bernama) kelas CSS. Ada tumpang tindih yang pasti antara keduanya dalam hal presentasi dan perilaku, tetapi dalam contoh ini cukup mudah - perilaku tersebut mengubah tampilan pada mouseover, penampilan dijelaskan dalam CSS.
sevenseacat

3

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.


Terima kasih untuk ini, informasi yang sangat. Bisakah Anda memperluas paragraf ke-4 Anda?
AT

3
CSS adalah alat "penataan" dan Javascript adalah alat "interaktivitas". Saya telah menemukan bahwa lebih mudah untuk membuat menu drop down misalnya ditata dengan css tetapi dianimasikan dengan javascript. Bisakah Anda melakukannya dengan css? Iya. Bisakah Anda memalu paku dengan obeng? Iya. Sebagai contoh sebaliknya, jika semua yang perlu Anda lakukan adalah memiliki perubahan warna pada tautan ketika mouse berada di atas tautan maka mungkin sedikit berlebihan untuk menggunakan Javascript untuk itu ketika ada elemen CSS yang dirancang khusus untuk tujuan itu. Bisakah Anda melakukannya dengan Javascript? Ya ... Bisakah Anda membunuh seekor laba-laba dengan palu godam? Ya ...
Kenneth

2

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.


1
"Jika sesuatu dapat dilakukan dengan menggunakan CSS daripada JavaScript, saya lebih suka menggunakan CSS, karena itu pasti kurang kompleks" ... Bagaimana menurut Anda? Ini benar-benar tergantung pada apa yang Anda coba lakukan, apakah akan lebih kompleks di JS vs CSS ...
Kenneth

Seperti yang saya katakan, program stateful dengan kontrol eksekusi pasti jauh lebih kompleks daripada resep apa pun.
Mike Nakis

misalnya: Saya merasa jauh lebih kompleks untuk melakukan drop down menu dalam css karena Anda harus melakukan begitu banyak tweak dan menambahkan banyak elemen html tambahan untuk membuatnya bekerja di browser normal dan kemudian jika Anda ingin itu bekerja di yang lebih tua atau browser liar (IE, dll) bahkan lebih banyak diperlukan. Dengan javascript dibutuhkan beberapa baris kode sederhana untuk menghidupkannya dan beberapa baris css untuk menatanya.
Kenneth

Tentu, tak perlu dikatakan bahwa "kebijaksanaan Programmer diperlukan". Jika itu tidak dapat dilakukan dalam CSS, atau jika tidak disarankan karena ketidakcocokan browser, maka dengan segala cara, JavaScript lebih disukai. Jawaban saya lebih pada sisi akademis daripada sisi pragmatis.
Mike Nakis

Pertanyaan sampingan cepat (hanya untuk jawaban ini): Apakah IE6 mendukung versi JavaScript yang sama dengan browser modern? - Dengan ini saya bermaksud untuk mengabstraksi informasi sehingga saya tidak perlu khawatir tentang "standar" khusus browser.
AT

1

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.


1
"Mengubah gambar ketika kursor mouse bergerak di atasnya: Efek ini sering digunakan untuk menarik perhatian pengguna ke tautan penting yang ditampilkan sebagai elemen grafis." - Bukankah itu fitur CSS?
AT

@AT Ya, Anda benar (+1), dan terima kasih telah mengemukakannya. Kelas hoversemu memiliki tujuan itu. Saya hanya mengutip. Diedit.
pferor
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.