Cách sử dụng mã màu 3 chữ số thay vì mã màu 6 chữ số trong CSS?

Question

Gần đây, tôi đã xem qua tệp CSS và chuyển tất cả các mã thập lục phân 6 chữ số thành mã gồm 3 chữ số đơn giản (ví dụ: số #FDFEFF của tôi đã được rút ngắn thành #FFF). Nó render khá nhiều màu sắc giống hệt như trước, có vẻ như với tôi rằng ở giữa các phần khá vô dụng và loại bỏ chúng đã lưu lại cho tôi toàn bộ 300 byte trong tệp CSS của tôi.

Bạn có sử dụng phiên bản nào không quan trọng? Tôi hiếm khi chạy trên các trang web chỉ sử dụng các mã gồm 3 chữ số (hoặc tôi đoán tôi không bao giờ chạy trên các trang web đó). Nó vẫn hoàn toàn hợp lệ để sử dụng mã gồm 3 chữ số trên mã gồm 6 chữ số hay chúng tôi phải sử dụng mã gồm 6 chữ số đầy đủ?

Answer 1

Mã gồm 3 chữ số là viết tắt, #123 giống với #112233. Trong ví dụ bạn đưa ra, bạn đã (hiệu quả) hoán đổi #FDFEFF cho #FFFFFF, gần với màu gốc nhưng rõ ràng là không chính xác.

Nó không "quan trọng" bạn sử dụng phiên bản nào, nhưng mã màu gồm 3 chữ số có nghĩa là bạn có ít sự lựa chọn hơn về màu. Nếu bạn cảm thấy tiết kiệm 300 byte đáng giá, hãy tiếp tục và sử dụng mã gồm 3 chữ số, trừ khi bạn đang thiết kế cho tình huống băng thông thấp, 300 byte đó sẽ không thực sự giúp bạn tiết kiệm được nhiều.

Answer 2

Nếu phiên bản "3 chữ số" tạo ra màu bạn cần thì bạn có thể sử dụng nhiều tùy thích. Nó chắc chắn không sai.

Answer 3

Việc bạn sử dụng viết tắt hoặc màu hex bình thường không quan trọng, vì vậy hãy tiếp tục và chuyển đổi chúng nếu bạn muốn.

tháo gỡ chúng chỉ lưu cho tôi một toàn bộ 300 byte trong file CSS của tôi

Wow, một đầy đủ 300 byte! Điều này là trừ khi bạn sẽ giảm thiểu, nén và kết hợp tất cả các css, javascript của bạn, vv 300 byte là hầu như không đáng làm phiền với, đặc biệt là khi tốc độ internet trung bình ngày càng tăng. Các tính năng chính:

Hãy vui vẻ!

Answer 4

Viết tắt hút! Không sử dụng nó. Khó duy trì và tạo biến thể không cần thiết, ví dụ: khi tìm kiếm và thay thế một giá trị màu ("oh, bây giờ tôi phải xem xét #FFFFFF và white và #FFF").

Điều bạn tiết kiệm về kích thước không bao giờ đáng giá những gì bạn mất trong khả năng bảo trì. Sử dụng minifaction và nén để tiết kiệm băng thông.

Answer 5

Đó là sự thật, nhưng chuyển đổi này là không chung:

#FFF == #FFFFFF 
#CCC == #CCCCCC 

Vì vậy, những gì nó làm là nó "đôi" mỗi chữ số thập lục phân. Vì vậy, nó không phải là cùng một màu sắc. Tuy nhiên, nó có vẻ giống nhau bởi vì sự khác biệt là phút. Một quy trình màu được hiệu chỉnh có thể giúp ích trong trường hợp này.

Answer 6

Nếu bạn muốn lưu byte sau đó bạn tốt hơn sử dụng CSS kỹ thuật rút gọn

• http://en.wikipedia.org/wiki/Minification_(programming)
• http://developer.yahoo.com/yui/compressor/
• http://www.minifycss.com/

Answer 7

Nếu bạn sử dụng này trong một bảng trong IE 7 8 hoặc 9 (không may điều này có liên quan kể từ ngày phản hồi này)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

6 mã chữ số làm việc tốt nhưng 3 mã chữ số render như đen

<table border="1" bgcolor="#ff0000"> vs. <table border="1" bgcolor="#ff0"> 

Answer 8

tôi luôn luôn sử dụng viết tắt. Ưu điểm tốt nhất là tôi có thể dễ dàng nhớ mã.

Bạn vẫn có 16 = 4,096 màu để chọn, là đủ.

Tuy nhiên, nếu bạn lưu 300 byte trong mã màu viết tắt, điều đó có nghĩa là bạn có 100 màu bị giảm trong CSS của mình. Trừ khi trang của bạn rất đa dạng, hoặc tất cả các cầu vồng và hoa có vẻ như rất nhiều. Bạn có thể giỏi CSS có hệ thống, nhưng tôi thường thấy các quy tắc css không cần thiết. Ví dụ: nếu bạn đang đặt cùng một quy tắc cho nhiều phần tử con có thể đã được thay thế bằng cách đặt quy tắc trên ông bà và trong một phần tử ngoại lệ thay thế.