Witaj szanowny Gościu na forum Odjechani.com.pl. Serdecznie zachęcamy do rejestracji. Tylko u nas tak przyjazna atmosfera. Kliknij tutaj, aby się zarejestrować i dołączyć do grona Odjechanych!

Strona odjechani.com.pl może przechowywać Twoje dane osobowe, które w niej zamieścisz po zarejestrowaniu konta. Odjechani.com.pl wykorzystuje również pliki cookies (ciasteczka), odwiedzając ją wyrażasz zgodę na ich wykorzystanie oraz rejestrując konto wyrażasz zgodę na przetwarzanie swoich danych osobowych w ramach funkcjonowania serwisu. Więcej informacji znajdziesz w naszej polityce prywatności. Pozdrawiamy!


[Poradnik Webmastera] Jak stworzyć bardziej przejrzyste style.
#1
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:
[Obrazek: image002uw.gif]
Po:
[Obrazek: image004yt.gif]


Łą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:
[Obrazek: image006z.gif]

[Obrazek: image008j.gif]

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

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:
[Obrazek: image012i.gif]

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

[Obrazek: image016io.gif]

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.
[Obrazek: image018lm.gif]

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.
[Obrazek: image020y.gif]

Na koniec klikamy na Przycisk Process CSS. Po chwili w miejscu:
[Obrazek: image022w.gif]
pojawia się lista zmian dokonanych przez narzędzie CSS Formatter and Optimiser w naszej definicji stylów, a w miejscu:
[Obrazek: image024.gif]
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:
[Obrazek: image026y.gif]
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 :)












  Odpowiedz


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości