Quy Định CSS

Quy định sau là về các trang theme CSS, chủ yếu là những trang được import vào các trang khác, tuy nhiên hầu hết quy định này cũng áp dụng cho mã CSS được viết trực tiếp trên trang.

Trang quy định dưới đây không áp dụng với theme dịch.

Tạo Theme

Một theme CSS cần được nháp trên một trang sandbox.

Khi bạn cảm thấy theme của bạn đã đủ ổn, bạn có thể chuyển nó sang wiki riêng. Một khi bạn đã được cấp quyền từ một thành viên của Nhóm Kỹ Thuật (server Discord), người sẽ kiểm tra xem theme của bạn có hợp quy định không, bạn có thể tạo trang mới trên wiki trong thể loại theme: với tag theme.

Một vài theme cũ hơn được đăng ở thể loại component:. Hãy sử dụng thể loại theme:.

Theme cần tuân thủ theo các quy định, được nêu bên dưới.

Quy Định

Để được cho phép trên trang, có một vài quy định mà theme của bạn phải tuân thủ.

Giấy phép

Theme của bạn phải được phát hành dưới giấy phép Creative Commons tương tự như toàn bộ wiki.

Thứ bạn có thể và không thể thay đổi

Bạn có thể thay đổi các thành phần kiểu dáng của wiki ngoài những thứ liệt kê dưới đây.

Bạn không thể bỏ, ẩn, sửa, hoặc "làm hỏng" bất kì mục điều hướng nào, module đánh giá hoặc Cảnh báo Nội dung Người lớn.

Bạn không thể sửa cấu trúc hoặc kiểu dáng của wiki vượt mức nhận diện thông thường. Trang vẫn phải được nhận diện và có thể đọc được.

Bạn có thể chỉnh kiểu dáng của module dịch thuật liên wiki (.scpnet-interwiki-frame) bằng CSS3 Filters, component Kiểu Dáng Liên Wiki hoặc những thứ tương tự, nhưng bạn không thể xóa bỏ nó đi hoàn toàn (mặc dù nó xung đột kinh khủng và bạn đã cố sử dụng tất cả mọi cách để giải quyết).

Tính năng cơ bản

Theme CSS của bạn phải hoạt động được trong các trình duyệt thường dùng (Chromium¹, Firefox, Safari) và ít nhất phải hoạt động cơ bản trong các trình duyệt ít dùng hơn (IE 11 v.v).

Theme CSS của bạn phải hoạt động trên cả điện thoại và máy tính.

Tạo trang theme

Trang theme là nơi chứa mã nguồn CSS của theme.

Bạn cần hướng dẫn người dùng thêm theme của bạn bằng cách sử dụng công cụ [[include]] của Wikidot (và thiết lập trang theme của bạn đúng cách. Đây là một bản mẫu).

Bạn không được hướng dẫn người dùng thêm theme của bạn bằng chức năng @import của CSS.²

Bạn không được hướng dẫn người dùng sử dụng cú pháp Wikidot có chứa link HTTP, chúng phải là HTTPS.³

Bạn phải cung cấp hướng dẫn sử dụng trên trang theme của bạn. Lưu ý rằng đây chỉ nhắc đến việc hướng dẫn người dùng nhập cái gì để dùng theme trong bài của họ. Nếu theme của bạn có các tính năng đặc biệt nào mà một tác giả nên biết cách sử dụng, chúng cũng cần được ghi. Bạn không cần bao gồm ví dụ về formatting của theme bạn — mặc dù bạn hoàn toàn có thể, và nên làm!

Trang theme của bạn cần có theme được áp dụng vào nó — trang của bạn cần phải làm việc như một bản xem trước theme. Nếu bạn dùng template ở trên, việc này đã được làm cho bạn.

Thành viên Nhóm Kỹ Thuật xem xét theme của bạn sẽ không chỉ xem mã nguồn theme, mà còn xem cả một bản nháp của trang theme của bạn.

Code thừa

Một theme CSS không nên chứa nhiều code mà không làm gì cả. Mã nguồn của một theme CSS phải chứa rất ít, nếu có, những thứ không phải những thứ theme của bạn thay đổi từ theme Sigma-9 (theme CSS chính của wiki). Việc sao chép nhiều phần hoàn toàn từ Sigma-9 bị nghiêm cấm.

Một người thông thạo CSS cần phải biết chính xác theme làm gì bằng cách nhìn vào mã nguồn. Ở một mức độ tối thiểu, bạn cần phải giải thích được tại sao bạn cho một dòng code nào đó vào.

