Artykuły do poprawy

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
[[CSS/font]] O O O O O O O
[[CSS/font-size]] O O O O O O O
[[CSS/font-family]] O O O O O O O
[[CSS/font-style]] O O O O O O O
[[CSS/font-weight]] O O O O O O O
[[CSS/font-variant]] O O O O O O O
[[CSS/font-stretch]] N N N N N N N
[[CSS/font-size-adjust]] N N N O O N N
[[CSS/color]] O O O O O O O
[[CSS/text-decoration]] O O O O O O O
[[CSS/text-transform]] O O O O O O O
[[CSS/text-align]] O O O O O O O
[[CSS/text-indent]] O O O O O O O
[[CSS/line-height]] O O O O O O O
[[CSS/word-spacing]] N O O O O O O
[[CSS/letter-spacing]] O O O O O O O
[[CSS/white-space]] C C C C C C C
[[CSS/background]] O O O O O O O
[[CSS/background-color]] O O O O O O O
[[CSS/background-image]] O O O O O O O
[[CSS/background-repeat]] O O O O O O O
[[CSS/background-position]] O O O O O O O
[[CSS/background-attachment]] C C O O O O O
[[CSS/box-sizing]] N N N C C O O
[[CSS/margin]] O O O O O O O
[[CSS/margin-top]] O O O O O O O
[[CSS/margin-bottom]] O O O O O O O
[[CSS/margin-left]] O O O O O O O
[[CSS/margin-right]] O O O O O O O
[[CSS/padding]] O O O O O O O
[[CSS/padding-top]] O O O O O O O
[[CSS/padding-bottom]] O O O O O O O
[[CSS/padding-left]] O O O O O O O
[[CSS/padding-right]] O O O O O O O
[[CSS/border]] O O O O O O O
[[CSS/border-style]] O O O O O O O
[[CSS/border-color]] O O O O O O O
[[CSS/border-width]] O O O O O O O
[[CSS/border-bottom-color]] O O O O O O O
[[CSS/border-bottom-style]] O O O O O O O
[[CSS/border-bottom-width]] O O O O O O O
[[CSS/border-bottom]] O O O O O O O
[[CSS/border-left-color]] O O O O O O O
[[CSS/border-left-style]] O O O O O O O
[[CSS/border-left-width]] O O O O O O O
[[CSS/border-left]] O O O O O O O
[[CSS/border-right-color]] O O O O O O O
[[CSS/border-right-style]] O O O O O O O
[[CSS/border-right-width]] O O O O O O O
[[CSS/border-right]] O O O O O O O
[[CSS/border-top-color]] O O O O O O O
[[CSS/border-top-style]] O O O O O O O
[[CSS/border-top-width]] O O O O O O O
[[CSS/border-top]] O O O O O O O
[[CSS/outline]] N N N O O O O
[[CSS/outline-color]] N N N O O O O
[[CSS/outline-style]] N N N O O O O
[[CSS/outline-width]] N N N O O O O
[[CSS/list-style]] O O O O O O O
[[CSS/list-style-type]] C C C O O O O
[[CSS/list-style-position]] O O O O O O O
[[CSS/list-style-image]] O O O O O O O
[[CSS/width]] O O O O O O O
[[CSS/height]] O O O O O O O
[[CSS/max-width]] N N O O O O O
[[CSS/min-width]] N N O O O O O
[[CSS/max-height]] N N O O O O O
[[CSS/min-height]] N N O O O O O
[[CSS/overflow]] O O O O O O O
[[CSS/caption-side]] N N N O O C C
[[CSS/table-layout]] O O O O O O O
[[CSS/border-collapse]] O O O O O O O
[[CSS/border-spacing]] N N N O O O O
[[CSS/empty-cells]] N N N O O O O
[[CSS/position]] C C C C C C C
[[CSS/clip]] O O O O O O O
[[CSS/display]] C C C C C O O
[[CSS/visibility]] O O O O O O O
[[CSS/float]] O O O O O O O
[[CSS/clear]] O O O O O O O
[[CSS/cursor]] O O O O O O O
[[CSS/page-break-before]] O O O O O O O
[[CSS/page-break-after]] O O O O O O O
[[CSS/page-break-inside]] N N N N N O O
[[CSS/widows]] N N N N N O O
[[CSS/orphans]] N N N N N O O

[[CSS/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

[[CSS/Pseudoelementy]] i [[CSS/pseudoklasy]]

NazwaMSIEFirefoxOpera
5.5671.5289
CSS 1
[[CSS/visited]] O O O O O O O
[[CSS/active]] O O O O O O O
[[CSS/link]] O O O O O O O
[[CSS/first-line]] O O O O O O O
[[CSS/first-letter]] O O O O O O O
CSS 2
[[CSS/before]] N N N O O O O
[[CSS/after]] N N N O O O O
[[CSS/hover]] C C O O O O O
[[CSS/focus]] N N N O O O O
[[CSS/lang]] N N N O O O O
[[CSS/first-child]] N N N O O O O

[[CSS/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

* Test ACID 2 oraz porównanie wyników poszczególnych przeglądarek * http://meyerweb.com/eric/css/edge/complexspiral/demo.html * http://osiolki.net/
CSS Artykuły do poprawy

7 komentarzy

Kooba

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 :/

Adamo

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

Kooba

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

JC

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

batas2

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

Kooba

Dane o ff mogą byc nieprawidłowe

Ktos

Naprawdę niezła robota Kooba, szacunek :)