Safari podkrada style
01 lipca, 2008
Dziś długo zastanawialiśmy się w pracy czemu na jednej z przygotowywanych stron wszystko wygląda elegancko poza paragrafami tekstu na Safari. W dziwny sposób tekst w niektórych paragrafach stał się o wiele większy niż zakładano. Oczywiście najbardziej zastanawiał fakt, że dzieje się tak tylko na Safari - Firefox 2/3, Opera czy IE6/7 prezentowały stronę w normalny sposób.
Całe szczęście, że Safari ma jako takiego inspektora WWW, dzięki niemu zauważyłem, że element p dziedziczy właściwość font-size ze stylu CSS, którego ... nie ma - po prostu był stworzony atrybut link do jeszcze nie istniejącego stylu css.
Ku mojemu wielkiemu zdziwieniu Safari brało pod uwagę style zawarte w znaczniku style na ... stronie błędu informującej o braku danego pliku. W kodzie tej strony można znaleźć taki fragment:
p { (...) font-size: 18px; (...) }
I to on właśnie odpowiadał za nasze problemy pod Safari. Wygląda więc na to, że Safari traktuje "na siłę" pobrane pliki jako style CSS (w konsoli błędów pojawia się nawet ostrzeżenie, że pobrany dokument ma niepoprawny MIME-type, ale jak widać Safari nic sobie z tego nie robi).
Gdyby ktoś chciał zobaczyć na własne oczy przykład:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Testowa</title> <link rel="stylesheet" type="text/css" href="http://demo.gavick.com/link_do_nieistniejacej_strony" /> </head> <body> <h1>Test</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo pede, sodales eu, laoreet id, pretium vitae, nibh. Vestibulum a metus quis odio tincidunt volutpat. Nullam ultricies, risus ac semper sagittis, turpis pede pellentesque est, sed dignissim erat odio vitae metus. In ac diam. Duis vel augue. Curabitur pharetra enim quis dui. Etiam et turpis non sem porta pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus, arcu a convallis venenatis, dolor turpis sagittis odio, quis tincidunt quam mi sit amet urna. Curabitur nunc nisl, sollicitudin in, adipiscing eget, laoreet non, urna. Nunc sagittis libero vel erat. Pellentesque at ipsum nec lectus feugiat blandit. Ut volutpat, quam eget pretium vestibulum, libero nibh tempor lectus, in iaculis mi urna et quam. Mauris ut eros. Etiam fermentum imperdiet sapien. Donec nibh orci, mattis eu, iaculis ut, rutrum ut, magna.</p> </body> </html>
W powyższym kodzie jest odwołanie się do nieistniejącego stylu CSS, który zostanie zastąpiony przez stronę błędu, a w konsekwencji (tylko) na Safari spowoduje to zmianę stylu paragrafu tekstu.
Oczywiście można powiedzieć, że to wina twórców kodu, że odwoływali się do nieistniejącego pliku ze stylami CSS, jednak według mnie ta "funkcjonalność" Safari może w pewnych sytuacjach okazać się groźna dla wyglądu strony - przykładowo chcemy dynamicznie zmienić styl strony wstawiając w sekcji head nowy znacznik link. Jeżeli w czasie pobierania stylu wystąpią jakieś problemy i zamiast stylu załaduje się strona błędu zawierające jakieś style CSS osadzone w kodzie strony, to może wywołać to dość nieoczekiwane efekty.
Zatem mamy kolejny żywy przykład na to, że osadzanie stylów CSS w kodzie strony to zło. Gdyby style nie były osadzone na stronie błędu, nie byłoby żadnych problemów.
Komentarze do wpisu "Safari podkrada style":
1.
Rafael napisał(a):
01 lipca 2008, 16:42:49
Z tego co pamiętam, Opera robiła to samo. Nie wiem jak wersje 9.x, ale wcześniejsze też miały takie nawyki
2.
Dziudek napisał(a):
01 lipca 2008, 16:44:40
@Rafael – ale Opera 8.5 to, że tak ujmę „przeglądarkowy dziadek”, a Safari 3.1.2 dość młody jest ;) A w wersjach 9.x tego błędu nie ma (znaczy na pewno nie ma go w wersji 9.5, bo wersji 9.2 już na dysku nie mam ;)
3.
Pawkow napisał(a):
01 lipca 2008, 18:40:39
Dobrze, że powiedziałeś, zapamiętam ;)
Myślałeś, o dodaniu na bloga spisu treści? To znaczy listy wszystkich wpisów podzielonych wg. czegokolwiek byle sensownie ;) Kiedyś czegoś u Ciebie szukałem i przewertowałem połowę archiwum, później googla i pół godziny później zapytałem o to znajomego, a ten jak gdyby nigdy nic podał mi link … do Twojego bloga :D Nie pamiętam już o co pytałem ale zależało mi na tym niezmiernie ;)
Gdybyś pisał niemądrze to bym nie prosił ;)
4.
Dziudek napisał(a):
01 lipca 2008, 20:14:27
@Pawkow – od takich rzeczy to delicje są ;P Ja chwilowo nie mam czasu by uporządkować 200 wpisów XD
Dodaj komentarz: