O ile pierwszy problem, czyli rozpoznanie browsera jest dość szeroko opisany (należy wykorzystać klasę navigator z jej właściwościami appCodeName, appVersion, appName, userAgent) o tyle dość kłopotliwe może być wyszukiwanie informacji, która wersja potrafi wykonać to co spłodzimy. Oczywiście, można by spróbować zmusić użytkownika do instalowania zawsze wersji najnowszej ale jest to podejście raczej mało eleganckie. Jak więc znaleźć najniższą wersję IE, FF, Opery, Safari i Chroma (do tych najczęściej używanych przeglądarek się ograniczyłem), które gwarantują obsługę danej funkcji czy właściwości?

Początkowo próbowałem odwiedzać strony producentów ale to zadanie żmudne jak cholera. I o ile np. Opera ma na swoich stronach ładnie opisane, co która wersja potrafi, o tyle np. z FireFox’em już nie było mi tak łatwo. Na szczęście znalazłem narzędzie, które pozwala w łatwy sposób zapoznać się z wersjami i tym co potrafią. Niniejszym się nim dzielę i polecam, gdyż to dobre narzędzie jest.

Narzędzie znajduje się tu: CanIuse.com <- Historia wersji przeglądarek (IE, FireFox, Safari, Chrome, Opera, IOS Safari, Opera Mini, Opera Mobile, Android Browser) wraz z supportem, między innymi, CSS.

W moim przypadku chodziło o znalezienie najniższych wersji przeglądarek, które obsługują styl transform i przezroczystość (opacity). Dwa wyszukiwania i już wiem, że style.transform obsługiwany jest w IE od wersji 9.0 (to akurat nie przeszkadza bo można użyć MS-owych filtrów), w FireFox’ie od wersji 3.5, Chrome wersja 8.0, Opera wersja 10.5, a Safari wersja 3.5. Alfa-przezroczystość, czyli opacity obsługiwane jest od podobnych wersji.

Obok obsługi CSS narzędzie pokazuje ’supportowane’ właściwości HTML5, SVG, Javascript API i inne. Polecam gorąco, dobra rzecz.

Co to jest CSS? Kompletne podstawy

Skrót css pochodzi od angielskiej frazy Cascading Style Sheets (po polsku: Kaskadowe Arkusze Stylu). Za pomocą owego CSS’a określamy wygląd, położenie, kolory itp. elementów na stronie internetowej. O ile język HTML opisuje strukturę danych na stronie, pozwala grupować dane, osadzać elementy (np. zdjęcia i grafiki), określa działanie elementów (np. link), o tyle CSS, jak było powiedziane powyżej, pozwala na określenie wyglądu tychże danych. Tak naprawdę pewne elementy języka HTML i CSS niekiedy się pokrywają np. pogrubienie tekstu można zrealizować poprzez umieszczenie go w tagach<b>…</b> lub użycie stylu ‘font-weight:bold’, zmianę koloru tła można uzyskać poprzez ustawienie html’owego atrybutu bgcolor lub css’owego background itd.

Gdzie umieszczona jest informacja o wyglądzie elementu na stronie?

Kiedy w przeglądarce internetowej wprowadzasz adres strony, owa przeglądarka z reguły pobiera z serwera plik zapisany w języku HTML (piszę ‘z reguły’ ponieważ nie zawsze jest to prawda, możesz pobierać przecież bezpośrednio obrazki, pliki binarne, PDF’y itd. ale znakomita większość przesyłanych w internecie danych to właśnie HTML). Jak było powiedziane powyżej HTML opisuje strukturę danych zawartych na stronie. Możesz np. grupować niektóre dane w tzw. kontenery np. <div>To jest tekst pomiędzy znacznikami DIV, za pomocą CSS będzie mu można nadać określony wygląd lub określić jego położenie</div>, określać funkcję/działanie np: <a href=’adres strony’>To jest link po kliknięciu, którego przejdziesz na stronę określoną przez atrybut href</a>, umieszczać na stronie grafikę <img src=’adres obrazka’> itd. Każdemu elementowi strony, zawartemu między znacznikami (tagami), w powyższych przykładach DIV i A, lub opisanymi przez IMG możemy, za pomocą stylów określić wygląd i pozycję na stronie. Aby to osiągnąć należy określić styl elementu. Można to osiągnąć na dwa sposoby:

1. Dodać styl bezpośrednio do interesującego nas elementu
2. a) umieścić style bezpośrednio na stronie ale nie w elemencie lub b) dodać do strony Kaskadowy Arkusz Stylu (czyli CSS)

W pierwszym przypadku styl opisujemy za pomocą atrybutu ’style’ dodanego do tagu HTML np. <div style=’color:blue’>…</div>, <img style=’width:300px’> (określamy kolor tekstu między tagami DIV i szerokość obrazka na 300 pikseli – ale szczegóły później)

Druga opcja jest nieco bardziej skomplikowana bo nasze style elementów umieszczamy poza owymi elementami, których może być przecież sporo i należy określić, który styl tyczy się którego elementu. O tym z chwilę, najpierw odpowiedzmy na pytanie: gdzie? W przypadku 2a styl elementów umieszczamy na stronie HTML pomiędzy tagami <style> … </style> z reguły zaraz za znacznikiem </head>, w przypadku 2b dodajemy do naszej strony HTML plik o rozszerzeniu .css. Robimy to np. poprzez dodanie w sekcji ‘head’ czegoś takiego: <LINK rel=stylesheet type=”text/css” href=”plik_stylu.css” />.

Podsumujmy, styl elementów naszej strony możemy umieścić w:

1) Bezpośrednio w elemencie,np:
<div style="background: blue; color: yellow;">Ten blok tekstu będzie w kolorze żółtym na niebieskim tle</div>
2) W pliku HTML w tagach <style>, np:
<head>
....
</head>
<style>
.zoltoniebieski {background:blue;color:yellow}
.waski {width:200px}
</style>
3) W zewnętrznym pliku styli dołączanym do naszej strony HTML,np:
<head>
....
<LINK rel=stylesheet type="text/css" href="plik_stylu.css" />
</head>

Gdzie umieścić style strony/CSS strony?

No dobrze, jeśli mamy trzy sposoby umieszczania informacji o stylach, to który z nich wybrać? Wbrew pozorom odpowiedź jest bardzo prosta. Strony publikowane w sieci powinny posłużyć się sposobem trzecim, a więc umieszczać style w dołączanym pliku CSS. Dlaczego? Są na to dwa główne powody: wydajność i wygoda.

Wydajność – w dobrze zaprojektowanych witrynach, jeden plik css ‘obsługuje’ wiele stron (taki sam plik dołączony jest do wielu, być może wszystkich stron witryny), przeglądarka raz pobiera taki plik a później korzysta z jego lokalnej kopii na komputerze przeglądacza – mamy więc zaoszczędzony transfer i moc serwera, a przeglądaczowi szybciej otwierają się strony.

Wygoda – zdecydowanie łatwiej jest modyfikować/poprawiać wygląd strony, że nie wspomnę o czytelności źródła, mając zewnętrzny plik css, nie mówiąc o tym, że jeśli zdecydujemy się na redesign strony, w niektórych przypadkach, wystarczy podmienić tylko plik stylu i gotowe.

Dwa pierwsze sposoby świetnie sprawdzają się na etapie projektowania strony. Nie musimy ‘biegać’ po kilku plikach, wszystko mamy w jednym miejscu. Ja osobiście, projektując jakiś element, używam notorycznie styli w elementach lub w sekcji <style> kiedy całość jest gotowa przenoszę je do zewnętrznego pliku css.

Selektory, czyli co do czego

Przechodzimy powoli do ‘mięsa’, czyli do określania stylu elementów i tworzenia pliku CSS. Jak było powiedziane wcześniej, w przypadku zdefiniowania stylu jako atrybutu elementu, nie mamy, z oczywistych powodów, problemów z określeniem, któremu elementowi styl ten jest przypisany. W przypadku umieszczenia stylu na zewnątrz, musimy mieć sposób określenia, któremu elementowi odpowiada dany styl. W tym celu używamy tzw. selektorów