Thêm nữa, bạn cần tránh dùng thuộc tính !important trừ khi thật sự cần thiết, v.d. để tăng độ tương thích với CSS khác khi việc tăng tính đặc hiệu CSS⁴ không hiệu quả.

Khả năng tiếp cận

Vấn đề về khả năng tiếp cận của người dùng cũng cần phải được lưu ý khi làm một theme CSS. Ví dụ:

• Người mù màu có thể đọc được các bài có theme này không? (v.d. theme có chứa kết hợp màu không tốt như đỏ + xanh lá cây, làm khó người mù màu trong việc di chuyển trong trang)
• Theme này có ảnh hưởng đến khả năng dùng trình đọc màn hình hay không? (v.d. nó thêm chữ 'tàng hình' mà trình đọc màn hình đọc được nhưng người thường dùng thị giác không đọc được)
• Font CSS được sử dụng có thể đọc được bởi mọi người không? (v.d. cỡ font ở phần thân bài quá nhỏ, và font khó đọc)

và hơn thế nữa. Các cách thực hành tốt nhất và đề xuất để giải quyết các vấn đề này có thể tìm trên Google.

Hotlinking

Hotlinking là việc link tới các file trên các trang khác, và vừa là biện pháp không tốt, vừa là vi phạm nội quy trang. Việc buộc trang của người khác phải tải hình ảnh cho theme của bạn là không tốt, và cũng khiến theme của bạn không chắc chắn — lỡ đâu trang đó ngừng hoạt động thì sao?

Để tránh hotlinking, mọi ảnh, font chữ, và các file phụ dùng trong một theme cần phải là file đăng lên trang theme thay vì là link từ nơi khác trên mạng.

Tuy nhiên, bạn được phép sử dụng một vài trang có khuyến khích việc hotlinking để cung cấp file đến người dùng. Các ví dụ nổi tiếng là Google Fonts và Lorem Picsum. Nếu không rõ và muốn chắc chắn, hỏi Nhóm Kỹ Thuật.

Ngoài ra, CSS không được link từ sandbox hoặc bất kì nơi nào không phải trang wiki chính hoặc SCP Wiki tiếng Anh. Bạn cần dùng một trang theme: cho các theme CSS.

Xét Duyệt

Trước khi được đăng, theme của bạn cần được xét duyệt bởi một thành viên của Nhóm Kỹ Thuật. Họ sẽ xem xét theme của bạn và quyết định xem nó có tuân thủ quy định này hay không.

Bạn có thể liên hệ Nhóm Kỹ Thuật qua server Discord, hoặc qua PM trên Wikidot.

Trưởng Nhóm Kỹ Thuật đưa ra quyết định cuối cùng trong bất kì việc xét duyệt nào. Khi được Nhóm Kỹ Thuật xét duyệt, đồng nghĩa với việc theme của bạn cần được đăng trong một vài ngày sau đó và chỉ có thay đổi nhỏ; nếu bạn định đăng một theme từ lâu sau khi được xét duyệt hoặc có thay đổi lớn, hãy yêu cầu xét duyệt lại.

Hãy cho Nhóm Kỹ Thuật nhiều thời gian (vài ngày) để xét duyệt theme của bạn.

Quy Định Xóa Trang Cho Theme CSS

Theme CSS được coi như các bài bình thường và người khác không thể thực hiện thay đổi lớn cho trang của bạn. Các sửa đổi nhỏ, như sửa chính tả và ngữ pháp, có thể được thực hiện bởi bất kỳ ai.

Quy định xóa trang bình thường áp dụng cho theme CSS, và đủ điều kiện bị xóa khi điểm đánh giá xuống dưới -5.

Giải Quyết Các Theme Chưa Tuân Thủ Quy Định

Nếu theme của bạn không hoạt động trong các trình duyệt thường dùng (Chromium, Firefox, Safari, mobile, IE11) trong một cách mà làm hỏng hoàn toàn chức năng điều hướng, chức năng trang, hoặc khả năng tiếp cận trang, nó cần được loại bỏ (hoặc ít nhất, loại bỏ khỏi các tag include) từ trang, sau đó sửa theo thứ tự trên. Ưu tiên đầu tiên của chúng tôi là sự tương thích, chức năng, và khả năng tiếp cận.

+ Checklist Xét duyệt

Danh sách này được viết cho các thành viên Nhóm Kỹ Thuật cần xét duyệt một theme, dù tác giả theme có thể thấy danh sách này hữu dụng.

Yêu cầu

Các câu hỏi dưới đây đối với theme đều cần có câu trả lời là "có".

