Khi một tác vụ có thể được thực hiện bằng Javascript hoặc CSS, sử dụng CSS có tốt hơn không? [đóng cửa]


11

Tôi luôn phủ quyết JavaScript bằng cách sử dụng CSS càng nhiều càng tốt.

tức là tôi tạo các tab và nút cuộn qua bằng CSS chứ không phải JavaScript.

Tôi đã thấy một số giải pháp, đặc biệt là chương trình khung web của Wt, người ủng hộ JavaScript; nhưng duyên dáng hạ cấp xuống CSS nếu trình duyệt không có khả năng / js bị vô hiệu hóa.

Tôi biết CSS và JavaScript có các mục đích khác nhau, tuy nhiên có sự trùng lặp; đó là bourne của câu hỏi này.

Tôi có nên tiếp tục sử dụng CSS càng nhiều càng tốt qua JavaScript không?

Câu trả lời:


10

Đúng.

Mục đích CSS là bố cục, giao diện và hình ảnh động

Mục đích của JavaScript là sự tương tác.

Nếu bạn đang thực hiện bố cục, hãy sử dụng CSS, nếu bạn đang thiết lập giao diện sử dụng CSS, nếu hoạt hình của bạn sử dụng CSS3

Nếu bạn đính kèm trình xử lý sự kiện hoặc phản ứng với đầu vào của người dùng, hãy sử dụng JavaScript.

Lưu ý rằng mọi người sử dụng JavaScript thay vì CSS để hỗ trợ trình duyệt. Có các giải pháp khác như mô phỏng các tính năng CSS bằng cách sử dụng javascript.


1
Tôi thích rất nhiều tính năng được triển khai trong CSS3, tuy nhiên hỗ trợ trình duyệt đã chậm và tôi vẫn cần phải tạo điều kiện cho các trình duyệt cũ. Mặt khác, tôi cũng sử dụng HTML5 để xác thực đầu vào: P
AT

javascript không chỉ được sử dụng để tương tác. Nó cũng có thể được sử dụng để gửi dữ liệu trở lại máy chủ web và nhiều thứ khác.
eriawan

Tương tác @eriawan có thể là một thuật ngữ mơ hồ. nhưng javascript chủ yếu làm x khi tương tác với người dùng, trong đó x là tùy ý
Raynos

12

Vâng, đó thực sự là một câu hỏi khá thú vị. Tôi đang cố gắng nghĩ về cách bạn thậm chí sẽ làm một điểm chuẩn cho một cái gì đó như thế này, đặc biệt là vì hầu hết thời gian, cả CSS và JavaScript đều không thực hiện những điều thực sự chuyên sâu về tính toán trên một trang web.

Tôi cảm thấy ruột thịt sẽ nói rằng sử dụng CSS càng nhiều càng tốt, nhưng đừng biến nó thành một quy tắc khó và nhanh.

a:hover {
  background-color: green;
}

về mặt ngữ nghĩa thì tốt hơn

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

NHƯNG

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

sẽ là khó khăn (mặc dù không phải là không thể) trong CSS. Bạn có thể làm theo cách này.

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

a.green {
  background-color: green;
}

Đây thực sự sẽ là một cách khó xử hơn một chút để làm trực tiếp những gì có thể được thực hiện bằng JavaScript, nhưng tôi đã suy nghĩ về nó trong vài phút và ngay cả ở đây, giải pháp phù hợp rất có thể là CSS, ví dụ nếu bạn đã thiết lập rất nhiều thuộc tính khi thực hiện di chuột.

** Xin lưu ý rằng không có mã nào trong số này được dự kiến ​​sẽ hoạt động, chúng chỉ dành cho mục đích trình diễn. **


3
Nói tốt, nhưng với ví dụ thứ hai của bạn, tôi cũng sẽ không ngần ngại sử dụng lớp CSS (được đặt tên tốt hơn). Có sự trùng lặp nhất định giữa hai bên về cách trình bày và hành vi, nhưng trong những ví dụ này khá đơn giản - hành vi đang thay đổi giao diện khi di chuột, sự xuất hiện được mô tả trong CSS.
Sevenseacat

3

Xem xét nếu bạn sẽ làm như sau từ Mạng lưới nhà phát triển Yahoo :

