Tôi có nên sử dụng ký hiệu dấu hai chấm đơn hoặc dấu hai chấm cho các phần tử giả không?


108

Vì IE7 và IE8 không hỗ trợ ký hiệu dấu hai chấm cho các phần tử giả (ví dụ ::afterhoặc ::first-letter) và vì các trình duyệt hiện đại hỗ trợ ký hiệu dấu hai chấm (ví dụ :after) để tương thích ngược, tôi có nên chỉ sử dụng ký hiệu dấu hai chấm đơn không và khi nào Thị phần của IE8 giảm xuống mức không đáng kể hãy quay lại tìm / thay thế trong cơ sở mã của tôi? Hoặc tôi nên bao gồm cả hai:

.foo:after,
.foo::after { /*styles*/ }

Sử dụng double một mình có vẻ ngớ ngẩn nếu tôi quan tâm đến người dùng IE8 (những người nghèo khổ).

Câu trả lời:


71

Đừng không sử dụng cả hai kết hợp với một dấu phẩy. Tác nhân người dùng tuân thủ CSS 2.1 (không có khả năng CSS3) sẽ bỏ qua toàn bộ quy tắc:

Khi tác nhân người dùng không thể phân tích cú pháp bộ chọn (tức là nó không phải là CSS 2.1 hợp lệ), nó cũng phải bỏ qua bộ chọn và khối khai báo sau (nếu có).

CSS 2.1 mang lại ý nghĩa đặc biệt cho dấu phẩy (,) trong bộ chọn. Tuy nhiên, vì không biết dấu phẩy có thể có ý nghĩa khác trong các bản cập nhật CSS trong tương lai hay không, toàn bộ câu lệnh sẽ bị bỏ qua nếu có lỗi ở bất kỳ đâu trong bộ chọn, mặc dù phần còn lại của bộ chọn có thể trông hợp lý trong CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

Tuy nhiên bạn có thể sử dụng

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

Mặt khác, điều này dài dòng hơn mức cần thiết; hiện tại, bạn có thể sử dụng ký hiệu một dấu hai chấm.


7
cảm ơn vì đã bao gồm thông tin về dấu phẩy và bỏ qua. Điều đó có lẽ đã khiến tôi (và có thể những người khác) phải vò đầu bứt tai trong một thời gian. Có vẻ như điều tốt nhất khi 99% trình duyệt đang sử dụng hỗ trợ ký hiệu dấu hai chấm là chuyển sang sử dụng ký hiệu đó và (bởi vì không ai sẽ bỏ hỗ trợ dấu hai chấm đơn và phá vỡ web, vì vậy thậm chí không có điểm nào trong việc tìm kiếm sau này / thay thế mã cũ tại thời điểm đó).
jinglesthula

2
Đây không phải là con đường phía trước. Tiến trình của trình duyệt sẽ được đẩy nhanh nếu mọi người ngừng tìm hiểu các trình duyệt cũ, bị hỏng và không được dùng nữa.
Gershom

2
@Gershom Maes: Thật không may, điều đó không phải dành cho bạn. Tôi nghĩ rằng một phần lớn các nhà phát triển hy vọng điều tương tự, nhưng nó sẽ không xảy ra.
BoltClock

@Gershom Maes chúng ta có thể mơ
James Cushing

1
Tôi nghĩ điều quan trọng cần lưu ý là việc duy trì các kiểu trùng lặp có thể có vấn đề. Như cHao lưu ý dưới đây, mã trùng lặp thích phân kỳ. Hầu hết các nhà phát triển có thể có được cắn nó một vài lần để thề nó đi :)
jinglesthula

62

Từ bộ chọn CSS3 REC :

