Nowoczesne strony www. Część II: CSS

Stylizacja elementów HTML za pomocą CSS

W tej części instruktażu dedykowanego dobrym praktykom projektowania i tworzenia nowoczesnych witryn internetowych omówię kilka ważnych aspektów związanych ze stylizacją kodu HTML.

Style CSS

Style CSS umożliwiają łatwe dopasowywanie wyglądu dokumentu HTML do różnych potrzeb, bez konieczności ingerencji w sam kod, co oznacza bardzo duże ułatwienie w przypadku modyfikowania wyglądu całych witryn. Szczególnie dziś, w czasach panowania różnorodnych urządzeń mobilnych, dobre opanowanie pracy ze stylami CSS jest podstawowym kluczem do kompatybilności witryny z każdym rodzajem wyświetlacza.

Stylizacja witryny internetowej powinna być oparta na sprawdzonych i zgodnych z dobrymi praktykami technikach CSS.

Techniki stylizacji CSS

Style CSS mogą być zawarte w zewnętrznych arkuszach styli (style zewnętrzne), bądź osadzone w kodzie HTML (style wewnętrzne), a także dodawane bezpośrednio do samych znaczników HTML (stylizacja bezpośrednia). Ta ostatnia metoda powinna być stosowana bardzo rozważnie, tylko w przypadku prawdziwej konieczności.

W przypadku zewnętrznych arkuszy CSS, w sekcji HEAD kodu HTML dokumentu należy umieścić odnośniki do odpowiednich arkuszy, czyli przykładowo:

<head>
<link rel="stylesheet" media="screen" href="./css/style.css">
</head>

W przypadku styli CSS osadzonych w kodzie HTML dokumentu, style również osadzamy w sekcji HEAD, co może wyglądać przykładowo następująco:

<head>
<style type=”text/css”>
body {background-color: #f0f0f0;}
h1 {color: white;}
p {color: blue;}
</style>
</head>

Bezpośrednia stylizacja znaczników HTML, której stosowanie generalnie odradzam zgodnie z dobrymi praktykami, mogłaby przykładowo wyglądać następująco:

<h1 style="margin-bottom:2em;">Strony www</h1>

Należy oczywiście pamiętać, iż w przypadku zewnętrznych arkuszy CSS, warto umieścić wszelkie wariacje stylowe w jednym arkuszu CSS, unikając korzystania z większej ilości arkuszy. Dlaczego? Otóż jest to jedna z tak zwanych dobrych praktyk optymalizujących ładowanie stron, zalecana przez Google. Ładowanie jednego większego arkusza CSS zajmuje o wiele mniej czasu niż ładowanie kilku osobnych mniejszych arkuszy, co znacznie skraca czas ładowania stron.

A teraz postaram się udzielić kilku konkretnych porad, jeśli chodzi o dobre praktyki pracy z CSS.

Wyeliminuj rozbieżności domyślnych wartości elementów CSS w różnych przeglądarkach

Przeglądarki internetowe różnych producentów potrafią się zachowywać na odmienne sposoby jeśli chodzi o domyślne wartości dla rozmaitych elementów CSS. Aby uniknąć niespodzianek z wyświetlaniem stron, warto jest zresetować elementy CSS do wartości domyślnych. Jak to zrobić? Otóż można się w tym celu posłużyć popularnymi bibliotekami resetującymi, takimi jak normalize.css lub tym podobnymi. Dla tych, którym wystarczy bardzo podstawowy reset wartości domyślnych tylko niektórych elementów CSS, polecam zastosowanie kodu CSS ustawiającego domyślne wartości, który należy umieścić na samym początku arkusza. Kod ten może wyglądać przykładowo tak:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Stosuj elementy CSS3 dla układów stron

Stosując CSS warto korzystać ze wszystkich, niekiedy niestety mało znanych, dobrodziejstw CSS3. Dla przykładu opiszę tutaj korzyści płynące z mało znanej właściwości o nazwie flex.
Właściwość flex określa długość danego elementu w stosunku do reszty elastycznych elementów wewnątrz tego samego pojemnika.
Otóż w powszechnej sytuacji, gdy mamy zamiar zachować równą wysokość wszelkich sekcji układu danej strony, niezależnie od ilości tekstu obecnego w każdej z sekcji, z ogromną pomocą przychodzi nam właściwość CSS flex. Poniższy przykład kodu demonstruje w dużym uproszczeniu tego typu scenariusz:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
display:flex;
max-width:1200px;
margin:0 auto;
}
#main {
flex-grow:1;
border:1px solid #f0f0f0;
padding:0.2em;
}
aside {
flex-shrink:0;
width:280px;
background-color:#f0f0f0;
padding:0.2em;
}
@media all and (max-width: 800px) {
#page {
flex-flow:column;
}
aside {
width:auto;
}
}
</style>
</head>
<body>
<section id="page">
<div id="main">
<p>Ta strona składa się z sekcji o takiej samej wysokości</p>
</div>
<aside>
<p>To jest sekcja boczna</p>
</aside>
</section>
</body>
</html>

Oto jak prezentuje się w przeglądarce powyższy dokument HTML, po dodaniu większej ilości tekstu do sekcji main:

Stosowanie CSS3
Stosowanie CSS3

Przetestowanie powyższego kodu pozwoli zauważyć, że nawet niezależnie zmieniając ilość tekstu w każdej z sekcji, obie sekcje zachowują taką samą wysokość, co przyczynia się do estetycznego wyglądu układu. Dodatkowo w powyższym przykładzie zastosowałem elementy CSS związane z responsywnością strony, o której będzie mowa w następnej części instruktarzu, oraz ułatwiające stylizację znaczniki HTML 5, o którym wspominałem w części pierwszej.

Trzymaj się składni CSS i unikaj typowych błędów

Ponieważ jakość witryny www w dużej mierze zależy od jakości zawartego w niej kodu CSS, gorąco zachęcam do trzymania się oficjalnej składni. Pomimo iż opanowanie CSS jest stosunkowo proste, to niestety nawet doświadczeni projektanci witryn popełniają błędy.

Powszechnym błędem, który może mieć poważne konsekwencje, jest stosowanie niewłaściwych dla danego celu selektorów CSS. Selektory # (id) należy stosować wyłącznie dla niepowtarzalnych na stronie elementów, takich jak przykładowo #wrapper, #main, #footer, które są elementami układu strony. Selektory # (id) można również stosować do stylizacji elementów, które muszą być rozpoznawalne przez dodatkowe skrypty. W każdym innym przypadku należy posługiwać się klasami CSS, a nie identyfikatorami.

Popularnym błędem jest także jednoczesne stosowanie różnych jednostek miary. Przykładowo może to wyglądać następująco:

h1 {margin-top:10px;padding:1em;}

Innym typowym błędem jest dodawanie spacji pomiędzy wartością a jednostką miary:

h1 {
margin-top:1 em; /* Nie rób tego */
}

To tyle na dziś. Mam nadzieję, że to co napisałem okaże się przydatne. Następna część będzie o kompatybilności stron www z różnymi urządzeniami mobilnymi.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *