YourWebsite.PL

Optymalizacja CSS

admin — Fri, 12 Mar 2010 22:04:04 +0000

Pierwszy krok w moim cyklu wpisów na temat „Optymalizacji stron internetowych”.

Mając na myśli optymalizację CSS myślę o uproszczeniu kodu i skróceniu do jak najmniejszej liczby wierszy. Poniżej opiszę przykłady skracania kodu, które w rezultacie poprawią czytelność i rozmiar pliku. Jeśli poruszam temat rozmiaru plików, to są dostępne darmowe programy do optymalizacji plików CSS takie jak Icey’s CSS Compressor czy CleanCSS ich średnia skuteczność to około 25%, czyli o tyle potrafią zmniejszyć rozmiar pliku CSS. Ich wada po takiej kompresji kod staje się nieczytelny, innymi słowy nasze piękne drzewko CSS i poukładane klasy zlewane są w jedną całość. Jeśli ktoś dysponuje portalem o średniej unikalnej porównywalnej do największych portali to jest to narzędzie pozwalające zaoszczędzić kilka cennych KB. Jednak musimy pamiętać o zachowaniu kopi z drzewkiem ponieważ edycja takiego skompresowanego CSS przyprawia o ból głowy. Jest to chyba ich jedyna wada przez którą osobiście nie używam takich czarodziejów. Klient czy programista od Back-end’u oczekuje czytelnego, prostego i łatwego w edycji CSS, a nie koszmarka z którego nie wiele można wyczytać.

Reset czyli od tego powinien zaczynać się każdy arkusz.

Na początku arkusza użyjmy *(atrybuty znajdujące się w klamrach będą dodane do każdego selektora na zasadzie dziedziczenia) i zamiast resetować wartości oddzielnie przy każdym selektorze stwórzmy taki kod dzięki, któremu zaoszczędzimy masę czasu i miejsca nie powtarzając tego samego w koło. Przy okazji resetujemy atrybuty dla wszystkich przeglądarek, dzięki czemu unikniemy dodawania domyślnych wartości przez przeglądarki. Reset powinien wyglądać tak.

1
2
3
4
5
6

* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}

Grupowanie identyfikatorów i klas.

Często zdarza się tak, że pisząc kod dla kilku selektorów okazuje się ze atrybuty nieznacznie się różnią. Zamiast przepisywać kolejny raz pogrupujmy je oddzielając „przecinkiem” Taka kompresja wygląda w następujący sposób.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.headline {
font-size: 11px;
color: #fff;
padding: 10px;
border-top: 2px;
}
#box {
font-size: 11px;
color: #fff;
padding: 10px;
}
#header {
font-size: 11px;
color: #fff;
padding: 10px;
background: url(‘images/header.jpg’);
}

/*Po kompresji*/
.headline, #box, #header {
font-size: 11px;
color: #fff;
padding: 10px;
}
.headline {
border-top: 2px;
}
#header {
background: url(‘images/header.jpg’);
}

Dziedziczenie w CSS.

Trochę trudniejsza kompresja chociażby z racji, że przeglądarki nie zawsze dziedziczą w identyczny sposób, a samych sposobów dziedziczenia z racji istnienia dużej ilości selektorów w HTML jest tyle, że przybliżę tylko prosty schemat działania dziedziczenia. Polega to na przejmowaniu wartości napisanych wcześniej dla tzw. ”rodzica” przez „dzieci”. Czyli innymi słowy zapisując wartość dla body jest ona dziedziczona dla wszystkiego co jest w środku pomiędzy . Czy zapisując coś dla p (paragrafu) wszystkie elementy znajdujące się wewnątrz dziedziczą ten atrybut. Oczywiście wystarczy dla danego selektora nadać ten sam atrybut z innymi wartościami, aby nasz selektor zmienił wartość dla wcześniej dziedziczonego atrybutu.

Dobrym przykładem dziedziczenia jest ustalenie dla body czcionki. Zazwyczaj strona jest napisana w jednej głównej czcionce, a tylko np. menu będzie wymagało zadeklarowania innej. A więc zastosowanie dziedziczenia w tym przypadku zastąpi nam nawet kilkadziesiąt wierszy z deklaracją czcionki, którą normalnie musielibyśmy dodać do większości selektorów.

Jest to bardzo ogólny przykład bo dziedziczenie możemy wykorzystywać w wielu innych przypadkach. Przykład dziedziczenia poniżej.

