Nowe techniki tworzenia witryn internetowych w Operze Kestrel (cz. 1)

Internet i sieci

| Śr, 12/11/2008 - 16:08 (przez: Wasacz)

Artykuł ten jest pierwszą częścią tłumaczenia oryginału autorstwa Davida Storeya, pt. New development techniques using Opera Kestrel (9.5), udostępnianego na licencji Creative Commons Attribution, Non Commercial - Share Alike 2.5.

Kestrel (po polsku „Pustułka”), to nazwa kodowa przeglądarki internetowej Opera w wersji 9.5x i 9.6x. Wraz z nową wersją silnika renderującego o nazwie Core-2, twórcy stron internetowych mają możliwość wykorzystania nowych metod i technik obsługiwanych przez najnowsze wersje Opery, wliczając w to obsługę CSS3, wektorowej grafiki SVG oraz nowy silnik JavaScript. Zagadnienia te zostaną poruszone w niniejszym artykule.

Selektory CSS3 na dzień dobry

Kestrel wspiera pełną gamę zaawansowanych selektorów CSS3, dzięki czemu możemy łatwo wybrać konkretne elementy bez zbędnego kodu HTML, pozbywając się niepotrzebnych klas czy identyfikatorów.

Dwukolorowe wiersze tabel

Naprzemienne ustawienie kilku kolorów tła dla wierszy tabeli jest znanym i od kilku lat stosowanym sposobem na zwiększenie użyteczności – dane tabelaryczne prezentowane są czytelniej, co ułatwia ich analizę. Jedną z dotychczasowych metod osiągnięcia takiego efektu było zastosowanie JavaScript, albo też dodawanie klas dla każdego elementu reprezentującego wiersz tabeli. Na szczęście, dzięki możliwościom CSS3, możemy do tego celu wykorzystać pseudoklasę :nth-child() (albo :nth-of-type()).

Przykładowo, najprostsze zastosowanie dwukolorowych wierszy tabeli:

#playlist tr:nth-child(odd) td {
	background-color: #edf3fe; 
}

W powyższym przykładzie nadaliśmy tło wierszom nieparzystym. Alternatywnie moglibyśmy skorzystać z :nth-child(even), wówczas uzyskalibyśmy dostęp do wierszy parzystych. Ponadto, istnieje możliwość sprecyzowania numeru elementu, albo też zastosowania wzorca, według którego elementy mają być wybierane. I tak tr:nth-child(2) wybierze tylko drugi wiersz tabeli, tr:nth-child(3n) będzie wskazywać na co trzeci, natomiast tr:nth-child(3n+1) wybierze każdy wiersz, który następuje po wierszu trzecim.

Inicjały

Popularną metodą na wyróżnienie inicjału, czyli litery rozpoczynającej partię tekstu, jest umieszczenie go wewnątrz elementu span, bądź nadanie odpowiedniej klasy dla akapitów, w których ma być zaznaczony, a następnie skorzystanie z pseudoelementu ::first-letter. Zastosowanie dodatkowego elementu lub klasy jest konieczne, ponieważ nie zawsze mamy pewność, czy wybranego akapitu nie poprzedzają inne elementy w kodzie (na przykład obrazek), co mogłoby wpłynąć na reguły CSS – wówczas znaczenie ma kolejność elementów. Ponadto, inicjał powinien być wyróżniony tylko dla pierwszego akapitu, a nie – każdego. Rozwiązaniem wymienionych problemów jest pseudoklasa :first-of-type.

Spójrzmy na przykład:

div.article > p:first-of-type::first-letter {}

Powyższy selektor wybiera inicjał pierwszego z akapitów, będących dziećmi elementu div z nadaną klasą article. Dzięki temu, jeśli przed akapitem znajdą dowolne elementy innego typu, selektor będzie nadal wskazywał na poprawny element. Ponadto, jeśli akapit znajduje się, przykładowo, w dodatkowej ramce utworzonej z elementu div, zostanie zignorowany – co widać na przykładzie.

Dynamiczne zapytania o medium

Media Queries, czyli zapytania o medium, pozwalają na dostosowanie wyświetlania dokumentu według określonych ustawień systemowych użytkownika. Najczęściej wykorzystywane są do zapewnienia urządzeniom mobilnym najbardziej odpowiednich reguł CSS, ale z powodzeniem mogą być stosowane także dla urządzeń biurkowych. Kestrel dynamicznie obsługuje zapytania o medium, co oznacza, że jeśli zdefiniujemy sprawdzanie szerokości ekranu za pomocą takiego zapytania, wszystkie reguły zostaną dopasowane automatycznie podczas zmiany szerokości okna przeglądarki przez użytkownika – bez konieczności przeładowania strony. Jest to bardzo użyteczne dla dokumentów, których układ graficzny powinien płynnie dostosowywać się do szerokości okna, jednak część zawartości nie mieści się w przeznaczonym dla niej obszarze. Dzięki dynamicznym zapytaniom o medium można, przykładowo, bezproblemowo przenieść część zawartości do nowej linii w momencie, kiedy okno zostało zmniejszone do określonych rozmiarów.

Przejdźmy zatem do odpowiedniego przykładu. Aby sprawdzić działanie zapytań o medium, spróbuj zmienić szerokość okna. Jeśli będzie ona na tyle mała, że tekst otaczający ilustrację stanie się nieczytelny, wówczas pownien zostać wyświetlony pod ilustracją. Oznacza to, że właściwość float została wyłączona. Jednocześnie zredukowany zostanie rozmiar czcionki nagłówka, a także wymiary obrazka będącego ilustracją. Dzięki takiemu zachowaniu dokument pozostaje nadal w pełni czytelny.

Fragment arkusza stylów wykorzystanego w przykładzie:

@media screen and (max-width: 730px) {
 
	h1 {
		font-size: 2em;
	}
	.figure {
		float: none;
		margin: 0 10%;
	}
	.figure p {
		display: none;
	}
	.figure img {
		max-width: 95%;
		height: auto;
		padding-bottom: 5px;
	}
 
}

Pozostałe możliwości CSS

Zaawansowane selektory nie są jedynymi nowościami dotyczącymi obsługi CSS w Operze Kestrel. Szczegółowe informacje udostępniane są na bieżąco wraz z kolejnymi wydaniami testowych wersji przeglądarki. Dodatkowe informacje publikuje także autor oryginalnego artykułu.

TechVortal | Twój wortal technologiczny