Prace nad CSS3 trwają.
When can I use... pokazuje wsparcie CSS3 i HTML5 w przeglądarkach, aktualizowana interaktywna lista.
Artykuły i tutoriale CSS3 PL
- Word-Wrap: Własność CSS3 działająca we wszystkich przeglądarkach – opis i przykłady
- CSS3 multi-column – omówienie multi-column, czyli układu wielołamowego
- Transformacje 2D i CSS – opis właściwości
transform
- Funkcja calc() z CSS3 w Firefoksie 4 – wyrażenia arytmetyczne, tłumaczenie Firefox 4: CSS3 calc()
- Szczegółowy Opis Zapytań i Typów @media w CSS – omówienie Media Queries i przypomnienie typów mediów z CSS 2.1
- Bezkarne używanie CSS3 – krótki tutorial wyjaśniający czym jest Modernizr
- Tło gradientowe w CSS3 – tutorial i przycisk z wykorzystaniem gradientów CSS
- Border radius – zaokrąglone rogi, tutorial
- Zmiana domyślnego koloru zaznaczenia w CSS – pseudoelement
::selection
- Upiększenia: okrągłe brzegi i cieniowanie – sporo przykładów
border-radius, text-shadow, box-shadow
- Co nowego przynosi CSS 3 – kurs CSS3 Pawła Wimmera
- CSS3 playtime – zabawa właściwościami
transform i opacity
- Pudełka w CSS i ich właściwości – o tym, że box-model to nie jest „model pudełkowy”, czyli poprawna terminologia w CSS
- Własne fonty – tutorial i krótka historia
@font-face
- Under the shadow - czyli cienie w CSS3, część 2 – druga część tutorialu
- Under the shadow - czyli cienie w CSS3, część 1 – pierwsza część tutorialu
- (Nie)przeźroczystość i RGBa – tutorial RGBA
- Specyfikacja Kaskadowych arkuszy stylów, poziom 2 (CSS 2.1) – prace nad specyfikacją CSS 2.1 zbliżąją się ku końcowi. Polskie tłumaczenie rekomendacji kandydującej W3C z 8 września 2009
- CSS Circles, czyli radykalne nadużycie border-radius – tutorial jak uzyskać okrąg za pomocą
border-radius
- Trick z cieniem po wewnętrznej stronie tekstu – efekt uzyskany za pomocą
text-shadow i kanał alfa w RGBA
- Guzik z tłem, gradientem i zaokrąglonymi rogami – tutorial
- Saga o CSS czyli historia CSS, tłumaczenie fragmentu The saga CSS z książki Cascading style sheets: designing for the Web.
- Krótkie wprowadzenie do zapytań o media w Firefoksie 3.5 – możliwości modułu Media Queries, tłumaczenie artykułu A short introduction to media queries in Firefox 3.5.
- Stylowy tekst przy użyciu text-shadow – tłumaczenie artykułu Stylish text with text-shadow
- Eleganckie czcionki przy użyciu @font-face – tłumaczenie artykułu Beautiful fonts with @font-face
- CSS Transitions, czyli efekty przejścia w CSS
- Selektory CSS 3 – artykuł opisujący selektory w wersji trzeciej
- Obsługa selektorów CSS 3 przez przeglądarki
- Ładne tabele z selektorami CSS3 – tłumaczenie artykułu Slick tables with css 3 selectors
- Transformacje CSS – rzut izometryczny i skalowanie – przykład zastosowania CSS 2D Transforms
- Zaokrąglanie rogów bez użycia grafik – opis zastosowania
border-radius
Artykuły i tutoriale CSS 3 EN
- CSS 3.0 Maker – rozbudowany generator, posiada css animacje
- CSS3 Playground – rozbudowany generator
- Border image generator – dla Gecko i Webkit
- Obsługa HTML5 i CSS3 – pokazuje obsługe w przeglądarkach internetowych
- CSS gradient generator – gradienty CSS
- Border Radius – Microsoft stworzył test Border Radius, z okazji demonstracji możliwości silnika IE9
- CSS Typeface – fonty wykonane w CSS
- Generator CSS3 – generator Linear Gradients, Radial Gradients, Text Shadow, Box Shadow, Text Stroke, Transforms.
- AT-AT Walker CSS3 – czyli jak zbudować chodzącego łazika wykorzystując CSS3 (dla Chrome i Safari)
- CSS3 Gradient Generator – generator CSS gradientów (dla Firefox, Chrome i Safari)
- CSS3 borders, backgrounds and box-shadows – Opera 10.5 nareszcie obsługuje zaokrąglone rogi
- Comparison of layout engines – porównanie silników przeglądarek pod kątem obsługi CSS (Gecko, Presto, WebKit, KHTML, Trident)
- No Image Aqua Buttons – niesamowity przycisk w CSS3 (dla: Firefox, Safari)
- CSS Properties Index – aktualizowane porównanie wersji stylów: CSS1 vs CSS2 vs CSS3
- CSS3 Previews – aktualizowana lista z przykładami
- Take Your Design To The Next Level With CSS3 – artykuł z przykładami
- CSS contents and browser compatibility – obsługa CSS3 w przeglądarkach.
- CSS Working Group Blog – na blogu grupy roboczej W3C, można śledzić najnowsze wieści i ciekawostki związane z postępem prac.
- CSS Reference – bogate źródło wiedzy na temat CSS wersji 1, 2, 3, z przykładami.
- CSS Selectors Test – automatyczny test, sprawdzający Twoją przeglądarkę pod kątem obsługi selektorów CSS.
- CSS Animation – przykład zastosowania CSS animacji (dla webkit)
- SVG + CSS Animations = Fisheye Fun – ciekawe zastosowanie CSS animacji plus grafika wektorowa SVG, na przykładzie menu typu „Rybie oko” (dla webkit)
- Introducing CSS Gradients – przykład zastosowania CSS gradientów (dla webkit)
1. Czym różni się CSS 3 od CSS 2.1?
Przede wszystkim różni się podziałem na moduły (modules), dodano także nowe selektory (selectors) i właściwości (properties).
2. Czym są moduły CSS3?
Moduły grupują właściwości, np. moduł tekstu (Text) grupuje właściwości CSS, które są związane z formatowaniem tekstu. Moduł jednostek i wartości (Values and Units), grupuje właściwości CSS, które opisują wszystkie możliwe jednostki i wartości. Modułów jest kilkadziesiąt, każdy osobno uzyskuje status rekomendacji.
3. Zalety modularyzacji
Dany moduł może zostać opublikowany jako oficjalna rekomendacja W3C, niezależnie od tego, czy inne moduły są ukończone, czy dopiero w trakcie opracowywania. Dzięki temu nie trzeba czekać na ukończenie specyfikacji obejmującej wszystkie wprowadzone zmiany, tak jak miało to miejsce we wcześniejszych wersjach CSS. Ma to znaczenie szczególnie ze względu na to, że kaskadowe arkusze stylów bardzo się rozrosły. Niektóre moduły CSS3, objętością dorównują pełnej specyfikacji CSS1. Dzięki modularyzacji prostsze staje się publikowanie poprawek i rozwijanie CSS.
Należy zauważyć, że przeglądarka internetowa nie musi wspierać wszystkich modułów CSS3, np. przeglądarka głosowa (przeznaczona dla osób niewidomych), nie potrzebuje wspierać właściwości, które są odpowiedzialne za formatowanie kolorów (Color), z kolei może chcieć wspierać styl mowy (Speech).
Przeglądarki internetowe, które wspierają CSS3
Lista modułów CSS3
Lista modułów może ulec zmianie, należy ją traktować jak szkic roboczy. Obecnie żaden moduł CSS3 nie uzyskał statusu rekomendacji W3C (poza stylami przeznaczonymi dla SVG ). Nie ukończono także prac nad wcześniejszą wersją CSS 2.1, która jest w fazie Candidate Recommendation
- 2D Transforms
- 3D Transforms
- Animations
- Attribute Syntax
- Aural Style Sheets
- Backgrounds and Borders
- Tła i obramowania — zawiera wszystkie właściwości dotyczące teł i obramowań, między innymi wielokrotne tło Multiple background czy zaokrąglone rogi Border radius.
- Basic Box model
- Basic User Interfaces
- Cascading and Inheritance
- Color
- CSSOM View
- Extended Box Model
- Flexible Box Layout
- Fonts
- Generated and Replaced Content
- Generated Content for Paged Media
- Grid Positioning
- Hyperlink Presentation
- Image Values
- Introduction
- Line Grid
- Line Layout
- Lists
- Marquee
- Marquee jest mechanizmem przewijania napisów (animacją tekstu), zawiera wlaściwości pozwalające kontrolować prędkość, kierunek, styl przewijania.
- Podobną funkcjonalność pełnił w przeszłości niestandardowy znacznik HTML
<marquee>, który został wprowadzony przez Microsoft pod przeglądarkę Internet Explorer, obsługiwany był również w Firefoksie, Operze i Safari, jednak znacznik ten nigdy nie był częścią oficjalnej specyfikacji HTML.
- Math
- Media Queries
- jest poszerzeniem funkcjonalności reguł opisanych w CSS 2.1 - Media types i pozwala określić dodatkowe kryteria dla reguły
@media. Dzięki temu możliwe jest tworzenie różnych układów strony oraz wersji kolorystycznych, które będą włączane tylko w określonych warunkach, np. można stworzyć dwa style CSS – pierwszy zostanie włączony gdy obszar roboczy będzie szerszy niż 960 px, drugi - kiedy obszar roboczy będzie węższy niż 960 px. Przeskalowanie okna przeglądarki, będzie dynamicznie podmieniało style CSS i zmieniało wygląd strony.
- Media Queries są częściowo obsługiwane przez przeglądarki: Opera, Firefox, Chrome i Safari
- Multi-column Layout
- Namespaces
- Object Model
- Paged Media
- Positioning
- Presentation Levels
- Reader Media Types
- Ruby
- Ruby to uproszczony zapis znaków pisma złożonego (takiego jak chińskie, japońskie, koreańskie). Znaki Ruby umieszczone są w postaci adnotacji, obok tekstu bazowego, np. każdemu chińskiemu znakowi pisanemu w formie tradycyjnej, może odpowiadać znak pisany w formie uproszczonej, umieszczony nad znakiem bazowym, lub - jeśli jest to zapis pionowy – z boku. CSS Ruby posiada zestaw właściwości, służący do formatowania zapisów ruby (głównie pozycji znaków względem siebie). CSS Ruby może być łączony z XHTML Ruby Annotation, który definiuje znaczniki dla Ruby.
- Nazwa „Ruby” wywodzi się z brytyjskiej typografii, gdzie używano małej 5,5 pt czcionki, do wstawiania międzywierszowych adnotacji w dokumentach drukowanych. Istnieje także język programowania nazwany Ruby.
- Scoping
- Selectors
- Speech
- Syntax
- Tables
- Template Layout (dawniej: Advanced layout)
- Za jego pomocą zbudujemy szablon layoutu. Szablon działa jak siatka, na której możemy rozmieścić wiersze i kolumny, treść umieszczamy w slotach. Szablon łączy w sobie zalety layoutu opartego na tabelkach z zaletami layoutu wykorzystującego pozycjonowanie absolutne. Szablony posiadają większe możliwości niż tabele – z łatwością możemy zmieniać kolejność wyświetlania poszczególnych wierszy i kolumn, co w przypadku tabeli jest niemożliwe. Jest także wygodniejszy i bardziej elastyczny niż pozycjonowanie absolutne, sloty siatki nie są ustawione na sztywno – tak jak ma to miejsce z elementami pozycjonowanymi absolutnie – ale dopasowują się do siebie oraz do zawartości.
- W Template Layout istnieje możliwość budowania kolumn o równej wysokości, co w CSS 2 było trudne do osiągnięcia. Dzięki dużej elastyczności, szablon layoutu potrafi dostosowywać się do rozmiaru okna przeglądarki. Rozwiązania zastosowane w tym module, umożliwiają budowanie skomplikowanych układów stron, podobnych do tych, które znamy z tradycyjnych pism drukowanych.
- Text
- Text Layout
- Transitions
- Values and Units
- Web Fonts