Tłumaczenie “CSS tips and tricks, Part 2″ autorstwa Roger’a Johansson’a związanego z branżą od 1994 roku. Roger jest redaktorem serwisu 456 Berea Street.

Dodaj komentarz
Zgłoś pomyłkę

Ten artykuł jest kontynuacją do “Sztuczki w CSS, Część I”, gdzie znajdziesz porady dotyczące metody skróconego zapisu, wartości standardowych, kolorów, dziedziczenia, kaskady i wielu innych. W tej części pokażę kilka sztuczek o grupowaniu selektorów, czyszczeniu układów, centrowaniu, importowaniu CSS i kilka porad rozwiązujących różne problemy. Jeśli myślisz, że czegoś brakuje, sprawdź w części pierwszej.

Jeśli grupa różnych elementów, klas lub id dzieli te same właściwości, istnieje możliwość grupowania selektorów aby uniknąć powtarzania tych samych cech kilka razy. Oszczędza to wiele miejsca. Czy oddzielisz każdy selektor przejściem do następnego wiersza, czy nie, to tylko kwestia osobistych przekonań.

Więc, aby zdefiniować font-family,colour, i margins dla wszystkich nagłówków, możesz zapisać w następujący sposób:

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

Porównując to do indywidualnych definicji dla każdego elementu z osobna - ta metoda zaoszczędza wiele miejsca. Oszczędność ta jest tym większa, im więcej właściwości się powtarza.

Później możesz zdefiniować osobno właściwości dla niektórych elementów, któreymi te elementy się różnią, jak na przykład font-size:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

Gdy definiujesz CSS dla różnych stanów odnośnika, musisz skoncentrować się na kolejności definicji. W większości przypadków będzie to następująca kolejność :link :visited :hover :active. Postaraj się to zapamiętać jako skrót np. LVHA.

Możesz także użyć stanu :focus aby ułatwić tym, którzy po stronie poruszają się za pomocą klawiatury - stan ten pokazuje który odnośnik jest w tej chwili wybrany.To gdzie powinieneś umieścić ten stan, zależy od tego, co ma się wydarzyć. Jeśli chcesz aby wybrane klawiaturą elementy przyjmowały stan :hover, który został już zdefiniowany, umieść go przed :hover. Jeśli chcesz aby :focus mia priorytet nad efektem :hover, ustaw go po :hover

Bardzo często zdarza się sytuacja, gdy obiekt (np. obrazek) otoczony tekstem, ma większą długość od otaczającego go elementu (np. div).Czasami tego chcesz, czasami nie.

Dotychczasowym sposobem na rozwiązanie tego problemu, było umiejscowienie dodatkowego elementu div lub br, wewnątrz elementu, który zawiera w sobie unoszące się elementy i ustawienie stylu na clear:both. Metoda ta jest trochę nieciekawa, ale na szczęście istnieje metoda, która eliminuję potrzebę takiego rozwiązywania problemu: How To Clear Floats Without Structural Markup(w języku angielskim).

Obie metody działają bardzo dobrze dopóki nie pracujesz nad strukturą, która zawiera elementy o właściwości float pojawiające się wcześniej w kodzie, niż obiekt, na którym chcesz użyć właściwości clear. W tym momencie z pomocą przychodzi sztuczka nie znana jeszcze wszystkim - użycie właściwości overflow początkowo przedstawiona w Simple Clearing of Floats (w języku angielskim).

Jaki rodzaj rozwiązania wykorzystamy zależy od okoliczności. Przeczytaj, eksperymentuj i podejmuj decyzje.

Prosta sztuczka ale godna powtórzenia, gdyż wielu początkujących z CSS ma z nią problemy. Aby horyzontalnie wyśrodkować element w CSS, musisz zdefiniować szerokość elementu i boczne marginesy. Jeśli cała twoja struktura zamknięta jest w container w taki sposób:

<div id="wrap">

</div>

możesz wyśrodkować ją za pomocą takiego stylu CSS:

#wrap {
width:760px; /* Zmień to na szerokość swojej struktury */
margin:0 auto;
}

Szerokość #wrap zostaje odjęta z dostępnego obszaru okna, a różnica zostaje podzielona równo na lewy i prawy margines. Szerokość nie musi być zdefiniowana - możesz używać dowolnej jednostki dla szerokości.

Internet Explorer 5 (Windows) nie rozumie tego, ale ma pewien przydatny błąd, który sprawia, że text-align jest brane pod uwagę. Jeśli chcesz wyśrodkować strukturę także dla tej przeglądarki, użyj tego kodu, zamiast poprzedniego:

#wrap {
width:760px; /* Change this to the width of your layout */
margin:0 auto;
}

Pierwsza definicja sprawia, że IE5 wyśrodkuje wszystko w elemencie body. Inne przeglądarki wyśrodkują tylko tekst i ponieważ właściwość text-align jest dziedziczona, cały tekst w dokumencie zostanie wyśrodkowany. Tego zazwyczaj nie chcemy, dlatego następna definicja sprawia, że wszystko wewnątrz elementu #wrap zostanie wyrównane do lewej strony.

Oczywiście sposobu tego możemy użyć aby wyśrodkować dowolny element wewnątrz innego elementu.

Aha, jeśli obsługa IE5 nie jest wymagana, nie musisz zamykać struktury w element #wrap. Możesz po prostu ustalić styl dla elementu body. Weź jednak pod uwagę, że nie będzie to działać w IE5.

Częstym sposobem na ukrywanie plików CSS przed starymi przeglądarkami jest użycie sztuczki z @import. Jednak zauważyłem, że w większości przypadków jest ona użyta w taki sposób, że nie ukrywa stylu przed Internet Explorer 4:

