เมื่องานสามารถทำได้โดยทั้ง Javascript หรือ CSS มันจะดีกว่าถ้าใช้ CSS? [ปิด]

ฉันมักจะยับยั้ง JavaScript โดยใช้ CSS ให้มากที่สุด

นั่นคือฉันสร้างแท็บและปุ่มแบบโรลโอเวอร์โดยใช้ CSS แทน JavaScript

ฉันได้เห็นวิธีแก้ปัญหาบางอย่าง - โดยเฉพาะWt web-frameworkซึ่งสนับสนุน JavaScript; แต่ปรับลดรุ่นเป็น CSS อย่างสวยงามหากเบราว์เซอร์ไม่สามารถ / js-disabled

ฉันรู้ CSS และ JavaScript มีวัตถุประสงค์ที่แตกต่างกัน แต่มีการทับซ้อนกัน ซึ่งเป็นบอร์นของคำถามนี้

ฉันควรใช้ CSS ต่อไปให้มากกว่า JavaScript หรือไม่

ใช่.

จุดประสงค์ของ CSS คือเลย์เอาต์รูปลักษณ์และความรู้สึกและภาพเคลื่อนไหว

วัตถุประสงค์ของ JavaScript คือการโต้ตอบ

หากคุณกำลังทำโครงร่างใช้ CSS หากคุณตั้งค่ารูปลักษณ์และความรู้สึกใช้ CSS หากการเคลื่อนไหวของคุณใช้ CSS3

หากคุณแนบตัวจัดการเหตุการณ์หรือตอบสนองต่อการป้อนข้อมูลของผู้ใช้ใช้ JavaScript

โปรดทราบว่าผู้คนใช้ JavaScript แทน CSS สำหรับการสนับสนุนเบราว์เซอร์ มีวิธีแก้ไขปัญหาอื่น ๆ เช่นการเลียนแบบ CSS โดยใช้จาวาสคริปต์

นั่นเป็นคำถามที่น่าสนใจทีเดียว ฉันพยายามคิดว่าคุณจะสร้างมาตรฐานในบางสิ่งเช่นนี้ได้อย่างไรโดยเฉพาะอย่างยิ่งเนื่องจากส่วนใหญ่แล้วทั้ง CSS หรือ JavaScript จะไม่ทำสิ่งที่คำนวณอย่างเข้มข้นบนหน้าเว็บ

ความรู้สึกของฉันจะบอกว่าใช้ CSS มากที่สุด แต่อย่าทำให้มันเป็นกฎที่ยากและรวดเร็ว

a:hover {
  background-color: green;
}

ดีกว่าความหมายแล้ว

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

แต่

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

จะเป็นเรื่องยาก (แม้ว่าจะเป็นไปไม่ได้) ใน CSS คุณสามารถทำได้ด้วยวิธีนี้

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

a.green {
  background-color: green;
}

นี่จะเป็นวิธีที่น่าอึดอัดใจกว่าเล็กน้อยในการทำสิ่งที่สามารถทำได้ใน JavaScript โดยตรง แต่ฉันคิดอยู่สองสามนาทีและที่นี่การแก้ปัญหาที่ถูกต้องอาจเป็น CSS เช่น หากคุณตั้งค่าคุณลักษณะจำนวนมากเมื่อทำการโฮเวอร์

** โปรดทราบว่าไม่มีรหัสใดที่คาดว่าจะใช้งานได้ซึ่งเป็นเพียงเพื่อการสาธิตเท่านั้น **

พิจารณาว่าคุณจะทำสิ่งต่อไปนี้จากเครือข่ายนักพัฒนา Yahoo :

"หลังจากกระทืบตัวเลขเราพบว่าอัตราคำขอปิดการใช้งาน JavaScript ที่สอดคล้องกันนั้นมีอัตราการเข้าชมจากผู้เข้าชมจริงประมาณ 1% โดยอัตราสูงสุดอยู่ที่ประมาณ 2 เปอร์เซ็นต์ในสหรัฐอเมริกาและต่ำสุดประมาณ 0.25 เปอร์เซ็นต์ในบราซิล ประเทศอื่น ๆ ที่ทดสอบพบว่ามีตัวเลขใกล้เคียงกับร้อยละ 1.3 "

ด้วยเปอร์เซ็นต์ที่ต่ำมาก (สูงสุด) ดูเหมือนว่าแทบจะไม่คุ้มค่า (ยกเว้นว่าผู้ใช้เว็บไซต์ของคุณมาจาก 2% นั้น) ต้องกังวลเกี่ยวกับกรณีที่ผู้ใช้ปิดจาวาสคริปต์ ผู้ใช้โดยเฉลี่ยไม่ทราบวิธีปิด JavaScript และมีแนวโน้มว่าจะไม่สนใจ หากคุณกำลังพัฒนาเว็บไซต์เทคโนโลยีคุณอาจต้องการพิจารณาความเป็นไปได้ว่าพวกเขาจะปิดการใช้งานจาวาสคริปต์ แต่หากพวกเขามีแนวโน้มที่จะคุ้นเคยกับเว็บไซต์ที่ทำงานไม่ถูกต้องเนื่องจากเว็บไซต์จำนวนมากใช้จาวาสคริปต์อย่างหนัก

