Nic to – można go wszakże nienawidzić jednakowoż ignorancja jest niewskazana.
Mam ogromną nadzieję, że za dwa lata artykuł ten będzie tak nieaktualny jak mistrz A. Gołota, tymczasem jednak …

Aby łatwo i przyjemnie tworzyć strony w CSS, będące poprawnie wyświetlane pod wszystkimi przeglądarkami, musimy podjąć kluczową decyzję.

Należy wybrać pewien „styl” pisania:
1. Tworzenie kodu idealnego odpornego na błędy przeglądarek (zwłaszcza IE6)
2. Osobny arkusz dla IE w razie niepoprawnej interpretacji
3. Ten sam arkusz i odpowiednio pisane selektory.
4. Javascript zapewniający tożsame działanie tych własności css, które są źle interpretowane.
5. Osobna treść dla IE6 jako forma walki z użytkownikami starych przeglądarek

Każda z powyższych metod ma swoje wady i zalety, może więc zacznijmy od początku:

1. Kod idealny

Wydaje się być to rozwiązanie doskonałe w swej prostocie – wystarczy bowiem posiąść wszelką wiedzę z zakresu CSS i (X)HTML, a wtedy wszystkie nasze strony będą wyglądały doskonale w każdej przeglądarce …
OTÓŻ NIE.

Można co prawda próbować budować strony używając jednego arkusza styli, a ewentualne rozbieżności pokonywać przez wykorzystanie błędnej interpretacji przełamania hierarchii styli (!important), jednak taka praca wymusza na nas dodatkowe obudowywanie niektórych elementów (np. w celu pokonania podwójnych marginesów przy elementach pływających) co oczywiście w ‘jakiś’ (czasem minimalny) sposób wpływa na czytelność kodu i szybkość ładowania strony.

Problemem zdaje się być również układ graficzny, który może wymusić wykorzystanie na stronie 24bitowej przeźroczystości plików graficznych o rozszerzeniu .png. Takiej przeźroczystości nie osiągniemy w przeglądarce internet explorer, bez wykorzystania skryptów javascript.

Podobnie gdy sytuacja wymagać będzie wykorzystania minimalnej bądź maksymalnej wysokości (szerkości) elementu (np. min-height:100px), wówczas i w tym przypadku IE6 zawiedzie.

Kod idealny – wykorzystanie jednego arkusza styli, pozwalającego na ostylowanie wszystkich elementów strony jedynie z wykorzystaniem „błędu !important”, jest oczywiście możliwy i zachęcam do jego stosowania,
jednak aby móc cieszyć się tą metodą potrzebna jest wiedza pozwalająca na określenie czy żadne problematyczne elementy nie pojawią się w realizowanym projekcie, gdyby jednak miało to miejsce wówczas należy rozważyć połączenie z innymi rozwiązaniami bądź zupełne przejście na np. odrębny arkusz styli …

2. Osobny arkusz dla IE

Temat wielokrotnie odgrzewany na różnych blogach, forach, tutorialach wymagający jednak poruszenia i w tym miejscu.

Korzystając z odpowiednich tagów języka html możemy w prosty sposób wykryć czy użytkownik używa przeglądarki firmy Microsoft.

Gdy już taką wiedzę posiądziemy możemy z łatwością wstawić do strony odpowiednio spreparowany plik css wykorzystany tylko przez konkretną wersję IE.

Sprawdzenie czy mamy do czynienia z IE6

