Test 4kIE

3

4kIE pixel projekt!

Czytam sobie to i tamto… dziś mam dość produktywny dzień. I się grzebię w wszelkiej maści kodach i tutaj skrobię jakieś tylko nudne posty, cudnie nie? Natknąłem się przypadkowo na takie stwierdzenie:

W MSIE 8.0 i starszych jeden plik arkusza CSS może zawierać tylko 4095 selektorów

Cóż, czym jest zwykła sucha teoria której wiele wokół w internecie… postanowiłem więc to sprawdzić!

Dobra. To trochę o pomyśle. Wymyśliłem sobie, ze wypełnię dokument HTML jakimiś 4tysiącami tagów, każde wyjątkowo pokoloruje i dam im rozmiar jednego piksela. W drugim pliki – naszym stylu – oczywiście wygeneruje te ponad 4tysiące cech i selektorów. W skrajnej granicy możliwości IE zakoloruje wszystkie piksele na czerwono, aby móc widzieć czy faktycznie urywa. Kurczę.. chyba nie będę tego pisał jedno po drugim… (to miał być żart). Dobra, do sedna. Posłużyłem się takim oto napisanym kodem:

index.php

<!-- Hejka, co sie paczysz -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>4kilo IE pixel</title>
<link rel="stylesheet" href="style.css.php" />
<style>
body{ padding:0px; margin:0px; line-height:0; }
a{ margin:0; padding:0; height:3px; width:3px; overflow:hidden; display:block; float:left; }
</style>
</head>

<body>
<div style="width:300px; position:absolute; left:50%; top:50px; margin-left:-150px; overflow:hidden">
<?php
for ($i=0; $i<=8192; $i++){
echo '<a id="s'.$i.'"> </a>';
}
?>
</div>
</body>
</html>

style.css.php

<?php
header("Content-Type: text/css"); //w przeciwnym wypadku przeglądarka może Ci nie łyknąć tego pliku
for ($i=0; $i<4000; $i++){
echo '#s'.$i.'{ background:#'.dechex(rand(0,15)).dechex(rand(0,15)).dechex(rand(0,15)).'; }'."\n";
}
for ($i=4000; $i<4192; $i++){
echo '#s'.$i.'{ background:#F00; }'."\n";
}
for ($i=4192; $i<=8192; $i++){
echo '#s'.$i.'{ background:#'.dechex(rand(0,15)).dechex(rand(0,15)).dechex(rand(0,15)).'; }'."\n";
}

echo '/* EO that :P by Dexterxx(r) */'
?>

Jak już zauważyłeś pewnie, postanowiłem wygenerować 8193 (ha! myślałeś że 8192?) bloczki. Łączny czas generowania i wyświetlenia strony na moim zapchanym Firefoxie wynosi około 4 sekundy. Bawiłem się jeszcze z większym generowaniem: za wszystkie 8192 możesz podstawić 65536, czyli 2^16… Efekt? 65536… 65537 bloczków! A czas FF to już koło minuty. Ale nieważne, nie o tym ten post. Na bęben poszły: IE7, Chrome 4.1, Opera 9.5, Maxthon 3 i Safari 4

Firefox

Opera

Maxthon

Chrome

Safari

No i IE


Co jeszcze można dorzucić: Musiałem nieco zmniejszać okna dla potrzeb screenów. Ze skalowaniem najszybciej i najlepiej poradziła sobie Opera i… IE. Firefox też niczego sobie, jednak pudełko z pikselami już się nie wycentrowało, jak powinno. Jak widać: IE faktycznie urywa styl przy około 4000 selektorze.

A skryptów nigdzie nie udostępniam, już na pewno nie na moim marnym serwerze dla którego to byłoby zabójstwem… Kod sobie kopiuj i do woli modyfikuj.

Tagi: , , , , , ,

Komentarze 3 komentarze

To jest dla mnie za mądre:-( .
Ale Dexiu przepraszam, chyba się NATKNĄŁEŚ przypadkowo. Wybacz staruszce drobiazgowość, ale poprawne wypowiadanie się przyda się w przyszłości nawet genialnym – wg mnie – informatykom (niekoniecznie dyplomowanym).

Pozdrawiam bardzo serdecznie:-))))

O kurcze, faktycznie. Dzięki ;)

Wspaniała reakcja na uwagę!! Dexiu, jesteś wieeeelki:-)

Pozdrawiam bardzo serdecznie:)))

Skomentuj