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

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 co trzecim wierszu.

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.

√

Komentarze

  1. BTM pisze:

    Tak, ale do czasu, kiedy nie pojawi się i nie zagości w większości domostw IE obsługujący CSS3 (lub nie pojawi się 100% działający JS który dodaje odpowiednią funkcjonalność) to nie ma co tego używać, bo i tak będziesz haczył na IE.

    Dodano 04 października 2008 o 15:29:31

  2. Wasacz pisze:

    IE i tak trzeba haczyć. Jak na razie Opera i Safari całkiem dobrze radzą sobie z CSS3, a Firefox dopiero w wersji 3.1 będzie im dorównywał w tej kwestii.

    Czyli zostaje kwestia IE, ale mamy (tylko pytanie, czy w IE8 też) do dyspozycji expressions, więc nie jest źle ;]

    Poza tym w UserCSS się przydaje ;]

    Dodano 04 października 2008 o 15:31:17

  3. btm pisze:

    Wiesz, to ja już wolę zrobić sobie w szablonie <td class=”<?= (($p++%2) ? ‘odd’:‘even’); ?>”> niż haczyć expressions dla IE :>

    Dodano 04 października 2008 o 15:37:52

  4. D4rky pisze:

    btm – a co jesli bedziesz chcial zmienic zeby z co drugi robilo na co trzeci albo po dwa? A jesli bedziesz musial miec szablon z oboma wersjami? I tak dalej…

    Dodano 04 października 2008 o 16:06:00

  5. Wasacz pisze:

    btm – nie każda tabela jest generowana po stronie serwera. Co, jeśli chcesz wrzucić 30-wersową do wpisu? Ręczne dodawanie klas jest strasznie fajne, szczególnie, jeśli chcesz potem dodać 1 element na początku… ;)

    No i w szachy nie pograsz.

    Dodano 04 października 2008 o 17:28:28

  6. btm pisze:

    Wasacz – nie każda tebela jest oglądana przez przeglądarkę obsłgującą CSS3. Co, jeśli duża większość internautów nie skorzysta z dobrodziejstw CSS3? Używanie CSS3 jest strasznie fajne, szczególnie, gdy nie chcesz by efekt widziałą większość internautów :)

    Dodano 04 października 2008 o 17:30:19

  7. Wasacz pisze:

    Napisałem przecież, że Opera ma CSS3, Safari/Chrome/Konqueror/whatever (tak, Livio, wiem, że WebKit != KHTML) ma, Firefox „prawie”, ale ma. Tylko IE zostaje. Już niedługo…

    Dodano 04 października 2008 o 17:31:25

  8. btm pisze:

    Rozbawiłeś mnie tym „Już niedługo”, podasz chusteczkę? :>

    Dodano 04 października 2008 o 17:31:49

  9. Wasacz pisze:

    Ja tam produktów Mozilli nie używam, nie wiem, kiedy planują Fx3.1, ale chyba aż tyle im to nie zajmie?

    Dodano 04 października 2008 o 17:33:13

  10. teamon pisze:

    Przejdz sie po domach znajomych, miejscach pracy, szkolach. IE, IE, IE.

    Dodano 04 października 2008 o 20:02:39

  11. Wasacz pisze:

    To by tłumaczyło, dlaczego IE wciąż traci rynek.

    Dodano 04 października 2008 o 20:15:16

  12. Teamon pisze:

    @Wasacz: Na rywatnej stronie – prosze bardzo. Ale nie w komercyjnym projekcie. Jeszcze nie.

    Dodano 04 października 2008 o 20:16:14

  13. Wasacz pisze:

    Przecież z dnia na dzień nie rzucimy się na CSS3, to oczywiste. nth-child i podobne jak na razie nie mają zastosowania o charakterze egzystencjalnym, i nawet jak zeberki nie będzie, to się layout nie zawali.

    A ja tylko zwracam uwagę, że jedyną kulką u nogi jest IE. A IE to nie problem, przecież znamy go na wskroś, prawda?

    Dodano 04 października 2008 o 20:18:53

  14. Teamon pisze:

    Teoretycznie. Czasem po prostu latwiej(szybiej, taniej) jest zrobic to po stronie serwera (dodac klase, id, cokolwiek) niz uzyc css3 i haczyc IE

    Dodano 04 października 2008 o 20:20:14

  15. Wasacz pisze:

    To tylko przykład z odd/even i w chwili obecnej też bym to zrobił server-side. Ale CSS3 jest nie po to, żeby emodeweloperzy mieli się czym ciąć, ale po to, żeby nam ułatwić życie. Nam i użyszkodnikom. A IE to IE ;-)

    Dodano 04 października 2008 o 20:22:04

  16. btm pisze:

    Nie, użyszkodnicy to IE

    Dodano 04 października 2008 o 20:22:32

  17. Wasacz pisze:

    Ci od IE to ZU :P

    Dodano 04 października 2008 o 20:23:11

  18. pijanyadmin pisze:

    Tak czy inaczej, CSS3 dopiero za ok 4…5 lat będzie „standardem”, dziś to tylko nowinka którą nie warto zawracać sobie głowy a traktować jako ciekawostkę, mając na uwadze przyszłość ;0

    Dodano 05 października 2008 o 00:59:08

  19. Chris Trynkiewicz pisze:

    Dokladnie tak, jak powiedzial pijanyadmin – narazie to ciekawostka i zal czasu nawet na rozkminianie co to potrafi. Za kilka lat moze bedzie mozna w tym cos pisac w miare bezpiecznie, narazie to bujanie w oblokach.

    Dodano 05 października 2008 o 02:33:24

  20. Wasacz pisze:

    Co prawda, to prawda, ale też nie trzeba całego layoutu opierać na CSS3 ;-)

    Dodano 05 października 2008 o 11:41:40

  21. pijanyadmin pisze:

    a ja się zastanawiam kiedy będzie coś takeigo na zasadzie „wciśnij enter i zrób ładny szablon” zgodny ze standardami :D np. takie lepsze edytory wyswig

    Dodano 05 października 2008 o 13:40:45

  22. btm pisze:

    Zaraz wtedy kiedy pojawi się guzik „Wpłać mi XXXXzł na konto”, np. taka lepsza praca ;>

    Dodano 05 października 2008 o 13:43:58

  23. Listva pisze:

    W sumie to nic odkrywczego mi nie przedstawiles ;p

    Dodano 05 października 2008 o 16:54:48

  24. Wasacz pisze:

    CSS3 to generalnie nie jest nowość. Ciekawsza jest druga część, czyli wykorzystanie SVG ;)

    Dodano 05 października 2008 o 16:59:43

  25. Livio pisze:

    Tej, ja się tu wcale nie odezwałem, a Ty już do mnie mówisz. Płak!

    Dodano 06 października 2008 o 08:09:10

  26. Arek F. pisze:

    Nie płak!

    Dodano 06 października 2008 o 14:59:38

  27. Wasacz pisze:

    A masz ochotę mnie pouczyć o odmienności WebKitu i KHTML? ;>

    Dodano 06 października 2008 o 15:22:37

  28. Michał _kUtek_ Kuciński pisze:

    A cz. II? :P

    Dodano 12 października 2008 o 18:08:07

  29. btm pisze:

    @kUtek: be careful what you wish for ;-)

    Dodano 12 października 2008 o 18:10:12

  30. Wasacz pisze:

    kUtek: nie umiesz się doczekać? ;] Część druga będzie, tylko tłumaczenie jest trochę czasochłonne, a ja tej „chwilki” na to akurat teraz nie mam.

    Dodano 12 października 2008 o 19:59:50

Dodaj komentarz

Proszę, formatuj komentarz za pomocą Markdown.

Wymagane pola zaznaczone są znakiem gwiazdki – „*”


Obrazek z kodem

*

« Wróć