[Poradnik Webmastera] Jak stworzyć bardziej przejrzyste style.

[davi100]

Rzadko się zdarza, by stworzony przez nas dokument HTML od razu wyglądał dobrze w przeglądarce. Zwykle osiągnięcie założonego efektu wymaga dokonania wielu modyfikacji zarówno w dokumentach HTML, jak i CSS składających się na naszą witrynę. Oczywiście nic w tym złego, jednak wielokrotnie wprowadzane zmiany w kodzie sprawiają, że staje się on mało czytelny . Niestety, bardzo przeszkadza to w dokonywaniu poprawek, trudno również w nieuporządkowanym kodzie znaleźć błędy. Pokaże teraz, jak szybko uporządkować kod CSS. Za pomocą narzędzia CSS Formatter and Optimiser dostępnego online zamienimy nieczytelny kod CSS w bardzo przejrzystą definicję stylów.
Przed:

Po:



Łączymy się z internetem i w dowolnej przeglądarce
internetowej otwieramy stronę http://cdburnerxp.se/cssparse/ W pole wklejamy kod CSS, który chcemy
uporządkować . Jeśli dokument CSS znajduje
się już na serwerze WWW, zamiast wklejać
jego treść, możemy w polu podać jego adres
internetowy. Na przykład:




Z listy wybieramy stopień kompresji naszego
kodu CSS. W zależności od niego osiągniemy
różne efekty:


Wybór pozycji Highest z listy Compression sprawi, że nasz kod zostanie mocno skompresowany – dzięki temu dokument będzie zajmował mało miejsca, ale będzie on nieczytelny:


Wybierając z listy Compression pozycję Hight lub Standard, osiągniemy kompromis
między przejrzystością kodu i wielkością dokumentu:




Jeśli wybierzemy pozycję Low, kod będzie bardzo czytelny, jednak tak sformatowany dokument będzie
zajmował dużo miejsca, co może spowodować wolniejsze otwieranie się strony WWW w przeglądarkach
internautów.


Bardziej zaawansowani webmasterzy mogą spróbować samodzielnie stworzyć schemat, według którego zostanie sformatowany kod (z listy Compression wybieramy w takim wypadku Custom) więcej na ten temat przeczytamy po kliknięciu na link template.

Kolejnym zadaniem jest dokonanie ustawień wpływających na sposób porządkowania i optymalizacji kodu CSS. Zalecam zaznaczenie opcji oraz wybór pozycji z list zgodnie z poniższym rysunkiem . Na końcu w akapicie Jak działa narzędzie CSS Formatter and Optimiser? opiszę, jakie zmiany zostaną dokonane w naszej definicji CSS.


Na koniec klikamy na Przycisk Process CSS. Po chwili w miejscu:

pojawia się lista zmian dokonanych przez narzędzie CSS Formatter and Optimiser w naszej definicji stylów, a w miejscu:

znajduje się uporządkowany kod CSS. Możemy go zaznaczyć, skopiować do schowka i wkleić do dokumentu CSS lub HTML w miejsce nieuporządkowanej definicji stylów. Dzięki temu kod naszej strony stanie się bardziej czytelny i w przyszłości łatwiej będzie go zmodyfikować.

Jak działa narzędzie CSS Formatter and Optimiser?
Za pomocą opcji narzędzia CSS Formatter and Optimiser możemy precyzyjnie określić, w jaki sposób kod
CSS zostanie sformatowany. Zalecam wybór następujących ustawień:
Warto zaznaczyć opcję Preserce CSS . Dzięki temu w kodzie CSS zostaną zachowane wszystkie nasze komentarze oraz tak zwane hacki CSS (czyli triki, które pozwalają osiągnąć identyczny efekt wizualny wróżnych przeglądarkach ).
Najlepiej usunąć zaznaczenie z opcji Sort Selectors oraz Sort Properties. Dzięki temu selektory i znajdujące się w nich właściwości nie zostaną posortowane alfabetycznie, tak jak na poniższym rysunku:

Zmiana kolejności selektorów mogłaby bowiem zmienić sposób działania definicji stylów, a właściwości w ramach jednego selektora wygodniej uporządkować grupami (własności dotyczące tekstu, kolorów czy pozycji) niż alfabetycznie.

Z listy obok opcji Regroup selectors warto wybrać drugą pozycję. Dzięki temu te same selektory zostaną ze sobą połączone (ale tylko pod warunkiem, że zawierają różne właściwości).

Z listy obok opcji Optimise shorthands najlepiej wybrać pozycję Safe optimisations. Dzięki temu zostanie dokonana tylko bezpieczna (niezmieniająca sposobu działania definicji CSS) optymalizacja wykorzystywanych w stylach skrótów (na przykład określających jednostkę miary: px, pt czy em).

Nie warto zaznaczać opcji Compress colors oraz Compress font-weight .Ich działanie polega na skróceniu wartości kolorów (na przykład zapis #ffffff zostaje zamieniony na #fff) oraz wartości przypisanych do własności font-weight , co zmniejszyłoby czytelność kodu CSS.

Dobrze jest zaznaczyć opcję Lowercase selectors oraz Lowercase. Dzięki temu w nazwach selektorów i właściwości litery zostaną zmienione na małe, co jest zgodne ze standardem XHTML.

Najlepiej usunąć zaznaczenie z czterech kolejnych opcji: Remove unnecessary backslashes, Remove last;, Discard invalid properties CSS2.1 i Add timestamp.

Jeśli chcemy, aby definicja stylów została zapisana w pliku, który będziemy mogli ściągnąć, klikając na link, zaznaczamy opcję Output as file.


Dziękuję za przeczytanie poradnika napisanego specjalnie dla forum odjechani.com.pl Życzę miłego porządkowania kodu