Ký hiệu :: này được giới thiệu bởi tài liệu hiện tại để thiết lập sự phân biệt giữa lớp giả và phần tử giả.
Để tương thích với các biểu định kiểu hiện có, tác nhân người dùng cũng phải chấp nhận ký hiệu dấu hai chấm trước đó cho các phần tử giả được giới thiệu trong CSS cấp 1 và 2 (cụ thể là: first-line,: first-letter,: before và: after).
Tính tương thích này không được phép đối với các phần tử giả mới được giới thiệu trong đặc điểm kỹ thuật này.

Có vẻ như bạn đang an toàn khi sử dụng (chỉ) ký hiệu một dấu hai chấm cho các phần tử giả đã tồn tại trong CSS2.1 vì UA phải tương thích ngược.


1
Đối với hồ sơ, câu trả lời này cũng có thể được đánh dấu là đúng. Nó cung cấp một số quan điểm có giá trị, mặc dù động lực cho câu hỏi ban đầu cụ thể là các yếu tố giả trước và sau. Cảm ơn vì đã thêm nó.
jinglesthula

Làm thế nào bạn đi đến kết luận đó? Tôi đã đưa ra kết luận ngược lại ... nếu dấu hai chấm đơn sẽ không được phép cho các phần tử giả mới, bạn có nên bắt đầu sử dụng dấu hai chấm để có thói quen không?
andrewtweber

@andrewtweber trong ngữ cảnh của câu hỏi ban đầu (IE8) sử dụng double sẽ phá vỡ CSS. Điều đó nói rằng, khi viết bài này, hầu hết các trang web có thể thấy việc sử dụng IE8 ở mức thấp đến mức cho phép tăng gấp đôi mà không có bất kỳ sự thất thoát đáng kể nào. Các nhà cung cấp trình duyệt có thể được dựa vào để hỗ trợ ký hiệu đơn một cách lâu dài, nhưng không có gì sai khi chuyển đổi thói quen mã hóa vào thời điểm này.
jinglesthula

@andrewtweber +1 cho OP Yep, IE8 đã được tính đến vào năm 2012 và - YMMV - vẫn đang ở trong năm 2015 trong các dự án B2B khổng lồ và tương tự nhưng không phải trong các dự án web khác. Cả hai ký hiệu đều hoàn toàn hợp lệ cho các giả hiện có này. Việc rút gọn CSS sẽ thu được 1 byte bằng cách sử dụng ký hiệu một dấu hai chấm. Nếu bạn muốn luôn sử dụng ký hiệu này và cấm ký hiệu kia, thì đó là quy ước bạn hoàn toàn tự do làm như vậy với nhóm của mình nhưng đó không phải là một Khuyến nghị.
FelipeAls

@jinglesthula và Felipe, bạn nói đúng, tôi không để ý ngày tháng. Có lẽ câu trả lời sẽ được cập nhật tuy nhiên, kể từ khi câu hỏi này đi lên cao trong kết quả tìm kiếm
andrewtweber

22

Tôi hoàn toàn không đồng ý với @mddw và @FelipeAls, liên quan đến việc xem xét việc sử dụng một dấu hai chấm là "an toàn".

Tâm lý "Tôi sẽ sử dụng nó ngay cả khi nó không được chấp nhận" chính là lý do tại sao các công nghệ dựa trên trình duyệt lại rất chậm trong việc phát triển và tiến bộ về phía trước.

CÓ, chúng tôi muốn duy trì khả năng tương thích với các tiêu chuẩn cũ. Hãy đối mặt với nó, đó là bàn tay mà chúng ta đã bị xử lý. NHƯNG, điều này không có nghĩa là bạn có lý do để lười biếng trong quá trình phát triển của mình, bằng cách bỏ qua các tiêu chuẩn hiện tại để ủng hộ những tiêu chuẩn bị phản đối.

Mục tiêu ngoài ra phải là duy trì sự tuân thủ các tiêu chuẩn hiện hành, đồng thời hỗ trợ càng nhiều tiêu chuẩn kế thừa càng tốt.

Nếu phần tử giả sử dụng :trong CSS2 và ::trong CSS3, chúng ta không nên sử dụng cái này hay cái kia; chúng ta nên sử dụng cả hai .