ทั้งหมดที่กล่าวว่าฉันได้พบหลายกรณีที่การพัฒนาจาวาสคริปต์ทำให้สิ่งที่ฉันพยายามทำสำเร็จได้ง่ายขึ้นและกรณีอื่น ๆ ที่ css ทำเช่นเดียวกัน

ในที่สุดแต่ละภาษา "" มีสถานที่ที่เหมาะสมในการพัฒนาเว็บและใช้อย่างชาญฉลาดสามารถเสริมสร้างการพัฒนาและประสบการณ์ของผู้ใช้ เรียนรู้ว่าการใช้เหล่านั้นคืออะไร (ฉันขอแนะนำให้เรียนรู้ประสบการณ์) และนำไปใช้อย่างชาญฉลาด จากประสบการณ์ของฉันตั้งกฎหินเช่น "ไม่เคยใช้ JS เมื่อมีโซลูชัน CSS" (ถอดความ) ไม่ค่อยดีที่สุดในโลกที่ใช้งานได้จริง

JavaScript เป็นภาษาคอมพิวเตอร์จริงซึ่งหมายความว่ามีสถานะและควบคุมการทำงานของโปรแกรม ดังนั้นจึงไม่มีข้อ จำกัด ที่ชัดเจนว่ามันจะซับซ้อนแค่ไหนและอะไรก็ตามที่คุณเขียนลงไปจะต้องมีความซับซ้อนน้อยมาก CSS เป็นรหัสอธิบาย ความซับซ้อนนั้น จำกัด อยู่ที่ระดับของความซับซ้อนที่สูตรสามารถมีได้ ดังนั้นหากสิ่งที่สามารถทำได้ทั้งใน CSS และ JavaScript ฉันจะค่อนข้างใช้ CSS เพราะมันถูกผูกไว้ให้ซับซ้อนน้อยลง

Javascript เป็นภาษาสคริปต์หมายถึงมีความสามารถในการเพิ่มตรรกะบางอย่าง CSS ใช้เพื่ออธิบายลักษณะและรูปแบบของเอกสาร มันถูกออกแบบมาเพื่อแยกโครงสร้างเอกสารจากการจัดรูปแบบและเค้าโครง (งานนำเสนอ) เป็นหลัก

คุณสามารถใช้ Javascript เพื่อปรับเปลี่ยนรูปลักษณ์ของหน้าเว็บ แต่เนื่องจาก CSS มีจุดประสงค์ที่จะทำเช่นนั้นฉันจะไปกับ CSS สำหรับรูปแบบของไซต์และปล่อยให้ส่วนที่เหลือเป็น Javascript

วิกิพีเดีย:

Javascript ใช้:

• การเปิดหรือเปิดหน้าต่างใหม่ด้วยการควบคุมขนาดตำแหน่งและคุณสมบัติของโปรแกรมใหม่โดยทางโปรแกรม (เช่นไม่ว่าจะเป็นเมนูแถบเครื่องมือ ฯลฯ สามารถมองเห็นได้)
• การตรวจสอบค่าอินพุตของเว็บฟอร์มเพื่อให้แน่ใจว่ายอมรับได้ก่อนที่จะส่งไปยังเซิร์ฟเวอร์
• การเปลี่ยนภาพในขณะที่เคอร์เซอร์เลื่อนอยู่เหนือภาพ: เอฟเฟกต์นี้มักใช้เพื่อดึงดูดความสนใจของผู้ใช้ไปยังลิงค์สำคัญที่แสดงเป็นองค์ประกอบกราฟิก

UPDATE สำหรับประเด็นที่สามW3Cพูดถึง CSS:

:hoverหลอกชั้นนำไปใช้ขณะที่ผู้ใช้กำหนดองค์ประกอบที่มีอุปกรณ์ชี้ตำแหน่ง แต่ไม่จำเป็นต้องเปิดใช้งานได้ ตัวอย่างเช่นเอเจนต์ผู้ใช้แบบเห็นภาพสามารถใช้คลาสหลอกนี้เมื่อเคอร์เซอร์ (ตัวชี้เมาส์) วนอยู่เหนือกล่องที่สร้างโดยองค์ประกอบ

การใช้ CSS:

ก่อนหน้า CSS นั้นเกือบทุกแอตทริบิวต์ของเอกสาร HTML นั้นมีอยู่ใน HTML markup สีแบบอักษรทั้งหมดพื้นหลังสไตล์การจัดองค์ประกอบองค์ประกอบเส้นขอบและขนาดต้องอธิบายอย่างชัดเจนบ่อยครั้งภายใน HTML CSS ช่วยให้ผู้เขียนสามารถย้ายข้อมูลส่วนใหญ่ไปยังสไตล์ชีตที่แยกต่างหากทำให้เกิดมาร์กอัพ HTML ที่ง่ายกว่ามาก