Typowy opis stylu w pliku .css lub między tagami <style> wygląda tak:
selektor {definicja stylu}, dokładna składnia: [selektor] {[definicja stylu]}
np.
div {color:blue;border:1px solid black}
.zolty {color:yellow}
#pomarancz {background:orange}
</div>

Selektor niczym nie poprzedzony odnosi się do wszystkich elementów zawartych między tagami określonymi przez ten selektor. W powyższym przykładzie, wszystkie elementy DIV strony html będą miały tekst koloru niebieskiego i będą otoczone czarną ramką o grubości jednego piksela

Selektor poprzedzony kropką odnosi się do elementów danej klasy, czyli elementów posiadających atrybut class=’nazwa_klasy’, np. <div class=”zolty”>..</div>, <a class=”zolty”>>link</a>. W naszym przykładzie elementy o klasie ‘zolty’ będą miały żółty kolor tekstu

Selektor poprzedzony krzyżykiem (#) wskazuje na element o identyfikatorze określonym nazwą selektora, czyli na element z ustawionym atrybutem id=’ident’ np. <div id=’pomarancz’>

Style przetwarzane są sekwencyjnie czyli w jeśli nastąpi konflikt (dwa selektory pasują do jednego elementu), decyduje styl późniejszy. W naszym przypadku jeśli w pliku HTML wystąpi <div class=”zolty”> kolor tekstu w między tagami DIV będzię żółty nie niebieski

Selektory można łączyć!!! (trzy wykrzykniki bo to bardzo ważna cecha) np. div.zolty dopasuje się do wszystkich div’ów z klasy ‘zolty’, nie dopasuje się do np. <p class=”zolty”> Selektor .zolty div odpowiada wszystkim div’om w elemencie o klasie zolty

Kilka selektorów może mieć taką samą definicję stylu w tym przypadku selektory oddzielamy przecinkiem. Np. div, td.zolty, a.zolty

Powyższy krótki opis selektorów nie wyczerpuje wszystkich ich możliwości ale myślę, że na początek to wystarczy. Podałem tu najważniejsze i najczęściej używane selektory CSS.

Dla rozjaśnienia i nabrania wprawy jeszcze kilka przykładów
p, div // wszystkie elementy <P> i <DIV>
p.moj-paragraf //wszystkie elementy <P class='moj-paragraf'>
.moja-klasa // wszystkie elementy z atrybutem class='moja-klasa' niezależnie od użytego tagu
#obiekt01 // element o id='obiekt01', niezaleznie od użytego tagu
div#obiekt01 // element o id='obiekt01' ale tylko jeśli jest DIV'em
#obiekt01 a // wszystkie linki w elemencie o id='obiekt01'
.klasa a // wszystkie linki w elementach klasy .klasa
.klasa01 a,.klasa02 a // wszystkie linki w elementach klasy .klasa01 i klasy .klasa02

Niektóre definicje stylu

Aby wpis był pełny podam poniżej, w dość dużym skrócie, niektóre, częściej używane, definicje stylu. Prawdopodobnie już niedługo pojawią się na tym blogu wpisy dokładniej opisujące to zagadnienie. Na razie jednak aby uświadomić jak to wszystko wygląda kilka przykładów. Pełną listę definicji stylów można znaleźć np. tu: http://www.w3schools.com/css/ (strona w języku angielskim ale jedna z popularniejszych i najlepszych)

To na razie tyle podstaw CSS, już niedługo, mam nadzieję, że w przeciągu kilku dni, postaram się popełnić więcej wpisów na temat CSS dla początkujących. Bądźcie cierpliwi.

Autorem narzędzia jest producent programu ‘Style Master’ – firma ‘westciv’. Style Master powstał już w 1998 roku i był podobno pierwszym edytorem CSS. Sprzedawany jest do tej pory o czym można przeczytać na stronie firmy….

Ale do rzeczy. Narzędzie, które chcę polecić znajduje się tu: http://westciv.com/tools/shadows/. (Świadomie podaje link do konkretnej wizualizacji bo strona główna może nie przyciągnąć tak uwagi).

Oprócz podlinkowanej wizualizacji cieniowania tekstu, znajdują się tam narzędzia do wizualizacji cieniowania box’ów/kontenerów, gradientów (linear i radial), transformacji (przesunięcie, skalowanie, obrót, pochylenie) i text-stroke.

Polecam uwadze, narzędzie jest wykonane bardzo starannie, ładnie i efektownie, włącznie z przesuwanymi suwakami i oknem wyboru koloru. Kilka ruchów i już wiadomo o co chodzi, a oprócz wizualizacji, dostajemy także gotowy kod dla mozilli lub webkit’a (chrome), który już nie tak trudno przerobić na inne przeglądarki lub na CSS3 jak będzie już gotowy i obsługiwany.

Zobaczmy jakie jeszcze przydatne rzeczy możemy znaleźć w nowym CSS.

Fonty

Czy miałeś kiedyś sytuację, że klient dla którego robiłeś stronę upierał się, że chce taki, a nie inny font na stronie i tłumaczenie mu, że to nie jest taka prosta sprawa aby ustawić dowolny font na stronie html, nie przynosiło żadnych rezultatów? Ja miałem. Klient na szczęście dał się w końcu przekonać ale zanim to nastąpiło musiałem przekopać się przez setki stron internetowych szukając rozwiązania. (na marginesie – są rozwiązania pozwalające na ‘wgranie’ na stronę własnej czcionki ale nie są one takie hop-siup) .

Począwszy od CSS3 nie powinno już być kłopotów z ustawieniem dowolnej czcionki na stronie. CSS3 oferuje bowiem regułę @font-face pozwalającą ‘wgrać’ plik z czcionkami. Wygląda to tak:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Po użyciu takiej reguły, postępujemy już normalnie ustawiając nazwę naszego fontu, czyli np:

h3 {font-family:Delicious}

Kilka kolumn w jednym divie (multi-column)

cSS3 oferuje nam trzy selektory do wielokolumnowego łamania tekstu.

column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;

column-count określa liczbę kolumn
column-gap określa margines kolumny
column-rule określa jak ma wyglądać rozdzielenie kolumn

Powyższy styl wyświetli coś takiego (Najnowszy Chrome i FF wyświetlają kolumny, użytkownicy IE i Opery prawdopodobnie nie zobaczą efektu podziału na kolumny):

I ostatnia nowość w CSS3 na teraz:

Resizing

Resizing to możliwość zmiany wielkości elementów na stronie przez użytkownika. Poniższy przykład działa jedynie w najnowszym Chromie. Info dla tych, którzy nie widzą efektu. Poniższy box można rozciągać we wszystkie strony, ciągnąc za prawy dolny róg.

Kod tego stylu jest następujący:

width: 200px; height: 100px; border: 1px solid; resize: both; overflow: auto;

selector resize może przyjmować wartości both, horizontal i vertical. Można dodać także ograniczenia dolne min-width i min-height oraz górne max-width i max-height

I na koniec jeszcze przypomnienie, że w powyższym tekście wykorzystałem przykłady z http://www.css3.info/preview/

Ciąg dalszy ‘Co Nowego w CSS3′ nastąpi …

Poniżej mały wstęp do nowości w CSS3 z przykładami. Na razie tylko przedstawiam pokaz możliwości nowego standardu (widoczny dla tych, którzy mają przeglądarki z zaimplementowaną obsługą przedstawianych właściwości). W następnych wpisach na tym blogu postaram się zając dokładniej każdą z omawianych, nowych funkcji CSS3.

Co nas czeka w CSS3

Poniżej wykorzystałem przykłady z www.css3.info. Niektóre przykłady są ‘podrasowane’ pod FF 3.6 (obecnie najnowszy), tam gdzie nie działa standardowy CSS3 dodany jest prefix -moz, np. -moz-box-shadow. Ergo, najlepiej oglądać tą stronę pod Fire Fox’em. Uwaga. Większość przykładów nie będzie działać pod IE z wersją 8 włącznie.

Ramki (Borders)

‘Gradientowe’ kolorowe ramki, podajemy kolor dla każdej ‘warstwy’ ramki

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Przykład kolorowej ramki:

Graficzne ramki (border-image)
Jako obramowanie do elementów możemy wykorzystać grafiki. Przykład można znaleźć tu: Border image CSS3

Zaokrąglone ramki (border-radius)

W końcu skończy się męka z popularnym zaokrąglaniem ramek . Poniższy przykład jest trochę oszukany, wykorzystuje prefiksy przeglądarek ‘-moz-border-radius:5px;-webkit-border-radius:5px;…’, w CSS3 powinno działać po prostu ‘border-radius’

Cieniowanie (Box-Shadow)

<div style="border-shadow:10px 10px 0px #909090;-moz-box-shadow: 10px 10px 0px #909090;background:black;color:white;padding:10px;border-radius:5px;-moz-border-radius:5px">Lorem Ipsum</div>

Kolory (colors)

kolory HSL (Hue, Saturation, Luminance) i HSLA

Z nadejściem CSS3 kolory będzie można podawać we współrzędnych HSL czyli Hue, Saturation, Luminance (Barwa,Nasycenie,Luminacja) i HSLA (A jak alpha-przezroczystość)

Przykład:
<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsla(120,100%, 50%, 0.4);"></div>

kolory RGBA

Do istniejącej już w poprzednich wersjach możliwości podawanie koloru we współrzędnych RGB dojdzie możliwość podawania dodawania przezroczystości

<div style="background: rgba(255, 0, 0, 0.2);"></div>

Przezroczystość

Parametr określający przezroczystość stanie się standardem. Do tej pory przeglądarki implementowały go po swojemu.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>

Tekst (Text)

Cieniowanie tekstu (text-shadow)

Bardzo efektowna właściwość. Ten przykład powinien być widoczny pod FF 3.6, Chrome 4.1 i Operą 10.1 (pod IE najnowszym nie działa)

<div style="font-size:20px;text-shadow: 2px 2px 2px #000;">Lorem Ipsum</div>

To na razie tyle nowości, oczywiście podane powyżej przykłady to tylko niewielka część możliwości CSS3 – więcej postaram się pokazać w następnych wpisach. Możecie także spodziewać się rozwinięcia informacji o poszczególnych nowościach CSS3 włącznie z moimi testami, bo jak pisałem na wstępie, przyglądam się temu standardowi bacznie.

Edycja: Część druga przeglądu nowości CSS3 znajduje się tu: Co Nowego w CSS3 cz.2

Link Testowy

Uwaga! Pod niektórymi przeglądarkami np. Chrome 4.0 ramka może nie być widoczna, tu nasz problem więc nie istnieje

Po kliknięciu powinno pokazać się niebieskie, kropkowane (dotted) obramowanie (nazywane czasem markizą). Czasami, zwłaszcza gdy link jest graficzny (obrazek) lub tło strony gryzie się z kolorem obramowania, a kliknięcie nie przenosi nas na inną stronę bo link obsługiwany jest np. javascript’em, taka ramka może razić i należałoby ją ukryć. Jak to zrobić?

Starsze wersje IE (Internet Explorera) reagowały na atrybut linka hidefocus=true, było to jednak typowe rozwiązanie jedynie dla IE. Obecnie, prawdopodobnie od wersji 7, Internet Explorer powinien obsługiwać bardziej uniwersalną, css’ową, metodę usunięcia obramowania *:focus {outline:none}. Sprawdźmy:

Link bez obramowania

Powyższy link wygląda następująco:

<a href='javascript:void(0)' hidefocus=true style="outline:none">Link bez obramowania</a>

Powyższe rozwiązanie powinno działać pod wszystkimi przeglądarkami. Ja osobiście testowałem je na IE6, IE8, FF3.0, Operze 10, Chrome 4. Gdyby jednak ktoś odkrył przeglądarkę, na której obramowanie dalej występuje, proszę dać znać w komentarzach, a postaramy się jakoś zawalczyć.