Tworzenie aplikacji internetowych to skomplikowany, czasochłonny i nie zawsze opłacalny proces.

Dlaczego wielu programistów pisze własne aplikacje, frameworki, biblioteki i inne rozwiązania?

Po prostu wychodzą z przekonania, że sami zrobią to lepiej. Czasami zdarza się, że dzięki temu podejściu rodzą się prawdziwe perełki. Często wielkie molochy tracą klientów, użytkownicy znajdują produkty skrojone na miarę ich potrzeb i każdy może być zadowolony.

Pozostałe przypadki to zmarnowany potencjał, czas i zasoby, bo projekt umiera, zanim rozpoczął żywot. Dopóki nie rozpoczniesz tworzenia nowej jakości nie będziesz, miał pewności co do swojej wartości.

Właściwy wpis

Często zastanawia mnie kształt moich wypowiedzi formułowanych w stanie, jak najbardziej trzeźwym. Jestem przecież człowiek technicznych, któremu nie obce powinno być prasowanie, ale już bogaty język podczas wszelkich wypowiedzi, co najmniej zadziwia.

Człowiek uczy się przez lata, choć nie zawsze ma na to czas i chęci. Najlepszym przykładem moich osiągnięć jest SquareZone. Prosty, ale funkcjonalny serwis, który przystępnie oferuje informacje użytkownikom. Tym razem przyszedł czas na nowy przykład.

MyBlog – nazwa kodowa powinna być bardziej tajemnicza, ale projekt jest w zbyt wczesnym stadium, mimo wielomiesięcznej pracy przy jego tworzeniu. Otóż wspomniana aplikacja oferuje lub będzie oferowała w przyszłości funkcjonalności znane z popularnych systemów blogowych.

Architektura systemu po części czerpała ze znanego Wordpressa, jednak największym atutem omawianej aplikacji jest wydajność i zgodność ze standardami. Wszystkie testy i szczegóły zostaną przedstawione wkrótce. Niedługo postaram się przedstawić kolejne funkcjonalności oraz założenia rozwojowe.

Obecnie nie mam pewności czy kod źródłowy zostanie udostępniony publicznie, jednak wszelkie opinie na temat działania lub architektury są mile widziane.

Wersja demonstracyjna myBlogdostępna jest w sieci.

CSS i Ajax. Strony WWW zgodne ze standardami sieciowymi W3C to lekka propozycja dla osób związanych z tworzeniem i projektowaniem stron internetowych. Fanatyczni koderzy, który dzień bez kilku linii kodu uważają za stracony nie znajdą w tej książce samych przykładów. Nietypową koncepcję rozważań na temat standardów sieciowych czyta się bardzo sprawnie, jednak wielostronicowe rozwodzenie się nad pojedynczą myślą po pewnym czasie zdecydowanie męczy.

Autorzy dokładnie opisują swoją pracę przy kolejnych projektach. Rozprawiają o napotkanych problemach, własnych pomysłach, sugestiach przełożonych, aż nieszczęśliwe przypadki losowe. Kolejne rozdziały pokazują jak wykorzystuje się standardy sieciowe, w szczególności arkusze stylów kaskadowych i języki hipertekstowe.

Tytuł książki sugeruje połączenie CSS oraz AJAX. Jednak niewiele informacji znajdziemy w książce na temat asynchronicznych żądań. Więcej poczytamy o systemach zarządzania treścią, programowaniu aplikacji sieciowych, czy sposobach zwiększenia wydajności witryn internetowych. Jednak w dalszym ciągu będą to ogólniki sugerujące jedynie kierunek naszych dalszych poszukiwań.

OSTATECZNA OCENA: 3/5

• Autorzy: Schmitt Christopher , Blessing Kimberly , Cherny Rob , Evans Meryl K. , Lawver Kevin , Trammell Mark

David Schultz, Craig Cook

• Tytuł oryginału: Adapting to Web Standards: CSS and Ajax for Big Sites (Voices That Matter)
• Tłumaczenie: Robert Górczyński
• ISBN: 978-83-246-1755-5
• Format: 168×237, 304 strony
• Data wydania: 11/2008 (Helion)

“HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW” to kompletny podręcznik dotyczący tworzenia stron internetowych oraz specyfikacja najpopularniejszych technologii internetowych. Autorzy skupili się na wyjaśnieniu różnic w strukturze dokumentów HTML i XHTML, a także szczegółowo omówili ich specyfikacje. Książka dokładnie pokazuje sposób definiowania metadanych i wstawiania poszczególnych elementów na stronie. Przykłady zawarte w kolejnych rozdziałach prezentują budowanie i używanie tabel, formularzy, obrazów oraz pozostałych najpopularniejszych znaczników.

Autorzy szczególny nacisk położyli na zrozumienie standardów sieciowych, których zrozumienie jest podstawą do prawidłowego tworzenia strona internetowych. Idea rozdzielenia części prezentacyjnej i treści pokazuje zalety nowoczesnego podejścia, a dodatkowe rozdziały dopełniają całości książki. Poza przykładami dotyczącymi HTML/XHTML, autorzy omawiają JavaScript oraz CSS. Osoby początkujące łatwo zrozumieją wspomniane technologie na przykładowym kodzie. Pozostali mają do dyspozycji aktualne specyfikacje omawianych technologii.

Książka jest bardzo dobrym wprowadzeniem dla osób, które nie zajmowały się nigdy tworzeniem stron internetowych lub robiły to dawno temu. Porzucenie przestarzałych technik jest konieczne. Standardy sieciowe wyznaczają właściwy kurs rozwoju internetu, dlatego wszyscy powinni nim podążać.

OSTATECZNA OCENA: 4.5/5

• Autorzy: David Schultz, Craig Cook
• Tytuł oryginału: Beginning HTML with CSS and XHTML: Modern Guide and Reference
• Tłumaczenie: Rafał Jońca
• ISBN: 978-83-246-1498-1
• Format: 158×235, 384 strony
• Data wydania: 05/2008 (Helion)

Przykłady stylizacji tabel zostały w 2006 roku zebrane przez niezawodny Smashing Magazine. Czas w sieci upływa bardzo szybko, wiele z tych przykładów, jeśli nie wszystkie to przykłady przestarzałe. Jednak ten sam Smashing Magazine w nowszym artykule prezentuje naprawdę atrakcyjne przykłady. Niestety wygląd to nie wszystko.

Problem

Wielokrotnie zdarza się, że za ciekawym wyglądem tabeli kryje się nadmierna liczba klas, które dotyczą poszczególnych elementów. Podstawowa struktura tabeli składa się z trzech znaczników <table>, <tr> oraz <td>, które tworzą odpowiedni element tabeli, wiersze i poszczególne komórki.

Taka struktura nie pozwala na zbyt wiele, ponieważ odniesienie się do elementów poprzez selektory kontekstu jest wręcz niemożliwa. Jedyne dostępne rozwiązanie to wykorzystanie atrybutów <class> i selektorów klas.

Kolorowanie wierszy i kolumn wymaga użycia atrybutu <class> dla każdej komórki. Kolorowanie samych wierszy uzyskamy poprzez atrybuty<class> dla poszczególnych znaczników <tr>. Poniższe style określają kolor tła dla nieparzystego i parzystego wiersza oraz nieparzystej i parzystej kolumny.

.odd-row {
	background: #eee;
}
.even-row {
	background: #ccc;
}
.odd-column {
	background: #fcc;
}
.even-column {
	background: #f44;
}

Zamierzony efekt zostanie osiągnięty, ale kod naszej tabeli stanie się mniej czytelny, zarówno dla wyszukiwarek, jak i dla ludzie. Istnieje dobra alternatywa dla powyższego rozwiązania.

Rozwiązanie pośrednie

Konieczne zmiany dotyczą kodu tabeli. Struktura tabeli udostępnia elementy grupujące wiersze oraz kolumny. Znaczniki <thead>, <tbody> oraz <tfoot> grupują odpowiednio wiersze nagłówka, danych i stopki.

