Kompatybilne z różnymi przeglądarkami arkusze stylów


Original: http://www.iangraham.org/books/xhtml2/exerpt/css-4a.html

Przeglądarki 4.3.1 i CSS

CSS jest wspierany przez większość najnowszych przeglądarkach – w szczególności Internet Explorer 3 i do góry i Navigator 4 i up. Jednak wsparcie w Internet Explorer 3 jest bardzo słabe, głównie dlatego, że przeglądarka została wydana przed specyfikacja CSS (Level 1) został zakończony. W efekcie, wiele funkcji zrealizowano w sposób niezgodny z końcowym specyfikacji. Obsługa CSS w Navigator 4 jest lepiej, ale nadal nie jest bardzo dobry: niektóre elementy językowe nie są obsługiwane w ogóle, podczas gdy inne są bardzo buggy i nie mogą być używane w wiarygodny sposób.

TIP – Zgodność CSS Charts
Dla bardzo kompletnej listy opisujące obsługę CSS w różnych przeglądarkach, zobacz Erica Meyera wykresy zgodnością w http://www.webreview.com/style/index.shtml (jest to aktualizacja URL). Niektóre inne przydatne tutoriale CSS i błędów / obejście listy są na stronie: http://www.css.nu, http://www.richinstyle.com/ i http://www.htmlhelp.com/reference/css/ .

Eric Meyer, Hypermedia Systems Manager for Case Western Reserve University, podsumował te różne błędy, ZAIMPLEMENTOWANE funkcje i dziwnych zachowań w szeregu wykresów CSS kompatybilności znaleźć na
http://www.webreview.com/style/index.shtml (zaktualizowany URL!)
Te wykresy wyraźnie opisać stan różnych przeglądarce wsparcie dla CSS i ułatwić Państwu zaprojektować za pomocą CSS, i są absolutnie niezbędne dla każdego, kto próbuje budować arkusze stylów, które działają niezawodnie w różnych przeglądarkach.

Jednakże, istnieje wiele z tych wykresów, i często trudno jest przetłumaczyć ten wykres na zestaw użytecznych wskazówek. Poniższe krótkie rozdziały opisują najważniejsze cechy do rozważenia, jeśli chcesz zaprojektować arkusze stylów, które wspierają konkretne przeglądarki.

Niektóre inne przydatne poradniki do użycia CSS, problemów i błędów, można znaleźć na stronie:
http://www.css.nu
http://www.richinstyle.com/
http://www.htmlhelp.com/reference/css/.
Internet Explorer 3

Mimo, że popiera niektóre aspekty CSS, to chyba najlepiej, aby uniknąć CSS czy projektowania dla programu Internet Explorer 3. To dlatego, że jest to prawie niemożliwe, aby zaprojektować arkusz stylów, który współpracuje z Internet Explorer 3 i że działa także z innych przeglądarkach CSS-aware. Jeśli musisz użyć arkusza stylów, najlepszym rozwiązaniem jest stworzenie arkusza stylów dla Internet Explorer 3 niezależne od arkuszy stylów używanych w innych przeglądarkach. Jednym z możliwych podejść w ten sposób pokazano na końcu tej sekcji.

Navigator 4.x

Navigator 4 obsługuje CSS Level 1, ale w sposób najlepiej opisać jako „nędznie“. W szczególności, niektóre funkcje nie są obsługiwane w ogóle, podczas gdy inne są obsługiwane w sposób, buggy i niespójne. Wytyczne w tej sekcji pozwoli uniknąć najbardziej widocznych problemów z CSS, a jednocześnie pozwalają pisać właściwości CSS formatowania będzie działać poprawnie na większości innych przeglądarek, takich jak Internet Explorer 4 i większej, lub Opera 3.6 i wyższym. Pamiętaj, proszę pamiętaj, że złożone projekty CSS zmusi Cię do zrobienia wiele dodatkowych badań projektu, ponieważ CSS może działać bardzo różnie w różnych przeglądarkach – łatwo jest pozornie nieszkodliwe zmiany CSS spowodować dziwne i niepożądane rendering na jednym z przeglądarek należy wspierać!