1. Mục đích của theme có rõ ràng không?
2. Theme có được kích hoạt trên trang theme của chính nó không?
3. Theme có dùng được không? Theme có chứa lỗi hiển nhiên, dễ phát hiện không?
4. Nó có dùng được trên điện thoại không?
   • Một lỗi thường hay mắc phải là dùng tham số background (với tham số background-position được chỉ định rõ ràng) để đổi logo ở thanh trên. Điều này khiến tọa độ, vị trí chức năng trên điện thoại bị hỏng. background-image nên được dùng, vì nó chỉ đổi logo mà không làm hỏng các thứ khác. Theme có đổi được logo (nếu có) một cách phù hợp không?
5. Theme có hoạt động trên các trình duyệt khác không? (cần ít nhất thử trên một trình duyệt Chromium như Chrome, Samsung Internet, Microsoft Edge và thử trên trình duyệt FIrefox)
6. Các chức năng điều hướng có xuất hiện và không bị hỏng không?
   • Nếu theme tùy biến #login-status, xem thông báo tin nhắn có thể nhìn thấy được không?
7. Trang vẫn còn nhìn giống wiki bình thường không?
8. Có hướng dẫn sử dụng trong tiếng Việt không?
9. Theme có dùng [[include]] không?
10. Không có nhiều code thừa đúng không? (v.d. các phần lớn được sao chép từ Sigma-9 hoặc các theme khác) (nếu không rõ, yêu cầu tác giả giải thích xem tại sao họ bao gồm một phần nào đó. Nếu họ không thể, phần đó có thể là code thừa)
    • Xem các file và font (bao gồm font nhiều kiểu như đậm, nghiêng), chúng có đều được sử dụng không?
    • Nếu theme fork một theme khác (nghĩa là code đã được sao chép và chỉnh sửa sao cho cần thiết), tác giả theme có giải thích được không?
      • Họ đã cố extend theme được fork đó chưa (nghĩa là include theme gốc, hoặc là vào chính theme của họ hoặc là yêu cầu người dùng include theme gốc, sau đó ghi đè các tham số cần được ghi đè để tùy biến theme gốc)?
      • Đặc biệt khuyến nghị việc extend nếu có thể, để giảm thiểu sao chép code; việc fork cần có một lý do chính đáng
11. CSS có dễ hiểu không? Nếu có phần phức tạp, có phần phụ chú không? (không được có phần bạn không hiểu VÀ tác giả không giải thích được)
12. Theme có vấn đề về khả năng tiếp cận nào không? (Khả năng tiếp cận của theme cần tương đương Sigma-9 - nó không được gây ra bất kì vấn đề gì thêm, nhưng không nhất thiết phải sửa các vấn đề đang tồn tại)
    • Cỡ font có nhỏ quá không?
    • Có phần nào không tuân theo khuyến nghị về độ tương phản không?
    • Các hiệu ứng hoạt cảnh nặng hoặc lặp lại có được kiểm tra bằng prefers-reduced-motion không?
    • Các phần tử, chức năng quan trọng như đường link có dễ phân biệt không?
    • Thử điều hướng bằng tab, các chức năng tương tác được (link, thanh bên, thanh trên, link chính thanh trên, thanh tìm kiếm, nút lịch sử, vv) có trở nên khác biệt khi chúng được tập trung vào (ví dụ: con trỏ chuột đang ở tại vị trí của chúng) không?
      • Hầu hết trình duyệt dùng thuộc tính outline cho điều này; những chỗ outline bị bỏ hoặc ghi đè, phần thay thế có được cung cấp không?
    • Mọi font đều có font dự phòng đúng không?
    • Có thông tin thị giác nào khác ngoài hình con trỏ chuột và màu chữ khi con trỏ chuột di vào một link không?
    • Thử bôi chữ; chữ có bôi được không?
    • Thử dùng những tính năng có giao diện phức tạp hơn như lịch sử trang và chỉnh sửa, chúng có hiển thị ổn không?
    • (liệt kê các vấn đề về khả năng tiếp cận)
13. Các thay đổi của những phần tử được thiết đặt sẵn trong theme có tương đương với các phần tử có sẵn của Sigma-9 không?
    • Các thay đổi đối với blockquote có được áp dụng cả với div.blockquote (như nguyên văn) không?
    • Các thay đổi đối với #page-title có được áp dụng cả với .meta-title không?
    • Các thay đổi đối với #breadcrumbs có được áp dụng cả với .pseudocrumbs không?
14. Thuộc tính !important sử dụng có lý do không? (dùng vài lần cũng được, không có là tốt; tốt nhất những lần dùng phải được giải thích)
    • !important liên quan đến module đánh giá thì được