Analogiczne przeznaczenie ma znacznik <colgroup>, który obejmuje poszczególne kolumny tabeli, zdefiniowane przez znaczniki <col>.

Ważne jest zrozumienie kolejności wyświetlania warstw, które tworzą strukturę tabeli. Szczegółowy artykuł na ten temat napisał Roger Johansson.

Zmodyfikowana struktura pozwala na użycie analogicznych stylów w arkuszu, jednak zamiast selektorów klasy korzystamy z selektorów kontekstu.

Nowoczesne podejście

Selektory potomka oferowane przez CSS3 umożliwiają jeszcze dokładniejsze odwołanie się do elementów w strukturze dokumentu. Niestety Internet Explorer nie obsługuje selektora potomka, co jest sporym mankamentem tego rozwiązania.

col:nth-child(odd) {
	background: #faa;
}
col:nth-child(even) {
	background: #f44;
}
tbody tr:nth-child(odd) {
	background: transparent url(img/grey-10-transparent.png) 0 0 repeat;
}
tbody tr:nth-child(even) {
	background: transparent url(img/grey-50-transparent.png) 0 0 repeat;
}

Właściwe dobranie kolorów tła oraz obrazów pozwala na uzyskanie właściwego kolorowania wierszy i kolumn. Wygląd tabeli jest dokładnie taki, jak oczekiwaliśmy. Dodatkowa zaleta tego podejścia to struktura tabeli wolna od zbędnych atrybutów <class>.

Podsumowanie

Przedstawione przykłady różnią się sposobem w jaki uzyskano efekt końcowy. Czytelniejsza struktura i lżejszy kod to wielka zaleta. Podobnych rozwiązań istnieje wiele, jednak nie stosuje się ich powszechnie z powodu braku wsparcia po stronie Internet Explorera.

“CSS według Erica Meyera. Kolejna odsłona” to kontynuacja pierwszej książki Erica Meyera na temat wykorzystania technologii CSS. Autor opisał w niej podstawowe właściwości stylów, jak również sposób ich użycia w kodzie strony. Ważne jest, aby konstruować semantyczną strukturę dokumentu, ponieważ nawet z wyłączoną obsługą CSS nasza strona będzie wyglądać przyzwoicie. Jeżeli zaś użyjemy stylów to mamy pełen dostęp do warstwy prezentacyjnej.

Przykłady przedstawione w książce to dalszym ciągu użyteczne i często spotykane elementy. Mimo dokładnie opisanych czynności i sposobu postępowania, swobodnie możemy zmodyfikować podany CSS, aby dostosować go do własnych potrzeb. Jeżeli chcemy uczynić nasze aplikacje internetowe lepszymi to pierwszą rzeczą jest zastosowanie arkuszy stylów. Nawet korzystanie z CSS 2.1 daje programiści wszelkie środki, aby semantycznie tworzyć strony WWW. Używanie tabel do budowania layoutu, stosowanie obrazków imitujących odstępy to przestarzałe techniki. Nowoczesne aplikacje webowe muszą korzystać z właściwych technologii, a jedną z nich jest właśnie CSS.

Książka bardzo dobrze sprawdzi się jako podręcznik nauki CSS. Osoby, które chcą zrozumieć zasady działania CSS, powinny uczyć się od najlepszych. Eric Meyer jest uznanym autorytetem w branży, ponieważ sam jest współtwórcą tej technologii. Potrafi bardzo jasno przedstawić wszystkie zawiłości związane z CSS, jak również pokazać sposób rozwiązania napotykanych problemów.

OCENA OSTATECZNA: 4/5

OSTATECZNA OCENA: 4/5

• Autor: Eric A. Meyer
• Tytuł oryginału: More Eric Meyer on CSS
• Tłumaczenie: Wojciech Moch
• ISBN: 83-7361-901-1
• Format: 205×253, 272 stron
• Data wydania: 07/2005 (Helion)

“CSS. Gotowe rozwiązania” to książka, która na początku zainteresowała mnie spisem treści. Dziesięć projektów z kodem XHTML i CSS, rozwiązujących jedne z częstszych problemów jakie spotykają programiści stron internetowych potrafi zachęcić. Jednak zawartość merytoryczna książki nie wygląda już tak krystalicznie. Autor proponuje zastąpienie sztuczek starej szkoły, rozdzielenie warstw kodu i prezentacji, ale sam niestety popełnia niewybaczalne błędy.

Początkujący programiści zapewne nie dostrzegą większych błędów w książce, ponieważ nie traktuje ona niczym zaawansowanym. Poza tym początkujący programiści dopiero zdobywają wiedzę i doświadczenie, więc powinni korzystać z poprawnie napisanych źródeł. Kod XHTML jest błędnie skonstruowany, a tym samym w konsekwencji arkusze stylów kaskadowych zawierają nieodpowiednie deklaracje. Nagminne opakowywanie wszystkich elementów przed <div> prowadzi do tworzenia gigantycznej struktury znaczników. Używanie znaczników niezgodnie z ich semantycznym przeznaczeniem, jak również długości nazw klas i identyfikatorów budzą spore zastrzeżenia.

Jednak największym błędem jest stosowanie JS do ominięcia błędów przeglądarek. Moim zdaniem są dużo lepsze sposoby, aby zmusić IE do prawidłowego wyświetlania. Nie chodzi tu bynajmniej o możliwość wyłączenia JS przez użytkownika, bo to robi kilka procent populacji sieciowej, ale najzwyczajniej o to, że JS służy zupełnie do czegoś innego.

Książka miała za zadanie przedstawić sposoby radzenia sobie z problemami aplikacji internetowych, jednak moim zdaniem nie znajdziemy tam zbyt wielu wartościowych informacji. Zaproponowane rozwiązania czasami dają skutek odwrotny od zamierzonego. Przykładowe formatowanie formularzy jest przykładem ingerencji kodera w obszar, którego nigdy nie powinien zmieniać. Stosowanie tabel do tworzenia konstrukcji layoutu, jak również korzystanie z <iframe> jest w dzisiejszych czasach niewybaczalne. Niestety autor nie do końca zna obowiązujące dzisiaj standardy sieciowe. Pewnie z tego, także powodu stosuje najmniej restrykcyjny XHTML 1.0 Transitional.

Zdecydowanie nie polecam tej książki nikomu. Początkujący koderzy nauczą się złych praktyk, związanych z kodem XHTML i arkuszami CSS. Zaawansowanie programiści nie znajdą w tej książce nic wartościowego. Książka mogłaby być o wiele lepsza, ale z powodu ciągłego zainteresowania tworzeniem aplikacji webowych, nadal na rynku wydawane są książki, które nie warto nawet otwierać. Niestety branża WWW nie zmieni się na lepsze, jeśli programiści nie zaczną właściwie stosować standardów sieciowych, a nie zaczną, kiedy będą mogli znaleźć książkę taką jak “CSS. Gotowe rozwiązania”.

OSTATECZNA OCENA: 2/5

• Autor: Richard York
• Tytuł oryginału: CSS Instant Results
• Tłumaczenie: Łukasz Piwko
• ISBN: 83-246-0574-6
• Format: B5, stron 392
• Data wydania: 11/2006 (Helion)

Lightbox 2.02

Do uruchomienia lightboxa potrzebujemy wspomnianych już plików prototype.js oraz scriptaculous.js oraz dwóch innych. Plik lightbox.js jest właściwym kodem naszego skryptu, a effects.js częścią biblioteki scriptaculous, odpowiedzialną za efekty graficzne. Na stronie autora znajdziemy wszystkie potrzebny pliki, łącznie ze standardowymi stylami CSS i obrazkami nawigacyjnymi. Należy zwrócić uwagę jaką wersję skryptu ściągamy ze strony.