Poniżej, w formie punktów, kilka użytecznych zasad za pomocą CSS z Navigator 4.

Nie licz na ustawienie właściwości CSS dla elementu body, ponieważ nie są one właściwie odziedziczył zawartości ciała. Na przykład, jeśli chcesz ustawić domyślną rodzinę czcionek dla całego dokumentu, należy użyć reguły, takie jak

body, div, p, blockquote, ol, ul, dl, li, dt, dd, td, th
{Font-family: Arial, Helvetica, sans-serif}

Nie używać margin-, padding-, lub na granicy właściwości wbudowanych elementów, takich jak em, strong, lub duży (to powoduje znaczące błędy renderowania)
Należy zauważyć, że niektóre elementy blokowe, takie jak p, h1 – h6 i blockquote mieć szczyt domyślną i dolnego marginesu, które nie są ustawione na zero wielkości za pomocą margin-bottom: 0, itp. Korzystanie negatywnych marginesów może być możliwe, ale to oczywiście wygrał ‚t działać na innych przeglądarkach. Jeśli chcesz być w stanie kontrolować górny i dolny margines dla elementów bloku, trzeba użyć elementy div, ponieważ mają górną domyślną i dolny margines zerowej szerokości.
Nie stosować zasady @ import importować jeden arkusz stylów do innego (to nie działa, i wywala jakieś wczesne wersje Navigatora 4). Zamiast tego należy użyć elementu link do importowania arkuszy stylów do X / HTML dokumentów.
Umieść dokumenty zewnętrznych arkuszy stylów w tym samym katalogu co dokumenty są stosowane przez, i umieścić wszystkie obrazy odwołują arkusza stylów w tym samym katalogu, co arkusz stylów. W przeciwnym razie, Navigator niewłaściwie ocenia rozmieszczenie arkuszy stylów i plików graficznych.
Nie używać! Ważne deklaracje podnieść priorytet deklaracji (deklaracja ta nie jest obsługiwana przez Navigator 4)
Zastosuj zasady wyraźnie do elementów (np. przy użyciu klasy lub id atrybuty) i nie zakładać, że właściwości są dziedziczone z elementów dominujących lub są kaskadowo z innych reguł CSS: ani mechanizm działa niezawodnie w Navigator 4. Na przykład, Navigator 4 nie zawsze przechodzą właściwości dół do innych elementów (np. ustawienie rodziny czcionek dla elementu div nie może ustawić czcionkę ust wewnątrz div). Na przykład, aby ustawić formatowanie dla elementu div wewnątrz tabeli, zapisz element jako

..

i utworzenie reguły CSS formie

div.inside-table {… deklaracje css … }

Nie przywiązują CSS do elementów stołowych, tr – Formatowanie dla tych elementów musi być ustawiony za pomocą atrybutów znaczników. Podobnie, jeśli chcesz ustawić właściwości CSS dla zawartości komórek tabeli, należy jawnie ustawić te właściwości dla TD lub elementy th.
Nie używać margin-, padding-, lub na granicy właściwości tabeli, tr, td, lub elementy TH – właściwości te nie działają poprawnie tutaj. Jeśli trzeba ustawić specjalne marginesy, obramowania lub wyściółkę wewnątrz komórki tabeli, a następnie użyć znaczników:

… Zawartość …

i zastosowania CSS do div wewnątrz komórki.
Nie używać margin-, padding-, lub na granicy właściwości elementów zawartości listy (li, dt, lub dd), a właściwości te nie działają poprawnie tutaj. Może również pojawić się problemy z takimi właściwościami zastosowanych do całych list (tj. stosowane do ol elementów UL lub DL). Najbezpieczniejsze marże kontrola przejścia, miejsca dopełnienia lub obramowania wokół całej listy jest do zawijania elementu listy w elemencie div, a następnie zastosować marginesy, dopełnienia i obramowania do div.
Należy być bardzo ostrożnym przy marży-, padding, border-lub właściwości z pływających elementów – często może wprowadzić dziwne błędy formatowania. W szczególności, często nie można wiarygodnie określić pozycję floated elementu za pomocą właściwości marginesów.
Należy zauważyć, że margin-top i margin-bottom (a także padding-top i padding-bottom) działają poprawnie tylko dla elementów div, – inne elementy, takie jak nagłówki, akapity, lub Cytaty, zachowują dużą górnego i dolnego marginesu, nawet gdy CSS Właściwości spróbować ustawić je do zera. To nie problem dla elementów div jest od górne i dolne marginesy są domyślnie, zerowej szerokości.
Background-color, stosowane do bloku np. ust, kolory tylko w regionie, za słowa, a nie całej „skrzynki“. Rozwiązaniem jest dodanie cienką granicę do bloku, ale w tym samym kolorze w tle (tak, że granica znika). Na przykład, aby uzyskać jednolity kolor tła za pkt, można napisać:

p {background-color: green; border: 1px solid white}

Ustawiając różne granice na czterech stronach elementu, najpierw należy użyć właściwości granic ustawić identyczne granice ze wszystkich stron, a następnie za pomocą specyficznych właściwości boczne zresetować poszczególne szerokości granicznych.
Następujące właściwości CSS Level 1 lub przełączniki nie działają na Navigator 4, i należy unikać: background-attachment, background-position, border-top, border-left, border-bottom, border-right (używać innych właściwości border-* zamiast), wyświetlacz (z wyjątkiem display: none), font-variant, letter-spacing, list-style-image, list-style-position, vertical-align, word-spacing, white-space: nowrap, ważna deklaracja,! Oświadczenie import @,: first-line i: first-letter pseudo-elementy.
Następujące właściwości CSS Level 1 praca, ale są błędy lub niespójne. Proszę zobaczyć Erica Meyera wykresy zgodnością szczegóły: background-color, jasny, float, line-height, wszystkie margin-właściwości, wszystkie padding-właściwości, wszystkie właściwości granicy.
Należy pamiętać, że dla lewego i prawego marginesu i uzupełnień, a także dla szerokości, Navigator 4 zawsze oblicza wartości procentowe w stosunku do szerokości okna przeglądarki, a nie w stosunku do szerokości elementu są one wewnątrz. Obecnie tylko Mozilla / Navigator 6 i Opera 3.6 z tego prawa.

Internet Explorer 4

Internet Explorer 4 obsługuje CSS Level 1 dość dobrze, choć z kilku problemów signifiant. To na pewno dostaje główne zasady językowe prawidłowe (dziedziczenie, mechanizm kaskadowych, i tak dalej.), Tak, że problemy nie leżą w niewłaściwej obsługi arkuszy stylów. Problemy wynikają z błędnie zrealizowanych właściwości CSS, a także z tymi, które nie są obsługiwane w ogóle. Ogólnie jednak, jest o wiele łatwiej dostać rzeczy do pracy w Internet Explorer 4 niż Navigator 4.

W formie punktów, są rzeczy, które najbardziej wymagają uważać.

Nie używać margin-, padding-, lub na granicy właściwości elementów liniowych (np. em, strong, lub duże elementy). Nie pracują, i może powodować problemy.
Background-repeat nieruchomość nie działa poprawnie w systemie Windows (działa dobrze na Macintoshy, jednak). W szczególności, tylko w wersji „powtórzenia“ obraz w dół i na prawo od położenia początkowego obrazu, ale nie powtarza się w górę obrazu, a po lewej stronie.
Nie używać margin-, padding-, lub na granicy właściwości tabeli, tr, td, lub elementy TH – właściwości te nie działają poprawnie tutaj. Jeśli trzeba ustawić specjalne marginesy, obramowania lub wyściółkę wewnątrz komórki tabeli, a następnie użyć znaczników:

… Zawartość …

