Wsparcie przeglądarek

Ten artykuł wymaga dopracowania!

Jeżeli możesz popraw ten artykuł według zaleceń, które możesz znaleźć na stronie Artykuły do poprawy. Po dopracowaniu tego tekstu można usunąć ten komunikat.

Jednym z większych problemów podczas używania CSS jest fakt ze nie wszystkie przeglądarki obsługują go jednakowo.

W skrócie można powiedzieć ze przeglądarki Opera oraz Firefox w pełni obsługują CSS 1, prawie obsługują CSS 2 i częściowo CSS 3.

Internet Explorer natomiast jest swoistą czarną owcą wśród przeglądarek. Używa go największa ilość internatów, mimo że ma najsłabszą obsługę CSS. Nie dość ze obsługuje on tylko CSS 1 i znikomą część CSS 2 to jeszcze ma wiele błędów powodujących nieprawidłowe wyświetlanie stron. Strony pisane zgodnie ze standardem w3c często nie działają poprawnie na IE, co stanowi barierę rozwoju sieci i stosowania nowych technologii.

Szczegóły obsługi CSS

PolecenieMSIEFirefoxOpera
5.5671.5289
Font O O O O O O O
Font-size O O O O O O O
Font-family O O O O O O O
Font-style O O O O O O O
Font-weight O O O O O O O
Font-variant O O O O O O O
Font-stretch N N N N N N N
Font-size-adjust N N N O O N N
Color O O O O O O O
Text-decoration O O O O O O O
Text-transform O O O O O O O
Text-align O O O O O O O
Text-indent O O O O O O O
Line-height O O O O O O O
Word-spacing N O O O O O O
Letter-spacing O O O O O O O
White-space C C C C C C C
Background O O O O O O O
Background-color O O O O O O O
Background-image O O O O O O O
Background-repeat O O O O O O O
Background-position O O O O O O O
Background-attachment C C O O O O O
Box-sizing N N N C C O O
Margin O O O O O O O
Margin-top O O O O O O O
Margin-bottom O O O O O O O
Margin-left O O O O O O O
Margin-right O O O O O O O
Padding O O O O O O O
Padding-top O O O O O O O
Padding-bottom O O O O O O O
Padding-left O O O O O O O
Padding-right O O O O O O O
Border O O O O O O O
Border-style O O O O O O O
Border-color O O O O O O O
Border-width O O O O O O O
Border-bottom-color O O O O O O O
Border-bottom-style O O O O O O O
Border-bottom-width O O O O O O O
Border-bottom O O O O O O O
Border-left-color O O O O O O O
Border-left-style O O O O O O O
Border-left-width O O O O O O O
Border-left O O O O O O O
Border-right-color O O O O O O O
Border-right-style O O O O O O O
Border-right-width O O O O O O O
Border-right O O O O O O O
Border-top-color O O O O O O O
Border-top-style O O O O O O O
Border-top-width O O O O O O O
Border-top O O O O O O O
Outline N N N O O O O
Outline-color N N N O O O O
Outline-style N N N O O O O
Outline-width N N N O O O O
List-style O O O O O O O
List-style-type C C C O O O O
List-style-position O O O O O O O
List-style-image O O O O O O O
Width O O O O O O O
Height O O O O O O O
Max-width N N O O O O O
Min-width N N O O O O O
Max-height N N O O O O O
Min-height N N O O O O O
Overflow O O O O O O O
Caption-side N N N O O C C
Table-layout O O O O O O O
Border-collapse O O O O O O O
Border-spacing N N N O O O O
Empty-cells N N N O O O O
Position C C C C C C C
Clip O O O O O O O
Display C C C C C O O
Visibility O O O O O O O
Float O O O O O O O
Clear O O O O O O O
Cursor O O O O O O O
Page-break-before O O O O O O O
Page-break-after O O O O O O O
Page-break-inside N N N N N O O
Widows N N N N N O O
Orphans N N N N N O O

Selektory

NazwaMSIEFirefoxOpera
5.5671.5289
CSS 1
Selektor prosty
`p`
O O O O O O O
Selektor potomka
`ul li`
O O O O O O O
Selektor klasy
`.klasa`
O O O O O O O
Selektor identyfikatora
`#identyfikator`
O O O O O O O
CSS 2
Selektor uniwersalny
`*`
N O O O O O O
Selektor dziecka
`ul > li`
N N O O O O O
Selektor braci
`h1 + h2`
N N O O O O O
Selektor atrybutu
`a[target]`
N N O O O O O
atrybut równy wyrazowi
`a[href="index.html"]`
N N O O O O O
wyraz oddzielony spacjami
`acronym[title~="language"]`
N N O O O O O
wyraz oddzielony myślnikami
`body[lang|="en"]`
N N O O O O O
CSS 3
Selektor prefiksu
`a[href^="http://"]`
N N O O O O O
Selektor sufiksu
`a[href$=".zip"]`
N N O O O O O
atrybut zawiera wyraz
`span[title*="4programmers"]`
N N O O O O O
tekstowa zawartość elemtentu
`p:contains("foo")`
N N N N N N N
element poprzedzony
`p ~ div`
N N N O O O O

Pseudoelementy i Pseudoklasy

NazwaMSIEFirefoxOpera
5.5671.5289
CSS 1
Visited O O O O O O O
active O O O O O O O
Link O O O O O O O
First-line O O O O O O O
First-letter O O O O O O O
CSS 2
before N N N O O O O
after N N N O O O O
hover C C O O O O O
focus N N N O O O O
lang N N N O O O O
first-child N N N O O O O

Treść generowana

NazwaMSIEFirefoxOpera
5.5671.5289
content N N N O O O O
?? string N N N O O O O
?? uri N N N O O O O
?? attr() N N N B O O O
quotes N N N O O O O
counter N N N O O O O
counters N N N O O O O
counter-reset N N N O O O O
counter-increment N N N O O O O
OObsługuje polecenie
NNie obsługuje polecenia
CCzęściowa obsługa
BBłędna obsługa

Zobacz także

7 komentarzy

Naprawdę niezła robota Kooba, szacunek :)

Dane o ff mogą byc nieprawidłowe

Nie wiem czy tak miało byc ale nie widać znaków zapytania na biłaym tle. :)

Naprawdę bardzo przydatny art dla webmasterów 9/10 :)

tak batas, to sa miejsca gdzie nie jestem pewien wiec wolałem nie pisać nic,

zachecam do poprawek - art moze miec błedy a poza tym trzeba uzupełnić te puste luki :P

super rzecz, niby nic trudnego do zrobienia ale troszkę czasu trzeba mieć
tylko zastanawia mnie po co wyszczególnienie dwóch wersji FF i Opery skoro nic się w nich nie zmienia, tak samo IE 5.5 a 6.0 jest różnica tylko w jednym miejscu więc możnaby dać to pod gwiazdką, albo zamiast O wpisywać najwcześniejszą wersję od której wspiera daną rzecz, bo raczej się nie zdaża że nowsza wersja nie obsługuje czegoś co obsługiwała wcześniej

po prostu nie wiedziałem ze opera 8 i 9 oraz fx 1.5 i 2 nie różnią sie od siebie (gdy to zaczynałem pisać nie było nawet Fx2)

IE 6 miał wiele zmian w stosunku do 5.5 wiec myśle ze warto było go wyszczególnić.

I rzeczywiście chyba lepiej było pisać tak jak mówisz: zamiast "O" numerek wersji, ale z drugiej strony było by to dużo wiecej roboty :/