Lightbox może wyświetlać pojedyncze obrazki lub pewien zbiór obrazków znajdujących się na stronie. Sposób jego uruchomienia jest bardzo prosty i szczegółowo wyjaśniony na stronie projektu, dlatego skupimy się tylko na zmianie sposobu prezentacji oraz ważnych szczegółach technicznych. Poniżej przedstawiony jest przykładowy obrazek z białą ramką szerokości 10 pikseli wyświetlony na czarnym tle z 40% przezroczystością.

Aby to zmienić musimy dokonać edycji pliku lightbox.css. Znajdujemy deklaracje dla naszego tła i zmieniamy co trzeba. W moim pliku definicja dla warstwy #overlay była następująca.

#overlay {

	...

	background-color: #000;

	filter:alpha(opacity=60);

	-moz-opacity: .6;

	opacity: .6;

}

Linijka background-color: #000; odpowiada za kolor tła w czasie prezentacji obrazów. W naszym przypadku jest to kolor czarny. Kolejne 3 linijki definiują nieprzeźroczystość dla Internet Explorera, starszych wersji przeglądarek rodziny Mozilla oraz wszystkich przeglądarek obsługujących poprawnie nieprzeźroczystość rekomendowana przez W3C. Różnica pomiędzy nieprzezroczystością a przezroczystością jest prosta. Jeżeli mamy 20% nieprzezroczystości (opacity) to jej odpowiednikiem jest dokładnie 80% przezroczystości (transparency). Dla niewtajemniczonych, trochę prościej. Jeśli ustawimy dla naszego obrazka opacity: .1; to będzie on praktycznie niewidoczny. W odwrotnej sytuacji, czyli dla wysokiej wartości opacity: .9; nasz obrazek jedynie lekko rozjaśniony. Wartość opacity może być podana bez zera przed przecinkiem, bo jest to skrótowy zapis zgodny z CSS.

Ostrzegam, że zmiana tych parametrów może nie przynieść oczekiwanego skutku z powodu ustawień przezroczystości w innym miejscu. Mianowicie w pliku lightbox.js może, ale nie musi występować poniższa linijka.

var overlayOpacity = 0.9;	// controls transparency of shadow overlay

Osobiście kiedy używałem lightboxa 2.0 to wykasowałem definicje nieprzezroczystości z warstwy #overlay, ustawiając w stylach jedynie tło. Przezroczystość zmieniałem w pliku lightbox.js.

Bardzo ważnym elementem w lightboxie jest ramka wokół obrazka, której szerokość możemy bardzo szybko zmienić. Wystarczy tylko znaleźć odpowiedni fragment w pliku lightbox.js.

var borderSize = 2;

Rozmiar oczywiście jest w pikselach. Jeżeli zmieniamy szerokość ramki to w stylach musimy również dokonać jednej zmiany, tym razem jednak dopełnienia obrazka.

#imageContainer {

	padding: 2px;

}

Chcemy mieć węższą ramkę to zmieniamy obydwie wartości. W naszym przypadku będzie to 2px. Jeżeli chcemy zmienić kolor ramki, która wcale nie jest ramką, a całą warstwą, na której wyświetlamy nasz obrazek musimy znaleźć następujący kod:

#outerImageContainer {

	position: relative;

	background-color: #AAA;

	width: 250px;

	height: 250px;

	margin: 0 auto;

}

Jego zmiana spowoduje zmianę koloru warstwy, na której wyświetlany jest obrazek. Nasza warstwa będzie miała kolor #AAA. Teoretycznie możemy dopisać border: 2px solid #FFF;, ale nie wiem czy jest komukolwiek potrzebne.

Dalszym etapem naszej stylizacji lightboxa będzie pasek rozwijany poniżej samego obrazka. Znajdują się na nim informacje zawarte w atrybucie title naszego linka oraz przycisk Close.

#imageDataContainer {

	font: 10px Verdana, Helvetica, sans-serif;

	background-color: transparent;

	margin: 0 auto;

	line-height: 1.4em;

}

Kolor tego paska możemy ustawić dowolnie, w zależności od potrzeby. Jednak w naszym przypadku potrzebujemy, aby pasek był przezroczysty. Przezroczysty pasek może uniemożliwiać odczytanie tekstu. Również obrazek closelabel.gif, który standardowo nie posiada przezroczystości może zaburzać oczekiwany efekt.

Najlepszym rozwiązaniem tej sytuacji jest przygotowanie obrazków z przezroczystym tłem oraz w polskiej wersji językowej, jeśli tylko potrzebujemy. Obrazki loading.gif oraz closelabel.gif znajdują się w katalogu images/, a ścieżki do plików w lightbox.js.

var fileLoadingImage = "images/loading.gif";

var fileBottomNavCloseImage = "images/closelabel.gif";

Mamy do wyboru albo nadpisać te pliki albo zmienić ścieżki w kodzie skryptu. Wygodniejsze jest zmienienie ścieżek, bo zawsze zostaną nam standardowe pliki, na wszelki wypadek.

Ostatnim elementem jest opis zdjęcia wyświetlany na pasku. Musimy zmienić jego kolor na jaśniejszy, aby możliwe było jego odczytanie na ciemnym tle.

#imageData #caption {

	font-weight: bold;

	color: #FFF;

}

Jeżeli dokonaliśmy wszystkich zmian poprawnie to powinniśmy otrzymać efekt podobny do widocznego na zdjęciu poniżej.

Do pełni szczęścia brakuje nam jeszcze obrazków prevlabel.gif i nextlabel.gif, które potrzebne są do nawigacji w momencie oglądania kilku obrazków. Ich wykonanie nie powinno być trudne, a ścieżki do tych plików zapisane są w stylach lightbox.css. Powinniśmy jeszcze odsunąć nasze obrazki od brzegu o tyle pikseli, ile ma nasza ramka.

#prevLink {

	left: 2px;

	float: left;

}

#nextLink {

	right: 2px;

	float: right;

}

W przypadku oglądania kilku zdjęć poniżej opisu pojawia się, także tekst mówiący nam o numerze zdjęcia. Zmiany tego tekstu możemy dokonać w pliku lightbox.js.

// if image is part of set display 'Image x of x'

if(imageArray.length > 1){

	Element.show('numberDisplay');

	Element.setInnerHTML( 'numberDisplay', "Zdjęcie " + eval(activeImage + 1) + " z " + imageArray.length);

}

Kolor tekstu siedzi w stylach lightbox.js.

#imageData #numberDisplay {

	display: block;

	clear: left;

	color: #FFF;

	padding-bottom: 1.0em;

}

Podsumowanie

Jak widać na załączonych obrazkach zmiany w wyglądzie lightboxa mogą być spore, a ich wykonanie wcale nie musi być trudne. Wszystko zależy od naszych potrzeb i chęci. Zmiany przedstawione w artykule dotykają tylko czubka góry lodowej, bo taka stylizacja jest praktycznie nieograniczona. Ważne jest, aby dokładnie zaplanować, co chcemy zmienić i do tego dążyć.

Chris często omawia ciekawe pomysły zrealizowane przy użyciu biblioteki jQuery. Czasami na stronie znajdziemy porady odnośnie PHP lub Wordpressa. Co jakiś czas publikowane są wyniki ankiet prowadzonych na stronie. Wyniki takich ankiet wiele mówią o ludziach pracujących w branży, ich nawykach i zachowaniach.

Wygląd i układ strony są przejrzyste. Wszystkie odnośniki i informacje spełniają swoje zadanie. Problemy omawiane przez Chrisa są często ilustrowane, aby dokładnie zrozumieć istotę problemu i jego rozwiązania. W ostatnim czasie na stronie pojawiły się screencasty, które wraz z komentarzem autora, dokładnie pokazują krok po kroku sposób uzyskania efektu omawianego w artykule.