"Sau khi xử lý các con số, chúng tôi đã tìm thấy một tỷ lệ nhất quán các yêu cầu bị vô hiệu hóa JavaScript chiếm khoảng 1% lưu lượng truy cập thực tế, với tỷ lệ cao nhất là khoảng 2% ở Hoa Kỳ và thấp nhất là khoảng 0,25% ở Brazil. các quốc gia khác được thử nghiệm cho thấy con số rất gần với 1,3%. "

Với tỷ lệ phần trăm quá thấp (tối đa) dường như không đáng (trừ khi người dùng trang web của bạn chủ yếu đến từ 2% đó) để lo lắng về trường hợp người dùng tắt javascript của họ. Người dùng trung bình không biết cách tắt javascript và có thể không quan tâm. Nếu bạn đang phát triển một trang web công nghệ, bạn có thể muốn xem xét khả năng họ sẽ vô hiệu hóa javascript, tuy nhiên nếu họ có thể đã sử dụng các trang web không hoạt động chính xác vì nhiều trang web sử dụng javascript rất nhiều.

Tất cả những gì được nói tôi đã tìm thấy nhiều trường hợp trong đó việc phát triển javascript làm cho những gì tôi đang cố gắng thực hiện dễ dàng hơn nhiều và các trường hợp khác mà css cũng làm như vậy.

Cuối cùng, mỗi "ngôn ngữ" có vị trí thích hợp trong phát triển web và được sử dụng một cách khôn ngoan có thể nâng cao cả sự phát triển và trải nghiệm người dùng. Tìm hiểu những sử dụng đó là gì (tôi khuyên bạn nên có kinh nghiệm học tập) và áp dụng một cách khôn ngoan. Theo kinh nghiệm của tôi, thiết lập các quy tắc chính xác như "Không bao giờ sử dụng JS khi giải pháp CSS tồn tại" (được diễn giải) hiếm khi tốt nhất trong thế giới thực tế.


Cảm ơn vì điều này, rất thông tin. Bạn có thể mở rộng trên đoạn thứ 4 của bạn?
NGÀY

3
CSS là một công cụ "tạo kiểu" và Javascript là một công cụ "tương tác". Tôi đã thấy rằng việc tạo các menu thả xuống dễ dàng hơn nhiều, ví dụ như được tạo kiểu bằng css nhưng hoạt hình bằng javascript. Bạn có thể làm điều đó với css? Đúng. Bạn có thể đóng đinh với một trình điều khiển vít? Đúng. Ví dụ ngược lại, nếu tất cả những gì bạn cần làm là thay đổi màu sắc trên một liên kết khi chuột ở trên liên kết thì có lẽ hơi quá mức để sử dụng Javascript cho điều đó khi có một yếu tố CSS được thiết kế riêng cho mục đích đó. Bạn có thể làm điều đó với Javascript không? Có ... Bạn có thể giết một con nhện bằng búa tạ không? Có ...
Kenneth

2

JavaScript là một ngôn ngữ máy tính thực sự, có nghĩa là nó có trạng thái và kiểm soát thực hiện chương trình. Như vậy, không có giới hạn trên về mức độ phức tạp của nó và bất cứ điều gì bạn viết trong đó chắc chắn sẽ có mức độ phức tạp tối thiểu đáng kể. CSS là một mã mô tả; độ phức tạp của nó được giới hạn ở mức độ phức tạp mà một công thức có thể có. Do đó, nếu một cái gì đó có thể được thực hiện cả trong CSS và JavaScript, tôi sẽ sử dụng CSS nhiều hơn, vì nó chắc chắn sẽ ít phức tạp hơn.


1
"Nếu một cái gì đó có thể được thực hiện bằng CSS chứ không phải JavaScript, tôi sẽ sử dụng CSS nhiều hơn, vì nó chắc chắn sẽ ít phức tạp hơn" ... Làm thế nào để bạn tìm ra? Nó thực sự phụ thuộc vào những gì bạn đang cố gắng làm hay không, liệu nó có phức tạp hơn trong JS vs CSS không ...
Kenneth

Như tôi đã nói, một chương trình có trạng thái kiểm soát thực thi chắc chắn sẽ phức tạp hơn nhiều so với bất kỳ công thức nào từng có.
Mike Nakis