i zastosowania CSS do div wewnątrz komórki.
Nie używaj „o nazwie“ font-size wartości, takich jak np. małe, X-Large, itp. Te wartości pracy, ale produkują rozmiarów czcionek, które są zupełnie inne od tych produkowanych na Navigator czy Opera.
Należy pamiętać, że dla lewego i prawego marginesu i uzupełnień, a także dla szerokości, Internet Explorer 4 zawsze oblicza wartości procentowe w stosunku do szerokości okna przeglądarki, a nie w stosunku do szerokości elementu są one wewnątrz. W rzeczywistości, tylko Navigator 5 i Opera 3.6 z tego prawa.
Następujące CSS Level 1 właściwości i przełączniki nie są obsługiwane: wyświetlacz (z wyjątkiem display: none), vertical-align (baseline wartości, sub i super są obsługiwane) white-space, szerokość (działa dla zdjęć i tabel, ale nie dla regularne bloki, takie jak p lub div), word-spacing,: first-line i: first-letter pseudo-elementy. Należy również zwrócić uwagę na marginesie, dopełnienie i właściwości graniczne nie są obsługiwane na elementów inline.
Następujące właściwości CSS Level 1 praca, ale są błędy lub niespójne. Proszę zobaczyć wykresy zgodnością szczegóły: jasne, float, a wszystkie margin-właściwości (w szczególności, margin-left: auto i margin-right: auto nie działa, więc nie można użyć właściwości marginesów do centrum-align bloków wewnątrz bloków).

Internet Explorer 5.x

Internet Explorer 5.x wspiera CSS poziom 1 w sposób zasadniczo taki sam jak Internet Explorer 4. Faktycznie, jedyne różnice to, że:

Background-repeat działa poprawnie pod Internet Explorer 5.x
Internet Explorer 5.x obsługuje wyświetlacz: Dom i display: inline, ale nie display: list-item

W przeciwnym razie, problemy wsparcia są dość dobrze, takie same jak te opisane powyżej dla Internet Explorer 4.

Internet Explorer 5 wspiera również pewne cechy zdefiniowane w CSS poziom 2. Nie będziemy wchodzić w szczegóły tutaj – Dane zestawione w języku XHTML 1.0 i sourcebook projektu, a także znajduje się msdn.microsoft.com / warsztaty / autor / CSS / odniesienia / attributes.asp

Opera 3.6

Opera 3.6 ma bardzo dobrą pracę z większością CSS Level 1, z następującymi wyjątkami:

Unikaj korzystania z vertical-align, jako wsparcie jest wadliwa, lub nie istnieje.
Unikaj nieruchomości Wypełnienie skrótowej (jest wadliwy), a zamiast tego użyć padding-left, padding-dolny, i tak dalej.
Należy pamiętać, że jasne: left nie działa (ale wszystkie inne jej wartości działa poprawnie)
Następujące właściwości nie są obsługiwane: background-attachment, white-space,

Opera 4 i Mozilla / Navigator 6

Opera 4 w zasadzie obsługuje wszystkie prawidłowo CSS Level 1, podobnie jak Mozilla / Navigator 6 przeglądarkę. Mozilla jednak także obsługuje większość CSS poziom 2. Szczegółowe informacje na temat Navigator 6 wsparcia, zobacz język XHTML 1.0 i sourcebook projektu.
Arkusze stylów dla wielu przeglądarek

Biorąc pod uwagę te rozbieżności może być brudny (jeśli nie niemożliwe) do projektowania jeden arkusz stylów, który działa poprawnie na wszystkich przeglądarkach, różnych. Jedną z opcji jest użycie różnych dokumentów arkuszy stylów dla różnych przeglądarek, które chcesz wspierać. W ten sposób można określić formatowanie CSS dostosowane do mocnych (i słabe strony) każdej innej przeglądarce, bez uszczerbku dla średniej z nich.

Istnieją zasadniczo dwa sposoby, aby to zrobić. Pierwszym jest użycie negocjacji zawartości wysłać przeglądarce konkretnej przeglądarki a arkusz stylów. Jest to analogiczne do metody opisanej w pkt 4.2.4, z tym że tutaj za pomocą przeglądarki tożsamości w celu ustalenia, który arkusz stylów, aby powrócić. Z HTTP, wniosek dla każdego zasobu (w tym arkuszu stylów) będzie wyglądać (pomijając kilka innych części informacji):

GET / HTTP/1.0 ścieżki / stylesheet.css
….
User-Agent: Mozilla/4.61 [en] (Win98; I)

User-agent ciąg identyfikuje przeglądarkę (tutaj Navigator 4.6). Większość serwerów WWW może być skonfigurowany, aby powrócić różne dokumenty arkuszy stylów w zależności od tej wartości. Niestety, ta przełamie buforowania w niektórych serwerów proxy, więc to nie zawsze działa. Także ty, jako autor, nie może mieć kontrolę nad konfiguracją serwera.