@import url("main.css");

Zastanawiało mnie to bardzo, gdyż czytałem wcześniej, że używając @import ukryje styl przed starymi przeglądarkami, ale gdy sprawdziłem w IE4, zaimportowało to arkusz stylu z tragicznym efektem. Zamiast tego, używam następującego rozwiązania:

@import "main.css";

To powstrzymuje IE4 przed importowaniem pliku, a dodatkowo zaoszczędza kilka bajtów. Aby zobaczyć, jak składnia @import wpłynie na importowanie pliku w różnych przeglądarkach, zobacz centricle’s css filter chart(język angielski).

Czasami (czytaj: zazwyczaj) zmuszony jesteś do definiowania specjalnych zasad dla IE, aby pozbyć się jego błędnej interpretacji składni CSS.

Istnieje wiele sztuczek w CSS aby to zrobić, ale ja zwykłem używać tylko kilku z nich i tylko wtedy gdy nie mogę znaleźć lepszej, całkowicie prawidłowej metody na rozwiązanie problemu. Z komunikatem wydanym przez Microsoft nadchodzącej 7 wersji IE dla Windows, która być może zapewni lepszą implementację CSS, a może nie, a może też zmienić sposób w jaki aktualne sztuczki działają, myślę, że najbezpieczniejszym sposobem jest wykorzystanie warunkowych komentarzy - więcej na ten temat poniżej.

Aby ukryć zasadę przed IE, możesz użyć selektora dziecięcego:

html>body p {
/* declarations */
}

Sztuczka z gwiazdką ukryje definicję przed wszystkimi przeglądarkami poza IE:

* html p {
/* declarations */
}

Czasem możesz chcieć wyświetlić styl w IE pod Windows, ale nie w IE pod Makiem. Aby tego dokonać, możesz użyć:

/* \*/
* html p {
declarations
}
/* */

Inną opcją, której staram się używać najczęściej, gdyż wydaje się bezpieczniejsza z myślą o przyszłości, jest możliwość wykorzystania warunkowych komentarzy Microsoftu. Możesz użyć tej strategii, aby dać IE osobny arkusz stylu, który zawiera definicje, które sprawią, że wszystko wyświetli się poprawnie. Myślę, że to świetny sposób a trzymanie brudnych sztuczek z dala od głównego arkusza stylu CSS.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

Daje to dodatkową korzyść, chroniąc nas przed Flash of Unstyled Content (Błyskiem Bezstylowej Zawartości), co zdarza się w IE jeśli w części head nie ma elementów typu script albo link.

Jeśli coś idzie nie tak, zacznij od sprawdzania składni swojego CSS. Każdy może popełnić błąd.

Jeśli nie ma błędów w CSS musisz zacząć analizować co się dzieje. Zazwyczaj nadaje kontrastowe tło elementom, nad którymi akurat pracuję, aby wyraźnie widzieć co się dzieje i ile miejsca zajmują. Niektórzy sugerują używanie ramek, co jest wystarczające w wielu przypadkach. Problem polega na tym, że ramki zwiększają wielkość elementu, a górne i dolne ramki zapobiegają zanikaniu wertykalnych marginesów. Zmiana tła jest zazwyczaj najlepszym sposobem.

Kolejnym potencjalnym pomocnikiem jest użycie właściwości outline. Działa ona jak ramka, jednak nie zmienia wielkości elementów, ani nie wpływa w żaden sposób na otaczające elementy. Niestety outline nie jest obsługiwany przez większość przeglądarek, a z tego co mi wiadomo na razie tylko przez Safari, OmniWeb i Opera.

Istnieje wiele sposobów używania wcięć, przejść do kolejnej linii i odstępów podczas pisania CSS. Próbowałem wielu sposobów, ale zaprzestałem na następującym stylu zapisu (przynajmniej na razie):

selector1,
selector2 {
property:value;
}

Kiedy łączę selektory, zazwyczaj umieszczam je w osobnych wierszach. Dzięki temu łatwiej jest mi odnaleźć wszystko w pliku CSS.Następnie robię odstęp na końcu ostatniego selektora i otwieram nawias deklaracji. Każda deklaracja trafia do osobnego wiersza, bez wcięć, odstępów oddzielających właściwości od ich wartości.

Zawsze i każdą deklarację zakańczam średnikiem. Nie trzeba tego robić dla ostatniej deklaracji, ale dosyć łatwo zapomnieć o dodaniu średnika przy dopisywaniu nowych deklaracji, a to natomiast powoduje ciężkie do wychwycenia błędy w CSS.

Ostatecznie nawias zamykający deklaracje ma swój oddzielny wiersz.

Owszem, używanie odstępów ułatwia czytanie, ale lubię ograniczać je do minimum.

Oczywiście, zdarzają się odstępstwa od tej reguły gdyż nie zawsze jestem konsekwentny w stosowaniu takiego formatowania kodu. Wszyscy się doskonalimy, ja także.

W tych dwóch artykułach opisałem niektóre sztuczki, których używam podczas kodowania w CSS. Jest ich więcej i kto wie, może niebawem pojawi się trzecia część. Jeśli pominąłem jakąś sztuczkę, daj mi znać.

2006 © All rights reserved.
Wszelkie prawa autorskie zastrzeżone. Kopiowanie, przetwarzanie i dystrybucja całości lub części powyższego materiału bez zgody autorów zabroniona! Jeśli jesteś zainteresowany publikacją tego materiału prosimy o kontakt.

Brak komentarzy. Dodaj komentarz jako pierwszy!