“CSS według Erica Meyera. Sztuka projektowania stron WWW” to książka, która pozwoli poznać zasady prawidłowego budowania stron internetowych z wykorzystaniem stylów kaskadowych. Zrozumienie podstawowych zasad modelu blokowego pozwoli projektantom uzyskać oczekiwane efekty bez skomplikowanych sztuczek. Stąd tylko kilka kroków do rozwinięcia skrzydeł naszej wyobraźni. Dzięki kolejnym projektom, autor od początku do końca opisuje sposób realizacji układu wielokolumnowego lub pozycjonowania warstw. Wraz ze wzrostem naszych umiejętności tworzymy zaawansowane formularze, stylizowane hiperłącza lub dzienniki internetowe. Każdy projekt zawiera również propozycje dalszych modyfikacji, abyśmy bez przeszkód mogli stosować CSS w procesie tworzenia stron WWW.

Książka jest bardzo dobrym podręcznikiem dla początkujących projektantów. Przedstawione projekty są przykładami rzeczywistych aplikacji znanych z sieci. Eric Meyer jako jeden z twórców standardów sieciowych bardzo przejrzyście opisał zastosowanie CSS. Jeśli tego byłoby nam mało to w kolejnej odsłonie autor zawarł następne projekty.

OSTATECZNA OCENA: 4/5

• Autor: Eric A. Meyer
• Tytuł oryginału: Eric Meyer on CSS. Mastering the Language of Web Design
• Tłumaczenie: Andrzej Badowski, Wojciech Grobel, Joanna Sugiero
• ISBN: 83-7361-709-4
• Format: 205×253, stron: 312
• Data wydania: 02/2005 (Helion)

Uzyskanie takich efektów umożliwia CSS3, który jest poprawnie obsługiwany przez nowoczesne przeglądarki. Trudno mówić o komercyjnym zastosowaniu takiego rozwiązania, kiedy Internet Explorer 8 odmawia poprawnej interpretacji wielu selektorów CSS3, w tym bardzo użytecznych selektorów potomka. Jednak praktycznie zapoznanie się z nowymi możliwościami CSS3, pozwoli na ich stosowanie chociażby w niekomercyjnych projektach lub własnych zastosowaniach.

Wprowadzenie

Pierwszym krokiem jest stworzenie struktury tabeli. Danymi źródłowymi były wartości indeksów na GPW, zaczerpnięte z serwisu finansowego Wirtualnej Polski. Jakie było moje zdziwienie, gdy kod dwukolorowej tabeli z kilkowa wierszami zawierał ponad 3000 znaków. Jednak takie są skutki formatowania danych w kodzie HTML, a także błędne wykorzystanie dostępnych technologii.

Minimalna struktura tabeli to znaczniki <table>, <tr> oraz <td>. Elementy te odpowiadają za tworzenie całej tabeli, kolejnych wierszy i poszczególnych komórek. W dalszej kolejności możemy dołączyć <thead>, <tbody>, a także <tfoot>, które dzielą całość tabeli na poszczególne sekcje: nagłówek, zawartość oraz stopkę. Wielu programistów zapomina o opisie tabeli, który zamieszczamy w tagu <caption>. Szczegółowe informacje na temat struktury tabeli w XHTML przedstawia specyfikacja na stronie W3C.

Poniżej został przedstwiony skrócony kod tabeli, jaka była użyta w tym artykule.

<table>
    <caption>Indeksy (WIG20 bez opóźnień)</caption>
    <thead>
        <tr>
            <th rowspan="2">czas</th>
            <th rowspan="2">nazwa</th>
            <th colspan="2">wartość [pkt]</th>
            <th colspan="2">zmiana</th>
            <th colspan="3">wartość [pkt]</th>
        </tr>
        <tr>
            <th>bieżąca</th>
            <th>odniesienia</th>
            <th>[pkt]</th>
            <th>[%]</th>
            <th>otwarcia</th>
            <th>min</th>
            <th>max</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>16:40</td>
            <td>WIG20</td>
            <td>1 810,38</td>
            <td>1 810,97</td>
            <td>-0,59</td>
            <td>-0,03</td>
            <td>1 824,07</td>
            <td>1 803,29</td>
            <td>1 837,98</td>
        </tr>
        ...
    </tbody>
