Z wydania na wydanie najnowsze przeglądarki odsłaniają kolejne karty i umożliwiają coraz większą obsługę CSS w wersji 3. Jestem bardzo zadowolony z tego faktu, ponieważ oznacza to przede wszystkim mniej pracy dla ludzi odpowiedzialnych za wygląd stron, o wiele mniejszy czas ładowania strony (mniej obrazków, oraz mniej skryptów), większe możliwości w konfiguracji oraz większą elastyczność w modyfikowaniu wyglądu strony. Niestety w dalszym ciągu w tyle pozostają produkty Microsoftu, ale na szczęście istnieją rozwiązania, które implementują taką funkcjonalność w tych zardzewiałych silnikach 
Zaokrąglone rogi
Jest to jedna z głównych przyczyn, dla której webmasterzy decydują się używać obrazków tła wszelkich przycisków i elementów na stronie. Na szczęście możemy użyć:
1 2 3 | -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; |
Niestety w dalszym ciągu Microsoft nie postanowiło wspierać zaokrąglonych rogów w swoich przeglądarkach. Podobny efekt możemy uzyskać w IE poprzez dodanie atrybutu behavior:url(rounded.htc) ale jest to sposób, który dość mocno ingeruje w strukturę drzewa DOM i nie daje pożądanych efektów.
Cień pod tekstem
Efekt ten możemy uzyskać poprzez dodanie następującej wartości:
1 | text-shadow:0 1px 1px #FFF; |
Jest to bardzo fajny sposób na uzyskanie prowizorycznej wypukłości lub wgniecenia tekstu. Metoda ta sprawuje się bardzo dobrze pod przeglądarkami uruchomianymi na komputerach desktop-owych. Jednak, kiedy oglądałem stronkę pod Operą Mini, tekst był starasznie nieczytelny i rozmazany.
Cień pod elementem blokowym
Cień dla elementów blokowych możemy uzyskać poprzez dodanie takiego oto kodu CSS3 do naszej strony.
1 2 3 4 | -moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2); box-shadow:0 2px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2); filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=160, Color='#DDDDDD'); |
Osadzanie czcionek
Czcionki, które są dostępne we wszystkich przeglądarkach, powoli zaczęły nudzić czytelników. Obojętnie, na którą stronę byśmy nie weszli, zawsze było wiadomo, że zobaczymy na niej jedną z następujących czcionek: Arial, Verdana, Helvetica, Tahoma, Georgia, Times albo ekstrawagancki Comic Sans. W CSS3 Będziemy mogli po prostu wrzucić używaną przez nas czcionkę na serwer, a następnie odwołać się do niej za pośrednictwem wartości @font-face.
Gradienty
Gradienty stały się nieodłącznym elementem stron WWW. Widzimy je praktycznie na każdej stronie internetowej. Wiadomo, że do czasu kiedy nie było CSS3 twórcy stron musieli używać obrazków w miejsce gradientów. Musieli, ponieważ od teraz mogą użyć następujących wartości CSS, aby usyskać taki sam efekt:
1 2 3 | background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); |
Podsumowanie
Oczywiście wszystkie wymienione tutaj własności CSS3 to tylko mały zalążek tego, co będzie będzie dostępne w jego pełnej specyfikacji. CSS3 zostanie w pełni wprowadzony w życie wraz z pojawieniem się standardu HTML5 i będzie oferował dużo dużo więcej, niż tylko to, co zostało wspomniane w tym poście. Niestety prace nad nowym CSS są w dalszym ciągu we wstępnej fazie rozwoju i jeszcze minie spory okres czasu, kiedy w 100% wejdą w w życie. Na szczęście producenci dobrych przeglądarek pomyśleli, żeby wprowadzać do ich produktów obsługę CSS3 i ułatwić tym sposobem życie wszystkim Webmasterom. Jeśli chcielibyście dowiedzieć się więcej o standardzie CSS3, zachęcam Was do zapoznania się z tym dokumentem.
Skąd ta informacja, że CSS3 zostanie w pełni wprowadzony, kiedy wyjdzie HTML5? To nie ma nic do rzeczy, prace prowadzone są oddzielnie i jedno z drugim się nie łączy.
CSS3 Będzie w pełni dostępny, jak panowie z Redmond wprowadzą jego obsługę w swoich produktach, a myślę, że zrobią to jednocześnie z wprowadzeniem HTML5 … i minie jeszcze do tego momentu sporo czasu. Poza tym w HTML5 będzie dużo takich smaczków , jak np. Canvas, przy których w pełni będzie można wykorzystać moc, jak oferuje CSS3. Co z tego, że możemy już używać nowego css’a, skoro i tak nie jest on w pełni kompatybilny ze wszystkimi przeglądarkami na rynku ?
Nie sądzę aby IE było aktualizowane o obsługę CSS3 i HTML5 po równo. Każdy z tych standardów rozwija się własnym tempem. Poza tym nikt nie wie kiedy i w jakim stopniu przeglądarki będą obsługiwały w pełni HTML5 i CSS3, bo nie wiadomo kiedy te standardy osiągną status rekomendacji i jak będą finalnie wyglądały. Także wszelkie prorokowanie i przepowiadanie przyszłości, to jak wróżenie z fusów.
Co do pokazania pełnych możliwości CSS3 w Canvas – oddzieliłbym tutaj efekciarstwo od wykorzystania możliwości mechanizmu stylów. Na pewno bardziej efektowne rzeczy da się zrobić przy pomocy Canvas + JavaScript + CSS3 podobnie jak przy pomocy SVG + CSS3, ale jaki ma to związek z możliwościami? Chyba, że przyjmiemy regułę – bardziej efekciarskie = większe wykorzystanie możliwości.
Racja. Nie chciałbym bym się z Tobą kłócić, bo sądząc po Twojej stronie masz na pewno większe pojęcie o tym niż ja. Pisząc ten wpis chciałem po prostu zajawić innym użytkownikom fakt, że część właściwości CSS3 można już używać, mimo tego, że nie osiągnęły one statusu rekomendacji. Czy może znowu się mylę ?
Canvas to może i efekciarstwo, jak piszesz, jednak widziałem już stronkę, na której koleś zrobił, jakby zminimalizowaną wersję Photoshopa i faktycznie to działało (pod FF i Webkitem) i miało całkiem niezła wydajność, jak na aplikację WWW. Apropos wykorzystania możliwości, to najbardziej spodobał mi się zapis w szkicu CSS3 odnośnie własności, które będą odpowiedzialne za obsługę syntezatora mowy. Jestem jednak ciekaw, które z tych własności pozostaną tylko szkicem, a które na dobre zakorzenią się w przeglądarkach.
Nie bardzo rozumiem o co Ci chodzi, bo ja nigdzie nie odradzałem używania CSS3. Wręcz przeciwnie, CSS3 jak i HTML5 czy inne technologie, które nie uzyskały statusu rekomendacji, można z powodzeniem stosować, trzeba mieć tylko świadomość, że nie wszędzie to zadziała.
Nie napisałem też, że canvas to efekciarstwo, była mowa raczej o wykorzystaniu możliwości stylów. To co można zaobserwować w sieci, dotyczące używanie nowych właściwości CSS3, ma obecnie więcej wspólnego z efekciarstwem, niż prawdziwym wykorzystaniem ich praktycznych możliwości. Przykładem są wszelkiego rodzaju, dema puszek, układów słonecznych, spidermanów i innych, cudów. Te demonstracje same w sobie są ciekawe, ale to jest tylko zabawa stylami, nie mająca wiele wspólnego z prawdziwym ich zastosowaniem.
Co do CSS3 Speech Module, o którym wspomniałeś, przeglądarka Opera obsługuje go częściowo. http://www.opera.com/docs/specs/css/
Ale ja wcale nie napisałem o tym, że odradzałeś używania CSS3. W 100% zgadzam się, że CSS3 i HTML5 można z powodzeniem stosować w różnych projektach, ale [...].
Tylko jednej rzeczy nie mogę zrozumieć o której piszesz. Mianowicie chodzi mi o fakt, że jeśli skoro obecne implementacje CSS3 wykorzystane na stronach do zademonstrowania ich możliwości mają więcej wspólnego z efekciarstwem, niż z ich prawdziwym zastosowaniem, ja w takim razie nie rozumiem jakie jest to „prawdziwe zastosowanie”. Bo moim zdaniem CSS3 jest, jakby nie patrzeć, następcą jego poprzednich wersji, które były wykorzystywane głównie do określenia wyglądu strony internetowej, czy może nawet aplikacji desktopowej, która była oparta o renderowanie w HTMLu. Uważam, że CSS3 jest po prostu rozszerzeniem CSS2 i nadaniem mu pewnych bardzo ważnych aspektów, których po prostu brakuje w starszych wersjach (np. podział tekstu na kolumny czy czytanie od prawej do lewej itp)
Co do Opery i wspomnianego przez Ciebie Speech Module to jest to dla mnie inna bajka. Nie ukrywam, że nie żywię entuzjazmu do tej przeglądarki i spokojnie mogę ją umieścić troszkę ponad Internet Explorerem, ale jest to moje osobiste zdanie. Nie wydaje Ci się to dziwne, że ludzie z Opery decydują się na wprowadzenie, dość skomplikowanego Speech Module, a nie potrafią obsłużyć reguł, które są „oczywiste” dla CSS3 (np. box-gradient, porządna obsługa round corners itd.) i na pewno w pierwszej kolejności będą obsługiwane przez większość przeglądarek. Przede wszystkim nie wiem, jaki jest sens implementowania Speech Module na chwilę obecną i jak można byłoby w ogóle rozwiązać ten problem w CSS? Czy głosy miałyby być wbudowane w przeglądarkę, czy też może miałyby być to głosy systemowe, jak np. SAPI ? Jak w tym przypadku rozwiązać temat wieloplatformowości, różnych języków czy screen readerów hmmm…
Odpowiadając na pierwszą część twojego pytania. Jaki sens ma tworzenie flagi państwowe, takich jak tutaj:
http://www.codesquid.co.uk/workshops/flags-of-the-world-css3-part2/
To jest przykład efekciarstwa. Zajrzyj do kodu, zobacz co tam się dzieje, dziesiątki, a w niektórych przypadkach setki elementów ‘div’, aby osiągnąć efekt, który i tak nie dorówna tej samej fladze wykonanej w SVG. W przyszłości, nikt nie będzie umieszczał w ten sposób flag, bo to jest wysoce niepraktyczne.
Takich przykładów jest sporo, również z wykorzystaniem elementu ‘canvas’, jak w przypadku css3-man, kreskówki zrobionej w HTML5 i CSS3.
Oczywiście pojawiają się też tutoriale i demonstracje praktycznego wykorzystania CSS, takie jak np. tutaj:
http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
To jest dobry przykład, który ma szanse się przyjąć.
Odpowiadając na drugie pytanie. Nie wiem dlaczego Opera implementuje CSS3 Speech, a zwleka z bardziej popularnymi właściwościami. Zauważ, że to nie tylko tyczy się Opery, Firefox od dawna obsługuje MathML, też można powiedzieć po co, jeśli mogli zaimplementować inne technologie. Webkit dla przykładu sam wymyśla nowe moduły CSS3 implementuje je, a dopiero potem proponuje w grupie W3C. Myślę, że każda firma ma swoją politykę.
Co do samego CSS3 Speech, to chodzi o sterowanie aplikacją. Za pomocą CSS możemy np. spowodować, że to co na stronie jest cytatem, będzie czytane w odmienny sposób – inna barwa głosu, a nawet inna płeć. Możemy robić pauzy, albo czytać fragmenty szybciej, lub wolniej, itd. Wszystko jest w specyfikacji, ale wygląda na to, że na razie stoi to w miejscu.