Pomoc:Najlepsze praktyki w CSS

Zastanawiasz się nad dostosowaniem wyglądu swojej wiki za pomocą CSS? Poniżej znajdziesz kilka porad, dzięki którym będzie to wymagać minimum zachodu.

Porady

Używaj kreatora motywu

Kreator motywu w akcji

Najprostszym sposobem na dostosowanie wiki i upewnienie się, że nie wypłynie to na ewentualne poprawki układu to użycie kreatora motywu.

• Udostępnia szybki i łatwy sposób dostosowywania takich rzeczy jak logo, kolorystyka i tło Twojej wikii.
• Więcej dowiesz się na stronie Pomoc:Kreator motywu, a sam kreator znajdziesz na stronie Specjalna:Kreator motywu.

Unikaj krzykliwych i niedopasowanych kolorów

Szczególnie dotyczy to obszaru treści.

• Nie u wszystkich wzrok funkcjonuje jak u Ciebie – znaczna liczba ludzi ma zaburzenia wzroku i rozpoznawania barw.
• Ekrany różnych urządzeń również zachowują się inaczej – kolory na Twoim urządzeniu mogą inaczej prezentować się na innych.

Oczywiście, nie łatwo to wziąć pod uwagę przy pracy nad motywem, ale tu jest kilka rad:

• Staraj się uzyskać dobry kontrast pomiędzy tekstem a tłem – jak ciemny tekst na jasnym tle.
• Obrazy tła są świetne, ale nie jeśli nie da się przeczytać tekstu. Kreator motywu posiada funkcję ustawienia przezroczystości jeśli chcesz, aby obraz tła był częściowo widoczny przez skórkę.
• Nie zmniejszaj za bardzo elementów i tekstu, szczególnie w głównym obszarze treści.

Prosty motyw

Możesz czuć pokusę, żeby zapełnić wiki ikonami, animacjami i kolorami – jednak, dla wielu może to być rozpraszające.

Dodatkowo, pamiętaj, że szerokość strony na Fandomie jest zmienna – to co widzisz może wyglądać inaczej na różnego rozmiaru ekranach. Możesz spróbować określać szerokość elementów w wartościach procentowych zamiast bezwzględnym – to prawdopodobnie zmniejszy szansę powstawania wielkich odstępów pomiędzy lub nachodzących się elementów.

Pisz czytelny kod

Postaraj się upewnić, że napisany kod jest zrozumiały dla kogoś innego – pamiętaj, że możesz nie być jedyną osobą, która będzie wprowadzać zmiany na danej wiki. Odstępy i odpowiednie nazwy to dobre metody na ułatwienie tego.

• dodawaj komentarze do kodu np. /* This code does x, y and z */ ;
• gdy tworzysz dodatkowe klasy, nadawaj im zrozumiałe klasy, przykładowo .mainpage-box jest bardziej czytelne .mp213b;
• używaj odstępów w kodzie według własnego uznania — staraj się jednak trzymać jednego stylu;
• uporządkuj swój kod, by style odpowiadające za konkretny element wiki znajdowały się w jednym miejscu;

Przydatne linki

• Polityka modyfikacji - informacje dotyczące dozwolonych zmian na Fandomie;
• Mozilla Developer Network - internetowa dokumentacja CSS;
• W3Schools - poradnik CSS (ang.);
• CSS-Tricks - serwis internetowy poświęcony CSSowi (ang.);
• Serwis CanIUse - pozwoli sprawdzić, jakie właściwości są obsługiwane przez współczesne przeglądarki (ang.);
• Usługa sprawdzająca CSS od W3C – to pozwoli Ci sprawdzić kod pod względem błędów, podobnie jak Specjalna:CSS.