1
2
3
4
5
6
7
8
9

p {
color: red;
}
p span {
/*span już odziedziczy kolor*/
}
p.class {
/*ta klasa już odziedziczyła kolor*/
}

Skracanie CSS po przez kompresje atrybutów.

Czynność, która nie tylko poprawia czytelność, ale również znacznie skraca liczbę wierszy w naszym arkuszu jak i pozwala na znaczne skrócenie czasu poświęconego na wklepywanie z palca naszych styli. Poniżej zaprezentuje, atrybuty dla których możliwy jest rodzaj takiej kompresji.

Margin, padding, border-color, border-width, border-style

Cztery wartości po skompresowaniu ustawiane są zgodnie z ruchem wskazówek zegara zaczynając od góry (góra prawa dół lewa). Jest to kompresja najmniej skomplikowana

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

/* Po kompresji */
margin: 1px 2px 3px 4px;

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

/* Po kompresji */
padding 1px 2px 3px 4px;

border-top:1px;
border-right:2px;
border-bottom:3px;
border-left:4px;

/* Po kompresji */
border-width: 1px 2px 3px 4px;

/*Tak samo dla border-style, border-color*/

Obramowanie (border)

Podajemy w kolejności (szerokość styl kolor ). Możemy stosować zarówno dla wszystkich (border) jak i dla wybranych takich jak (border-top, border-right, border-bottom, border-left). Jeśli pominiesz którąś z wartości zostanie przyporządkowana wartość domyślna.

1
2
3
4
5
6
7

border-width: 2px;
border-style: solid;
border-color: #000;

/*Po kompresji*/
border: 2px solid #000;
border-top: 2px solid #000;

Tło (background)

Podajemy w kolejności (color image repeat attachment position). Jeśli pominiesz, którąś z wartości zostanie przyporządkowana wartość domyślna.

1
2
3
4
5
6
7
8

