Poprawka generowanej zawartości w Firefoksie
02 lutego 2007
Generowana zawartość w Firefoksie nie jest dobrze obsługiwana. Dodanego w ten sposób tekstu albo obrazków nie sposób zaznaczyć, znaleźć w DOM ani wypozycjonować. Społeczność webdeveloperów od dawna wśród swoich zachcianek wymienia jej poprawną implementację, za przykład której podaje się Operę.
Możliwe, że w następnym Firefoksie i Gecko 1.9 będzie lepiej - tymczasem już dziś możemy cieszyć się wolną od poważnych błędów generowaną zawartością - napisałem skrypt w XBL pozwalający uwolnić się od ograniczeń Firefoksa. Dodanie go do strony jest naprawdę proste, a działanie proste i szybkie.
Przykład: strona wykorzystująca pozycjonowanie GC:
Czy to możliwe bez setek modyfikacji i dostosowywania CSS oraz spadku szybkości? Bez obaw, wszystko dzieje się pod maską Firefoksa. Oto kroki do wykonania:
Krok 1. Ściągnij plik moz-gcontent-fix.xbl, zapisz go w katalogu z CSS.
Krok 2. Zlokalizuj w swoim CSS pseudoelementy, których wygląd chcesz poprawić. Przykład:
#wrapper::before { … }Krok 3. Dodaj gdziekolwiek taki sam selektor, ale bez pseudoelementów GC. Przykład:
#wrapper { … }Krok 4. Dopisz do niego regułę
-moz-binding: url(moz-gcontent-fix.xbl#XBLDocument).Krok 5. Powtórz kroki 2 i 3 tyle razy, ile potrzebujesz poprawek GC.
Krok 6. Odśwież stronę. Ciesz się poprawioną implementacją GC. :-)
Co robi skrypt? Krótko mówiąc zamienia wodę w wino. ;) A na serio wyłapuje w arkuszach stylów (dowolnie podpiętych) reguły CSS generowanej zawartości dla elementów z których jest wywoływany. Tworzy w tych elementach spany, wypełnia je zawartością (obsługuje kombinacje ciągów znakowych, attr(), url()) i zmienia reguły CSS, aby wskazywały na te nowe elementy.
Wszystko byłoby prostsze i szybsze, gdyby nie nieobecność pseudoelementów w DOM. W skrypcie znajduje się dużo hacków, powtarzania kodu i paskudnych workaroundów, ale sposób w jaki radzi sobie Gecko z GC jest śmieszny.
Znane błędy:
Czasem dziedziczone są własności CSS. Muszę znaleźć lepszą metodę na nazewnictwo klas dla tych spanów.
Nie można łączyć selektorów GC, a później odwołać się do nich osobno.
Koderów zachęcam do poprawek, skrypt może być jeszcze lepszy i szybszy, jestem o tym przekonany. JavaScript można wyjąć z XML i wstawić za pomocą script do dokumentu - prostsze debugowanie.
Całkiem możliwe, że znajdziecie sposób na rozwalenie skryptu albo odstępstwa od specyfikacji. Tylko napiszcie mi o tym proszę, może da się to i owo poprawić. ;-)
GiM 6
02 lutego 2007, 14:22
Cypher/Cris 26
15 lipca 2007, 18:33