Để trả lời đầy đủ câu hỏi ban đầu được hỏi, sau đây là phương pháp thích hợp nhất để hỗ trợ triển khai CSS mới nhất (phiên bản 3), trong khi vẫn giữ nguyên hỗ trợ cũ cho phiên bản 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

3
Tôi nghĩ rằng khá an toàn khi cho rằng các nhà cung cấp trình duyệt sẽ tiếp tục hỗ trợ ký hiệu cũ vô thời hạn do số lượng mã thực tế sẽ không bao giờ được cập nhật mà họ muốn trình duyệt của họ hiển thị 'chính xác'. Mặt khác, việc duy trì các bản sao riêng biệt của các phong cách làm dấy lên lá cờ đỏ KHÔ, tôi nghĩ. Tôi nghĩ thực dụng hơn là lười sử dụng ký hiệu dấu hai chấm cho đến khi thị phần IE7 giảm xuống. Điều đó nói rằng, tôi muốn web tiến lên phía trước nhiều như bất kỳ ai!
jinglesthula

9
Nếu bạn " hoàn toàn không đồng ý " với câu trả lời của tôi, thì bạn hoàn toàn không đồng ý với từ must trong Đề xuất W3C. " Mục tiêu rõ ràng phải là duy trì sự tuân thủ các tiêu chuẩn hiện tại, đồng thời hỗ trợ càng nhiều tiêu chuẩn kế thừa càng tốt. " Là điều được phần này của REC giải quyết và nó tuyên bố rõ ràng rằng UA không được buộc tác giả sử dụng cả hai ký hiệu và giải thích cách các UA này phải thực hiện điều này. Vui lòng liên hệ với CSS WG danh sách gửi thư nếu bạn không đồng ý với điều đó (hoặc trên Twitter @glazou đồng chủ tịch của Nhóm làm việc này)
FelipeAls

4
Tôi không đồng ý với toàn bộ câu trả lời của bạn, chỉ liên quan đến việc sử dụng một dấu hai chấm là "an toàn". tính tương thích không được phép đối với các phần tử giả mới có nghĩa là bất kỳ phần tử giả nào trong tương lai sẽ chỉ được triển khai trong ::. Theo cách tiếp cận của bạn, các cá nhân sau đó sẽ bắt đầu trộn và kết hợp việc sử dụng :::cho các phần tử giả. Tuân thủ rõ ràng tiêu chuẩn cũ (hiện tại có thể được hỗ trợ,) là một thực hành vốn dĩ không tốt và nên tránh bất cứ khi nào hợp lý có thể. Nếu bạn không đồng ý với tuyên bố đó, chúng tôi chỉ đơn giản là giữ các quan điểm khác nhau.
Joshua Burns

4
Tuân thủ một tiêu chuẩn tương thích rõ ràng vốn dĩ không phải là một việc làm xấu, nếu tính tương thích là một mục tiêu. Mặt khác, việc sử dụng cả hai dẫn đến các kiểu trùng lặp - và như bất kỳ ai đã viết mã một thời gian đều biết, mã trùng lặp chỉ thích khác nhau.
cHao

8
@JoshuaBurns Nếu người tiền nhiệm của tôi đã sao chép một đoạn mã để bảo vệ khỏi mối đe dọa tưởng tượng trong tương lai, tôi sẽ cảm thấy "mệt mỏi" hơn đáng kể.
Mark Amery

2

Tuy nhiên, việc sử dụng polyfills cho cả javascript và CSS mới ngày càng trở nên phổ biến , vì vậy bạn có thể chỉ muốn sử dụng ::cú pháp dấu hai chấm ( ) mới hơn và duy trì polyfill cho các trình duyệt cũ hơn, miễn là điều đó là cần thiết.


Đây thực chất chỉ là một câu trả lời meta; nó không cung cấp bất kỳ thông tin hữu ích nào. Nếu một câu trả lời đã lỗi thời, hãy hủy bỏ nó và / hoặc bình luận về nó cho thấy như vậy.
TylerH

2
tại sao cũng không liên kết một polyfill như vậy, để chúng tôi có thể sử dụng nó mà không cần tìm kiếm thêm trên Google?
MightyPork

4
ơ, phần đầu tiên có thể là meta, nhưng tôi nghĩ phần thứ hai là một câu trả lời hay. Nơi tôi làm việc, chúng tôi không sử dụng bộ xử lý trước và / hoặc polyfills, vì vậy câu trả lời được chấp nhận phù hợp với tôi. Nhưng đối với bất kỳ cửa hàng hoặc nhà phát triển nào sử dụng các công cụ như vậy, câu trả lời này có lẽ hữu ích hơn.
jinglesthula

1

Đối với những gì nó đáng giá theo Thống kê Trình duyệt, IE 8.0 đã giảm xuống dưới 1% ở Hoa Kỳ trong năm qua.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

Vào tháng 12 năm 2015 IE 8.0 chiếm 2,92% thị trường. Vào tháng 12 năm 2016 IE 8.0 có 0,77% thị trường.

Với tốc độ suy giảm đó sẽ không phải là ý tưởng tồi tệ nhất nếu ngừng hỗ trợ các phiên bản IE cũ và bắt đầu sử dụng :: cho Pseudo Elements.


Đó là một cái gì đó để ăn mừng :) Nó cũng đáng chỉ ra rằng nó phụ thuộc vào tình hình vẫn còn. Nếu bạn là Amazon, 0,5% người dùng của bạn tương đương với hơn một triệu khách hàng cho rằng trang web của bạn bị hỏng. Nếu bạn đang viết blog cho một công ty khởi nghiệp 10 người, cổ phần có thể khác.
jinglesthula

Chắc chắn đúng về một tổ chức như Amazon. Nhưng 0,77% đó không được phân bổ đồng đều trên toàn bộ dân số. Đó là những người già hoặc những người có ít tiền không thể nâng cấp. Từ quan điểm kinh doanh thuần túy, đó có lẽ không phải là thị trường mục tiêu lý tưởng. Vì vậy, đối với hầu hết các công ty, nhóm 0,77% thậm chí còn ít quan trọng hơn những gì con số nhỏ đó gợi ý. Và con số đó sẽ chỉ ngày càng nhỏ hơn.
DR01D

Điểm tốt. Một nhóm khác mà việc nâng cấp là một cuộc chiến khó khăn là chính phủ và các nhóm doanh nghiệp phụ thuộc rất nhiều vào các ứng dụng sẽ chỉ hoạt động với một phiên bản trình duyệt nhất định (mặc dù rất may, các nhóm theo cách đó cũng sẽ giảm dần theo thời gian). May không ai trong số bạn đã từng phải mã cho một khách hàng như vậy :)
jinglesthula

0

Bao gồm cả hai ký hiệu chắc chắn là an toàn hơn, nhưng tôi không thể thấy bất kỳ trình duyệt nào bỏ ký hiệu đơn lẻ trong một thời gian dài, vì vậy chỉ một ký hiệu duy nhất sẽ ổn (đó là CSS2 hợp lệ.)

Phân tích cá nhân Tôi chỉ sử dụng ký hiệu dấu hai chấm, chủ yếu là theo thói quen.


1
Như các câu trả lời khác làm rõ ràng, nó phức tạp hơn một chút và có một số bẫy không rõ ràng (ví dụ: hỗ trợ ký hiệu dấu hai chấm cho các phần tử giả CSS 3 là một vi phạm rõ ràng về đặc điểm kỹ thuật, vì vậy có vẻ khôn ngoan đối với các tác giả CSS không để sử dụng ký hiệu dấu hai chấm cho các bộ chọn đó).
Mark Amery
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.