background-color: #000;
background-image: url(‘bg.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

/*Po kompresji*/
background: #000 url(‘bg.jpg) no-repeat fixed 0 0;

Czcionki (font)

Podajemy w kolejności (style variant weight size height family). Możesz pominąć każdą z wartości oprócz font-size i font-family, które są obowiązkowe. Pamiętaj o zachowaniu kolejności.

1
2
3
4
5
6
7
8
9

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 11px;
line-height: 18px
font-family: Tahoma, sans-serif;

/*Po kompresji*/
font: italic small-caps bold 11px 18px Tahoma, sans-serif;

Listy (list-style)

Podajemy w kolejności (type position image). Samą formę list-style-type możemy skrócić do list-style.

1
2
3
4
5
6

list-style-type: square;
list-style-position: inside;
list-style-image: ('li.gif');

/*Po kompresji*/
list-style: square inside url('li.gif');

Skracanie CSS po przez kompresje wartości.

O ile powyżej skracaliśmy style w pionie. To jest również możliwość skracania samych wartości, czyli skracamy nasze style w poziomie. Pozwala to oczywiście jak zwykle zaoszczędzić czas podczas wklepywania kodu.

Dla margin, pudding, border zamiast czterech wartości po dwukropku możemy zapisać np. tak

1 2	margin: 10px; /oznacza nadanie 10px dla wszystkich (top, right, bottom, left) / margin: 10px 20px /10px dla top/bottom i 20px dla left/right /

Dla color zamiast zapisywać kolor składający się z 6 (cyfr/liter) możemy skrócić do 3. Żeby wykonać taki skrót nasz kolor musi składać się z kolejnych par np. #FF22BB i z każdej pary wyrzucamy po jednej powtarzającej się (cyfrze/literze) w wyniku czego otrzymujemy #F2B, który jest dokładnie w ten sam sposób interpretowany. Przykład:

1
2
3
4

color: #ffffff;

/*Po kompresji*/
color: #fff;

Definicja typów dla klas i identyfikatorów

Dość kontrowersyjna, ale jeśli chcemy zmniejszać i kompresować nasz CSS to również przydatna. Definicja typów dla klas lub identyfikatorów poprawia przejrzystość w naszego CSS, ale z drugiej strony po co pisać przed #id typ skoro jest on przyporządkowany tylko i wyłącznie dla jednego elementu. Uwaga ! Pamiętaj, że klasa może być deklarowana w html wiele razy i usunięcie typu z przed klasy powoduje, że klasa bez typu ma niższy priorytet od tej z TYPEM. Przykład:

1
2
3
4
5
6

Div#header {}
p.my-class {}

/*Po kompresji*/
#header {}
.my-class {}

Podsumowanie

Jeśli doszedłeś, aż tutaj to po pierwsze chciałbym Ci podziękować za czas poświęcony na czytanie mojego jak dotąd najdłuższego wpisu. Jednocześnie chciałbym poprosić Cie o częstsze odwiedzanie bloga. Bo poświęcanie czasu na takie wpisy ma tylko wtedy sens, gdy ma on swoich odbiorców. Mam nadzieje, że nie zapomniałem o innych formach kompresji, a nawet jeśli coś pominąłem to daj mi znać w komentarzach lub na mail, a ja na pewno uzupełnię wpis.

Optymalizacja stron internetowych.

admin — Wed, 10 Mar 2010 16:41:37 +0000

Optymalizacja stron temat dość rzadko poruszany przy Front-end’dzie. Jeżeli zajrzymy do Back-endu i stron poświęconych programowaniu optymalizacja i szybkość działania danego skryptu czy programu jest bardzo istotna. Jednak co z szybkiej wyszukiwarki czy innego Back-end’owego dobrodziejstwa skoro nasza strona wczytuje się 10s. Postanowiłem poświęcić optymalizacji stron cały cykl artykułów. Każdy kto zajmuje się Front-end’em na poważnie powinien skupić się nie tylko na identycznym wyglądzie strony pod najpopularniejszymi przeglądarkami, ale również na optymalizacji strony w kilku płaszczyznach.

Optymalizacja CSS
Czyli jak zmniejszyć rozmiar naszych styli.
Optymalizacja HTML pod względem SEO
Czyli jak dobierać znaczniki aby wyszukiwarki nas dobrze zrozumiały.
Optymalizacja grafiki PNG, JPG, GIF
Czyli jak zmniejszyć rozmiar naszych plików graficznych jednocześnie nie tracąc ich jakości.
Poprawna semantyka HTML
Czyli jak poprawnie używać znaczników, podpisywać klasy czy tworzyć drzewko html.
Usability
Czyli projektowanie funkcjonalnych serwisów internetowych.

Hacki CSS oraz komentarze warunkowe

admin — Fri, 05 Mar 2010 12:01:56 +0000

Jednym z wielu sposobów radzenia sobie z niesfornymi przeglądarkami są Hacki CSS, pozwalają zastosować dany styl tylko dla wybranej przeglądarki co umożliwia niejednokrotnie poprawienie błędu. Jednak musimy pamiętać, że hacki wymyślali i odnajdywali koderzy więc nie są one zgodne ze standardami, a ich interpretacja wraz z rozwojem przeglądarek może kiedyś spowodować, że najnowsza wersja danej przeglądarki wyświetli nam coś zupełnie niepożądanego. Co prawda jest to mało prawdopodobne, ale jednak mimo wszystko trzeba brać taką ewentualność pod uwagę. Poniżej zaprezentowałem Hacki, dla najpopularniejszych przeglądarek.

Hacki CSS

Hacki dla selektorów

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/*** IE6 ***/
* html #box { color: red; }

/*** IE6, IE7 ***/
*:first-child+html #box { color: red }

/*** IE7 ***/
*+html #box { color: red; }

/*** IE7, FF, Saf, Opera ***/
html>body #box { color: red }

/*** IE8, FF, Saf, Op (all oprócz IE6,7) ***/
html>/**/body #box { color: red }

/*** FF 2.x ***/
#box, x:-moz-any-link { color: red; }

/*** FF3.x ***/
#box, x:-moz-any-link, x:default { color: red; }

/*** Opera < 9.5 ***/
html:first-child #box { color: red; }

/*** Opera 9.5/10 ***/
body:first-of-type #box { color: red; }

/*** Safari ***/
html[xmlns*=""] body:last-child #box { color: red; }

/*** Safari 4 ***/
body:first-of-type #box { color: red; }

/*** Chrome1+, saf3+ ***/

@media screen and (-webkit-min-device-pixel-ratio:0) {
#box { color: red }
}

Hacki dla atrybutów

1
2
3
4
5
6
7
8
9
10
11
12

/*** IE6 ***/
#box { _color: red; }

#box { color: red; !ie}

/*** IE6, IE7 ***/
#box { *color: red; }

/*** IE6, IE7, IE8 ***/
#box { color: red\9; }

Komentarze warunkowe Internet Explorer

Podpiąłem ten temat pod Hacki z bardzo prostego względu hacki mają za zadanie zmienić styl w konkretnej przeglądarce komentarze warunkowe mają dokładnie to samo zastosowanie. Zostały wprowadzone przez Microsoft i chwała im za to, dzięki temu rozwiązaniu możemy dodać nasz kod CSS czy HTML widoczny tylko dla IE lub dla wszystkich tylko nie IE. Komentarze wklejamy do pliku z kodem HTML.

Kod tylko dla IE

1
2
3

Kod nie dla IE

1
2
3

Kod znajdujący się pomiędzy tymi znacznikami zobaczą wszystkie przeglądarki tylko nie IE

Wyrażenia w nawiasach kwadratowych możemy zmieniać. Wybierać konkretne wersje IE.
A robimy to w następujący sposób:

1
2
3
4
5
6
7

[if IE 6]
[if gt IE 5]
[if gte IE 5]
[if lt IE 7]
[if lte IE 7]
[if !IE 8]
[if (IE 5)|(IE 6)]

PNG działający w każdej przeglądarce (IE6 IE7)

admin — Sat, 27 Feb 2010 17:38:33 +0000

Co powinniśmy wiedzieć o PNG

Następca gifa wprowadza półprzezroczystość (kanał alpha). Co znacznie ułatwia życie koderom szczególnie w sytuacji, gdy wodze fantazji zaczynają puszczać grafikom. PNG jest na wolnej licencji w przeciwieństwie do gifa. Używając odpowiednich programów bardzo dobra kompresja (przy zachowaniu świetnej jakości mały rozmiar plików). Wszystko wręcz wydaje się bajką jednak, zderzamy się z rzeczywistością IE6 zamiast naszego kanału alpha wyświetla szare tło, a IE7 przyciemnia nasze obrazki. W tym wpisie pokaże jak ominąć problemy z obiema przeglądarkami Microsoft’u. Co pozwoli nam na zastosowanie PNG w każdym projekcie bez obawy o interpretacje przeglądarek.

Ciemniejszy PNG pod IE6/IE7

Żeby pozbyć się efektu ciemniejszego PNG w IE6 oraz IE7 posłużymy się PngOptimizer na wolnej licencji (GNU). Jest bardzo prosty w użyciu za pomocą (Drag and Drop) przeciągnij i upuść poprawimy wyświetlanie naszych PNG.

Program możemy ściągnąć ze strony autora Download PngOptimizer

Kanał alpha w IE6

Po uporaniu się z IE7 pozostaje nam jeszcze IE6 i szare tło zamiast naszej półprzezroczystości. By zlikwidować ten problem użyjemy skryptu napisanego w JavaScript na licencji GNU (wolna licencja pozwalająca dowolnie wykorzystywać skrypt).

Skrypt dodajemy do naszych styli w sposób zaprezentowany poniżej. By nasz skrypt działał dla danego selektora, klasy czy identyfikatora musimy go dodać oddzielając przecinkiem. Aby uniknąć błędów należy skrypt (iepngfix.htc wraz z obrazkiem blank.gif) umieścić w głównym katalogu (razem z index). Nieskopiowanie obrazka blank.gif powoduje błędy w wyświetlaniu PNG umieszczonego bezpośrednio w HTML. Należy też podać dokładną wysokość i szerokość obrazka umieszczonego bezpośrednio w HTML by uniknąć niespodziewanego ze skalowania obrazka.

KOD CSS

1
2
3

img, a, input, #box {
_behavior: url('iepngfix.htc');
}