</table>

Najważniejsza zaleta tabeli to czytelność danych, które są grupowane wierszami, kolumnami lub wierszami i kolumnami. Niestety zbyt małe odstępy między komórkami niekorzystnie wpływają na szukanie danych oraz ich porównywanie, co przedstawia pierwszy przykład.

Wersja podstawowa

Selektory potomka dostępne w CSS3 odnoszą się do odpowiednich elementów potomnych danego rodzica. Tabela to powtarzający się zbiór określonych znaczników, a zatem idealnie nadaje się do zademonstrowania wspomnianych selektorów strukturalnych.

Najpierw zajmiemy się ustawieniem podstawowych właściwości dla naszej tabeli, jak tło, odstępy rozmiar czcionki dla wszystkich komórek.

table {
    background: #aaa;
    font-family: sans-serif;
    font-size: 12px;
    border-spacing: 1px;
}

Dotychczasowym sposobem na uzyskanie kolorowania wierszy w tabelach było stosowanie atrybutu class dla elementu <tr>. jeszcze trudniejsze było kolorowanie kolumn, które wymagało takiego zabiegu przy każdej komórce <td>. Jednak CSS3 pozwala na szybkie odnalezienie dowolnego elementu w strukurze DOM, pod warunkiem, że znamy jego rodzica.

Odnalezienie nieparzystych wierszy tabeli i ustawienie koloru tła umożliwia następujący selektor tr:nth-child(2n+1). Możliwy jest, także bardziej ludzki zapis, czyli tr:nth-child(odd).

table tr:nth-child(odd) td {
    background: #eee;
}

Analogicznie postępujemy w przypadku parzystych wierszy, do których zastosujemy selektor tr:nth-child(2n) lub tr:nth-child(even).

table tr:nth-child(even) td {
    background: #ccc;
}

Kolejne reguły ustawiają kolor tła nagłówka, odstępy kolor czcionki. Informacje przedstawione w całej tabeli zostały wyrównane do prawej, pownieważ większość z kolumn zawiera dane liczbowe. Dwie pierwsze kolumny zostały wyrównane do lewej, dzięki selektorom potomka ustawionym dla komórek td:nth-child(1) i td:nth-child(2).

table th {
    background: #000;
    padding: 5px 10px;
    color: #fff;
}
table td {
    padding: 3px 5px;
    text-align: right;
}
td:nth-child(1),
td:nth-child(2) {
    text-align: left;
}

Kilkanaście linijek kodu CSS zmienia znacząco wygląd naszej tabeli, co pokazuje kolejny przykład. To nie koniec możliwości jakie oferuje CSS w przypadku stylowania tabel.

Możliwe jest ustawienie określonych właściwości dla poszczególnych kolumn, tak jak to miało miejsce w przypadku wyrównania zawartości pierwszej i drugiej kolumny. Bardzo przydatny jest opis tabeli umieszczony w znaczniku <caption>, który bez przeszkód modyfikujemy w stylach kaskadowych.

Jeśli szerokość naszej tabeli jest zbyt mała i chcemy zwiększyć jej rozmiar to z pomocą przychodzą następujące reguły:

table {
    width: 100%;
    max-width: 1024px;
}

Dzięki tym właściowościom nasza tabela dostosuje się do szerokości strony lub elementu, w którym jest umieszczona, nie przekraczając przy tym 1024 pikseli. W przypadku osadzenia tabeli w elemencie o zadanej szerokości, druga właściowość jest zbędna.

Podsumowanie

Dalsze możliwości stylizacji przykładowej tabeli są równie łatwe, dzięki zastosowaniu nowych selektorów. Wszystko zależy od naszych potrzeb i wyobraźni. Przeglądarki, które obsługują selektory CSS3 to Firefox 3.1+, Opera 9+, Safari 3+ oraz Chrome. Istnieje częściowe wsparcie dla wymienionych selektorów w przeglądarkach Internet Explorer, jednak nawet IE8 nie obsługuje sporej ich części.