Drugim sposobem jest użycie JavaScript, aby przetestować, w przeglądarce, dla wersji przeglądarki i numer modelu, a następnie „napisać“ elementy łączące odwołującego odpowiednich arkuszy stylów bezpośrednio w dokumencie. Zarówno Navigator i Internet Explorer, a następnie przetwarzać elementy wygenerowane przez skrypt linku i załaduje odwołuje arkusz stylów. Oczywiście, to działa tylko jeśli JavaScript jest włączone, ale w wielu przypadkach może to być całkowicie dopuszczalny wymóg.

Przykład tego jest przedstawiony na fig. 4.5. Ta liczba zawiera część treści głowy dokumentu pokazujący znaczników związanych z arkuszy stylów. Pierwszy element link jest niezależny od przeglądarki i ładuje „ogólne“ zasady arkuszy stylów, które mają zastosowanie we wszystkich przypadkach. To, na przykład, można ustawić ogólne właściwości czcionki za pomocą CSS, które są ważne ze wszystkimi przeglądarkami.

Elementy skryptowe powołała specjalny obiekt JavaScript, nazwany jest,, który określa rodzaj i wersja przeglądarki – kod, który nie jest to zawarte z zewnętrznych plików przeglądarką detect.js tak, że funkcja ta może być współużytkowane przez wiele różnych XHTML dokumentów. Jednak niektóre starsze przeglądarki (np. Navigator 2, Internet Explorer 2) nie może zawierać skryptów zewnętrznych, w tym przypadku jest obiekt nie jest tworzony tak, że późniejsze kod nie zadziała. Dwa małe bloki skryptów przed i po przeglądarka wykryje skrypt rozwiązać ten problem. Pierwszy utwór,

// <![CDATA[

zestawów jest = null, zapewniając, że zmienna istnieje i jest przypisany wartość null. Następnie, jeśli następny wiersz

powodzeniem ładuje skrypt, zmienna jest to resetowanie się obiekt zawierający dane przeglądarki. Jednakże, jeśli skrypt nie jest załadowany, to wartość pozostaje null. Kolejny skrypt

<! –

if (jest == null) {jest = new Object ();} / /

/ / ->

testy dla tego przypadku: Jeżeli wartość jest wciąż null, to assignes nowy pusty „obiekt“ do zmiennej.

Pozostałe skrypt wykorzystuje to obiekt do testowania wersji przeglądarki. Przeglądarki detect.js funkcji (dostępny http://developer.netscape.com/docs/examples/javascript/browser_type.html) dodaje właściwości obiektu w zależności od rodzaju przeglądarki. Na przykład, jeśli przeglądarki Navigator 5 lub więcej, a następnie nav5up właściwość jest tworzony i przypisano wartość prawdziwa. W tym przypadku, gdy rachunek (is.nav5up) jest prawdziwy, tak że kolejny blok kodu:

if (is.nav5up) {
document.write (“);
}

napisze, do dokumentu, oświadczenie związek odwoływania się Navigator 5 arkusz specyficzny styl. Navigator 5 następnie ładuje ten arkusz stylów w przeglądarce – i buforuje kopię w lokalnej pamięci podręcznej przeglądarki.
Rysunek 4.5. Dokument, który wykorzystuje skrypt wstawić przeglądarka arkuszy stylów specyficznych.

>

<! –
if (jest == null) {jest = new Object ();}
/ / ->

<! –
/ / Wstaw przeglądarce konkretnych arkuszy stylów. To może spowodować przeciążenie
/ / Przepisy z „głównych“ arkuszy stylów, w celu skorygowania
/ / Idiosyncracies w poszczególnych przeglądarkach.
if (is.nav5up) {
document.write (“);
}
else if (is.nav4) {
document.write (“);
}
else if (is.ie5up) {
document.write (“);
}
else if (is.ie4) {
document.write (“);
}
else if (is.ie3) {
document.write (“);
}
else if (is.opera) {
document.write (“);
}
/ / ->

]]>

Comments are closed.