KOD HTML

1
2
3
4

<div id="box">
<p>Przykładowy text w tle #box obrazek png</p>
<img src="images/obrazek.png" width="100px" height="100px" alt="" />
</div>

I link do pobrania paczki z iepngfix.htc oraz blank.gif Download iepngfix

Background-position/repeat używając iepngfix

Wydawałoby się, że już możemy w pełni cieszyć się obrazkami w PNG na naszej stronie. Jednak gdy chcemy użyć takich selektorów jak bg-position/repeat. Nie działają, ale oczywiście jest na to sposób. By uruchomić prawidłowe działający position/repeat dla tła należy dodać między sekcje HEAD w naszym pliku html następujący skrypt.

1	<script type="text/javascript" src="iepngfix_tilebg.js"></script>

Do ściągnięcia pod adresem Download iepngfix-titlebg

Podsumowanie

Jak widać uruchomienie PNG pod IE6 nie należy do najprostszych. Jednak moim zdaniem kanał alpha jest tego warty. Po dodaniu wszystkich plików (iepngfix.htc, blank.gif, iepngfix_titlebg.js) musisz pamiętać, że każda nowo dodana klasa czy id z obrazkiem png w tle musi zostać zadeklarowana przy behavior, a każdy nowo dodany obrazek bezpośrednio w HTML musi mieć określoną wysokośc i szerokość.