ví dụ: Tôi thấy việc thực hiện các menu thả xuống trong css phức tạp hơn nhiều vì bạn phải thực hiện rất nhiều điều chỉnh và thêm nhiều phần tử html bổ sung chỉ để nó hoạt động trên các trình duyệt bình thường và sau đó nếu bạn muốn nó hoạt động ở chế độ cũ hơn hoặc trình duyệt đi lạc (IE, v.v.) thậm chí nhiều hơn là bắt buộc. Với javascript, cần một vài dòng mã đơn giản để tạo hiệu ứng cho nó một vài dòng css để tạo kiểu cho nó.
Kenneth

Chắc chắn, không cần phải nói rằng "Cần có sự quyết định của lập trình viên". Nếu nó không thể được thực hiện bằng CSS hoặc nếu nó không được khuyến khích do sự không tương thích của trình duyệt, thì bằng mọi cách, JavaScript sẽ được ưu tiên. Câu trả lời của tôi là nhiều hơn về mặt học thuật của mọi thứ hơn là phía thực dụng.
Mike Nakis

Câu hỏi nhanh (chỉ dành cho câu trả lời này): IE6 có hỗ trợ phiên bản JavaScript giống như các trình duyệt hiện đại không? - Bằng cách này, tôi có nghĩa là trừu tượng hóa thông tin vì vậy tôi không cần phải lo lắng về "tiêu chuẩn" dành riêng cho trình duyệt.
NGÀY

1

Javascript là một ngôn ngữ kịch bản, có nghĩa là nó có khả năng thêm một số logic. CSS được sử dụng để mô tả giao diện và kiểu dáng của tài liệu. Nó được thiết kế chủ yếu để tách cấu trúc tài liệu khỏi định dạng và bố cục (trình bày).

Bạn có thể sử dụng Javascript để sửa đổi giao diện của trang web nhưng vì CSS được dự định để làm điều đó, tôi sẽ sử dụng CSS cho kiểu trang web và để phần còn lại cho Javascript.


Wikipedia:

Sử dụng Javascript:

  • Mở hoặc bật lên một cửa sổ mới với sự kiểm soát theo chương trình về kích thước, vị trí và các thuộc tính của cửa sổ mới (ví dụ: có thể nhìn thấy các menu, thanh công cụ, v.v.) không.
  • Xác thực các giá trị đầu vào của biểu mẫu web để đảm bảo rằng chúng được chấp nhận trước khi được gửi đến máy chủ.
  • Thay đổi hình ảnh khi con trỏ chuột di chuyển qua chúng: Hiệu ứng này thường được sử dụng để thu hút sự chú ý của người dùng vào các liên kết quan trọng được hiển thị dưới dạng các yếu tố đồ họa.

CẬP NHẬT. Về điểm thứ ba, W3C nói về CSS:

Lớp :hovergiả áp dụng trong khi người dùng chỉ định một phần tử với thiết bị trỏ, nhưng không nhất thiết phải kích hoạt nó. Ví dụ, một tác nhân người dùng trực quan có thể áp dụng lớp giả này khi con trỏ (con trỏ chuột) di chuyển qua một hộp được tạo bởi phần tử.


Sử dụng CSS:

Trước CSS, gần như tất cả các thuộc tính trình bày của các tài liệu HTML đã được chứa trong đánh dấu HTML; tất cả các màu phông chữ, kiểu nền, sự sắp xếp thành phần, đường viền và kích thước phải được mô tả rõ ràng, thường được lặp đi lặp lại trong HTML. CSS cho phép các tác giả chuyển nhiều thông tin đó sang một biểu định kiểu riêng biệt dẫn đến việc đánh dấu HTML đơn giản hơn đáng kể.


1
"Thay đổi hình ảnh khi con trỏ chuột di chuyển qua chúng: Hiệu ứng này thường được sử dụng để thu hút sự chú ý của người dùng vào các liên kết quan trọng được hiển thị dưới dạng các yếu tố đồ họa." - Không phải đó là một tính năng của CSS sao?
AT

@AT Vâng, bạn đúng (+1) và cảm ơn vì đã đưa nó lên. Lớp hovergiả có mục đích đó. Tôi chỉ trích dẫn. Đã chỉnh sửa.
pferor
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.