Tłumaczenie CSS tips and tricks, Part 1 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ę

Otrzymuję mnóstwo pytań od osób które nie spędzają tyle czasu co ja pracując z CSS. Ich CSS zazwyczaj nie jest tak efektywny jak mógłby być i często spotykam się z błędami, które łatwo popełniać przede wszystkim, gdy zaczyna się przygodę z tą technologią. Jako, że używam CSS już kilka lat, poznałem kilka sztuczek, które sprawiają, że CSS jest bardziej efektywny lub rozwiązują jakiś szczególny problem. Chciałbym podzielić się swoimi ulubionymi sztuczkami z dziedziny CSS i opisać najbardziej popularne błędy (których wiele popełniałem). Jeśli jesteś doświadczony w CSS, zapewne wiele z nich już poznałeś, ale kto wie - może znajdziesz jeden lub dwa, których wcześniej nie widziałeś. Początkowo miał to być pojedynczy artykuł, ale lista sztuczek rosła, więc postanowiłem podzielić ją na dwie części.

Aby zaoszczędzić miejscai sprawić aby twoje pliki CSS szybciej się wczytywały, polecam używanie metod skróconego zapisu CSS aby deklarować kilka cech w jednej deklaracji.

Brak określneia jednostki przy podawaniu długoci jest jednym z częstych błędów wśród początkujących. W HTML można to pominąć, ale w CSS wszystkie określenia długości muszą posiadać jednostkę. Istnieją tylko dwa wyjątki: line-height i wartości zerowe. Zauważ, że jednostka musi zostać podana zaraz po wartości - bez użycia spacji (przerwy między nimi).

Nie ma potrzeby definiowania jednostki dla wartości 0 (zero), ponieważ zero pikseli równe jest zero centymetrów równe jest zero jakiejkolwiek innej miary. Pomimo tego często spotyka się deklaracje typu 0px, gdzie zwykłe 0 by w zupełności wystarczyło.

Chociaż podawanie jednostki w przypadku wartości zerowych nie jest błędem, ale jest marnotrawstwem miejsca i - przynajmniej dla mnie - wygląda nieciekawie.

Gdy CSS jest używane z XHTML, nazwy elementów w selektorach są wrażliwe na wielkość znaków. Aby nie wpaść w tarapaty, polecam stosowanie zawsze małych znaków w selektorach CSS.

Wartości klasy i atrybuty id są zawsze wrażliwe na wielkość znaków w HTML i XHTML, więc unikaj mieszania wielkich i małych znaków w class i id. Jeśli z jakiegoś powodu używasz mieszanych znaków, upewnij się dwukrotnie, że nazwy w CSS odpowiadają tym użytym w strukturze strony.

W CSS jeśli używasz wartości heksadecymalnych w celu zdefiniowania koloru i kolor zbudowany jest z trzech par cyfr szesnastkowych, możesz zapisać go w sposób bardziej oszczędny, pomijając każdą drugą cyfrę:

#000 jest równe #000000, #369 jest równe #336699

I pamiętaj o znaku hash (#) przed kodem koloru.

Kolejną sztuczką związaną z tym tematem jest możliwość definiowania bezpiecznych kolorów przy użyciu cyfr które są wielokrotnościami 3 dla czerwonych, zielonych i niebieskich wartości: 0, 3, 6, 9, C i F. #99c jest bezpiecznym kolorem, #98c nie jest.

Gdy definiujesz selektory określając wartość takich elementów jak class lub id, możesz zaniechać typ elementu wstawiany przed selektorem klasy (.) lub selektorem id (#).

Zamiast pisać:

01. div#content { /* deklaracje */ }
02. fieldset.details { /* deklaracje */ }

możesz napisać:

01. #content { /* deklaracje */ }
02. .details { /* deklaracje */ }

i zaoszczędzić kilka bajtów na każdym selektorze.

Jest to szczególnie istotne w przypadku selektorów id jako, że muszą być unikalne w dokumencie, co zapobiega powstawaniu konfliktów między regułami. Nazwy class mogą natomiast być używane dowolną ilość razy w dokumencie i różne typy elementów mogą być przez nie określone. Aby definiować styl dla elementów różnego typu używając tej samej nazwy klasy, musisz zdefiniować typ elementu w selektorze.

Weź pod uwagę, że powyższe zasady nie są jednakowe. Jeśli zapiszesz jedną zasadę z, a jedną bez typu elementu w selektorze, zasada która zawiera typ elementu będzie miała wyższy priorytet.

Możesz uniknąć potrzeby definiowania wartości, dzięki użyciu wartości standardowych. Jest to zwłaszcza przydatne, gdy decydujesz się na użycie metody krótkiego zapisu w CSS, gdyż wszystkie niezdefiniowane cechy zostaną automatycznie zdefiniowane przy użyciu wartości standardowych.

Do niektórych standardowych wartości należą 0 dla padding (chociaż zdarzają się od tego wyjątki), i transparent dla background-color.

Ze względu na to iż różne przeglądarki posiadają inne wartości standardowe, niektórzy wolą zresetować te wartości zerując margin i padding dla wszystkich elementów na samej górze arkusza stylu:

* {
margin:0;
padding:0;
}

Wartości wielu cech są dziedziczone przez elementy pokrewne elementu, którego wartość została wcześniej zdefiniowana. Cechy color i font są w tym wypadku najczęstszym przypadkiem.

Miej świadomość, że niektóre własności mogą zostać narzucone przez standardowe style przeglądarki. Dlatego nie możesz zapewnić, aby wszystkie nagłówki nie były pogrubione stosując:

body { font-weight:normal; }

Zasady narzucone przez przeglądarkę są ważniejsze przez tzw. kaskadę, którą opisana jest poniżej.

Kaskada pozwala ci na użycie różnych definicji w celu określenia właściwości elementu. Możesz ponownie zdefiniować tą samą właściwość lub zdefiniować inne właściwości. Powiedzmy, że masz następujący kod:

<p class="update">Update: Lorem ipsum dolor set</p>

W CSS, możesz użyć odmiennych definicji aby określić właściwości wspólne dla wszystkich elementów p i tych, które posiadają class="update":

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

Obie definicje zostaną połączone dla elementów p z class="update". Jako, że selektor class posiada większy priorytet niż selektor typu, właściwości zdefiniowane w drugiej definicji zostaną użyte w wypadku konfliktu, jak dla color w tym wypadku.

Możesz przypisać wiele nazw klas do jednego elementu. To pozwala na pisanie wielu definicji odpowiedzialnych za konkretnie właściwości i używanie ich wedle potrzeby. Powiedzmy, że kodujesz galerię obrazów, która zawiera kilka obrazów darmowych i kilka, które nie są darmowe. Kilka obrazów może być objętych specjalną ofertą. Oto kod dla trzech obrazów:

<img src="foo.gif" class="special" alt="" />
<img src="bar.gif" class="royaltyfree" alt="" />
<img src="baz.gif" class="royaltyfree special" alt="" />

Aby utworzyć styl dla tych obrazów, które są darmowe, aby odróżnić je od pozostałych, możesz użyć definicji dla elementów, które posiadają klasę royaltyfree i jeśli chcesz wyróżnić te objęte specjalną ofertą, możesz utworzyć klasę special.

CSS mógłby wtedy wyglądać następująco:

.royaltyfree { border:2px solid #666; }
.special {
padding:2px;
background:#ff0;
}

Każdy obraz, który posiada klasę special będzie miał również padding i tło w kolorze #ff0. Obrazy posiadające klasę royaltyfree będą miały cechę border (ramkę), padding i tło koloru #ff0.

Możesz rozwinąć tą technikę - to tylko prosty przykład. Spróbuj użyć klas które opisują zachowanie, zamiast wygląd.

Nie używanie pokrewnych selektorów jest jednym z najczęstszych przykładów nieefektywnego CSS, które widzę zarówno u nowicjuszy, jak i zaawansowanych autorów. Pokrewne selektory pozwolą ci wyeliminować wiele atrybutów klas z twojego kodu i sprawią, że twoje arkusze stylu będą znacznie efektywniejsze. Spójrz na następującą strukturę:

<div id="subnav">
<ul>
<li class="subnavitem">
    <a href="#" class="subnavitem">Item 1</a></li>

<li class="subnavitemselected">
    <a href="#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem">
    <a href="#" class="subnavitem">Item 1</a></li>
</ul>

</div>

Można ją opisać takim stylem:

div#subnav ul { /* styl */ }
div#subnav ul li.subnavitem { /* styl */ }
div#subnav ul li.subnavitem a.subnavitem { /* styl */ }
div#subnav ul li.subnavitemselected { /* styl */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* styl */ }

Lub można użyć następującej składni by osiągnąć te same efekty:

<ul id="subnav">
<li><a href="#">Item 1</a></li>
<li class="sel"><a href="#">Item 1</a></li>

<li><a href="#">Item 1</a></li>
</ul>

Przy użyciu takiego stylu:

#subnav { /* styl */ }
#subnav li { /* styl */ }
#subnav a { /* styl */ }
#subnav .sel { /* styl */ }
#subnav .sel a { /* styl */ }

Staraj się zminimalizować długość kodu jak to tylko możliwe zarówno w stosunku do składni dokumentu, jak i samego arkusza CSS - sprawi to, że będą one o wiele szybsze i łatwe w modyfikacji.

Aby zaoszczędzić kilka bajtów tu i tam, dobrze jest unikać zamykania URL w cudzysłowie w stosunku do obrazków stanowiących tła. Używanie cudzysłowu nie jest konieczne, a niektóre przeglądarki mają z nimi problem.

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!