Przetestowane pod: IE6, IE7, IE8, FF2.x, FF3.x, Opera, Google Chrome, Safari.

Dokąd zmierza CSS 3

admin — Fri, 26 Feb 2010 16:18:42 +0000

Czym jest CSS3 ?

Trzecia generacja CSS elektryzuje koderów, powstaje wiele przykładowych zastosowań języka. Pomimo skromnej jak dotąd interpretacji przez najpopularniejsze przeglądarki. W stosunku do poprzedniej wersji CSS3 podzielone jest ma moduły. Ma to usprawnić nie tylko prace na nowym CSS, ale dać również możliwość częściowego wprowadzania go do przeglądarek pomimo, że cała specyfikacja nie jest ukończona, pewne moduły są już stabilne. Według twórców nowy CSS ma umożliwić stosowanie rozwiązań, dotychczas możliwych jedynie przy użyciu JavaScript np. będzie można wybrać pierwszy czy co trzeci element pewnej klasy i nadać mu zupełnie inne ostylowanie, funkcja zaawansowanych selektorów też wydaje się być interesująca. Wiele osób cieszy się na wieść o możliwości dodania własnych fontów, a cienie pod tekstem wyglądają naprawdę świetne.

Czy warto już stosować CSS3 ?

Niektóre przeglądarki wprowadziły już obsługę pewnych rozwiązań przedstawionych w CSS3. Te które wdrożyły obsługę selektorów stosują przed nimi własne przedrostki, ponieważ nie ma określonej dokładnej interpretacji nowych możliwości CSS3. Moim zdaniem wyjdzie z tego przynajmniej kilka sposobów interpretowania jednej wartości co będzie wymagać od koderów jak zawsze szukania kolejnych rozwiązań na jednolity wygląd strony pod najpopularniejszymi przeglądarkami. Obecnie CSS3 możemy stosować i testować w swoich prywatnych projektach, ale czy powinniśmy wciskać klientowi innowacyjność, skoro nie mamy pewności, czy dany selektor lub jego funkcja zostanie za kilka miesięcy zmieniona lub producenci przeglądarek w ramach ujednolicenia interpretacji zmienią sposób wyświetlania danego selektora.

Kiedy na dobre zaczniemy korzystać z CSS3 ?

Tu w temacie niezmiennie króluje Microsoft. Dopóki IE6 wraz z IE7 nie umrą śmiercią naturalną dopóty nie ma co nawet myśleć o szerszym wykorzystywaniu CSS3 w komercyjnych projektach. Oczywiście IE8 w porównaniu do najnowszej wersji Firefox’a, Opery czy Safari również pozostaje w tyle. Microsoft mówi o szerszym wprowadzeniu CSS3 do IE9, to już coś, ale IE6, IE7, IE8 posiadają łącznie kilkadziesiąt procent użytkowników i szybko się to nie zmieni.

Podsumowanie

Każdy szanujący się koder powinien śledzić poczynania nowego CSS. Jednak nie ekscytujmy się zanim naprawdę zaczniemy zabawę z nowym CSS musimy poczekać jeszcze ładnych kilka lat. Obecnie nawet producenci przeglądarek dają jasno do zrozumienia, że nazwy i funkcje selektorów mogą ulec zmianie. Dlatego nie dodają bezpośrednio „komend css” tylko każda przeglądarka zależnie od silnika dodaje swój własny przedrostek. Nawet gdy zakończone zostaną prace nad trzecią generacją przystosowanie najpopularniejszych przeglądarek potrwa. Już nie wspomnę o opracowaniu obejść do starych przeglądarek, czy ich wycofaniu z rynku. Więcej o CSS3, można znaleźć na css3.info