15. ctrl+f mã nguồn tìm từ khóa http, các tài nguyên ngoài theme có đều được host trên wikidot không?
16. Theme có dùng được trên HTTPS? Nó không có bất kỳ tài nguyên nào được tải qua HTTP trừ các link bài Wiki SCP-VN đúng không?
17. Nếu theme cung cấp tính năng phụ, chúng có được hướng dẫn sử dụng không?
18. Theme có tuân thủ giấy phép CC BY-SA 3.0 không?
    • Mọi hình ảnh có tuân thủ CC BY-SA không? (điều này bao gồm hình ảnh được nhúng trực tiếp vào theme, ví dụ: SVG trong theme)
    • Mọi font có tuân thủ giấy phép CC BY-SA không? (Google Fonts thì được, nhưng kiểm tra các nhà cung cấp font khác và/hoặc font tùy chỉnh được tải lên)
    • Nếu theme dùng tài nguyên của một cơ quan, tổ chức hoặc mô phỏng nó theo một cách nào đó, nó có tuân thủ với quy định giấy phép của tổ chức đó không?
19. Theme có tuân thủ Quy Định Nội Dung Kỹ Thuật không?
    • Các tài nguyên file có ở một kích cỡ chấp nhận được không?

Khuyến nghị

Nếu theme không thể trả lời "có" với bất kì câu hỏi nào dưới đây, hãy đưa ra lời khuyên để cải thiện nó. Không cần đủ các điều kiện dưới đây để được xét duyệt.

1. Mã nguồn có gọn gàng, dễ hiểu không?
2. CSS có lùi dòng đúng cách không, và có nhiều phụ chú không? (Đó có thể là dấu hiệu của copy paste)
3. Theme nhìn có đẹp không?
4. Đối tượng hướng đến của theme có rõ ràng không?
   • Thuật ngữ "theme trang điểm" thường có nghĩa là 'không liên kết với bất kì bối cảnh hoặc canon nào trong vũ trụ SCP'; nếu theme dùng thuật ngữ đó, nó có luôn giữ mục đích sử dụng chỉ để trang điểm trang của nó không? Nó có thể cụ thể hơn không?
5. Hướng dẫn có cụ thể không?
   • Nếu có ví dụ, chúng có ý nghĩa không?
   • Nếu có ví dụ về những thứ không được theme thay đổi, chúng có thể bỏ được không?

---

Sau khi xét duyệt một theme (hoặc component), hãy báo cáo cho toàn bộ Nhóm Kỹ Thuật, kể cả khi theme chưa được đăng lên.

Checklist đăng theme được xét duyệt:

• Theme được đăng lên thể loại theme
• Trang được tag theme (và _image nếu có bất kì ảnh nào)
• Mọi tài nguyên file cần được đăng lên wiki
• Tài nguyên file có link là https, không phải http
• Liên hệ nhân viên để ghi công đồng tác giả nếu có vào Dữ Liệu Ghi Công Meta
• Thành viên Nhóm Kỹ Thuật đã xét duyệt theme bình luận lên trang để xác nhận (sau khi tác giả theme bình luận)

---

Theme Mới Đăng Gần Đây (Bao gồm Theme Dịch)

1. Theme Con Bạc Tay To bởi RedEyeMikeyy vào 27 Jul 2023 14:18
2. Theme Parawatch Anon bởi RedEyeMikeyy vào 09 Jul 2023 06:22
3. Theme Khăn Quàng Đỏ bởi RedEyeMikeyy vào 11 May 2023 10:09
4. Theme Foxtrot bởi RedEyeMikeyy vào 25 Apr 2023 18:00
5. Theme Lãng Khách bởi RedEyeMikeyy vào 23 Apr 2023 07:53

Footnotes

1. Code trình duyệt mã nguồn mở, được sử dụng bởi những trình duyệt như Chrome

2. Nếu bạn thấy một trang sử dụng theme thông qua chức năng @import, và chức năng [[include]] có thể sử dụng cho theme đó, bạn có thể sửa trang để dùng [[include]].

3. Ghi chú: Wiki SCP-VN hiện tại vẫn đang là HTTP, nên các link scp-vn.wikidot.com vẫn có thể dùng HTTP. Tuy nhiên, scp-vn.wdfiles.com phải dùng HTTPS, vì Wikidot có sử dụng HTTPS tại các link này.

4. Tính đặc hiệu (hay độ ưu tiên) là cách mà trình duyệt quyết định sẽ áp dụng thuộc tính CSS nào với một phần tử khi có nhiều quy tắc CSS cùng trỏ đến phần tử đó.