<!––[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”css/ie6.css” />
<![endif]-–>

Sprawdzenie czy przeglądarka użytkownika to IE7

<!-–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”css/ie7.css” />
<![endif]-–>

Sprawdzenie czy wersja przeglądarki większa niż IE v.6

<!-–[if gt IE 6]>  …   <![endif]-–>

Sprawdzenie czy wersja przeglądarki większa równa niż IE v.6

<!-–[if gte IE 6]>  …   <![endif]-–>

lte – mniejsza równa
lt – mniejsza

Spróbujmy teraz umieścić na stronie jakiś kod jesli przeglądarką klienta NIE JEST żadna z wersji Internet Explorera

<!-–[if !IE]>-–>
<link rel=”stylesheet” type=”text/css” href=”notForIe.css” />
<!-–<![endif]-–>

Przykładowy tekst umieszczony na naszej stronie:

To
<!-–[if !IE]>-–>
NIE
<!-–<![endif]-–>
jest kiepska przeglądarka

… dla przeglądarek Microsoftu zobaczymy tekst
„To jest kiepska przeglądarka”
Dla wszystkich pozostałych:
To NIE jest kiepska przeglądarka

Zauważmy, że zaprzeczenie !IE wymaga aby znacznik warunowy był kończony w inny sposób niz pozostałe tagi warunkowe.
Nie wolno o tym zapomnieć jeśli chcemy aby nasza strona przechodziła poprawną walidację

UWAGA! Z niewiadomych przyczyn aby kod działał nalezy nie kopiować go bezpośrednio a przepisać do swojego projektu – występuje problem z podwójnymi myślnikami, które aby poprawnie wyświetlić użyłem encji: &ndash; – niestety nie równa się on myślnikowi.

Pozostałe sposoby tworzenia stron www wkrótce

Rzecz jasna, podejście takie jest jak najbardziej poprawne, gdyż skutkuje ono użyciem minimalnej liczby znaczników, a co za tym idzie – mniejszą ilością deklaracji w plikach CSS.

Jedno z poruszonych zagadnień wymagało wykorzystania znaczników <fieldset> (w ramach jak największej poprawności semantycznej kodu). Elementy te miały mieć pozycjonowanie relatywne tak aby odpowiedni element <div> w nich zawarty mógł być pozycjonowany absolutnie względem tegoż fieldseta.

No niby nic trudnego: …


fieldset{
position:relative;
padding:20px;
width:500px;
height:100px;
background:yellow;
margin:10px auto;
border:1px solid #666;
}

fieldset div{
background:green;
position:absolute;
left:5px;
top:5px;
height:50px;
width:50px;
}

Zauważmy, że dla elementu
<fieldset> nadaliśmy margines zewnętrzny – padding:20px, który nie powinien mieć wpływu na pozycjonowanie absolutne elementu wewnątrz.
Rzecz jasna nie przypadkowo właśnie o tym wspominam gdyż:

w przeglądarce Firefox ‘padding’ wpływa na absolutne pozycjonowanie elementów wewnątrz relatywnego elementu <fieldset>.

W żadnej innej przeglądarce nie zaobserwujemy tego efektu, w związku z czym musimy uznać to za błąd przeglądarki Firefox.

Co w praktyce oznacza ten błąd – ano, że element div wewnątrz fieldset, mimo, iż ma ustawione pozycjonowanie na
top: 5px;    left: 5px;
w praktyce zostanie wypozycjonowany jako
top: 25px;    left: 25px;

oczywiście tylko pod przeglądarką Firefox.

Poniższy obrazek prezentuje błąd Firefoxa.

Firefox inside fieldset position problem

Efekt wyświetlenia kodu pod innymi przeglądarkami (IE6, IE7, Opera, Safari, Chrome)

Inside fieldset correct position

pozdrawiam

Celem tego bloga jest próba zebrania wszelkich rzeczy pomocnych – uwag, spostrzeżeń – które w trakcie pracy zawodowej młodego webmastera zaskoczyły bądź pozwoliły na tworzenie coraz lepszego kodu.

Praca jako Webmaster wcale nie jest żmudna i wbrew niektórym opiniom pozwala na rozwój – chyba, że cięcie layoutu przyprawia Cię o chroniczny ból przewlekły ;].

Najważniejsze jest podejście z pasją i przekonanie, że wszystko jest do zrobienia, chodź na początku może się wydawać niewykonalne.

Najczęstszymi zagadnieniami, poruszanymi przeze mnie na tym blogu, będą rozwiązania kwestii walidacji i pozycjonowania elementów na stronie tak, by przy pomocy jedynie (o ile się da) arkuszy styli css, wygląd strony był tożsamy w nowoczesnych przeglądarkach jak i w IE6.

Mimo, iż Internet Explorer 6 na rynku polskim używa „jedynie” 8% (a wartość ta ciągle spada (12.2009) - ranking.pl) – klienci „dużego formatu” (oraz ambitni webmasterzy) nie mogą pozwolić sobie na złe wyświetlanie treści w tej przeglądarce.

O tym, jakie sposoby radzenia z IE są najskuteczniejsze, można będzie przeczytać już niedługo.

Pozdrawiam i zachęcam do lektury.