Internet Explorer 6 kontra max/min-height max/min-width

admin — Wed, 24 Feb 2010 08:59:01 +0000

Przy bardziej zaawansowanych stronach stosowanie max/min-height czy max/min-width staje się wręcz niezbędne. Te bardzo przydatne style jednak nie są obsługiwane przez IE6. Ten wpis pomoże Ci to zmienić!

MIN-HEIGHT/WIDTH

Pomimo tego, że IE6 nie wie co znaczy min-height, min-width. Zachowuje się w stosunku do height i width dokładnie w ten sam sposób, jak normalne przeglądarki do min-height/width. Mianowicie ustala stałą wysokość/szerokość jednak gdy przybywa content’u pozwala na rozszerzenie się elementu blokowego. A my to wykorzystamy !

ROZWIĄZANIE MIN-HEIGHT

1
2
3
4
5

#box {
min-height: 100px; /*Dla normalnych przeglądarek*/
height: auto !important; /*ukrycie stałej wartości dla normalnych*/
height: 100px; /*Dla IE6*/
}

ROZWIĄZANIE MIN-WIDTH

1
2
3
4
5

#box {
min-width: 100px; /*Dla normalnych przeglądarek*/
width: auto !important; /*ukrycie stałej wartości dla normalnych*/
width: 100px; /*Dla IE6*/
}

MAX-HEIGHT/WIDTH

O ile z minimalną wartością poradziliśmy sobie dość gładko przy pomocy samego css’a. To maksymalna wartość będzie wymagała użycia expression (o expression kiedyś więcej w osobnym temacie). A expression wymaga, żeby użytkownik miał włączony JavaScript i to jest jego wada. Z całym szacunkiem, ale kto wyłącza JS w przeglądarce. Ponieważ jest to mały, a nawet bardzo mały odsetek internautów uważam expression za b. dobry sposób radzenia sobie z bugami w IE.
Opis kodu dla obu przypadków na dole.

ROZWIĄZANIE MAX-WIDTH

1
2
3
4
5

#box {
_width: expression( document.body.clientWidth > 299 ? "300px" : "auto" );
max-width: 300px;
overflow: hidden;
}

ROZWIĄZANIE MAX-HEIGHT

1
2
3
4
5

#box {
_height: expression( this.scrollHeight > 299 ? "300px" : "auto" );
max-height: 300px;
overflow: hidden;
}

Opis kodu:

2.Zaczynamy od _ (więcej o hakach css). Twoja edycja tego wiersza sprowadza się do zmiany wartości 299 i 300 na własne, wyrażone oczywiście w px. Pierwsza wartość musi być mniejsza od drugiej o 1, ponieważ ustawienie równych wartości może spowodować zawieszenie się przeglądarki
3. Kod dla przeglądarek zgodnych ze standardami
4. W ten sposób zapewniamy sobie, że powyżej maksymalnej wartości naszego pudełka wszystko zostanie ucięte. Bo przecież chyba głównie o to chodzi w max-width/height.

Przetestowane pod: IE6, IE7, IE8, FF2.x, FF3.x, Opera, Google Chrome, Safari.

Podwójny margines w IE6

admin — Mon, 22 Feb 2010 20:43:51 +0000

Chyba najczęściej spotykany i najprostszy błąd do rozwiązania występujący w IE6. Problem wygląda następująco dla elementów z wartością float IE6 nadaje podwójny margines.

1
2
3
4
5

#box {
width: 500px;
float: left;
margin: 0 0 0 50px;
}

Zapisanie takiego kodu spowoduje odsunięcie naszego pudełka od lewej o 50px. Jednak po sprawdzeniu w większości przeglądarek okaże się, że kochane IE6 odsunęło nasze pudełko od lewej nie o 50px, a o 100px.

ROZWIĄZANIE

Dość proste, ponieważ float nadaje elementowi automatycznie display: block. My dopiszemy do naszego identyfikatora display: inline co nie zmieni sposobu wyświetlania, a rozwiąże nasz problem w IE6. A więc całość działająca już poprawnie w każdej przeglądarce wygląda tak:

1
2
3
4
5
6

#box {
width: 500px;
float: left;
margin: 0 0 0 50px;
display: inline;
}

Przetestowane pod: IE6, IE7, IE8, FF2.x, FF3.x, Opera, Google Chrome, Safari.